JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55365/zui53.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="navbar" id="toolbar">
    <div class="navbar-inner">
        <div class="container">
            <div class="btn-toolbar">
                <div class="btn-group"> <a class="btn btn-large tool" id="pin" href="#"><i class="icon-map-marker"></i></a>
 <a class="btn btn-large tool" id="area" href="#"><i class="icon-edit"></i></a>

                </div> <a class="btn btn-large pull-right" id="reset" href="#"><i class="icon-fullscreen"></i></a>

            </div>
        </div>
    </div>
</div>
<div id='zui'>
    <div id='viewport'>
        <div id="image-wrapper">
            <div id="image" style="background-image: url('http://lorempixel.com/1920/1080/people/')"></div>
        </div>
    </div>
</div>

SCSS

html, body{
    height: 100%;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;  
}

@media (max-width:767px){
    body{
        padding: 0;
    }
}

#toolbar{
    margin-bottom: 0;
}

#zui{
    position: relative;
}

#viewport{
    position: initial !important;
    height: 100%;
}

#image-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

#image{
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.marker{
    position: absolute;
}

.pin{
    width: 20px;
    height: 32px;
    background-image: url('http://i.imgur.com/nUAQ8hk.png');
}

.area{
    border: 2px solid red;
}

JavaScript

var zui = new ZUI53.Viewport('zui'),
    sur = new ZUI53.Surfaces.CSS(document.getElementById('viewport')),
    pan = new ZUI53.Tools.Pan(zui),
    tool;

zui.addLimits([0.8, 10]);
zui.addSurface(sur);
pan.attach();

$('#zui').height($(window).height() - $('#zui').offset().top);

$('.tool').click(function () {
    $(this).button('toggle');
    $(this).siblings().removeClass('active');

    $('#image-wrapper').off();
    var el = document.getElementById('image-wrapper');
    el.removeEventListener('touchstart', handler, false);
    el.removeEventListener('touchmove', handler, false);
    el.removeEventListener('touchend', handler, false);
    pan.enable();

    if ($(this).hasClass('active')) {
        if ($('html').hasClass('touch')) zui.reset();
        pan.disable();
        tool = new tools[this.id]();
        $('#image-wrapper').on('mousedown mousemove mouseup', handler);
        el.addEventListener('touchstart', handler, false);
        el.addEventListener('touchmove', handler, false);
        el.addEventListener('touchend', handler, false);
    }
});

function handler(e) {
    e.preventDefault();

    var type;

    if (e.touches) {
        e._x = e.touches[0].clientX;
        e._y = e.touches[0].clientY - 72;
    } else {
        if (e.target.id != 'image') {
            e._x = e.target.offsetLeft + e.offsetX;
            e._y = e.target.offsetTop + e.offsetY;
        } else {
            e._x = e.offsetX;
            e._y = e.offsetY;
        }
    }

    if (e.type == 'mousedown' || e.type == 'touchstart') type = 'down';
    else if (e.type == 'mousemove' || e.type == 'touchmove') type = 'move';
    else if (e.type == 'mouseup' || e.type == 'touchend') type = 'up';

    tool[type](e);
}

var tools = {};

tools.pin = function () {
    var tool = this;
    this.started = false;

    this.down = function (e) {
        tool.started = true;
        $('.marker').popover('hide');

        $('<div></div>')
            .attr('class', 'pin marker')
           ...