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 <valerio@motorola.com>
---
 .../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 +
 7 files changed, 606 insertions(+)
 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

(limited to 'node_modules/montage/ui/bluemoon/checkbox.reel')

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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+.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 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+<head>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="checkbox.css">
+</head>
+<body>
+</body>
+</html>
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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/**
+	@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 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path d="M2.5,13 L4.5,11 L9.5,16 L23.5,2 L25.5,4 L9.5,20 z" fill="#555" stroke="#333"/>
+</svg>
\ 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 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path d="M0,13.5 L4.5,9 L9.5,14 L23.5,0 L28,4.5 L9.5,23 z" fill="#272727"/>
+<path d="M2,13.5 L4.5,11 L9.5,16 L23.5,2 L26,4.5 L9.5,21 z" fill="#0E8FBE"/>
+<path d="M2.5,13 L4.5,11 L9.5,16 L23.5,2 L25.5,4 L9.5,20 z" fill="#19BFFB"/>
+</svg>
\ 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 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path d="M2.5,13 L4.5,11 L9.5,16 L23.5,2 L25.5,4 L9.5,20 z" fill="#e6e6e6" stroke="#ADADAD"/>
+</svg>
\ 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 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path d="M0,13.5 L4.5,9 L9.5,14 L23.5,0 L28,4.5 L9.5,23 z" fill="#6E7D83"/>
+<path d="M2,13.5 L4.5,11 L9.5,16 L23.5,2 L26,4.5 L9.5,21 z" fill="#0BA6DF"/>
+<path d="M2.5,13 L4.5,11 L9.5,16 L23.5,2 L25.5,4 L9.5,20 z" fill="#26BEF4"/>
+</svg>
\ No newline at end of file
-- 
cgit v1.2.3