From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- node_modules/montage/ui/application.js | 248 ++++ .../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 | 741 ++++++++++ node_modules/montage/ui/checkbox.reel/checkbox.css | 116 ++ .../montage/ui/checkbox.reel/checkbox.html | 14 + node_modules/montage/ui/checkbox.reel/checkbox.js | 452 ++++++ .../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 + .../ui/component-group.reel/component-group.js | 33 + .../component-placeholder.js | 146 ++ node_modules/montage/ui/component.js | 1527 ++++++++++++++++++++ .../montage/ui/condition.reel/condition.js | 149 ++ .../montage/ui/controller/array-controller.js | 796 ++++++++++ .../montage/ui/controller/media-controller.js | 698 +++++++++ .../montage/ui/controller/object-controller.js | 62 + .../ui/controller/paged-array-controller.js | 260 ++++ node_modules/montage/ui/dom.js | 268 ++++ .../montage/ui/dynamic-text.reel/dynamic-text.js | 95 ++ node_modules/montage/ui/editable-text.js | 324 +++++ .../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 | 115 ++ node_modules/montage/ui/flow-path-lerp.js | 112 ++ node_modules/montage/ui/flow-path-linear.js | 83 ++ node_modules/montage/ui/flow-path-sigmoid.js | 148 ++ node_modules/montage/ui/flow-path.js | 215 +++ node_modules/montage/ui/flow.reel/flow.html | 60 + node_modules/montage/ui/flow.reel/flow.js | 348 +++++ 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 | 56 + node_modules/montage/ui/list.reel/list.js | 272 ++++ node_modules/montage/ui/loader.reel/loader.js | 472 ++++++ .../ui/loading-panel.reel/loading-panel.css | 37 + .../ui/loading-panel.reel/loading-panel.html | 89 ++ .../montage/ui/loading-panel.reel/loading-panel.js | 38 + node_modules/montage/ui/loading.reel/loading-0.svg | 3 + node_modules/montage/ui/loading.reel/loading-1.svg | 3 + node_modules/montage/ui/loading.reel/loading-2.svg | 3 + node_modules/montage/ui/loading.reel/loading-3.svg | 3 + node_modules/montage/ui/loading.reel/loading-4.svg | 3 + node_modules/montage/ui/loading.reel/loading-5.svg | 3 + .../montage/ui/loading.reel/loading-bg.svg | 31 + node_modules/montage/ui/loading.reel/loading.css | 78 + node_modules/montage/ui/loading.reel/loading.html | 36 + node_modules/montage/ui/loading.reel/loading.js | 61 + .../ui/nearest-neighbor-component-search.js | 232 +++ .../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 | 67 + .../montage/ui/popup/alert.reel/alert.html | 120 ++ node_modules/montage/ui/popup/alert.reel/alert.js | 134 ++ .../montage/ui/popup/confirm.reel/confirm.css | 17 + .../montage/ui/popup/confirm.reel/confirm.html | 120 ++ .../montage/ui/popup/confirm.reel/confirm.js | 186 +++ .../montage/ui/popup/notifier.reel/notifier.css | 15 + .../montage/ui/popup/notifier.reel/notifier.html | 35 + .../montage/ui/popup/notifier.reel/notifier.js | 121 ++ node_modules/montage/ui/popup/popup.reel/popup.css | 70 + .../montage/ui/popup/popup.reel/popup.html | 54 + node_modules/montage/ui/popup/popup.reel/popup.js | 519 +++++++ node_modules/montage/ui/progress.reel/progress.css | 51 + .../montage/ui/progress.reel/progress.html | 32 + node_modules/montage/ui/progress.reel/progress.js | 140 ++ node_modules/montage/ui/progress.reel/rule.png | Bin 0 -> 956 bytes node_modules/montage/ui/progress.reel/scroll.png | Bin 0 -> 272 bytes .../montage/ui/repetition.reel/repetition.js | 1115 ++++++++++++++ .../montage/ui/scroll-bars.reel/scroll-bars.html | 117 ++ .../montage/ui/scroll-bars.reel/scroll-bars.js | 247 ++++ node_modules/montage/ui/scroll.js | 820 +++++++++++ .../montage/ui/scroller.reel/scroller.html | 55 + node_modules/montage/ui/scroller.reel/scroller.js | 268 ++++ .../montage/ui/scrollview.reel/scrollview.js | 1230 ++++++++++++++++ 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/slot.reel/slot.js | 302 ++++ .../montage/ui/substitution.reel/substitution.js | 91 ++ node_modules/montage/ui/tabs.reel/tabs.css | 126 ++ node_modules/montage/ui/tabs.reel/tabs.html | 80 + node_modules/montage/ui/tabs.reel/tabs.js | 177 +++ node_modules/montage/ui/template.js | 792 ++++++++++ node_modules/montage/ui/textarea.reel/textarea.css | 36 + .../montage/ui/textarea.reel/textarea.html | 15 + node_modules/montage/ui/textarea.reel/textarea.js | 29 + .../montage/ui/textfield.reel/textfield.css | 35 + .../montage/ui/textfield.reel/textfield.html | 16 + .../montage/ui/textfield.reel/textfield.js | 38 + 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 ++++++ .../video-player.reel/images/fullscreen-enter.png | Bin 0 -> 1178 bytes .../video-player.reel/images/fullscreen-exit.png | Bin 0 -> 1214 bytes .../montage/ui/video-player.reel/images/pause.png | Bin 0 -> 1040 bytes .../montage/ui/video-player.reel/images/play.png | Bin 0 -> 1375 bytes .../ui/video-player.reel/images/volume-down.png | Bin 0 -> 991 bytes .../ui/video-player.reel/images/volume-up.png | Bin 0 -> 1094 bytes .../montage/ui/video-player.reel/video-player.css | 313 ++++ .../montage/ui/video-player.reel/video-player.html | 371 +++++ .../montage/ui/video-player.reel/video-player.js | 368 +++++ 118 files changed, 21585 insertions(+) create mode 100755 node_modules/montage/ui/application.js create mode 100755 node_modules/montage/ui/button-group.reel/button-group.css create mode 100755 node_modules/montage/ui/button-group.reel/button-group.html create mode 100755 node_modules/montage/ui/button-group.reel/button-group.js create mode 100755 node_modules/montage/ui/button.reel/button.css create mode 100755 node_modules/montage/ui/button.reel/button.html create mode 100755 node_modules/montage/ui/button.reel/button.js create mode 100755 node_modules/montage/ui/checkbox.reel/checkbox.css create mode 100755 node_modules/montage/ui/checkbox.reel/checkbox.html create mode 100755 node_modules/montage/ui/checkbox.reel/checkbox.js create mode 100755 node_modules/montage/ui/checkbox.reel/checkmark-dark-disabled.svg create mode 100755 node_modules/montage/ui/checkbox.reel/checkmark-dark.svg create mode 100755 node_modules/montage/ui/checkbox.reel/checkmark-light-disabled.svg create mode 100755 node_modules/montage/ui/checkbox.reel/checkmark.svg create mode 100755 node_modules/montage/ui/component-group.reel/component-group.js create mode 100755 node_modules/montage/ui/component-placeholder.reel/component-placeholder.js create mode 100755 node_modules/montage/ui/component.js create mode 100755 node_modules/montage/ui/condition.reel/condition.js create mode 100755 node_modules/montage/ui/controller/array-controller.js create mode 100755 node_modules/montage/ui/controller/media-controller.js create mode 100755 node_modules/montage/ui/controller/object-controller.js create mode 100755 node_modules/montage/ui/controller/paged-array-controller.js create mode 100755 node_modules/montage/ui/dom.js create mode 100755 node_modules/montage/ui/dynamic-text.reel/dynamic-text.js create mode 100755 node_modules/montage/ui/editable-text.js create mode 100644 node_modules/montage/ui/flow-controller.reel/flow-controller.html create mode 100644 node_modules/montage/ui/flow-controller.reel/flow-controller.js create mode 100644 node_modules/montage/ui/flow-offset.js create mode 100644 node_modules/montage/ui/flow-path-cubic.js create mode 100644 node_modules/montage/ui/flow-path-lerp.js create mode 100644 node_modules/montage/ui/flow-path-linear.js create mode 100644 node_modules/montage/ui/flow-path-sigmoid.js create mode 100644 node_modules/montage/ui/flow-path.js create mode 100644 node_modules/montage/ui/flow.reel/flow.html create mode 100644 node_modules/montage/ui/flow.reel/flow.js create mode 100644 node_modules/montage/ui/hottext.reel/hottext.css create mode 100644 node_modules/montage/ui/hottext.reel/hottext.html create mode 100644 node_modules/montage/ui/hottext.reel/hottext.js create mode 100644 node_modules/montage/ui/hottextunit.reel/hottextunit.css create mode 100644 node_modules/montage/ui/hottextunit.reel/hottextunit.html create mode 100644 node_modules/montage/ui/hottextunit.reel/hottextunit.js create mode 100644 node_modules/montage/ui/image.reel/image.js create mode 100644 node_modules/montage/ui/image2.reel/image2.html create mode 100644 node_modules/montage/ui/image2.reel/image2.js create mode 100644 node_modules/montage/ui/image3d.reel/image3d.html create mode 100644 node_modules/montage/ui/image3d.reel/image3d.js create mode 100755 node_modules/montage/ui/list.reel/list.html create mode 100755 node_modules/montage/ui/list.reel/list.js create mode 100755 node_modules/montage/ui/loader.reel/loader.js create mode 100755 node_modules/montage/ui/loading-panel.reel/loading-panel.css create mode 100755 node_modules/montage/ui/loading-panel.reel/loading-panel.html create mode 100755 node_modules/montage/ui/loading-panel.reel/loading-panel.js create mode 100755 node_modules/montage/ui/loading.reel/loading-0.svg create mode 100755 node_modules/montage/ui/loading.reel/loading-1.svg create mode 100755 node_modules/montage/ui/loading.reel/loading-2.svg create mode 100755 node_modules/montage/ui/loading.reel/loading-3.svg create mode 100755 node_modules/montage/ui/loading.reel/loading-4.svg create mode 100755 node_modules/montage/ui/loading.reel/loading-5.svg create mode 100755 node_modules/montage/ui/loading.reel/loading-bg.svg create mode 100755 node_modules/montage/ui/loading.reel/loading.css create mode 100755 node_modules/montage/ui/loading.reel/loading.html create mode 100755 node_modules/montage/ui/loading.reel/loading.js create mode 100644 node_modules/montage/ui/nearest-neighbor-component-search.js create mode 100755 node_modules/montage/ui/photo-editor.reel/photo-editor.css create mode 100755 node_modules/montage/ui/photo-editor.reel/photo-editor.html create mode 100755 node_modules/montage/ui/photo-editor.reel/photo-editor.js create mode 100755 node_modules/montage/ui/popup/alert.reel/alert.css create mode 100755 node_modules/montage/ui/popup/alert.reel/alert.html create mode 100755 node_modules/montage/ui/popup/alert.reel/alert.js create mode 100755 node_modules/montage/ui/popup/confirm.reel/confirm.css create mode 100755 node_modules/montage/ui/popup/confirm.reel/confirm.html create mode 100755 node_modules/montage/ui/popup/confirm.reel/confirm.js create mode 100755 node_modules/montage/ui/popup/notifier.reel/notifier.css create mode 100755 node_modules/montage/ui/popup/notifier.reel/notifier.html create mode 100755 node_modules/montage/ui/popup/notifier.reel/notifier.js create mode 100755 node_modules/montage/ui/popup/popup.reel/popup.css create mode 100755 node_modules/montage/ui/popup/popup.reel/popup.html create mode 100755 node_modules/montage/ui/popup/popup.reel/popup.js create mode 100755 node_modules/montage/ui/progress.reel/progress.css create mode 100755 node_modules/montage/ui/progress.reel/progress.html create mode 100755 node_modules/montage/ui/progress.reel/progress.js create mode 100755 node_modules/montage/ui/progress.reel/rule.png create mode 100755 node_modules/montage/ui/progress.reel/scroll.png create mode 100755 node_modules/montage/ui/repetition.reel/repetition.js create mode 100644 node_modules/montage/ui/scroll-bars.reel/scroll-bars.html create mode 100644 node_modules/montage/ui/scroll-bars.reel/scroll-bars.js create mode 100755 node_modules/montage/ui/scroll.js create mode 100644 node_modules/montage/ui/scroller.reel/scroller.html create mode 100644 node_modules/montage/ui/scroller.reel/scroller.js create mode 100755 node_modules/montage/ui/scrollview.reel/scrollview.js create mode 100644 node_modules/montage/ui/slider-base.js create mode 100755 node_modules/montage/ui/slider.reel/slider.css create mode 100755 node_modules/montage/ui/slider.reel/slider.html create mode 100755 node_modules/montage/ui/slider.reel/slider.js create mode 100755 node_modules/montage/ui/slot.reel/slot.js create mode 100755 node_modules/montage/ui/substitution.reel/substitution.js create mode 100755 node_modules/montage/ui/tabs.reel/tabs.css create mode 100755 node_modules/montage/ui/tabs.reel/tabs.html create mode 100755 node_modules/montage/ui/tabs.reel/tabs.js create mode 100755 node_modules/montage/ui/template.js create mode 100755 node_modules/montage/ui/textarea.reel/textarea.css create mode 100755 node_modules/montage/ui/textarea.reel/textarea.html create mode 100755 node_modules/montage/ui/textarea.reel/textarea.js create mode 100755 node_modules/montage/ui/textfield.reel/textfield.css create mode 100755 node_modules/montage/ui/textfield.reel/textfield.html create mode 100755 node_modules/montage/ui/textfield.reel/textfield.js create mode 100755 node_modules/montage/ui/toggle.reel/toggle.css create mode 100755 node_modules/montage/ui/toggle.reel/toggle.html create mode 100755 node_modules/montage/ui/toggle.reel/toggle.js create mode 100755 node_modules/montage/ui/video-player.reel/images/fullscreen-enter.png create mode 100755 node_modules/montage/ui/video-player.reel/images/fullscreen-exit.png create mode 100755 node_modules/montage/ui/video-player.reel/images/pause.png create mode 100755 node_modules/montage/ui/video-player.reel/images/play.png create mode 100755 node_modules/montage/ui/video-player.reel/images/volume-down.png create mode 100755 node_modules/montage/ui/video-player.reel/images/volume-up.png create mode 100755 node_modules/montage/ui/video-player.reel/video-player.css create mode 100755 node_modules/montage/ui/video-player.reel/video-player.html create mode 100755 node_modules/montage/ui/video-player.reel/video-player.js (limited to 'node_modules/montage/ui') diff --git a/node_modules/montage/ui/application.js b/node_modules/montage/ui/application.js new file mode 100755 index 00000000..21449b8d --- /dev/null +++ b/node_modules/montage/ui/application.js @@ -0,0 +1,248 @@ +/* + 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/application + @require montage/core/event/event-manager + @require montage/ui/template +*/ + +var Montage = require("core/core").Montage, + EventManager = require("core/event/event-manager").EventManager, + Template = require("ui/template").Template, + Component = require("ui/component").Component, + Slot; + + require("ui/dom"); + +/** + This module defines the {@link module:ui/application.Application} prototype. + @module ui/application + @requires event/event-manager + @requires template + @requires ui/popup/popup + @requires ui/popup/alert + @requires ui/popup/confirm + @requires ui/loading + @requires ui/popup/growl + @requires ui/slot + */ + +/** + The Application object is responsible for loading its component tree. TODO finish description + @class module:montage/ui/application.Application + @extends module:montage/core/core.Montage + */ +var Application = exports.Application = Montage.create(Montage, /** @lends montage/ui/application.Application# */ { + + /** + Provides a reference to the Montage event manager used in the application. + @type {module:montage/core/event/event-manager.EventManager} + */ + eventManager: { + value: null + }, + + /** + Returns the event manager for the specified window object. + @function + @param {Property} aWindow The browser window whose event manager object should be returned. + @returns aWindow.defaultEventMananger + */ + eventManagerForWindow: { + value: function(aWindow) { + return aWindow.defaultEventMananger; + } + }, + + /** + Contains the window associated with the document. + @type {Property} + @default document.defaultView + */ + focusWindow: { + value: document.defaultView + }, + + /** + An array of the windows associated with the application. + @type {Array} + @default {Array} [] + */ + attachedWindows: { + value: [] + }, + + /** + Opens a URL in a new browser window, and registers the window with the Montage event manager.
+ The document URL must be in the same domain as the calling script. + @function + @param {URL} url The URL to open in the new window. + @returns newWindow + @example + var app = document.application; + app.openWindow("docs/help.html"); + */ + openWindow: { + value: function(url) { + var newWindow = window.open(url); + + // Make the required modules available to the new window + newWindow.require = require; + newWindow.document.application = this; + + this.eventManager.registerWindow(newWindow); + this.attachedWindows.push(newWindow); + return newWindow; + } + }, + + /** + Registers an event listener on the application instance. + @function + @param {Property} type The event type to listen for. + @param {Object} listener A listener object that defines an event handler function, or a function to handle the event. + @param {Function} useCapture If true, the listener will only be notified during the event's capture phase.
+ If false (the default) the listener will be notified during the event's bubble phase. + */ + addEventListener: { + value: function(type, listener, useCapture) { + Object.getPrototypeOf(Application)["addEventListener"].call(this, type, listener, useCapture); + } + }, + + /** + Removes a previously registered event listener on the application instance. + @function + @param {Property} type The event type that was originally registered. + @param {Object} listener The listener object or function that was registered to handle the event. + @param {Function} useCapture TODO + */ + removeEventListener: { + value: function(type, listener, useCapture) { + Object.getPrototypeOf(Application)["addEventListener"].call(this, type, listener, useCapture); + } + }, + + /** + 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. + @type {Object} + @default null + */ + delegate: { + value: null + }, + + /** + @private + */ + _template: { + value: null + }, + + /** + Description TODO + @function + @param {Function} callback A function to invoke after the method has completed. + */ + 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; + } + } + + self._template = template; + components = self.components || []; + for (var i = 0; (component = components[i]); i++) { + component.needsDraw = true; + } + + if (callback) { + callback(self); + } + }); + } + }, + + // @private + _alertPopup: {value: null, enumerable: false}, + _confirmPopup: {value: null, enumerable: false}, + _notifyPopup: {value: null, enumerable: false}, + + + getPopupSlot: { + value: function(type, content, callback) { + + var self = this; + require.async("ui/slot.reel/slot", function(exports) { + Slot = Slot || exports.Slot; + + type = type || "custom"; + // type = custom|alert|confirm + 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'; + + switch (type) { + case "alert": + zIndex = 9004; + break; + case "confirm": + zIndex = 9003; + break; + case "loading": + zIndex = 9002; + break; + default: + zIndex = 9001; + break; + } + slotEl.style['z-index'] = zIndex; + + document.body.appendChild(slotEl); + popupSlot = Slot.create(); + popupSlot.element = slotEl; + self.popupSlots[type] = popupSlot; + } + + popupSlot.content = content; + callback.call(this, popupSlot); + + }); + } + } + +}); diff --git a/node_modules/montage/ui/button-group.reel/button-group.css b/node_modules/montage/ui/button-group.reel/button-group.css new file mode 100755 index 00000000..9491f3db --- /dev/null +++ b/node_modules/montage/ui/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/button-group.reel/button-group.html b/node_modules/montage/ui/button-group.reel/button-group.html new file mode 100755 index 00000000..7991ed76 --- /dev/null +++ b/node_modules/montage/ui/button-group.reel/button-group.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + diff --git a/node_modules/montage/ui/button-group.reel/button-group.js b/node_modules/montage/ui/button-group.reel/button-group.js new file mode 100755 index 00000000..784d3200 --- /dev/null +++ b/node_modules/montage/ui/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/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/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/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/button.reel/button.css b/node_modules/montage/ui/button.reel/button.css new file mode 100755 index 00000000..acf938cc --- /dev/null +++ b/node_modules/montage/ui/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/button.reel/button.html b/node_modules/montage/ui/button.reel/button.html new file mode 100755 index 00000000..1b35e545 --- /dev/null +++ b/node_modules/montage/ui/button.reel/button.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js new file mode 100755 index 00000000..60bca109 --- /dev/null +++ b/node_modules/montage/ui/button.reel/button.js @@ -0,0 +1,741 @@ +/* + 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/button.reel" + @requires montage/core/core + @requires montage/ui/component +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component; + +/** + @class module:"montage/ui/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/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() { + + 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 { +