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 ++++++++++++++++++++++ js/components/hintable.reel/hintable.js | 360 ++++++++++++++++++++++++++++++++ 2 files changed, 610 insertions(+) create mode 100644 js/components/editable.reel/editable.js create mode 100644 js/components/hintable.reel/hintable.js (limited to 'js/components') 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 diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js new file mode 100644 index 00000000..79813c92 --- /dev/null +++ b/js/components/hintable.reel/hintable.js @@ -0,0 +1,360 @@ +/* ComputedStyleSubPanel.js */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component, + Editable = require("js/components/editable.reel").Editable; + + +/* + +EDITABLE - Methods +- startEdit +- stopEdit +- value +- +- _suggest +- _suggestNext +- _suggestPrev +- _clearSuggest +- _accept +- _revert +- _setCaret + +*/ + + +exports.Hintable = Montage.create(Editable, { + inheritsFrom : { value : Editable }, + _matchIndex : { value : 0 }, + matches : { value : [] }, + + _hint : { value : null }, + hint : { + get : function() { + return this._hint; + }, + set : function(hint) { + hint = hint || ''; + + ///// Set the hint element's text + this._getFirstTextNode(this.hintElement).textContent = hint; + ///// if hintElement was removed from the DOM, the object still + ///// exists, so it needs to be re-appended + if(this.hintElement.parentNode === null) { + this._element.appendChild(this.hintElement); + } + + this._hint = hint; + } + }, + + _hintElement : { value : null }, + hintElement : { + get : function() { + if(!this._hintElement) { + /// Remove the phantom "
" element that is generated when + /// content editable element is empty + this._children(this._element, function(item) { + return item.nodeName === 'BR'; + }).forEach(function(item) { + this._element.removeChild(item); + }, this); + + this._hintElement = document.createElement('span'); + this._hintElement.classList.add(this.hintClass); + + this._element.appendChild(this._hintElement); + } + + return this._hintElement; + }, + set : function(el) { + this._hintElement = el; + } + }, + + _getHintDifference : { + value : function() { + if(!this.matches[this._matchIndex]) { + debugger; + } + return this.matches[this._matchIndex].substr(this.value.length); + } + }, + + hintNext : { + value : function(e) { + if(e) { e.preventDefault(); } + console.log('next1'); + + if(this._matchIndex < this.matches.length - 1) { + console.log('next'); + ++this._matchIndex; + this.hint = this._getHintDifference(); + } + } + }, + hintPrev : { + value : function(e) { + if(e) { e.preventDefault(); } + console.log('prev1'); + if(this._matchIndex !== 0) { + console.log('prev'); + --this._matchIndex; + this.hint = this._getHintDifference(); + } + } + }, + + accept : { + value: function(e, preserveCaretPosition) { + if(e) { + e.preventDefault(); + } + var fullText = this._hint; + this.hint = null; + this.value += fullText; + + if(!preserveCaretPosition) { + this.setCursor('end'); + } + + this._sendEvent('accept'); + } + }, + revert : { + value : function(e, forceRevert) { + this.hint = null; + + if(this.isEditable || forceRevert) { + /// revert to old value + this.value = (this._preEditValue); + this._sendEvent('revert'); + console.log('reverting'); + + } + } + }, + value : { + get: function() { + return this._getFirstTextNode().textContent; + }, + set: function(str) { + var node = this._getFirstTextNode(); + node.textContent = str; + } + }, + + handleKeydown : { + value : function handleKeydown(e) { + var k = e.keyCode, + isCaretAtEnd, selection, text; + + this._super(arguments); + + if(k === 39) { + selection = window.getSelection(); + text = selection.baseNode.textContent; + isCaretAtEnd = (selection.anchorOffset === text.length); + } + + if(this.hint && isCaretAtEnd) { + ///// Advance the cursor + this.hint = this.hint.substr(0, 1); + this.accept(e); + this.handleInput(); + } + + this._execKeyAction(e); + } + }, + ///// Text input has changed values + handleInput : { + value : function handleInput(e) { + this._super(arguments); + + var val = this.value, + matches, hint; + console.log('val = "' + val + '"'); + //// Handle auto-suggest if configured + if(this.hints instanceof Array) { + + if(val.length > 0) { // content is not empty + + this._matchIndex = 0; + this.matches = this.hints.filter(function(h) { + return h.indexOf(val) === 0; + }).sort(); + + ///// If there are no matches, or the new value doesn't match all the + ///// previous matches, then get new list of matches + if(!this.matches.length || !this._matchesAll(val)) { + } + + if(this.matches.length) { // match(es) found + if(this.matches[this._matchIndex] !== val) { + // Suggest the matched hint, subtracting the typed-in string + // Only if the hint is not was the user has typed already + this.hint = this._getHintDifference(); + } else { + this.hint = null; + } + } else { // no matches found + this.hint = null; + } + } else { // no suggestion for empty string + this.hint = null; + } + + } + } + }, + handleBackspace : { + value : function(e) { + this.matches.length = 0; + } + }, + _matchesAll : { + value : function(value) { + return this.matches.every(function(match) { + return match.indexOf(value) === 0; + }, this); + } + }, + _execKeyAction : { + value : function(e) { + var key = e.keyCode, + keys = this.keyActions; + + if(this.hint) { + if( keys.hint.revert.indexOf(key) !== -1 ) { this.revert(e); } + if( keys.hint.accept.indexOf(key) !== -1 ) { this.accept(e); } + if( keys.hint.stop.indexOf(key) !== -1 ) { this.stop(e); } + if( keys.hint.next.indexOf(key) !== -1 ) { this.hintNext(e); } + if( keys.hint.prev.indexOf(key) !== -1 ) { this.hintPrev(e); } + if( keys.hint.backsp.indexOf(key) !== -1 ) { this.handleBackspace(e); } + } else { + if(keys.noHint.revert.indexOf(key) !== -1) { this.revert(e); } + if(keys.noHint.stop.indexOf(key) !== -1) { this.stop(e); } + //if( keys.hint.next.indexOf(key) !== -1 ) { this.handleDown(e); } + //if( keys.hint.prev.indexOf(key) !== -1 ) { this.handleUp(e); } + //if( keys.hint.backsp.indexOf(key) !== -1 ) { this.backspace(e); } + } + } + }, + + /* --------------- Utils --------------- */ + + _children : { + value : function(el, filter) { + var f = filter || function(item) { + return item.nodeType === 1; + }; + return this._toArray(el.childNodes).filter(f); + } + }, + _toArray : { + value : function(arrayLikeObj) { + return Array.prototype.slice.call(arrayLikeObj); + } + }, + _getFirstTextNode : { + value : function(el) { + ///// optional el argument specified container element + var e = el || this._element, + nodes = e.childNodes, node; + + if(nodes.length) { + for(var i=0; i" element that is generated when +// /// content editable element is empty +// this._children(this._element, function(item) { +// return item.nodeName === 'BR'; +// }).forEach(function(item) { +// this._element.removeChild(item); +// }, this); +// +// this.hintElement = document.createElement('span'); +// this.hintElement.classList.add(this.suggestClass); +// this.hintElement.appendChild(document.createTextNode(hint)); +// this._element.appendChild(this.hintElement); +// } +// +// this._hint = hint; +// } +// }, \ No newline at end of file -- cgit v1.2.3 From cf2f83be020d7d14f22177e0841472927d2fbcd7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 14:07:11 -0800 Subject: Integrate breadcrumb component and layer handling code Signed-off-by: Jonathan Duran --- .../layout/bread-crumb.reel/bread-crumb.js | 108 +++++++++++++++------ 1 file changed, 77 insertions(+), 31 deletions(-) (limited to 'js/components') diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index 9782d9d1..ead7c764 100644 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -1,13 +1,8 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; +var Montage = require("montage/core/core").Montage +var Component = require("montage/ui/component").Component -exports.Breadcrumb = Montage.create(Component, { +var Breadcrumb = exports.Breadcrumb = Montage.create(Component, { _container:{ value:null @@ -16,10 +11,12 @@ exports.Breadcrumb = Montage.create(Component, { container: { set: function(value) { - if(this._container !== value) { - this._container = value; - this.createContainerElements(); - } + if(this._container !== value) { + this._container = value; + this.createContainerElements(); + } + + }, get: function() { return this._container; @@ -28,83 +25,132 @@ exports.Breadcrumb = Montage.create(Component, { containerElements: { value: [] + }, + deserializedFromTemplate : { value: function() { this.eventManager.addEventListener( "appLoaded", this, false); - this.eventManager.addEventListener( "openDocument", this, false); this.eventManager.addEventListener( "breadCrumbTrail", this, false); - } + }, + enumerable : false }, handleAppLoaded : { value: function() { + Object.defineBinding(this, "container", { boundObject: this.application.ninja, boundObjectPropertyPath: "currentSelectedContainer", oneway: false }); + + } + }, + + prepareForDraw: { + value: function() { + + } + }, + + draw: { + value: function() { + + } + }, + + didDraw:{ + value:function(){ } }, createContainerElements: { value: function() { + var parentNode; while(this.containerElements.pop()){ // To empty the array to get the new parentNode of the new currentLevel } - if(this.container.id === "UserContent") { + if(this.container.id === "UserContent"){ + this.containerElements.push({selected:false,element:this.container}); - } else { - parentNode = this.container; - while(parentNode.id !== "UserContent") { + } + else{ + + parentNode= this.container; + + while(parentNode.id!=="UserContent"){ + this.containerElements.unshift ({selected:false,element:parentNode}); - parentNode = parentNode.parentNode; + parentNode=parentNode.parentNode; + } - this.containerElements.unshift({selected:false,element:parentNode}); + this.containerElements.unshift({selected:false,element:parentNode}); } - NJevent('layerBinding',this.container); + NJevent('layerBinding',{selected:false ,element:this.container}) + + } }, - handleBreadCrumbTrail: { + handleBreadCrumbTrail: { value: function(event) { - var newLength, revaluatedLength, tmpvalue, i=0; + + var newLength,revaluatedLength,tmpvalue + var i=0; + if(event.detail.setFlag){ + this.application.ninja.currentSelectedContainer = event.detail.element; + return; + } newLength = this.containerElements.length; - while(i < newLength ) { - if(this.containerElements[i].selected){ - tmpvalue = i ; - break; - } + while(i < newLength ){ + + if(this.containerElements[i].selected){ + + tmpvalue = i ; + break; + + } i++; } - for(i = newLength -1 ; i >= 1 ; i--) { - if(tmpvalue!==i) { + + + for(i = newLength -1 ; i >= 1 ; i--){ + + if(tmpvalue!==i){ + this.containerElements.pop(); - } else { + } + + else{ + break; } + } revaluatedLength = this.containerElements.length; this.application.ninja.currentSelectedContainer = this.containerElements[revaluatedLength-1].element; + } } }); + -- cgit v1.2.3 From 8a2ef825490358f992d6d687174b0a16fd8302c1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 10:48:52 -0800 Subject: Squashed commit of the following: commit 763910b9d074137eb7dee80447b89407ce5750c9 Merge: e557937 329a859 Author: Valerio Virgillito Date: Wed Feb 8 10:18:36 2012 -0800 Merge pull request #20 from mqg734/ToolFixes Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs: commit e5579374ff39b80b8c0c69faba37f6f581758fe0 Author: Valerio Virgillito Date: Tue Feb 7 13:28:17 2012 -0800 updated montage v.0.6 to the latest changes. Signed-off-by: Valerio Virgillito commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d Author: Nivesh Rajbhandari Date: Tue Feb 7 15:25:11 2012 -0800 Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options. Signed-off-by: Nivesh Rajbhandari commit 668510892537eaaeb2e11520831d87b44b2489b7 Merge: 8950b34 c066fb4 Author: Valerio Virgillito Date: Tue Feb 7 14:19:22 2012 -0800 Merge pull request #19 from ericguzman/TreeComponents Tree Components - Added copyright comments commit aec849d91e4b697d496b9ede28b5d89cf2283781 Author: Nivesh Rajbhandari Date: Tue Feb 7 14:18:13 2012 -0800 id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number. Signed-off-by: Nivesh Rajbhandari commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f Author: Nivesh Rajbhandari Date: Tue Feb 7 13:52:54 2012 -0800 Fixing some typos and undeclared variables in GLRectangle and ShapesController. Signed-off-by: Nivesh Rajbhandari commit c066fb41ebee85bacf9b2155366b16831af41d76 Author: Eric Guzman Date: Tue Feb 7 13:46:05 2012 -0800 Tree Components - Added copyright comments commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d Author: Nivesh Rajbhandari Date: Tue Feb 7 13:30:08 2012 -0800 Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines. Signed-off-by: Nivesh Rajbhandari commit 8ad767b61460984a4031ba630f76ac8247a61857 Author: Nivesh Rajbhandari Date: Tue Feb 7 11:42:10 2012 -0800 Fixed PI to support WebGL materials. Signed-off-by: Nivesh Rajbhandari commit 486842239c71e7964f38a09aacda4970f2a82e1a Author: Nivesh Rajbhandari Date: Tue Feb 7 10:58:14 2012 -0800 Updated tools and PI to get/set materials by binding to appModel's materials property. This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary. Signed-off-by: Nivesh Rajbhandari commit 789eaf5a92c903f27462c69a8890fbec695ab14e Merge: 92ae17b 8950b34 Author: Nivesh Rajbhandari Date: Tue Feb 7 09:36:29 2012 -0800 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a Author: Nivesh Rajbhandari Date: Mon Feb 6 16:35:12 2012 -0800 Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa). Signed-off-by: Nivesh Rajbhandari commit 75486be2839494c9b54833aff8f5eef3f9542151 Author: Nivesh Rajbhandari Date: Mon Feb 6 15:41:48 2012 -0800 Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data. Signed-off-by: Nivesh Rajbhandari commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e Author: Nivesh Rajbhandari Date: Mon Feb 6 14:03:40 2012 -0800 Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI. Signed-off-by: Nivesh Rajbhandari commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981 Author: Nivesh Rajbhandari Date: Mon Feb 6 13:35:30 2012 -0800 Allow users to switch between 2d and webGL mode. Note that this doesn't currently work. Signed-off-by: Nivesh Rajbhandari commit 486d9a31a85dd833a1c798049a00403756703034 Author: Nivesh Rajbhandari Date: Mon Feb 6 11:35:49 2012 -0800 Support use WebGL checkbox in the PI. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Jonathan Duran --- js/components/combobox.reel/combobox.js | 91 +++++++++++++++++++++- .../fill-properties.reel/fill-properties.html | 11 ++- .../fill-properties.reel/fill-properties.js | 6 +- .../ink-bottle-properties.html | 12 ++- .../ink-bottle-properties.js | 6 +- .../line-properties.reel/line-properties.js | 14 +++- .../oval-properties.reel/oval-properties.js | 14 +++- .../rect-properties.reel/rect-properties.js | 14 +++- .../shape-properties.reel/shape-properties.css | 6 +- .../shape-properties.reel/shape-properties.html | 35 ++++++--- .../shape-properties.reel/shape-properties.js | 36 ++++++--- js/components/treeview/branch.reel/branch.css | 6 ++ js/components/treeview/branch.reel/branch.html | 5 ++ js/components/treeview/leaf.reel/leaf.css | 6 ++ js/components/treeview/leaf.reel/leaf.html | 5 ++ .../treeview/ninja-branch.reel/ninja-branch.css | 6 ++ .../treeview/ninja-branch.reel/ninja-branch.html | 5 ++ .../treeview/ninja-leaf.reel/ninja-leaf.css | 6 ++ .../treeview/ninja-leaf.reel/ninja-leaf.html | 5 ++ js/components/treeview/treeview.reel/treeview.css | 8 +- js/components/treeview/treeview.reel/treeview.html | 5 ++ 21 files changed, 251 insertions(+), 51 deletions(-) (limited to 'js/components') diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js index a68a7d6b..bc433f52 100644 --- a/js/components/combobox.reel/combobox.js +++ b/js/components/combobox.reel/combobox.js @@ -15,7 +15,7 @@ exports.Combobox = Montage.create(Component, { }, _wasSetByCode: { - enumerable: false, + enumerable: true, value: true }, @@ -27,6 +27,14 @@ exports.Combobox = Montage.create(Component, { value: null }, + dataField: { + value: null + }, + + dataFunction: { + value: null + }, + _items: { value: [] }, @@ -71,7 +79,47 @@ exports.Combobox = Montage.create(Component, { e.value = this._value; this.dispatchEvent(e); - this._wasSetByCode = false; + this._wasSetByCode = true; + } + } + }, + + _enabled: { + enumerable: false, + value: true + }, + + enabled: { + enumerable: true, + serializable: true, + get: function() { + return this._enabled; + }, + set: function(value) { + if(value !== this._enabled) + { + this._enabled = value; + this.needsDraw = true; + } + } + }, + + _visible: { + enumerable: false, + value: true + }, + + visible: { + enumerable: true, + serializable: true, + get: function() { + return this._visible; + }, + set: function(value) { + if(value !== this._visible) + { + this._visible = value; + this.needsDraw = true; } } }, @@ -102,7 +150,19 @@ exports.Combobox = Montage.create(Component, { { var current = items[i]; optionItem = document.createElement("option"); - optionItem.value = current; + if(this.dataFunction) + { + optionItem.value = this.dataFunction(current); + } + else if(this.dataField) + { + optionItem.value = current[this.dataField]; + } + else + { + optionItem.value = current; + } + if(this.labelFunction) { optionItem.innerText = this.labelFunction(current); @@ -117,6 +177,15 @@ exports.Combobox = Montage.create(Component, { } this.element.appendChild(optionItem); } + this.element.disabled = !this._enabled; + if(this._visible) + { + this.element.style.visibility = "visible"; + } + else + { + this.element.style.visibility = "hidden"; + } } } }, @@ -133,6 +202,22 @@ exports.Combobox = Montage.create(Component, { prepareForDraw: { value: function() { + if( (this._value === null) && this._items.length ) + { + var current = this._items[0]; + if(this.dataFunction) + { + this.value = this.dataFunction(current); + } + else if(this.dataField) + { + this.value = current[this.dataField]; + } + else + { + this.value = current; + } + } this.element.addEventListener("change", this, false); } } diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index d09b7f44..a35f9b15 100644 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -11,6 +11,15 @@