From 7246efab402664c75bd0de226c0b9a91b384839b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 11 Apr 2012 16:45:23 -0700 Subject: CSS Style - Add disabled UI state. Added Hintable and editable UI state. --- js/components/editable.reel/editable.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 9c8946c4..ef4096fd 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -122,7 +122,7 @@ exports.Editable = Montage.create(Component, { if(this.stopOnBlur) { console.log('adding mousedown event listener'); ///// Simulate blur on editable node by listening to the doc - document.addEventListener('mouseup', this, false); + document.addEventListener('mousedown', this, false); } this._sendEvent('start'); @@ -179,7 +179,7 @@ exports.Editable = Montage.create(Component, { this.accept(); } this.stop(); - document.removeEventListener('mouseup', this, false); + document.removeEventListener('mousedown', this, false); this._sendEvent('blur'); } }, @@ -202,7 +202,7 @@ exports.Editable = Montage.create(Component, { this._sendEvent('input'); } }, - handleMouseup : { + handleMousedown : { value : function(e) { console.log('handle mouse down'); ///// Listen for simulated blur event -- cgit v1.2.3 From 0e1f95945434475adbf33b2073b6f8d7240aca91 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 23 Apr 2012 11:46:14 -0700 Subject: Editable - Pass event data with stop event --- js/components/editable.reel/editable.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index ef4096fd..1ebe33f1 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -131,11 +131,11 @@ exports.Editable = Montage.create(Component, { } }, stop : { - value: function() { + value: function(eventData) { this._isEditable = this._element.contentEditable = false; this._element.classList.remove(this.editingClass); - this._sendEvent('stop'); + this._sendEvent('stop', eventData); ///// if value is different than pre-edit val, call onchange method if(this._preEditValue !== this.value) { @@ -174,11 +174,11 @@ exports.Editable = Montage.create(Component, { } }, blur : { - value : function() { + value : function(eventData) { if(this._hint) { this.accept(); } - this.stop(); + this.stop(eventData); document.removeEventListener('mousedown', this, false); this._sendEvent('blur'); } @@ -207,7 +207,10 @@ exports.Editable = Montage.create(Component, { console.log('handle mouse down'); ///// Listen for simulated blur event if(this.stopOnBlur && e._event.target !== this._element) { - this.blur(); + this.blur({ + "originalEventType": "mousedown", + "originalEvent": e + }); } } }, @@ -221,9 +224,9 @@ exports.Editable = Montage.create(Component, { } }, _sendEvent : { - value : function(type) { + value : function(type, data) { var evt = document.createEvent("CustomEvent"); - evt.initCustomEvent(type, true, true); + evt.initCustomEvent(type, true, true, data); this.dispatchEvent(evt); } }, -- cgit v1.2.3 From 76e4821c207736f9f0d88de91246e2cf08f5f6c0 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 30 Apr 2012 13:47:23 -0700 Subject: Editable - Add paste event handling/dispatching --- js/components/editable.reel/editable.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 1ebe33f1..f2cf0e5d 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -39,7 +39,9 @@ exports.Editable = Montage.create(Component, { this._element = el; this._element.addEventListener('keydown', this, false); this._element.addEventListener('input', this, false); - + this._element.addEventListener('paste', this, false); + + if(this.startOnEvent) { this._element.addEventListener(this.startOnEvent, this, false); } @@ -136,7 +138,9 @@ exports.Editable = Montage.create(Component, { this._element.classList.remove(this.editingClass); this._sendEvent('stop', eventData); - + + document.removeEventListener('mousedown', this, false); + ///// if value is different than pre-edit val, call onchange method if(this._preEditValue !== this.value) { this._sendEvent('change'); @@ -179,7 +183,6 @@ exports.Editable = Montage.create(Component, { this.accept(); } this.stop(eventData); - document.removeEventListener('mousedown', this, false); this._sendEvent('blur'); } }, @@ -214,6 +217,11 @@ exports.Editable = Montage.create(Component, { } } }, + handlePaste : { + value: function(e) { + this._sendEvent('paste', e); + } + }, handleEvent : { value : function(e) { console.log("event type : " + e._event.type); -- cgit v1.2.3 From 4e23fee56acb23bf36e6638641dfa5071e2f458a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 17 May 2012 16:04:57 -0700 Subject: Editable - remove formatting on paste --- js/components/editable.reel/editable.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index b7fdd707..b385d916 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -229,6 +229,8 @@ exports.Editable = Montage.create(Component, { }, handlePaste : { value: function(e) { + e.preventDefault(); + document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")); this._sendEvent('paste', e); } }, -- cgit v1.2.3 From 8f2d3226220d83dff5f2dd7463aede02de8e31be Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 17 May 2012 19:52:09 -0700 Subject: Editable - Trigger change event after stop event --- js/components/editable.reel/editable.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index b385d916..a6350359 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -140,15 +140,14 @@ exports.Editable = Montage.create(Component, { value: function(eventData) { this._isEditable = this._element.contentEditable = false; this._element.classList.remove(this.editingClass); - - this._sendEvent('stop', eventData); - - document.removeEventListener('mousedown', this, false); ///// if value is different than pre-edit val, call onchange method if(this._preEditValue !== this.value) { this._sendEvent('change'); } + + this._sendEvent('stop', eventData); + document.removeEventListener('mousedown', this, false); } }, selectAll : { -- cgit v1.2.3 From f71e8f853605f0eb4deaf16263124aac1aad9ee1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 12:02:08 -0700 Subject: CSS Panel - Allow ":" to be used in selector field --- js/components/editable.reel/editable.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index a6350359..eab73993 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -195,6 +195,7 @@ exports.Editable = Montage.create(Component, { handleKeydown : { value : function(e) { var k = e.keyCode; + console.log("editable - keycode", k); } }, @@ -269,10 +270,11 @@ exports.Editable = Montage.create(Component, { }, keyActions : { value : { - stop : [27,9,13,186], + stop : [27,9,13], revert : [27], backsp : [8] - } + }, + distinct: true } }); \ No newline at end of file -- cgit v1.2.3 From 1e6f46ba556ca3270c89fb848d93856804dd1cc8 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 12:40:05 -0700 Subject: CSS Style Component - Moved unit identification to local change handler instead of delegate --- js/components/editable.reel/editable.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/components/editable.reel/editable.js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index eab73993..103e418f 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -195,7 +195,6 @@ exports.Editable = Montage.create(Component, { handleKeydown : { value : function(e) { var k = e.keyCode; - console.log("editable - keycode", k); } }, -- cgit v1.2.3