JSFiddle - React, Tailwind, and code Playground

by darcyclarke

JavaScript

// Shape object
function Shape () {
    
    // Store context
    var self = this;
    
    // Check for options passed
    var options = arguments[0] || {};
    
    // Number utility function
    var isNum = function ( obj ) { 
        return !!( typeof obj == 'number' ); 
    };
    
    // Create unitized string
    var unit = function ( obj ) { 
        return obj + 'px'; 
    }; 
    
    // Setup
    self.moving = false;
    self.customs = 'moving customs element hover color x y'.split( ' ' );
    self.element = options.element || document.createElement( 'div' );
    self.color = options.color || '#efefef';
    self.hover = options.hover || 'orange';
    self.styles = {
        top: ( isNum( options.y ) ) ? unit( options.y ) : '0px',
        left: ( isNum( options.x ) ) ? unit( options.x ) : '0px',
        height: '150px',
        width: '50px',
        position: 'absolute',
        display: 'block',
        backgroundColor: self.color
    };
        
    // Merge optional customs 
    if ( options.customs ) {
        self.customs = self.customs.concat( options.customs );
    }
    
    // Override defaults with options
    for ( var name in options ) {
        
        // Ignore any custom options
        if ( self.customs.indexOf( name ) !== -1 ) {
            continue;
        }
                
        // Store default or passed style value
        var value = options[ name ];
        if ( name == 'height' || name == 'width' ) {
            value = ( isNum( value ) ) ? unit( value ) : value;
        }
        self.styles[ name ] = value;
    }
    
    // Set styles
    for ( var name in self.styles ) {
        self.element.style[ name ] = self.styles[ name ];
    }
    
    // Append Child
    self.element = document.body.appendChild( self.element );
    
    // Start moving element
    self.startMoving = function ( e ) {
        self.moving = true;
        self.element.style.backgroundColor = self.hover;
        self.element.style.zIndex = 99999;
   ...