From 8fe92b94ce5e1e2857d088752d94e19db7e3d8a8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Sun, 17 Jun 2012 22:31:44 -0700 Subject: montage v11 merge into ninja Signed-off-by: Valerio Virgillito --- node_modules/montage/ui/button.reel/button.css | 55 +++ node_modules/montage/ui/button.reel/button.html | 14 + node_modules/montage/ui/button.reel/button.js | 457 +----------------------- 3 files changed, 77 insertions(+), 449 deletions(-) create mode 100644 node_modules/montage/ui/button.reel/button.css create mode 100644 node_modules/montage/ui/button.reel/button.html (limited to 'node_modules/montage/ui/button.reel') diff --git a/node_modules/montage/ui/button.reel/button.css b/node_modules/montage/ui/button.reel/button.css new file mode 100644 index 00000000..f0f3ad60 --- /dev/null +++ b/node_modules/montage/ui/button.reel/button.css @@ -0,0 +1,55 @@ +/* + 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 { + outline: none; + box-sizing: border-box; + font-size: 12px; + height: 2.5em; + min-width: 2.5em; + margin: 0 2px; + padding: 0 1em; + vertical-align: middle; + border-radius: 3px; + border: 1px solid #b3b3b3; + background-color: #f2f2f2; + cursor: pointer; +} + +/* States */ +.montage-button:hover { + background-color: #fff; + color: #000; +} + +.montage-button:active { + background-color: #e5e5e5; +} + +.montage-button:focus { + border-color: #7f7f7f; +} + + +/* ButtonGroup ------------------------------- */ + +.montage-buttonGroup { + padding-left: 5px; /* Add the negative margin back */ +} + +.montage-buttonGroup > .montage-button { + margin: 0; + border-radius: 0; + margin-left: -5px; /* Remove the space inbetween */ +} + +.montage-buttonGroup > .montage-button:first-child { + border-radius: 3px 0 0 3px; +} + +.montage-buttonGroup > .montage-button:last-child { + border-radius: 0 3px 3px 0; +} \ No newline at end of file diff --git a/node_modules/montage/ui/button.reel/button.html b/node_modules/montage/ui/button.reel/button.html new file mode 100644 index 00000000..662481ad --- /dev/null +++ b/node_modules/montage/ui/button.reel/button.html @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js index 91b6304d..46ffc3a2 100644 --- a/node_modules/montage/ui/button.reel/button.js +++ b/node_modules/montage/ui/button.reel/button.js @@ -3,463 +3,22 @@ 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. */ - /*global require, exports*/ - -/** - @module "montage/ui/button.reel" - @requires montage/core/core - @requires montage/ui/component - @requires montage/ui/native-control - @requires montage/ui/composer/press-composer -*/ +/*global require,exports */ var Montage = require("montage").Montage, Component = require("ui/component").Component, - NativeControl = require("ui/native-control").NativeControl, - PressComposer = require("ui/composer/press-composer").PressComposer; - -/** - Wraps a native <button> or <input[type="button"]> HTML element. The element's standard attributes are exposed as bindable properties. - @class module:"montage/ui/button.reel".Button - @extends module:montage/native-control.NativeControl - @example -JavaScript example -var b1 = Button.create(); -b1.element = document.querySelector("btnElement"); -b1.addEventListener("action", function(event) { - console.log("Got event 'action' event"); -}); - @example -Serialized example -{ - "aButton": { - "prototype": "ui/button.reel", - "properties": { - "element": {"#": "btnElement"} - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "appListener"} - } - ] - }, - "listener": { - "prototype": "appListener" - } -} -<button data-montage-id="btnElement"> -*/ -var Button = exports.Button = Montage.create(NativeControl, /** @lends module:"montage/ui/button.reel".Button# */ { - - _preventFocus: { - enumerable: false, - value: false - }, + NativeButton = require("ui/native/button.reel/button").Button; /** - Specifies whether the button should receive focus or not. - @type {boolean} - @default false - @event longpress -*/ - preventFocus: { - get: function () { - return this._preventFocus; - }, - set: function (value) { - if (value === true) { - this._preventFocus = true; - } else { - this._preventFocus = false; - } - } - }, - - -/** - Enables or disables the Button from user input. When this property is set to false, the "disabled" CSS style is applied to the button's DOM element during the next draw cycle. When set to true the "disabled" CSS class is removed from the element's class list. -*/ - //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; - } - }, - - /** - A Montage converter object used to convert or format the label displayed by the Button instance. When a new value is assigned to label, the converter object's convert() method is invoked, passing it the newly assigned label value. - @type {Property} - @default null - */ - converter: { - value: null - }, - - /** - Stores the node that contains this button's value. Only used for - non-`` elements. - @private - */ - _labelNode: {value:undefined, enumerable: false}, - - _label: { value: undefined, enumerable: false }, - - /** - The label for the button. In an <input> element this is taken from the element's value attribute. On any other element (including <button>) this is the first child node which is a text node. If one isn't found then it will be created. - - If the button has a non-null converter property, the converter object's convert() method is called on the value before being assigned to the button instance. - - @type {string} - @default undefined - */ - label: { - get: function() { - return this._label; - }, - set: function(value) { - if (value && value.length > 0 && this.converter) { - try { - value = this.converter.convert(value); - if (this.error) { - this.error = null; - } - } catch(e) { - // unable to convert - maybe error - this.error = e; - } - } - - this._label = value; - if (this._isInputElement) { - this._value = value; - } - - this.needsDraw = true; - } - }, - - /** - The amount of time in milliseconds the user must press and hold the button a hold event is dispatched. The default is 1 second. - @type {number} - @default 1000 - */ - holdThreshold: { - get: function() { - return this._pressComposer.longPressThreshold; - }, - set: function(value) { - this._pressComposer.longPressThreshold = value; - } - }, - - _pressComposer: { - enumberable: false, - value: null - }, - - _active: { - enumerable: false, - value: false - }, - - /** - This property is true when the button is being interacted with, either through mouse click or touch event, otherwise false. - @type {boolean} - @default false - */ - active: { - get: function() { - return this._active; - }, - set: function(value) { - this._active = value; - this.needsDraw = true; - } - }, - - // HTMLInputElement/HTMLButtonElement methods - - blur: { value: function() { this._element.blur(); } }, - focus: { value: function() { this._element.focus(); } }, - // click() deliberately omitted (it isn't available on