From 313354a8ff9ed21b826ab5f280bcf1095a64a7f4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 19 Mar 2012 18:11:50 -0700 Subject: fully removing our old button component from Ninja Signed-off-by: Valerio Virgillito --- js/components/button.reel/button.css | 40 ---- js/components/button.reel/button.html | 26 --- js/components/button.reel/button.js | 225 --------------------- .../text-properties.reel/text-properties.html | 2 +- 4 files changed, 1 insertion(+), 292 deletions(-) delete mode 100755 js/components/button.reel/button.css delete mode 100755 js/components/button.reel/button.html delete mode 100755 js/components/button.reel/button.js (limited to 'js/components') diff --git a/js/components/button.reel/button.css b/js/components/button.reel/button.css deleted file mode 100755 index f50a9873..00000000 --- a/js/components/button.reel/button.css +++ /dev/null @@ -1,40 +0,0 @@ -/* - 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. - */ - -.button { - border:none; - cursor:default; - text-align:center; - -webkit-user-select:none; - opacity:0.8; - display:table-cell; - vertical-align:middle; - width:100%; - height:100%; - background-color:#333333; - color:white; -} - -.button:hover -{ - opacity:1; -} - -.button:active -{ - outline:solid 1px black; -} - -.button.on -{ - background-color: #333333; -} - -.button.off -{ - background-color: #cccccc; - color:black; -} \ No newline at end of file diff --git a/js/components/button.reel/button.html b/js/components/button.reel/button.html deleted file mode 100755 index d0398a6a..00000000 --- a/js/components/button.reel/button.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js deleted file mode 100755 index 2d26c8b4..00000000 --- a/js/components/button.reel/button.js +++ /dev/null @@ -1,225 +0,0 @@ -/* -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 Button = exports.Button = Montage.create(Component, { - // Button state - _focused: { - value: false - }, - - _pressed: { - value: false - }, - - _isToggleButton: { - value: false - }, - - isToggleButton: { - serializable: true, - enumerable: true, - get: function() { - return this._isToggleButton; - }, - set: function(value) { - if (value !== this._isToggleButton) { - this._isToggleButton = value; - this.needsDraw = true; - } - } - }, - - _value: { - value: false - }, - - value: { - serializable: true, - enumerable: true, - get: function() { - return this._value; - }, - set: function(value) { - if ( (value !== null) && (value !== this._value) ) { - this._value = value; - this.needsDraw = true; - } - } - }, - - _label: { - value: "" - }, - - label: { - serializable: true, - enumerable: true, - get: function() { - return this._label; - }, - set: function(value) { - if (value !== this._label) { - this._label = value; - this.needsDraw = true; - } - } - }, - - // TODO - Allow user to specify up, over and down states - _onState: { - value: "on" - }, - - onState: { - serializable: true, - enumerable: true, - get: function() { - return this._onState; - }, - set: function(value) { - if (value !== this._onState) { - this._onState = value; - this.needsDraw = true; - } - } - }, - - _offState: { - value: "off" - }, - - offState: { - serializable: true, - enumerable: true, - get: function() { - return this._offState; - }, - set: function(value) { - if (value !== this._offState) { - this._offState = value; - this.needsDraw = true; - } - } - }, - - // Low-level event listeners - handleTouchstart: { - value: function(event) { - // TODO preventingDefault disables the magnifying class - // sadly it also disables double tapping on the button to zoom... - event.preventDefault(); - this._acknowledgeIntent(); - } - }, - - handleMousedown: { - value: function(event) { - this._acknowledgeIntent(); - } - }, - - handleTouchend: { - value: function(event) { - this._interpretInteraction(event); - } - }, - - handleTouchcancel: { - value: function(event) { - console.log("cancel!") - // this._interpretInteraction(event); - } - }, - - handleMouseup: { - value: function(event) { - this._interpretInteraction(event); - } - }, - - // Internal state management - _acknowledgeIntent: { - value: function() { - this._pressed = true; - this.element.classList.add("pressed"); - } - }, - - _interpretInteraction: { - value: function(event) { - - if (!this._pressed) { - return; - } - - this.value = !this.value; - - this._pressed = false; - this._dispatchActionEvent(); - } - }, - - _dispatchActionEvent: { - value: function() { - var actionEvent = document.createEvent("CustomEvent"); - actionEvent.initCustomEvent("action", true, true); - actionEvent.type = "action"; - this.dispatchEvent(actionEvent); - } - }, - - draw: { - enumerable: false, - value: function() { - if(this.isToggleButton) - { - if(this._value === true) - { - this.element.classList.remove(this.offState); - this.element.classList.add(this.onState); - } - else - { - this.element.classList.remove(this.onState); - this.element.classList.add(this.offState); - } - } - - if(this.label && this.label !== "") - { - this.element.textContent = this.label; - } - } - }, - - prepareForDraw: { - value: function() { - - // TODO only install low level event listeners for high level - // events others listen to us for - - this.element.addEventListener("touchstart", this); - // TODO listen to mouseup anywhere within the app - document.addEventListener("touchend", this); - document.addEventListener("touchcancel", this); - - - this.element.addEventListener("mousedown", this); - - // TODO listen to mouseup anywhere within the app - document.addEventListener("mouseup", this); - - // TODO accept space or enter as a way to trigger action - // if element targeted; balancing demans of multitouch - // with traditional single focus model - document.addEventListener("keydown", this, true); - } - } - -}); diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html index 13a88ba7..2d50a79e 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -69,7 +69,7 @@ }, "fontSettings": { - "module": "js/components/button.reel", + "module": "montage/ui/button.reel", "name": "Button", "properties": { "element": {"#": "fontSettings"} -- cgit v1.2.3 From 5308a9404ef131ba6457eec840b017a3e436b9da Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 15:17:18 -0700 Subject: Fixed the lock button for the shape properties bar Signed-off-by: Valerio Virgillito --- .../rect-properties.reel/rect-properties.css | 19 +++++++++---------- .../rect-properties.reel/rect-properties.html | 15 +++++++++++++-- .../rect-properties.reel/rect-properties.js | 20 ++++++++------------ 3 files changed, 30 insertions(+), 24 deletions(-) (limited to 'js/components') diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.css b/js/components/tools-properties/rect-properties.reel/rect-properties.css index 74509555..cbd9dde8 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.css +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.css @@ -4,16 +4,15 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.rectProperties .button { - border:none; - cursor:default; - text-align:center; - -webkit-user-select:none; - opacity:0.8; - display:table-cell; - vertical-align:middle; - background-color:#333333; - color:white; +#lockButton { + float:left; + border: none; + background-color: transparent; + top: 2px; + opacity: 0.7; + width: 17px; + height: 18px; + margin-right: 10px; } .rectProperties .subToolButton { diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html index 214ff1d5..fd51b9ad 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.html +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html @@ -50,12 +50,22 @@ } }, + "lockButton": { + "prototype": "montage/ui/toggle-button.reel", + "properties": { + "element": {"#": "lockButton"}, + "pressedClass": "lockUp", + "preventFocus": true, + "identifier": "ratio" + } + }, + "owner": { "module": "js/components/tools-properties/rect-properties.reel", "name": "RectProperties", "properties": { "element": {"#": "rectProperties"}, - "lockButton": {"#": "lockButton"}, + "lockButton": {"@": "lockButton"}, "TLRadiusControl": {"@": "hottext1"}, "TRRadiusControl": {"@": "hottext2"}, "BLRadiusControl": {"@": "hottext3"}, @@ -69,7 +79,8 @@
- + +
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js index b2de6ff7..cc99cca6 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.js +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js @@ -19,7 +19,8 @@ exports.RectProperties = Montage.create(ToolProperties, { _subPrepare: { value: function() { - this.lockButton.addEventListener("click", this, false); + this.lockButton.identifier = "lockButton"; + this.lockButton.addEventListener("action", this, false); this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); this._setCap([this.TLRadiusControl,this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); @@ -27,21 +28,16 @@ exports.RectProperties = Montage.create(ToolProperties, { } }, - handleClick: { + handleLockButtonAction: { value: function(event) { - this._unlocked = !this._unlocked; + this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = this.lockButton.pressed; - this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = this._unlocked; - - if(this._unlocked) { - this.lockButton.classList.remove("LockToolUp"); - this.lockButton.classList.add("UnLockToolUp"); - this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); - } else { - this.lockButton.classList.remove("UnLockToolUp"); - this.lockButton.classList.add("LockToolUp"); + if(this.lockButton.pressed) { this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); + } else { + this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); } + } }, -- cgit v1.2.3 From fdeed8051c3af538d28ca3bc599121cea483c22c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 15:47:56 -0700 Subject: Squashed commit of the following GL integration Signed-off-by: Valerio Virgillito --- .../ui/tree-basic/treeItem.reel/treeItem.js | 35 ++++++++++++++++++++-- 1 file changed, 32 insertions(+), 3 deletions(-) (limited to 'js/components') diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js index a67dad43..13e278e9 100755 --- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js +++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js @@ -107,8 +107,8 @@ exports.TreeItem = Montage.create(Component, { //icon or text click sends selection event var contentEls = this.element.querySelectorAll(".atreeItemContent"); for(var i=0;i" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);} if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){ - this.toggleContent(this.treeArrow); + this.expand(this.treeArrow); } if(this.treeItemData.uri === this.highlightedUri){ this.itemName.classList.add("selected"); @@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, { } }, + expand:{ + writable:false, + enumerable:true, + value:function(el){ + //if children already drawn then just hide/show + if(this.element.getElementsByTagName("ul").length > 0){ + var theParent = this.element.getElementsByTagName("ul")[0].parentNode; + if(theParent.classList.contains("hideTree")){//collapsed + theParent.classList.remove("hideTree");//expand + el.innerHTML = "▼"; + } + } + //else send event to draw the children + else{ + var treeClickEvent = document.createEvent("Events"); + treeClickEvent.initEvent("drawTree", false, false); + treeClickEvent.uri = this.treeItemData.uri; + treeClickEvent.uriType = this.treeItemData.type; + var divEl = document.createElement("div"); + this.element.appendChild(divEl); + treeClickEvent.subTreeContainer = divEl; + this.element.dispatchEvent(treeClickEvent); + + el.innerHTML = "▼"; + } + } + }, + + /** * Event Listeners */ -- cgit v1.2.3 From 686969216c6a2b19b32dc574d0cbcd38b01955f9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 16:00:28 -0700 Subject: fixing the shape properties border bindings. Signed-off-by: Valerio Virgillito --- .../tools-properties/rect-properties.reel/rect-properties.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/components') diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js index cc99cca6..2afe36d5 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.js +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js @@ -33,9 +33,9 @@ exports.RectProperties = Montage.create(ToolProperties, { this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = this.lockButton.pressed; if(this.lockButton.pressed) { - this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); - } else { this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); + } else { + this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); } } -- cgit v1.2.3 From 007c5c91c91a2b6359ee4b14501190a81ba2a05e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 16:00:28 -0700 Subject: fixing the shape properties border bindings. Signed-off-by: Valerio Virgillito --- .../tools-properties/rect-properties.reel/rect-properties.html | 1 + js/components/tools-properties/rect-properties.reel/rect-properties.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'js/components') diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html index fd51b9ad..ceb761b9 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.html +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html @@ -54,6 +54,7 @@ "prototype": "montage/ui/toggle-button.reel", "properties": { "element": {"#": "lockButton"}, + "pressed": true, "pressedClass": "lockUp", "preventFocus": true, "identifier": "ratio" diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js index cc99cca6..f023f4bb 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.js +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js @@ -30,7 +30,7 @@ exports.RectProperties = Montage.create(ToolProperties, { handleLockButtonAction: { value: function(event) { - this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = this.lockButton.pressed; + this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = !this.lockButton.pressed; if(this.lockButton.pressed) { this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); -- cgit v1.2.3 From f2371c4a5a18a4dadb2e76f0275b90ac541e889d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 21:20:44 -0700 Subject: Adding enabled/disabled support for PI's checkbox control. Signed-off-by: Nivesh Rajbhandari --- js/components/checkbox.reel/checkbox.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'js/components') diff --git a/js/components/checkbox.reel/checkbox.js b/js/components/checkbox.reel/checkbox.js index f06e5830..be331f4e 100755 --- a/js/components/checkbox.reel/checkbox.js +++ b/js/components/checkbox.reel/checkbox.js @@ -58,6 +58,26 @@ exports.Checkbox = Montage.create(Component, { } }, + _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; + } + } + }, + handleChange: { value:function(event) @@ -76,6 +96,7 @@ exports.Checkbox = Montage.create(Component, { draw: { value: function() { + this.element.disabled = !this._enabled; if(!this._valueSyncedWithInputField) { this.element.checked = this._checked; -- cgit v1.2.3