JSFiddle - React, Tailwind, and code Playground

by xperali

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://www.barrystickets.com/js/maps/raphael.pan-zoom.js"></script>
<a id="map_zoom_plus" href="javascript:void()"> Zoom IN </a>
<br />
<a id="map_zoom_less" href="javascript:void()"> Zoom out</a>
<br />
<a id="map_pan_up" href="javascript:void()"> UP </a>
<br />
<a id="map_pan_left" href="javascript:void()"> LEFT </a>
<br />
<a id="map_pan_init" href="javascript:void()"> INIT </a>
<br />
<a id="map_pan_right" href="javascript:void()"> RIGHT </a>
<br />
<a id="map_pan_down" href="javascript:void()"> Down </a>
<br />
<div id="svg_map"></div>

JavaScript

map_name = 'svg_map';
var seatingChart = {
    texts: {
        "text-313_208" : {
            t:'313',
            f:'Verdana',
            s:'13.5193',
            c:'#010202',
            m:'0.956 0 0 1 87.7822 141.9683'
        },
        "text-12_239" : {
            t:'12',
            f:'Verdana',
            s:'13.5193',
            c:'#010202',
            m:'0.956 0 0 1 268.562 145.311'
        }
    }
};
rsr = Raphael(map_name,777,667);
panZoom = rsr.panzoom({ initialZoom: 0, initialPosition: { x: 0, y: 0} });
panZoom.enable();
rsr.safari();

var $texts=[];
// drawing texts
    for(key in seatingChart.texts) {
        $texts[key] = rsr.text(0, 0, seatingChart.texts[key]['t']);
        
        var font_size = seatingChart.texts[key]['s'];
        $texts[key].attr({
            "fill": seatingChart.texts[key]['c'],
            "font-family": seatingChart.texts[key]['f'],
            "font-size": font_size
            }).data('id', key);
        $texts[key].transform('m'+seatingChart.texts[key]['m']).data('id', key);
        $texts[key].toFront();
        rsr.safari();
        
        //I don't want my texts be selectables !
        (function (txt, txt_id) {
            txt[0].onmouseover = function (){
                event.preventDefault();
            };
            txt[0].onmouseout = function (){
                event.preventDefault();
            };
            txt[0].onclick = function (){
                event.preventDefault();
            };
        })($texts[key],key);
    }
//map zoom buttons
    $("#map_zoom_less").click(
        function(event){
            //new zoom out with panZoom
            if(panZoom.getCurrentZoom()>0){
                panZoom.zoomOut(1);
                console.log('current zoom after zoom out : '+panZoom.getCurrentZoom());
                event.preventDefault();
                //zoomLevel--;
                rows_or_sections_display();
            }
        }
    );
    $("#map_zoom_plus").click(
       ...