[Pharo-dev] Fun with "Morphs" in JavaScript

Oct. 4, 2016


      I made this two-file demo earlier today, it was really sloppy but I think
it's cute enough to share.

:>

index.html:
<!DOCTYPE html>
  <head>
    
    
  </head>
  <body>
  </body>
</html>

autoexec.js:
(() => {
    'use strict';  

    /* global state hooks */    
    (() => {    
        /**
         * sometimes we want to hook events to only get triggered once,
         * especially when alternating events 
         */
        if (!('once' in EventTarget.prototype)) {
            EventTarget.prototype.once = function(eventName, callback) {
                var wrappedCallback = function(e) {
                    callback(e);
                    this.removeEventListener(eventName, wrappedCallback);                
                };
                
                this.addEventListener(eventName, wrappedCallback);
            };
        }
    })();
    
    /**
     * avoid repeating myself by binding javascript object notation to css
via get/set directly.
     *
     * 
     */
    const json_bind_css_property = function(object, aliasName, realName) {
        Object.defineProperty(object, aliasName, {
            get: function() {
                return this.html.style[realName];
            },
            set: function(setValue) {
                this.html.style[realName] = setValue;
            }
        });
    };      

    const drop_handler = function(e) {
        console.log('unselecting.');
        
        if (window.selectedMorph != null) {
            window.selectedMorph = null;            
        }
    };
    
    const css_px_to_number = (text) => {
        return Number(text.match(/\d+/));
    }
    
    const drag_handler = function(e) {
        const start_x = window.startX;
        const start_y = window.startY;
        const mouse_x = e.clientX;
        const mouse_y = e.clientY;
        const selectedMorph = window.selectedMorph;
        const offset_x = mouse_x - start_x;
        const offset_y = mouse_y - start_y;
        const morph_start_x = window.morph_start_x;
        const morph_start_y = window.morph_start_y;
   
        console.log({
            x1: start_x,
            y1: start_y,
            x2: mouse_x,
            y2: mouse_y                
        });
        
        selectedMorph.left = (css_px_to_number(morph_start_x) + offset_x) +
'px';
        selectedMorph.top = (css_px_to_number(morph_start_y) + offset_y) +
'px';        
    };
            
    const Morph = function() {    
        var self = this;
        this.html = document.createElement('div');
        this.html.style.position = 'absolute';
        this.left = 0;
        this.top = 0;
        this.html.style.display = 'inline-block';
        this.width = '50px';
        this.height = '40px';
        let anticipate_drop = null;
        let anticipate_click = null;
        
        anticipate_drop = function(e) {
            e.stopPropagation();            
            window.selectedMorph = null;            
            window.removeEventListener('mousemove', drag_handler);
            self.html.once('click', anticipate_click);
            console.log('drop');
        };
        
        anticipate_click = function(e) {
            e.stopPropagation();
            window.morph_start_x = self.left;
            window.morph_start_y = self.top;
            window.startX = e.clientX;
            window.startY = e.clientY;
            window.selectedMorph = self;
            
            /* once clicked, we want to have the window unselect if we click
on it */
            window.once('click', anticipate_drop);
                        
            window.addEventListener('mousemove', drag_handler);
        };
        
        /* anticipate the click of this Morph. */
        this.html.once('click', anticipate_click); 

        return this;       
    };
    
    Morph.prototype.openInWorld = function() {
        document.body.appendChild(this.html);
    };
    
    Morph.prototype.delete = function() {
        var ref = this.get;
        ref.parentElement.removeChild(ref);
    };
    
    Morph.new = function() {
        return new Morph;
    };

    json_bind_css_property(Morph.prototype, 'color', 'backgroundColor');
    json_bind_css_property(Morph.prototype, 'width', 'width');    
    json_bind_css_property(Morph.prototype, 'height', 'height');
    json_bind_css_property(Morph.prototype, 'left', 'left');
    json_bind_css_property(Morph.prototype, 'top', 'top'); 
    
    window.testMe = function() {
        var joe = new Morph;
        joe.color = 'blue';
        joe.openInWorld();
    };         
    
    window.Morph = Morph;
})();


--
View this message in context: http://forum.world.st/Fun-with-Morphs-in-JavaScript-tp4918046.html
Sent from the Pharo Smalltalk Developers mailing list archive at Nabble.com.

[Pharo-dev] Fun with "Morphs" in JavaScript

CodeDmitry