From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- js/components/editable.reel/editable.js | 250 ++++++++++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 js/components/editable.reel/editable.js (limited to 'js/components/editable.reel') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js new file mode 100644 index 00000000..1d0ad776 --- /dev/null +++ b/js/components/editable.reel/editable.js @@ -0,0 +1,250 @@ +/* ComputedStyleSubPanel.js */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + + +/* + +EDITABLE - Methods +- startEdit +- stopEdit +- value +- +- _suggest +- _suggestNext +- _suggestPrev +- _clearSuggest +- _accept +- _revert +- _setCaret + +*/ + + +exports.Editable = Montage.create(Component, { + hasTemplate: { value: false }, + + _element : { value : null }, + element : { + get : function() { + return this._element; + }, + set : function(el) { + this._element = el; + this._element.addEventListener('keydown', this, false); + this._element.addEventListener('input', this, false); + + if(this.startOnEvent) { + this._element.addEventListener(this.startOnEvent, this, false); + } + + } + }, + _readOnly : { + value: false + }, + readOnly : { + get : function() { return this._readOnly; }, + set : function(makeReadOnly) { + var action = makeReadOnly ? 'add' : 'remove'; + + this._element.classList[action](this.readOnlyClass); + + if(this.isEditable) { + this.stop(); + } + this._readOnly = makeReadOnly; + } + }, + _isEditable : { + value : false + }, + isEditable : { + get : function() { + return this._isEditable; + }, + set: function(makeEditable) { + if(this._readOnly && makeEditable) { return false; } + this._isEditable = makeEditable; + } + }, + _isDirty : { + value: false + }, + isDirty : { + get : function() { + return this._isDirty; + }, + set : function(setDirty) { + if(setDirty) { + this._isDirty = true; + this._sendEvent('dirty'); + } else { + this._isDirty = false; + } + } + }, + value : { + get: function() { + return this._element.textContent; + }, + set: function(str) { + this._element.textContent = str; + } + }, + + ///// Pre Edit Value + ///// Value stored when editing starts + ///// Useful for reverting to previous value + + _preEditValue : { + value : null + }, + start : { + value: function() { + if(!this._readOnly) { + this._isEditable = this._element.contentEditable = true; + this._element.classList.add(this.editingClass); + + ///// Save the preEditValue + this._preEditValue = this.value; + + if(this.selectOnStart) { + this.selectAll(); + } + + if(this.stopOnBlur) { + console.log('adding mousedown event listener'); + ///// Simulate blur on editable node by listening to the doc + document.addEventListener('mouseup', this, false); + } + + this._sendEvent('start'); + } + + } + }, + stop : { + value: function() { + this._isEditable = this._element.contentEditable = false; + this._element.classList.remove(this.editingClass); + + this._sendEvent('stop'); + + ///// if value is different than pre-edit val, call onchange method + if(this._preEditValue !== this.value) { + this._sendEvent('change'); + } + } + }, + selectAll : { + value : function() { + var range = document.createRange(), + sel = window.getSelection(); + + sel.removeAllRanges(); + range.selectNodeContents(this._element); + sel.addRange(range); + } + }, + setCursor : { + value : function(position) { + var index = position, + range, node, sel; + + ///// argument can be "end" or an index + if(typeof position === 'string' && position === 'end') { + index = this.value.length; + } + + sel = window.getSelection(); + sel.removeAllRanges(); + //debugger; + node = this._getFirstTextNode(); + range = document.createRange(); + range.setStart(node, index); + range.setEnd(node, index); + sel.addRange(range); + } + }, + blur : { + value : function() { + if(this._hint) { + this.accept(); + } + this.stop(); + document.removeEventListener('mouseup', this, false); + this._sendEvent('blur'); + } + }, + + /* -------------------- User Event Handling -------------------- */ + + handleKeydown : { + value : function(e) { + var k = e.keyCode; + console.log('keyCode: ' + k); + } + }, + ///// Text input has changed values + handleInput : { + value : function(e) { + if(!this.isDirty) { + this.isDirty = true; + } + + this._sendEvent('input'); + } + }, + handleMouseup : { + value : function(e) { + console.log('handle mouse down'); + ///// Listen for simulated blur event + if(this.stopOnBlur && e._event.target !== this._element) { + this.blur(); + } + } + }, + handleEvent : { + value : function(e) { + console.log("event type : " + e._event.type); + ///// If configured, start on specified event + if(e._event.type === this.startOnEvent) { + this.start(); + } + } + }, + _sendEvent : { + value : function(type) { + var evt = document.createEvent("CustomEvent"); + evt.initCustomEvent(type, true, true); + this.dispatchEvent(evt); + } + }, + + /* -------------------- CONFIG -------------------- */ + + editingClass : { + value : 'editable' + }, + readOnlyClass : { + value : 'readOnly' + }, + selectOnStart : { + value : true + }, + startOnEvent : { + value : 'dblclick' + }, + stopOnBlur : { + value : true + }, + keyActions : { + value : { + stop : [27,9,13,186], + revert : [27], + backsp : [8] + } + } + +}); \ No newline at end of file -- cgit v1.2.3