JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<!doctype html>
<html>
<head>
    <title>UI Anglepicker</title>
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
    
    <link rel="stylesheet" type="text/css" href="http://bgrins.github.com/ui.anglepicker/ui.anglepicker.css" />
    
    <style type='text/css'>
        body {
            font-family: "Lucida Sans", "Lucida Grande", sans-serif;
            font-size: 12px;
        }
        
        h1 {
            font-size: 40px;
            text-align: center;
        }
        #container {
            margin-top: 30px;
            text-align: center;
        }
        #log {
            margin: 30px 0;
            font-size: 20px;
        }
        
        em {
            background: #2d2d2d;
            color: #b9b9b9;
            padding: 4px 10px;
            border-radius: 10px;
            display:inline-block;
            margin-top: 20px;
            font-style: normal;
            display: none;
        }
        
    </style>
    <script type='text/javascript'>
    </script>
</head>
 
<body>

    <h1>UI Anglepicker</h1>

    <div id='container'>
        <div id="anglepicker"></div>
        <div id='log'></div>
        
        <a href='http://twitter.com/bgrins'>@bgrins</a> -
        <a href='https://github.com/bgrins/ui.anglepicker'>source code</a>
        
        <br /><br />
        <em>Tip: If you hold shift, you can snap to 15 degree increments</em>
    </div>
    
</body>
</html>

JavaScript

/*
    ui.anglepicker
*/

$.widget("ui.anglepicker", $.ui.mouse, {
    widgetEventPrefix: "angle",
    _init: function () {
        this._mouseInit();
        this.pointer = $('<div class="ui-anglepicker-pointer"></div>');
        this.pointer.append('<div class="ui-anglepicker-dot"></div>');
        this.pointer.append('<div class="ui-anglepicker-line"></div>');
        
        this.element.addClass("ui-anglepicker");
        this.element.append(this.pointer);
        
        this.setDegrees(this.options.value);
    },
    _propagate: function(name, event) {
        this._trigger(name, event, this.ui());
    },
    _create: function() {
    
    },
    destroy: function () {
        this._mouseDestroy();
        
        this.element.removeClass("ui-anglepicker");
        this.pointer.remove();
    },
    _mouseStart: function (event) {
        var myOffset = this.element.offset();
        this.width = this.element.width();
        this.height = this.element.height();
        
        this.startOffset = { 
            x: myOffset.left+(this.width/2), 
            y: myOffset.top+(this.height/2) 
        };
        
        this.element.addClass("ui-anglepicker-dragging");
        this.setDegreesFromEvent(event);
        this._propagate("start", event);
    },
    _mouseStop: function (event) {
        this.element.removeClass("ui-anglepicker-dragging");
        this._propagate("stop", event);
    },
    _mouseDrag: function (event) {
        this.setDegreesFromEvent(event);
        this._propagate("change", event);
    },
    _setOption: function( key, value ) {
    
        this._super( key, value );
    },

    ui: function() {
        return {
            element: this.element,
            value: this.options.value
        };
    },
    value: function(newValue) {
    
        if ( !arguments.length ) {
            return this.options.value;
        }
        
        var oldValue = this.options.value;
        this.setDegrees(newValue);
        
        if...