Fun with "Morphs" in JavaScript
Locked
 
|
This post was updated on .
CONTENTS DELETED
The author has deleted this message.
|
|
|
Hi dmitry
the dev mailing-list for the development of Pharo. Stef Le 4/10/16 à 19:01, CodeDmitry a écrit : > 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. > > |
Re: Fun with "Morphs" in JavaScript
|
|
This post was updated on .
CONTENTS DELETED
The author has deleted this message.
|
Re: Fun with "Morphs" in JavaScript
|
Pharo-users mailing list is the general discussion for pharo if you are interested into javascript and pharo take a look at pharojshttps://pharojs.github.io/ On Tue, Oct 4, 2016 at 8:28 PM CodeDmitry <[hidden email]> wrote: Sorry, I'm new, where is a good place to post nonsense like this? |
«
Return to Pharo Smalltalk Users
|
1 view|%1 views
| Free forum by Nabble | Edit this page |