JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<script src="http://thindery.com/jsfiddle/jquery.iviewer.js"></script>
<script src="http://thindery.com/jsfiddle/jquery.mousewheel.min.js"></script>
<span id="actionButtons">
                <a id="in" href="#">Zoom In</a>&nbsp;&nbsp;
                <a id="out" href="#">Zoom Out</a>&nbsp;&nbsp;
                <a id="fit" href="#">Fit</a>&nbsp;&nbsp;
                <a id="orig" href="#">orig</a>&nbsp;&nbsp;
    <a id="rleft" href="#">rotate left</a>&nbsp;&nbsp;
    <a id="rright" href="#">rotate right</a>
                
            </span>
<br /><br />
        <!-- wrapper div is needed for opera because it shows scroll bars for reason-->
<div class="wrapper">
    <div id="viewer2" class="viewer"></div>
</div>
                
<br />  
<br />                  
<br />  
<span id="status"></span>

CSS

.viewer
{
    border: 0px solid black;
    background-color: blue;
    position: absolute;
    left:0; top:0;
    height:102.24px;
    width:100.08px;
    z-index: 50;
}

#actionButtons {
    font-size: 25px;
    
}

.wrapper
{
    z-index: 0;
    position: relative;
    height:215.931px;
    width:504px;
    display: block;
}

.iviewer_common {
    position: absolute;
    bottom: 5px;
    border: 1px  solid #000;
    height: 28px;
    z-index: 5000;
}

.iviewer_cursor {
    cursor: url('http://thindery.com/jsfiddle/img/hand.cur') 6 8, pointer;
}

.iviewer_drag_cursor {
    cursor: url('http://thindery.com/jsfiddle/img/grab.cur') 6 8, pointer;
}

.iviewer_button {
    width: 28px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
}

.iviewer_zoom_in {
    left: 20px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_in.gif');
}

.iviewer_zoom_out {
    left: 55px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_out.gif');
}

.iviewer_zoom_zero {
    left: 90px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_zero.gif');
}

.iviewer_zoom_fit {
    left: 125px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_fit.gif');
}

.iviewer_zoom_status {
    left: 160px;
    font: 1em/28px Sans;
    color: #000;
    background: #fff;
    text-align: center;

}

.iviewer_image_mask {

    position: absolute;
    left:0; top:0;
    height:215.931px;
    width:504px;
    z-index: 700;

    

}

.iviewer_rotate_left {
    left: 227px;
    background: #fff url('http://thindery.com/jsfiddle/img/iviewer.rotate_left.png') center center no-repeat;
}

.iviewer_rotate_right {
    left: 262px;
    background: #fff url('http://thindery.com/jsfiddle/img/iviewer.rotate_right.png') center center no-repeat;
}

JavaScript

//jQuery plugin below
/*
 * iviewer Widget for jQuery UI
 * https://github.com/can3p/iviewer
 *
 * Copyright (c) 2009 - 2012 Dmitry Petrov
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Dmitry Petrov
 * Version: 0.7.2
 */

(function($, undefined) {

    //this code was taken from the https://github.com/furf/jquery-ui-touch-punch
    var mouseEvents = {
        touchstart: 'mousedown',
        touchmove: 'mousemove',
        touchend: 'mouseup'
    };

    /**
     * Convert a touch event to a mouse-like
     */

    function makeMouseEvent(event) {
        var touch = event.originalEvent.changedTouches[0];

        return $.extend(event, {
            type: mouseEvents[event.type],
            which: 1,
            pageX: touch.pageX,
            pageY: touch.pageY,
            screenX: touch.screenX,
            screenY: touch.screenY,
            clientX: touch.clientX,
            clientY: touch.clientY,
            isTouchEvent: true
        });
    }

    var mouseProto = $.ui.mouse.prototype,
        _mouseInit = $.ui.mouse.prototype._mouseInit;

    mouseProto._mouseInit = function() {
        var self = this;
        self._touchActive = false;

        this.element.bind('touchstart.' + this.widgetName, function(event) {
            self._touchActive = true;
            return self._mouseDown(makeMouseEvent(event));
        })

        var self = this;
        // these delegates are required to keep context
        this._mouseMoveDelegate = function(event) {
            if (self._touchActive) {
                return self._mouseMove(makeMouseEvent(event));
            }
        };
        this._mouseUpDelegate = function(event) {
            if (self._touchActive) {
                self._touchActive = false;
                return self._mouseUp(makeMouseEvent(event));
            }
        };

        $(document).bind('touchmove.' +...