From a3024011a91d3941f81481dd4d600e9684eb0fd4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 2 Feb 2012 00:11:51 -0800 Subject: upgrading to Montage v0.6 Signed-off-by: Valerio Virgillito --- node_modules/montage/ui/anchor.reel/anchor.js | 26 + node_modules/montage/ui/application.js | 128 +- .../ui/bluemoon/button-group.reel/button-group.css | 111 ++ .../bluemoon/button-group.reel/button-group.html | 26 + .../ui/bluemoon/button-group.reel/button-group.js | 77 + .../montage/ui/bluemoon/button.reel/button.css | 386 +++++ .../montage/ui/bluemoon/button.reel/button.html | 26 + .../montage/ui/bluemoon/button.reel/button.js | 743 +++++++++ .../montage/ui/bluemoon/checkbox.reel/checkbox.css | 116 ++ .../ui/bluemoon/checkbox.reel/checkbox.html | 14 + .../montage/ui/bluemoon/checkbox.reel/checkbox.js | 452 ++++++ .../checkbox.reel/checkmark-dark-disabled.svg | 5 + .../ui/bluemoon/checkbox.reel/checkmark-dark.svg | 7 + .../checkbox.reel/checkmark-light-disabled.svg | 5 + .../ui/bluemoon/checkbox.reel/checkmark.svg | 7 + .../montage/ui/bluemoon/progress.reel/progress.css | 51 + .../ui/bluemoon/progress.reel/progress.html | 32 + .../montage/ui/bluemoon/progress.reel/progress.js | 139 ++ .../montage/ui/bluemoon/progress.reel/rule.png | Bin 0 -> 956 bytes .../montage/ui/bluemoon/progress.reel/scroll.png | Bin 0 -> 272 bytes .../montage/ui/bluemoon/slider.reel/slider.css | 255 +++ .../montage/ui/bluemoon/slider.reel/slider.html | 82 + .../montage/ui/bluemoon/slider.reel/slider.js | 583 +++++++ .../montage/ui/bluemoon/textarea.reel/textarea.css | 36 + .../ui/bluemoon/textarea.reel/textarea.html | 15 + .../montage/ui/bluemoon/textarea.reel/textarea.js | 29 + .../ui/bluemoon/textfield.reel/textfield.css | 35 + .../ui/bluemoon/textfield.reel/textfield.html | 16 + .../ui/bluemoon/textfield.reel/textfield.js | 56 + .../montage/ui/bluemoon/toggle.reel/toggle.css | 162 ++ .../montage/ui/bluemoon/toggle.reel/toggle.html | 16 + .../montage/ui/bluemoon/toggle.reel/toggle.js | 423 +++++ .../montage/ui/button-group.reel/button-group.css | 111 -- .../montage/ui/button-group.reel/button-group.html | 26 - .../montage/ui/button-group.reel/button-group.js | 77 - node_modules/montage/ui/button.reel/button.css | 386 ----- node_modules/montage/ui/button.reel/button.html | 26 - node_modules/montage/ui/button.reel/button.js | 655 ++------ node_modules/montage/ui/check-input.js | 46 + node_modules/montage/ui/checkbox.reel/checkbox.css | 116 -- .../montage/ui/checkbox.reel/checkbox.html | 14 - node_modules/montage/ui/checkbox.reel/checkbox.js | 464 +----- .../ui/checkbox.reel/checkmark-dark-disabled.svg | 5 - .../montage/ui/checkbox.reel/checkmark-dark.svg | 7 - .../ui/checkbox.reel/checkmark-light-disabled.svg | 5 - .../montage/ui/checkbox.reel/checkmark.svg | 7 - node_modules/montage/ui/component.js | 292 +++- node_modules/montage/ui/composer/composer.js | 142 ++ .../montage/ui/composer/long-press-composer.js | 232 +++ node_modules/montage/ui/composer/swipe-composer.js | 303 ++++ .../montage/ui/composer/translate-composer.js | 775 ++++++++++ .../montage/ui/controller/array-controller.js | 73 +- .../montage/ui/date-input.reel/date-input.js | 31 + node_modules/montage/ui/dom.js | 30 +- .../ui/flow-controller.reel/flow-controller.html | 275 ---- .../ui/flow-controller.reel/flow-controller.js | 288 ---- node_modules/montage/ui/flow-offset.js | 389 ----- node_modules/montage/ui/flow-path-cubic.js | 32 +- node_modules/montage/ui/flow-path-lerp.js | 36 +- node_modules/montage/ui/flow-path-linear.js | 26 +- node_modules/montage/ui/flow-path-sigmoid.js | 42 +- node_modules/montage/ui/flow-path.js | 46 +- node_modules/montage/ui/flow.reel/flow.html | 4 +- node_modules/montage/ui/flow.reel/flow.js | 658 ++++++-- node_modules/montage/ui/hottext.reel/hottext.css | 27 - node_modules/montage/ui/hottext.reel/hottext.html | 29 - node_modules/montage/ui/hottext.reel/hottext.js | 376 ----- .../montage/ui/hottextunit.reel/hottextunit.css | 41 - .../montage/ui/hottextunit.reel/hottextunit.html | 28 - .../montage/ui/hottextunit.reel/hottextunit.js | 185 --- node_modules/montage/ui/image.reel/image.js | 65 +- node_modules/montage/ui/image2.reel/image2.html | 31 - node_modules/montage/ui/image2.reel/image2.js | 26 - node_modules/montage/ui/image3d.reel/image3d.html | 95 -- node_modules/montage/ui/image3d.reel/image3d.js | 30 - node_modules/montage/ui/list.reel/list.html | 34 +- node_modules/montage/ui/list.reel/list.js | 192 +-- node_modules/montage/ui/loader.reel/loader.js | 7 + .../ui/loading-panel.reel/loading-panel.html | 2 +- node_modules/montage/ui/native-control.js | 240 +++ .../ui/nearest-neighbor-component-search.js | 458 +++--- .../montage/ui/number-input.reel/number-input.js | 17 + .../montage/ui/photo-editor.reel/photo-editor.css | 34 - .../montage/ui/photo-editor.reel/photo-editor.html | 50 - .../montage/ui/photo-editor.reel/photo-editor.js | 415 ----- node_modules/montage/ui/popup/alert.reel/alert.css | 8 +- .../montage/ui/popup/alert.reel/alert.html | 14 +- .../montage/ui/popup/confirm.reel/confirm.css | 2 +- .../montage/ui/popup/confirm.reel/confirm.html | 16 +- .../montage/ui/popup/confirm.reel/confirm.js | 12 +- node_modules/montage/ui/popup/popup.reel/popup.css | 15 +- .../montage/ui/popup/popup.reel/popup.html | 2 +- node_modules/montage/ui/popup/popup.reel/popup.js | 69 +- .../montage/ui/progress.reel/progress.html | 8 +- node_modules/montage/ui/progress.reel/progress.js | 23 +- .../montage/ui/radio-button.reel/radio-button.js | 97 ++ .../montage/ui/range-input.reel/range-input.js | 24 + .../montage/ui/repetition.reel/repetition.js | 243 +-- .../montage/ui/scroll-bars.reel/scroll-bars.html | 2 +- .../montage/ui/scroll-bars.reel/scroll-bars.js | 14 +- node_modules/montage/ui/scroll.js | 1634 ++++++++++---------- .../montage/ui/scroller.reel/scroller.html | 59 +- node_modules/montage/ui/scroller.reel/scroller.js | 87 +- .../montage/ui/select-input.reel/select-input.js | 320 ++++ node_modules/montage/ui/slider-base.js | 278 ---- node_modules/montage/ui/slider.reel/slider.css | 255 --- node_modules/montage/ui/slider.reel/slider.html | 82 - node_modules/montage/ui/slider.reel/slider.js | 583 ------- node_modules/montage/ui/tabs.reel/tabs.html | 8 +- node_modules/montage/ui/template.js | 47 +- node_modules/montage/ui/text-input.js | 304 ++++ node_modules/montage/ui/textarea.reel/textarea.css | 36 - .../montage/ui/textarea.reel/textarea.html | 15 - node_modules/montage/ui/textarea.reel/textarea.js | 48 +- .../montage/ui/textfield.reel/textfield.css | 35 - .../montage/ui/textfield.reel/textfield.html | 16 - .../montage/ui/textfield.reel/textfield.js | 37 +- .../montage/ui/toggle-button.reel/toggle-button.js | 171 ++ .../ui/toggle-switch.reel/toggle-switch.css | 162 ++ .../ui/toggle-switch.reel/toggle-switch.html | 16 + .../montage/ui/toggle-switch.reel/toggle-switch.js | 424 +++++ node_modules/montage/ui/toggle.reel/toggle.css | 162 -- node_modules/montage/ui/toggle.reel/toggle.html | 16 - node_modules/montage/ui/toggle.reel/toggle.js | 423 ----- .../montage/ui/video-player.reel/video-player.css | 22 +- .../montage/ui/video-player.reel/video-player.html | 18 +- 126 files changed, 9999 insertions(+), 7868 deletions(-) create mode 100644 node_modules/montage/ui/anchor.reel/anchor.js create mode 100644 node_modules/montage/ui/bluemoon/button-group.reel/button-group.css create mode 100644 node_modules/montage/ui/bluemoon/button-group.reel/button-group.html create mode 100644 node_modules/montage/ui/bluemoon/button-group.reel/button-group.js create mode 100644 node_modules/montage/ui/bluemoon/button.reel/button.css create mode 100644 node_modules/montage/ui/bluemoon/button.reel/button.html create mode 100644 node_modules/montage/ui/bluemoon/button.reel/button.js create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark-disabled.svg create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark.svg create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-light-disabled.svg create mode 100644 node_modules/montage/ui/bluemoon/checkbox.reel/checkmark.svg create mode 100644 node_modules/montage/ui/bluemoon/progress.reel/progress.css create mode 100644 node_modules/montage/ui/bluemoon/progress.reel/progress.html create mode 100644 node_modules/montage/ui/bluemoon/progress.reel/progress.js create mode 100644 node_modules/montage/ui/bluemoon/progress.reel/rule.png create mode 100644 node_modules/montage/ui/bluemoon/progress.reel/scroll.png create mode 100644 node_modules/montage/ui/bluemoon/slider.reel/slider.css create mode 100644 node_modules/montage/ui/bluemoon/slider.reel/slider.html create mode 100644 node_modules/montage/ui/bluemoon/slider.reel/slider.js create mode 100644 node_modules/montage/ui/bluemoon/textarea.reel/textarea.css create mode 100644 node_modules/montage/ui/bluemoon/textarea.reel/textarea.html create mode 100644 node_modules/montage/ui/bluemoon/textarea.reel/textarea.js create mode 100644 node_modules/montage/ui/bluemoon/textfield.reel/textfield.css create mode 100644 node_modules/montage/ui/bluemoon/textfield.reel/textfield.html create mode 100644 node_modules/montage/ui/bluemoon/textfield.reel/textfield.js create mode 100644 node_modules/montage/ui/bluemoon/toggle.reel/toggle.css create mode 100644 node_modules/montage/ui/bluemoon/toggle.reel/toggle.html create mode 100644 node_modules/montage/ui/bluemoon/toggle.reel/toggle.js delete mode 100755 node_modules/montage/ui/button-group.reel/button-group.css delete mode 100755 node_modules/montage/ui/button-group.reel/button-group.html delete mode 100755 node_modules/montage/ui/button-group.reel/button-group.js delete mode 100755 node_modules/montage/ui/button.reel/button.css delete mode 100755 node_modules/montage/ui/button.reel/button.html mode change 100755 => 100644 node_modules/montage/ui/button.reel/button.js create mode 100644 node_modules/montage/ui/check-input.js delete mode 100755 node_modules/montage/ui/checkbox.reel/checkbox.css delete mode 100755 node_modules/montage/ui/checkbox.reel/checkbox.html mode change 100755 => 100644 node_modules/montage/ui/checkbox.reel/checkbox.js delete mode 100755 node_modules/montage/ui/checkbox.reel/checkmark-dark-disabled.svg delete mode 100755 node_modules/montage/ui/checkbox.reel/checkmark-dark.svg delete mode 100755 node_modules/montage/ui/checkbox.reel/checkmark-light-disabled.svg delete mode 100755 node_modules/montage/ui/checkbox.reel/checkmark.svg create mode 100644 node_modules/montage/ui/composer/composer.js create mode 100644 node_modules/montage/ui/composer/long-press-composer.js create mode 100644 node_modules/montage/ui/composer/swipe-composer.js create mode 100644 node_modules/montage/ui/composer/translate-composer.js create mode 100644 node_modules/montage/ui/date-input.reel/date-input.js delete mode 100644 node_modules/montage/ui/flow-controller.reel/flow-controller.html delete mode 100644 node_modules/montage/ui/flow-controller.reel/flow-controller.js delete mode 100644 node_modules/montage/ui/flow-offset.js delete mode 100644 node_modules/montage/ui/hottext.reel/hottext.css delete mode 100644 node_modules/montage/ui/hottext.reel/hottext.html delete mode 100644 node_modules/montage/ui/hottext.reel/hottext.js delete mode 100644 node_modules/montage/ui/hottextunit.reel/hottextunit.css delete mode 100644 node_modules/montage/ui/hottextunit.reel/hottextunit.html delete mode 100644 node_modules/montage/ui/hottextunit.reel/hottextunit.js mode change 100644 => 100755 node_modules/montage/ui/image.reel/image.js delete mode 100644 node_modules/montage/ui/image2.reel/image2.html delete mode 100644 node_modules/montage/ui/image2.reel/image2.js delete mode 100644 node_modules/montage/ui/image3d.reel/image3d.html delete mode 100644 node_modules/montage/ui/image3d.reel/image3d.js create mode 100644 node_modules/montage/ui/native-control.js create mode 100644 node_modules/montage/ui/number-input.reel/number-input.js delete mode 100755 node_modules/montage/ui/photo-editor.reel/photo-editor.css delete mode 100755 node_modules/montage/ui/photo-editor.reel/photo-editor.html delete mode 100755 node_modules/montage/ui/photo-editor.reel/photo-editor.js create mode 100755 node_modules/montage/ui/radio-button.reel/radio-button.js create mode 100644 node_modules/montage/ui/range-input.reel/range-input.js create mode 100644 node_modules/montage/ui/select-input.reel/select-input.js delete mode 100644 node_modules/montage/ui/slider-base.js delete mode 100755 node_modules/montage/ui/slider.reel/slider.css delete mode 100755 node_modules/montage/ui/slider.reel/slider.html delete mode 100755 node_modules/montage/ui/slider.reel/slider.js create mode 100644 node_modules/montage/ui/text-input.js delete mode 100755 node_modules/montage/ui/textarea.reel/textarea.css delete mode 100755 node_modules/montage/ui/textarea.reel/textarea.html mode change 100755 => 100644 node_modules/montage/ui/textarea.reel/textarea.js delete mode 100755 node_modules/montage/ui/textfield.reel/textfield.css delete mode 100755 node_modules/montage/ui/textfield.reel/textfield.html mode change 100755 => 100644 node_modules/montage/ui/textfield.reel/textfield.js create mode 100644 node_modules/montage/ui/toggle-button.reel/toggle-button.js create mode 100755 node_modules/montage/ui/toggle-switch.reel/toggle-switch.css create mode 100755 node_modules/montage/ui/toggle-switch.reel/toggle-switch.html create mode 100644 node_modules/montage/ui/toggle-switch.reel/toggle-switch.js delete mode 100755 node_modules/montage/ui/toggle.reel/toggle.css delete mode 100755 node_modules/montage/ui/toggle.reel/toggle.html delete mode 100755 node_modules/montage/ui/toggle.reel/toggle.js (limited to 'node_modules/montage/ui') diff --git a/node_modules/montage/ui/anchor.reel/anchor.js b/node_modules/montage/ui/anchor.reel/anchor.js new file mode 100644 index 00000000..d8ac1d8f --- /dev/null +++ b/node_modules/montage/ui/anchor.reel/anchor.js @@ -0,0 +1,26 @@ +/* + 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").Montage, + Component = require("ui/component").Component, + NativeControl = require("ui/native-control").NativeControl; + +/** + * The native control with binding support for the standard attributes + */ +var Anchor = exports.Anchor = Montage.create(NativeControl, { + +}); + +http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element +Anchor.addAttributes({ + textContent: null, + href: null, + hreflang: null, + media: null, + rel: null, + target: null, + type: null +}); diff --git a/node_modules/montage/ui/application.js b/node_modules/montage/ui/application.js index 21449b8d..c7b3dc73 100755 --- a/node_modules/montage/ui/application.js +++ b/node_modules/montage/ui/application.js @@ -127,15 +127,6 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta } }, - /** - A collection of components that the application creates at startup. - @type {Object} - @default null - */ - components: { - value: null - }, - /** The application's delegate object.
The application delegate is notified of events during the application's life cycle. @@ -146,13 +137,6 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta value: null }, - /** - @private - */ - _template: { - value: null - }, - /** Description TODO @function @@ -161,32 +145,16 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta load: { value: function(callback) { var template = Template.create().initWithDocument(window.document), - components, component, - self = this, - isInstance = Application.isPrototypeOf(this); - - template.instantiateWithOwnerAndDocument(isInstance ? this : null, window.document, function(rootObject) { - // The states we need to take care of: - // 1) Static Application.load() called and the template root object is an application - // 2) Static Application.load() called and the template root object is NOT an application - // 3) Instance application.load() called and the template root object is an application - // 4) Instance application.load() called and the template root object is NOT an application - if (rootObject !== self) { // Need to setup the application object - if (Application.isPrototypeOf(rootObject)) { // the root object is an application already, use it - self = rootObject; - } else { // the root object is something else, need to create an application to "wrap" it or use "this" in case of an instance (vs static) call - self = isInstance ? self : Application.create(); - self.components = [rootObject]; - require("ui/component").__root__.needsDraw = true; - } - } + component, + self = this; - self._template = template; - components = self.components || []; - for (var i = 0; (component = components[i]); i++) { - component.needsDraw = true; - } + self = Application.isPrototypeOf(self) ? self : Application.create(); + // assign to the exports so that it is available in the deserialization of the template + exports.application = self; + + template.instantiateWithOwnerAndDocument(null, window.document, function() { + require("ui/component").__root__.needsDraw = true; if (callback) { callback(self); } @@ -198,7 +166,22 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta _alertPopup: {value: null, enumerable: false}, _confirmPopup: {value: null, enumerable: false}, _notifyPopup: {value: null, enumerable: false}, + _zIndex: {value: null}, + + _isSystemPopup: {value: function(type) { + return (type === 'alert' || type === 'confirm' || type === 'loading'); + }}, + _createPopupSlot: {value: function(zIndex) { + var slotEl = document.createElement('div'); + document.body.appendChild(slotEl); + slotEl.style['z-index'] = zIndex; + slotEl.style.position = 'absolute'; + + var popupSlot = Slot.create(); + popupSlot.element = slotEl; + return popupSlot; + }}, getPopupSlot: { value: function(type, content, callback) { @@ -206,16 +189,11 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta var self = this; require.async("ui/slot.reel/slot", function(exports) { Slot = Slot || exports.Slot; - type = type || "custom"; - // type = custom|alert|confirm + var isSystemPopup = self._isSystemPopup(type), zIndex, slotEl, popupSlot; self.popupSlots = self.popupSlots || {}; - var popupSlot = self.popupSlots[type]; - // create a slot for this type of popup - if (!popupSlot) { - var slotEl = document.createElement('div'), zIndex; - slotEl.style.position = 'absolute'; + if(isSystemPopup) { switch (type) { case "alert": zIndex = 9004; @@ -226,16 +204,24 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta case "loading": zIndex = 9002; break; - default: - zIndex = 9001; - break; } - slotEl.style['z-index'] = zIndex; + } else { + // custom popup + if(!self._zIndex) { + self._zIndex = 7000; + } else { + self._zIndex = self._zIndex + 1; + } + zIndex = self._zIndex; + } - document.body.appendChild(slotEl); - popupSlot = Slot.create(); - popupSlot.element = slotEl; - self.popupSlots[type] = popupSlot; + popupSlot = self.popupSlots[type]; + if (!popupSlot) { + popupSlot = self.popupSlots[type] = self._createPopupSlot(zIndex); + } + // use the new zIndex for custom popup + if(!isSystemPopup) { + popupSlot.element.style['z-index'] = zIndex; } popupSlot.content = content; @@ -243,6 +229,38 @@ var Application = exports.Application = Montage.create(Montage, /** @lends monta }); } + }, + + returnPopupSlot: {value: function(type) { + var self = this; + if(self.popupSlots && self.popupSlots[type]) { + var popupSlot = self.popupSlots[type]; + popupSlot.content = null; + // is there a way to remove the Slot + // OR should we remove the slotEl from the DOM to clean up ? + } + + }}, + + // private + _getActivePopupSlots: { + value: function() { + var arr = []; + if(this.popupSlots) { + var keys = Object.keys(this.popupSlots); + if(keys && keys.length > 0) { + var i=0, len = keys.length, slot; + for(i=0; i< len; i++) { + slot = this.popupSlots[keys[i]]; + if(slot && slot.content !== null) { + arr.push(slot); + } + + } + } + } + return arr; + } } }); diff --git a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.css b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.css new file mode 100644 index 00000000..9491f3db --- /dev/null +++ b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.css @@ -0,0 +1,111 @@ +/* + 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. + */ +.montage-button-group { + +} + +.montage-button-group.small > .montage-button, +.montage-button-group.small > .montage-button:before { + font-size: 12px; + border-radius: 16px; + padding: 1px 18px 0 18px; + height: 26px; + line-height: 26px; +} + +.montage-button-group.small > .montage-button.submit, +.montage-button-group.small > .montage-button.cancel { + height: 21px; + line-height: 21px; +} + +.montage-button-group.small > .montage-button.disabled, +.montage-button-group.small > .montage-button.disabled:before { + height: 28px; + line-height: 28px; +} + +.montage-button-group.small > .montage-button.submit:before, +.montage-button-group.small > .montage-button.cancel:before { + height: 24px; +} + +.montage-button-group > .montage-button.submit, +.montage-button-group > .montage-button.cancel { + height: 42px; + line-height: 42px; +} + +.montage-button-group > .montage-button:not(:first-child):not(:last-child), +.montage-button-group > .montage-button.submit:not(:first-child):not(:last-child), +.montage-button-group > .montage-button.cancel:not(:first-child):not(:last-child), +.montage-button-group > .montage-button:not(:first-child):not(:last-child):before, +.montage-button-group > .montage-button:not(:first-child):not(:last-child):after { + border-radius: 0; +} + +.montage-button-group > .montage-button:first-child:not(:last-child), +.montage-button-group > .montage-button.submit:first-child:not(:last-child), +.montage-button-group > .montage-button.cancel:first-child:not(:last-child), +.montage-button-group > .montage-button:first-child:not(:last-child):before, +.montage-button-group > .montage-button:first-child:not(:last-child):after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.montage-button-group > .montage-button:last-child:not(:first-child), +.montage-button-group > .montage-button.submit:last-child:not(:first-child), +.montage-button-group > .montage-button.cancel:last-child:not(:first-child), +.montage-button-group > .montage-button:last-child:not(:first-child):before, +.montage-button-group > .montage-button:last-child:not(:first-child):after { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.montage-button-group > .montage-button:not(:first-child) { + margin-left: -3px; +} + +/* Icon handling */ + +.montage-button-group.small > .montage-button.text.icon > img, +.montage-button-group.small > .montage-button.submit.icon > img, +.montage-button-group.small > .montage-button.cancel.icon > img { + float: left; + margin-left: -4px; + margin-right: 4px; + margin-top: 0; + height: 20px; + width: 20px; +} + +.montage-button-group.small > .montage-button.text.icon > img { + margin-top: 2px; +} + +.montage-button-group.iconic > .montage-button.text.icon, +.montage-button-group.iconic > .montage-button.submit.icon, +.montage-button-group.iconic > .montage-button.cancel.icon { + text-indent: -9999px; + width: 26px; + padding-left: 14px; + padding-right: 14px; +} + +.montage-button-group.small.iconic > .montage-button.text.icon, +.montage-button-group.small.iconic > .montage-button.submit.icon, +.montage-button-group.small.iconic > .montage-button.cancel.icon { + width: 20px; + padding-left: 10px; + padding-right: 10px; +} + +.montage-button-group.iconic > .montage-button.text.icon > img, +.montage-button-group.iconic > .montage-button.submit.icon > img, +.montage-button-group.iconic > .montage-button.cancel.icon > img { + margin-left: 0; + margin-right: 0; +} diff --git a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html new file mode 100644 index 00000000..4bda1401 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + diff --git a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.js b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.js new file mode 100644 index 00000000..6f69744f --- /dev/null +++ b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.js @@ -0,0 +1,77 @@ +/* + 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. + */ +/** + @module "montage/ui/bluemoon/button-group.reel" + @requires montage/core/core + @requires "ui/component-group.reel" +*/ +var Montage = require("montage").Montage, + ComponentGroup = require("ui/component-group.reel").ComponentGroup; + +/** + @class module:"montage/ui/bluemoon/button-group.reel".ButtonGroup + @classdesc A group of buttons, displayed "pill" style. + @extends module:montage/ui/component.Component + */ +var ButtonGroup = exports.ButtonGroup = Montage.create(ComponentGroup, /** @lends module:"montage/ui/bluemoon/button-group.reel".ButtonGroup */ { +/** + Description TODO + @type {Boolean} + @default true +*/ + hasTemplate: { + value: true + }, + +/** + Description TODO + @private +*/ + _iconic: { + value: false + }, + + /** + Sets wether or not to hide button text for buttons with icons. + @type {Function} + @default {Boolean} false + */ + iconic: { + get: function() { + return this._iconic; + }, + set: function(value) { + if (this._iconic !== value) { + this._iconic = value; + this.needsDraw = true; + } + } + }, + +/** + Description TODO + @function + */ + prepareForDraw: { + value: function() { + this.element.classList.add("montage-button-group"); + } + }, + +/** + Description TODO + @function + */ + draw: { + value: function() { + if (this._iconic) { + this.element.classList.add("iconic"); + } else { + this.element.classList.remove("iconic"); + } + } + } +}); diff --git a/node_modules/montage/ui/bluemoon/button.reel/button.css b/node_modules/montage/ui/bluemoon/button.reel/button.css new file mode 100644 index 00000000..acf938cc --- /dev/null +++ b/node_modules/montage/ui/bluemoon/button.reel/button.css @@ -0,0 +1,386 @@ +/* + 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. + */ +@-webkit-keyframes montage-button-light-busy { + 0% { + background-color: #ccc; + } + 50% { + background-color: #e6e6e6; + } + 100% { + background-color: #ccc; + } +} +@-webkit-keyframes montage-button-dark-busy { + 0% { + background-color: #404040; + color: #a0a0a0; + } + 50% { + background-color: #505050; + color: #bbb; + } + 100% { + background-color: #404040; + color: #a0a0a0; + } +} +.montage-button.busy { + -webkit-animation-delay: 100ms !important; +} + +.montage-button.text:before { + content: ""; + position: absolute; + left: -1px; + right: -1px; + top: -1px; + bottom: -1px; + border: 1px solid rgba(0,0,0,.25); + border-radius: 26px; + -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1); +} + +.montage-button.text { + outline: none; + position: relative; + left: 1px; + top: 1px; + cursor: pointer; + -webkit-user-select: none; + display: inline-block; + padding: 2px 32px 0 32px; + height: 48px; + border-radius: 26px; + background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6; + font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif; + text-align: center; + line-height: 48px; + font-size: 18px; + color: #000; + -webkit-transition: background 150ms; +} + +.montage-button.text:active, .montage-button.text.busy { + background: #ccc; +} + +.montage-button.text.busy { + -webkit-animation: montage-button-light-busy 1.1s infinite; + -webkit-animation-timing-function: ease-in-out; + cursor: default; +} + +.montage-button.text.disabled:before { + -webkit-box-shadow: none; +} + +.montage-button.text.disabled { + background: none; + color: #969696; +} + +.montage-button.submit:before { + content: ""; + position: absolute; + left: -4px; + right: -4px; + top: -4px; + bottom: -4px; + border: 2px solid #0cbeff; + border-radius: 26px; + -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1); +} + +.montage-button.submit:after { + content: ""; + position: absolute; + left: -4px; + right: -4px; + top: -4px; + bottom: -4px; + border-radius: 26px; + -webkit-box-shadow: inset 0 1px 2px #066283, inset 0 1px 2px #066283; +} + +.montage-button.submit { + outline: none; + position: relative; + left: 1px; + top: 1px; + margin: 2px; + cursor: pointer; + -webkit-user-select: none; + display: inline-block; + padding: 2px 31px 0 31px; + height: 40px; + border: 1px solid #f3f3f3; + border-radius: 26px; + background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6; + font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif; + line-height: 40px; + font-size: 18px; + color: #0f9ed2; + -webkit-transition-duration: 150ms; + -webkit-transition-property: background, color; + -webkit-box-shadow: 0 1px 0 #0988b7, 0 2px 0 #0988b7, 0 -2px 0 #0988b7, -2px 0 0 #0988b7, 2px 0 0 #0988b7; +} + +.montage-button.submit:active, .montage-button.submit.busy { + border: 1px solid #0988b7; + color: #666; + -webkit-box-shadow: 0 1px 0 #afeaff, 0 2px 0 #0cbeff, 0 -2px 0 #0cbeff, -2px 0 0 #0cbeff, 2px 0 0 #0cbeff; + background: #ccc; +} + +.montage-button.submit.disabled:before { + -webkit-box-shadow: none; + border: 1px solid #acacac; +} + +.montage-button.submit.disabled { + -webkit-box-shadow: none; + background: none; + color: #969696; + border: 1px solid transparent; +} + +.montage-button.submit.disabled:after { + -webkit-box-shadow: none; +} + +.montage-button.submit.busy { + -webkit-animation: montage-button-light-busy 1.1s infinite; + -webkit-animation-timing-function: ease-in-out; + cursor: default; +} + +.montage-button.cancel:before { + content: ""; + position: absolute; + left: -4px; + right: -4px; + top: -4px; + bottom: -4px; + border: 2px solid #dc4d48; + border-radius: 26px; + -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1); +} + +.montage-button.cancel:after { + content: ""; + position: absolute; + left: -4px; + right: -4px; + top: -4px; + bottom: -4px; + border-radius: 26px; + -webkit-box-shadow: inset 0 1px 2px #742b28, inset 0 1px 2px #742b28; + opacity: .8; +} + +.montage-button.cancel { + outline: none; + position: relative; + left: 1px; + top: 1px; + margin: 2px; + cursor: pointer; + -webkit-user-select: none; + display: inline-block; + padding: 2px 31px 0 31px; + height: 40px; + border: 1px solid #f3f3f3; + border-radius: 26px; + background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6; + font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif; + line-height: 40px; + font-size: 18px; + color: #d23f3a; + -webkit-transition-duration: 150ms; + -webkit-transition-property: background, color; + -webkit-box-shadow: 0 1px 0 #dc4d48, 0 2px 0 #a9403a, 0 -2px 0 #a9403a, -2px 0 0 #a9403a, 2px 0 0 #a9403a; +} + +.montage-button.cancel:active, .montage-button.cancel.busy { + border: 1px solid #a9403a; + color: #666; + -webkit-box-shadow: 0 1px 0 #f5c7c5, 0 2px 0 #dc4d48, 0 -2px 0 #dc4d48, -2px 0 0 #dc4d48, 2px 0 0 #dc4d48; + background: #ccc; +} + +.montage-button.cancel.busy { + -webkit-animation: montage-button-light-busy 1.1s infinite; + -webkit-animation-timing-function: ease-in-out; + cursor: default; +} + +.montage-button.cancel.disabled:before { + -webkit-box-shadow: none; + border: 1px solid #acacac; +} + +.montage-button.cancel.disabled { + -webkit-box-shadow: none; + background: none; + color: #969696; + border: 1px solid transparent; +} + +.montage-button.cancel.disabled:after { + -webkit-box-shadow: none; +} + +.montage-button.text.dark:before { + border: 1px solid rgba(0,0,0,.4); + -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1); +} + +.montage-button.text.dark { + background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#5c5c5c)), #5c5c5c; + color: #fff; + text-shadow: 0 0 2px #404040; + -webkit-transition-duration: 150ms; + -webkit-transition-property: background, color; +} + +.montage-button.text.dark:active, .montage-button.text.dark.busy { + background: #404040; + color: #a0a0a0; +} + +.montage-button.text.dark.busy { + -webkit-animation: montage-button-dark-busy 1.1s infinite; +} + +.montage-button.text.dark.disabled:before { + -webkit-box-shadow: none; +} + +.montage-button.text.dark.disabled { + background: none; + color: #333; + text-shadow: none; +} + +.montage-button.submit.dark:before { + border: 1px solid rgba(0,0,0,.4); + -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1), inset 0 2px 0 #0aa0d8, inset 0 -2px 0 #0aa0d8; +} + +.montage-button.submit.dark:after { + left: -3px; + right: -3px; + top: -3px; + bottom: -3px; + -webkit-box-shadow: inset 0 1px 2px #066283; + opacity: 1; +} + +.montage-button.submit.dark { + margin: 3px; + background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#616161)), #616161; + color: #fff; + border: none; + text-shadow: 0 0 2px #404040; + -webkit-box-shadow: inset 0 1px 0 #3f6d7e, inset 1px 0 0 #044259, inset -1px 0 0 #044259, inset 0 -1px 0 #044259, 0 1px 1px #087faa, 0 1px 1px #087faa, 0 1px 0 #0aa0d8, 0 3px 0 #0aa0d8, 0 -3px 0 #0aa0d8, -3px 0 0 #0aa0d8, 3px 0 0 #0aa0d8; +} + +.montage-button.submit.dark:active, .montage-button.submit.dark.busy { + color: #a0a0a0; + -webkit-box-shadow: inset 0 0 1px #033040, inset 0 0 1px #033040, 0 1px 1px #45cdff, 0 1px 0 #0aa0d8, 0 3px 0 #0aa0d8, 0 -3px 0 #0aa0d8, -3px 0 0 #0aa0d8, 3px 0 0 #0aa0d8; + background: #404040; +} + +.montage-button.submit.dark.busy { + -webkit-animation: montage-button-dark-busy 1.1s infinite; +} + +.montage-button.submit.dark.disabled:before { + -webkit-box-shadow: none; +} + +.montage-button.submit.dark.disabled { + -webkit-box-shadow: none; + background: none; + border: none; + color: #333; + text-shadow: none; +} + +.montage-button.submit.dark.disabled:after { + -webkit-box-shadow: none; +} + +.montage-button.cancel.dark:before { + border: 1px solid rgba(0,0,0,.4); + -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1), inset 0 2px 0 #b53732, inset 0 -2px 0 #b53732; +} + +.montage-button.cancel.dark:after { + left: -3px; + right: -3px; + top: -3px; + bottom: -3px; + -webkit-box-shadow: inset 0 1px 2px #932c29, inset 0 1px 2px #932c29; + opacity: 1; +} + +.montage-button.cancel.dark { + margin: 3px; + background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#616161)), #616161; + color: #fff; + border: none; + text-shadow: 0 0 2px #404040; + -webkit-box-shadow: inset 0 1px 0 #7c7c7c, 0 3px 0 #b53732, 0 -3px 0 #b53732, -3px 0 0 #b53732, 3px 0 0 #b53732; +} + +.montage-button.cancel.dark:active, .montage-button.cancel.dark.busy { + color: #a0a0a0; + -webkit-box-shadow: inset 0 1px #852824, inset 0 -1px #852824, 0 1px #dd6c68, 0 3px 0 #b53732, 0 -3px 0 #b53732, -3px 0 0 #b53732, 3px 0 0 #b53732; + background: #404040; +} + +.montage-button.cancel.dark.busy { + -webkit-animation: montage-button-dark-busy 1.1s infinite; +} + +.montage-button.cancel.dark.disabled:before { + -webkit-box-shadow: none; +} + +.montage-button.cancel.dark.disabled { + -webkit-box-shadow: none; + background: none; + border: none; + color: #333; + text-shadow: none; +} + +.montage-button.cancel.dark.disabled:after { + -webkit-box-shadow: none; +} + +.montage-button.disabled { + cursor: default; +} + +/* Buttons icons (Used in conjunction with the iconic style in Button Groups)*/ + +.montage-button.text.icon > img, +.montage-button.submit.icon > img, +.montage-button.cancel.icon > img { + float: left; + margin-left: -6px; + margin-right: 6px; + margin-top: 6px; + height: 26px; + width: 26px; +} + +.montage-button.text.icon > img { + margin-top: 8px; +} diff --git a/node_modules/montage/ui/bluemoon/button.reel/button.html b/node_modules/montage/ui/bluemoon/button.reel/button.html new file mode 100644 index 00000000..a872b6d0 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/button.reel/button.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + diff --git a/node_modules/montage/ui/bluemoon/button.reel/button.js b/node_modules/montage/ui/bluemoon/button.reel/button.js new file mode 100644 index 00000000..ac922863 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/button.reel/button.js @@ -0,0 +1,743 @@ +/* + 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. + */ +/** + @module "montage/ui/bluemoon/button.reel" + @requires montage/core/core + @requires montage/ui/component +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component; + +/** + @class module:"montage/ui/bluemoon/button.reel".Button + @classdesc Button component implementation. Turns any div element into a multi-state labeled button. + @extends module:montage/ui/component.Component + */ +exports.Button = Montage.create(Component,/** @lends module:"montage/ui/bluemoon/button.reel".Button# */ { + +/** + Description TODO + @private +*/ + _preventFocus: { + enumerable: false, + value: false + }, + +/** + Description TODO + @type {Function} + @default {Boolean} false +*/ + preventFocus: { + get: function () { + return this._preventFocus; + }, + set: function (value) { + if (value === true) { + this._preventFocus = true; + } else { + this._preventFocus = false; + } + } + }, + +/** + Description TODO + @private +*/ + _busy: { + enumerable: false, + value: false + }, + +/** + Description TODO + @type {Function} + @default {Boolean} false + */ + busy: { + get: function () { + return this._busy; + }, + set: function (value) { + if ((value === true) && (!this._disabled)) { + this._busy = true; + } else { + this._busy = false; + } + this.needsDraw = true; + } + }, + +/** + Description TODO + @private +*/ + _disabled: { + enumerable: false, + value: false + }, + +/** + Description TODO + @type {Function} + @default {Boolean} false + */ + disabled: { + get: function () { + return this._disabled; + }, + set: function (value) { + if (value === true) { + this._disabled = true; + this.busy = false; + } else { + this._disabled = false; + } + this.needsDraw = true; + } + }, + + //TODO we should prefer positive properties like enabled vs disabled, get rid of disabled + + enabled: { + dependencies: ["disabled"], + get: function () { + return !!this._disabled; + }, + set: function (value) { + this.disabled = !value; + } + }, + + /** + * When behavior is toggle, @link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed + * the pressed property contains the equivalent of the aria-pressed attribute: "true"||"false"||"mixed" + * @private + */ + _pressed: { + value: "false", + enumerable: false + }, + /** + Description TODO + @type {Function} + @default {Boolean} "false" + */ + pressed: { + get: function() { + return this._pressed; + }, + set: function(value) { + if (value !== this._pressed) { + this._pressed = value; + this.needsDraw = true; + } + } + }, + /** + * Used when a button is associated with an input tag. For buttons, the title comes from it's value attribute. + * If the value property is undefined, it will be initialized from the button's input element if the element is an input type. + * @private + */ + _value: { + enumerable: false, + value: undefined + }, + /** + Description TODO + @type {Function} + @default undefined + */ + value: { + serializable: true, + get: function () { + return this._value; + }, + set: function (value) { + this._value = value; + this.needsDraw = true; + } + }, + + /** + The Montage converted used to convert or format values displayed by this Button instance. + @type {Property} + @default null + */ + converter: { + value: null + }, + + /** + * @private + */ + _title: { + enumerable: false, + value: undefined + }, + /** + Description Text to show in the tooltip displayed by hovering over this button + @type {Function} + @default undefined + */ + title: { + serializable: true, + get: function () { + return this._title; + }, + set: function (value) { + this._title = value; + this.needsDraw = true; + } + }, + +/** + Description TODO + @private +*/ + _valueNode: {value:undefined, enumerable: false}, + +/** + Used when a button is associate with an input tag.
+ For buttons, the title comes from it's value attribute.
+ valueActive, if set, is used when the button is in active state (mousedown / touchstart). + @type {String} + @default undefined + */ + valueActive: { + serializable: true, + value: undefined + }, + + /** + Description TODO + @private +*/ + _valueNodeActiveNode: {value:undefined, enumerable: false}, + + + /** + Used when a button is associate with an input tag.
+ For buttons, the title comes from its value attribute.
+ When behavior is toggle, @link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed the button has multiple states and may need different titles for that.
+ So, pressedValue would contain the value to use when pressed is true. + @type {String} + @default undefined + */ + pressedValue: { + serializable: true, + value: undefined + }, + +/** + Description TODO + @private +*/ + _pressedValueNode: {value:undefined, enumerable: false}, + +/** + Used when a button is associate with an input tag.
+ For buttons, the title comes from its value attribute.
+ When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.
+ So, pressedValue would contain the value to use when pressed is true. + @type {String} + @default undefined + */ + pressedValueActive: { + serializable: true, + value: undefined + }, + +/** + Description TODO + @private +*/ + _pressedValueActiveNode: {value:undefined, enumerable: false}, + +/** + Used when a button is associate with an input tag.
+ For buttons, the title comes from it's value attribute.
+ When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.
+ So, mixedValue would contain the value to use when pressed is mixed. + @type {String} + @default undefined + */ + mixedValue: { + serializable: true, + value: undefined + }, + + /** + Description TODO + @private +*/ + _mixedValueNode: {value:undefined, enumerable: false}, + +/** + Used when a button is associated with an input tag.
+ For buttons, the title comes from its value attribute.
+ When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.
+ So, mixedValue would contain the value to use when pressed is mixed. + @type {String} + @default undefined + */ + mixedValueActive: { + serializable: true, + value: undefined + }, + +/** + Description TODO + @private +*/ + _mixedValueActiveNode: {value:undefined, enumerable: false}, + +/** + Description TODO + @private +*/ + _active: { + value: false + }, + +/** + Description TODO + @type {Function} + @default {Boolean} false + */ + active: { + get: function() { + return this._active; + }, + set: function(value) { + this._active = value; + this.needsDraw = true; + } + }, +/** + Description TODO + @private +*/ + _behavior: { + value: "transient", + enumerable: false + }, + + /** + Behavior describes how the button interprets events: + + @type {Function} + @default {String} "transient" + */ + behavior: { + serializable: true, + get: function() { + return this._behavior; + }, + set: function(value) { + if (value !== this._behavior) { + //Sanity check on behavior + value = ((value === "transient") || (value === "toggle") || (value === "mixed")) ? value : "transient"; + this._behavior = value; + this.needsDraw = true; + } + } + }, +/** + Description TODO + @private +*/ + _observedPointer: { + enumerable: true, + value: null + }, + + // Low-level event listeners + /** + Description TODO + @function + @param {Event} event The handleMousedown event + */ + handleMousedown: { + value: function(event) { + if (!this._disabled && !this._busy) { + this._acknowledgeIntent("mouse"); + } + + event.preventDefault(); + + if (!this._preventFocus) { + this._element.focus(); + } + } + }, +/** + Description TODO + @function + @param {Event} event The handleMouseup event + */ + handleMouseup: { + value: function(event) { + this._interpretInteraction(event); + } + }, +/** + Description TODO + @function + @param {Event} event The handleTouchstart event + */ + handleTouchstart: { + value: function(event) { + + if (this._observedPointer !== null) { + return; + } + + if (!this._disabled && !this._busy) { + this._acknowledgeIntent(event.changedTouches[0].identifier); + } + + // NOTE preventingDefault disables the magnifying class + // sadly it also disables double tapping on the button to zoom... + event.preventDefault(); + + if (!this._preventFocus) { + this._element.focus(); + } + } + }, +/** + Description TODO + @function + @param {Event} event The handleTouchend event + */ + handleTouchend: { + value: function(event) { + + var i = 0, + changedTouchCount = event.changedTouches.length; + + for (; i < changedTouchCount; i++) { + if (event.changedTouches[i].identifier === this._observedPointer) { + this._interpretInteraction(event); + return; + } + } + + } + }, +/** + Description TODO + @function + @param {Event} event The handleTouchcancel event + */ + handleTouchcancel: { + value: function(event) { + + var i = 0, + changedTouchCount = event.changedTouches.length; + + for (; i < changedTouchCount; i++) { + if (event.changedTouches[i].identifier === this._observedPointer) { + this._releaseInterest(); + + this.active = false; + return; + } + } + + } + }, +/** + Description TODO + @function + @param {String} pointer TODO + @param {Component} demandingComponent TODO + @returns {Boolean} true TODO + */ + surrenderPointer: { + value: function(pointer, demandingComponent) { + + this._releaseInterest(); + + this.active = false; + return true; + } + }, + + // Internal state management +/** + Description TODO + @private +*/ + _acknowledgeIntent: { + value: function(pointer) { + + this._observedPointer = pointer; + this.eventManager.claimPointer(pointer, this); + + if (window.Touch) { + document.addEventListener("touchend", this); + document.addEventListener("touchcancel", this); + } else { + document.addEventListener("mouseup", this); + } + + this.active = true; + }, + enumerable: false + }, +/** + Description TODO + @private +*/ + _interpretInteraction: { + value: function(event) { + + if (!this.active) { + return; + } + + var target = event.target; + while (target !== this.element && target && target.parentNode) { + target = target.parentNode; + } + + if (this.element === target) { + this._shouldDispatchActionEvent = true; + this._dispatchActionEvent(); + this.updateState(); + } + + this._releaseInterest(); + + this.active = false; + }, + enumerable: false + }, +/** + Description TODO + @private +*/ + _releaseInterest: { + value: function() { + if (window.Touch) { + document.removeEventListener("touchend", this); + document.removeEventListener("touchcancel", this); + } else { + document.removeEventListener("mouseup", this); + } + + this.eventManager.forfeitPointer(this._observedPointer, this); + this._observedPointer = null; + } + }, +/** + Description TODO + @function + */ + updateState: { + value: function() { + var newState; + + if (this._behavior !== "transient") { + switch (this._pressed) { + case "false": + newState = "true"; + break; + case "true": + newState = (this._behavior === "toggle") ? "false" : "mixed"; + break; + case "mixed": + newState = "false"; + break; + } + this.pressed = newState; + } + this.needsDraw = true; + } + }, +/** + Description TODO + @private +*/ + _isElementInput: {value: false}, + prepareForDraw: { + value: function() { + + if(!this._element.tabIndex) { + this._element.tabIndex = 0; + } + + this._element.classList.add("montage-button"); + this._element.setAttribute("aria-role", "button"); + + if (!!(this._isElementInput = (this._element.tagName === "INPUT")) && this.value === undefined) { + this._valueNode = this._element.getAttributeNode("value"); + this.value = this._element.value; + } + else { + if (!this._element.firstChild) { + this._element.appendChild(document.createTextNode("")); + + } + this._valueNode = this._element.firstChild; + if (this.value === undefined) { + this.value = this._valueNode.data; + } + } + } + }, +/** + Description TODO + @function + */ + prepareForActivationEvents: { + value: function() { + + if (window.Touch) { + this._element.addEventListener("touchstart", this); + } else { + this.element.addEventListener("mousedown", this); + } + + } + }, + + /** + Retrieves the display value for the button, running it through a converter if needed + @private + */ + _convertValue: { + value: function(value) { + if (this.converter) { + return this.converter.convert(value); + } + return value; + } + }, +/** + Description TODO + @function + */ + draw: { + value: function() { + + if (this._disabled) { + this._element.classList.add("disabled"); + } else { + this._element.classList.remove("disabled"); + } + + if (this._busy) { + this._element.setAttribute("aria-busy", true); + this._element.classList.add("busy"); + } else { + this._element.setAttribute("aria-busy", false); + this._element.classList.remove("busy"); + } + + if (this._behavior !== "transient") { + + this._element.setAttribute("aria-pressed", this._pressed); + + if (this._pressed === "true" && this.pressedValue) { + if (this._isElementInput) { + this._valueNode.value = this._convertValue(this.pressedValue); + } + else { + if (!this._pressedValueNode) { + this._pressedValueNode = document.createTextNode(""); + this._pressedValueNode.data = this._convertValue(this.pressedValue); + } + //TODO use replace now + this._valueNode.data = this._convertValue(this.pressedValue); + } + } + else if (this._pressed === "mixed" && this.mixedValue) { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.mixedValue)); + } + else { + this._element.firstChild.data = this._convertValue(this.mixedValue); + } + } + else if ((this._pressed === "false") && (typeof this.value !== "undefined")) { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.value)); + } + else { + this._element.firstChild.data = this._convertValue(this.value); + } + } + } else { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.value)); + } else { + this._element.firstChild.data = this._convertValue(this.value); + } + } + if (this.valueActive) { + if (this.active) { + if (this._behavior === "transient" || this._pressed === "false") { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.valueActive)); + } + else { + this._element.firstChild.data = this._convertValue(this.valueActive); + } + } + else if (this._pressed === "true" && this.pressedValueActive) { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.pressedValueActive)); + } + else { + this._element.firstChild.data = this._convertValue(this.pressedValueActive); + } + } + else if (this._pressed === "mixed" && this.mixedValueActive) { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.mixedValueActive)); + } + else { + this._element.firstChild.data = this._convertValue(this.mixedValueActive); + } + } + } + /* Right now, we don't handle active-pressed */ + else if (this._behavior === "transient") { + if (this._isElementInput) { + this._element.setAttribute("value", this._convertValue(this.value)); + } + else { + this._element.firstChild.data = this._convertValue(this.value); + } + } + } + + this._element.setAttribute("title", this.title || ""); + } + } + +}, module); +/** + @class module:montage/ui/button.ToggleButton +*/ +exports.ToggleButton = Montage.create(exports.Button,/** @lends module:montage/ui/button.ToggleButton# */ { +/** + Description TODO + @private +*/ + _behavior: { + value: "toggle" + } +}); diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css new file mode 100644 index 00000000..2a0c8c99