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 --- .../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 ++++++++++++ 30 files changed, 3905 insertions(+) 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 (limited to 'node_modules/montage/ui/bluemoon') 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 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css @@ -0,0 +1,116 @@ +/* + 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-checkbox { + display: inline-block; + width: 53px; + height: 53px; +} + +.montage-checkbox .background { + display: block; + position: absolute; + width: 53px; + height: 53px; + border-radius: 27px; + background: #CCC; + -webkit-box-shadow: inset 0 1px 2px #8D8D8D, 0 2px 2px rgba(255,255,255,.4), 0 -2px 2px rgba(0,0,0,.1); + -webkit-transform: scale3d(.5283, .5283, 1); +} + +.montage-checkbox .button { + display: block; + position: absolute; + width: 49px; + height: 49px; + border-radius: 25px; + background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#E6E6E6)); + -webkit-transform: translate3d(2px, 2px, 0) scale3d(.5283, .5283, 1); +} + +.montage-checkbox .checkmark { + display: block; + position: absolute; + width: 63px; + height: 53px; + background: url(checkmark.svg) no-repeat 10px 0; + background-size: 53px 53px; + -webkit-transform-origin: 26.5px 26.5px; + -webkit-transform: scale3d(.5283, .5283, 1); + opacity: 0; +} + +.montage-checkbox.active .background, .montage-checkbox.active .button, .montage-checkbox.active .checkmark{ + -webkit-transition-duration: 150ms; + -webkit-transition-property: all; +} + +.montage-checkbox .checkmark{ + -webkit-transition-duration: 360ms; +} + +.montage-checkbox input[type=checkbox] { + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; + display: inline-block; + position: absolute; + border: 0; + border-radius: 27px; + margin: 0; + padding: 0; + width: 53px; + height: 53px; + background: transparent; +} + +.montage-checkbox.active .background, +.montage-checkbox.active .button, +.montage-checkbox.active .checkmark { + -webkit-transform: scale3d(1, 1, 1); +} + +.montage-checkbox.active .button { + opacity: 0; +} + +.montage-checkbox.checked .checkmark { + opacity: 1; +} + +.montage-checkbox.dark .checkmark { + background-image: url(checkmark-dark.svg); +} + +.montage-checkbox.dark .button { + background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#5c5c5c)); +} + +.montage-checkbox.dark .background { + background: #404040; + -webkit-box-shadow: inset 0 1px 2px #333, 0 2px 2px rgba(255,255,255,.2), 0 -2px 2px rgba(0,0,0,.1); +} + +.montage-checkbox.disabled .background { + margin: 12px 0 0 13px; + width: 26px; + height: 26px; + background: transparent; + -webkit-box-shadow: none; + border: 1px solid #000; + -webkit-transform: none; + opacity: .26; +} + +.montage-checkbox.disabled .button { + display: none; +} + +.montage-checkbox.disabled .checkmark { + background-image: url(checkmark-light-disabled.svg); +} + +.montage-checkbox.dark.disabled .checkmark { + background-image: url(checkmark-dark-disabled.svg); +} diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html new file mode 100644 index 00000000..9bbec1b7 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js new file mode 100644 index 00000000..58e5154d --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js @@ -0,0 +1,452 @@ +/* + 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/checkbox.reel" + @requires montage/core/core + @requires montage/ui/component +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component; +/** + @class module:"montage/ui/bluemoon/checkbox.reel".Checkbox + @extends module:montage/ui/component.Component +*/ +exports.Checkbox = Montage.create(Component,/** @lends "module:montage/ui/bluemoon/checkbox.reel".Checkbox# */ { + // Configuration + /** + The distance (squared) beyond which a touch will be considered. + @type {Number} + @default 256 + */ + touchMovementThreshold: { + enumerable: false, + value: 256 + }, + // Elements +/** + Description TODO + @private +*/ + _nativeCheckbox: { + enumerable: false, + value: null + }, +/** + Description TODO + @private +*/ + _background: { + enumerable: false, + value: null + }, +/** + Description TODO + @private +*/ + _button: { + enumerable: false, + value: null + }, +/** + Description TODO + @private +*/ + _checkmark: { + enumerable: false, + value: null + }, + // Event Handling APIs +/** + Description TODO + @function + @param {Event Handler} event handleMousedown + */ + handleMousedown: { + enumerable: false, + value: function (event) { + event.preventDefault(); + + if (!this._disabled) { + this._acknowledgeIntent("mouse"); + } + } + }, +/** + Description TODO + @function + @param {Event Handler} event handleMouseup + */ + handleMouseup: { + value: function(event) { + this._interpretInteraction(event); + } + }, +/** + Description TODO + @private +*/ + _touchX: { + enumerable: false, + value: null + }, +/** + Description TODO + @private +*/ + _touchY: { + enumerable: false, + value: null + }, +/** + Description TODO + @function + @param {Event Handler} event handleTouchstart + */ + handleTouchstart: { + enumerable: false, + value: function (event) { + + if (this._disabled || this._observedPointer !== null) { + return; + } + + event.preventDefault(); + + this._acknowledgeIntent(event.targetTouches[0].identifier); + this._touchX = event.targetTouches[0].clientX; + this._touchY = event.targetTouches[0].clientY; + } + }, +/** + Description TODO + @function + @param {Event Handler} event handleTouchmove + */ + handleTouchmove: { + enumerable: false, + value: function (event) { + var i = 0, length = event.touches.length, xDistance, yDistance; + + while ((i < length) && (event.touches[i].identifier !== this._observedPointer)) { + i++; + } + + if (i < length) { + xDistance = this._touchX - event.touches[i].clientX; + yDistance = this._touchY - event.touches[i].clientY; + + var squaredDist = (xDistance * xDistance) + (yDistance * yDistance); + + if (squaredDist > this.touchMovementThreshold) { + event.preventDefault(); + + this._releaseInterest(); + + this.active = false; + this.needsDraw = true; + } + } + } + }, +/** + Description TODO + @function + @param {Event Handler} event handleTouchend + */ + handleTouchend: { + enumerable: false, + 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 Handler} event handleTouchcancel + */ + 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; + this.needsDraw = true; + + return; + } + } + + } + }, + + // Internal state management +/** + Description TODO + @private +*/ + _active: { + enumerable: false, + value: false + }, +/** + Description TODO + @type {Function} + @default {Boolean} false + */ + active: { + get: function() { + return this._active; + }, + set: function(value) { + if (value === this._active) { + return; + } + + this._active = value; + 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 === this._disabled) { + return; + } + + this._disabled = value; + this.needsDraw = true; + } + }, +/** + Description TODO + @private +*/ + _checked: { + enumerable: false, + value: false + }, +/** + Description TODO + @type {Function} + @default {Boolean} false + */ + checked: { + get: function () { + return this._checked; + }, + set: function (value) { + if (value === this._checked) { + return; + } + + this._checked = value; + this.needsDraw = true; + } + }, +/** + Description TODO + @private +*/ + _observedPointer: { + enumerable: true, + value: null + }, +/** + Description TODO + @function + @param {Pointer} pointer TODO + @param {Component} demandingComponent TODO + @returns {Boolean} true + */ + surrenderPointer: { + value: function(pointer, demandingComponent) { + + this._releaseInterest(); + + this.active = false; + return true; + } + }, +/** + Description TODO + @private +*/ + _acknowledgeIntent: { + value: function(pointer) { + + if (!this.eventManager.claimPointer(pointer, this)) { + return; + } + + this._observedPointer = pointer; + + + if (window.Touch) { + document.addEventListener("touchmove", this); + document.addEventListener("touchend", this); + document.addEventListener("touchcancel", this); + } else { + document.addEventListener("mouseup", this, false); + } + + 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.checked = !this.checked; + } + + 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 + */ + prepareForActivationEvents: { + enumerable: false, + value: function() { + if (window.Touch) { + this.element.addEventListener("touchstart", this, false); + } else { + this.element.addEventListener("mousedown", this, false); + } + } + }, +/** + Description TODO + @function + */ + prepareForDraw: { + enumerable: false, + value: function () { + this.element.type = "checkbox"; + + var checkbox = document.createElement("span"); + checkbox.className = this.element.className; + checkbox.classList.add("montage-checkbox"); + + this._background = document.createElement("span"); + this._background.classList.add("background"); + + this._button = document.createElement("span"); + this._button.classList.add("button"); + + this._checkmark = document.createElement("span"); + this._checkmark.classList.add("checkmark"); + + this.element.parentNode.insertBefore(checkbox, this.element.nextSibling); + + var checkboxFragment = document.createDocumentFragment(); + checkboxFragment.appendChild(this._background); + checkboxFragment.appendChild(this._button); + checkboxFragment.appendChild(this._checkmark); + checkboxFragment.appendChild(this.element); + + checkbox.appendChild(checkboxFragment); + + // Make sure this.element refers to the logical parent element of this component + this._nativeCheckbox = this.element; + this.element = checkbox; + } + }, +/** + Description TODO + @function + */ + draw: { + enumerable: false, + value: function() { + this._nativeCheckbox.disabled = this._disabled; + + var element = this.element; + + if (this.disabled) { + element.classList.add("disabled"); + } else { + element.classList.remove("disabled"); + } + + if (this.active) { + element.classList.add("active"); + } else { + element.classList.remove("active"); + } + + this._nativeCheckbox.checked = this.checked; + if (this.checked) { + element.classList.add("checked"); + } else { + element.classList.remove("checked"); + } + } + } +}); diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark-disabled.svg b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark-disabled.svg new file mode 100644 index 00000000..ade15990 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark-disabled.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark.svg b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark.svg new file mode 100644 index 00000000..e0c8fb32 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-light-disabled.svg b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-light-disabled.svg new file mode 100644 index 00000000..801640e0 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-light-disabled.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark.svg b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark.svg new file mode 100644 index 00000000..b822dcde --- /dev/null +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkmark.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.css b/node_modules/montage/ui/bluemoon/progress.reel/progress.css new file mode 100644 index 00000000..cf9e6543 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.css @@ -0,0 +1,51 @@ +/* + 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-progre