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 <valerio@motorola.com>
---
 .../montage/ui/bluemoon/tabs.reel/tabs.css         | 126 +++++++++++++++
 .../montage/ui/bluemoon/tabs.reel/tabs.html        |  66 ++++++++
 node_modules/montage/ui/bluemoon/tabs.reel/tabs.js | 180 +++++++++++++++++++++
 3 files changed, 372 insertions(+)
 create mode 100755 node_modules/montage/ui/bluemoon/tabs.reel/tabs.css
 create mode 100755 node_modules/montage/ui/bluemoon/tabs.reel/tabs.html
 create mode 100755 node_modules/montage/ui/bluemoon/tabs.reel/tabs.js

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

diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css
new file mode 100755
index 00000000..e3615a9b
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css
@@ -0,0 +1,126 @@
+/* <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-tabs {
+    position: relative;
+    display: inline-block;
+    border-radius: 26px;
+
+    background-color: #ccc;
+    -webkit-box-shadow: rgba(255, 255, 255, .7) 0 1px 0, inset rgba(0, 0, 0, .3) 0 1px 3px;
+}
+
+.montage-tabs-indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 48px;
+    margin: 2px;
+    padding: 0px 10px;
+    border-radius: 24px;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6));
+    -webkit-box-shadow: rgba(0, 0, 0, .3) 0 1px 3px;
+
+}
+
+.montage-tabs-list {
+    padding: 0;
+    margin: 0;
+    position: relative;
+}
+
+.montage-tabs-list li {
+    display: inline-block;
+    line-height: 46px;
+    margin: 3px;
+    padding: 0 10px;
+    border-radius: 26px;
+    font-family: 'AGBuchBQRegular', Helvetica, sans-serif;
+    font-size: 18px;
+    color: #555;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    cursor: pointer;
+}
+
+.montage-tabs-list li.selected {
+    color: #333;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6));
+    padding: 0 10px;
+    -webkit-box-shadow: rgba(0, 0, 0, .3) 0 1px 3px;
+}
+
+.montage-tabs-list li img {
+    margin-bottom: -2px; /* based on 16px icons */
+    opacity: .5;
+}
+
+.montage-tabs-list li.selected img {
+    opacity: 1;
+}
+
+.montage-tabs-list li span {
+    margin: 0;
+    padding: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* states */
+
+.montage-tabs-list li.pressed {
+    background-color: #aaa;
+    -webkit-box-shadow: rgba(255, 255, 255, .2) 0 1px 0, inset rgba(0, 0, 0, .1) 0 2px 5px;
+    -webkit-transition: background-color .15s ease-out;
+}
+
+/* ----------------------- Small ----------------------- */
+
+/* tab width: 70px */
+
+.montage-tabs.small .montage-tabs-indicator {
+    height: 27px;
+}
+
+.montage-tabs.small .montage-tabs-list li {
+    padding: 0 10px;
+    line-height: 25px;
+
+    font-size: 12px;
+}
+
+/* ----------------------- Dark theme ----------------------- */
+
+.montage-tabs.dark {
+    background-color: #404040;
+    -webkit-box-shadow: rgba(255, 255, 255, .25) 0 1px 0, inset rgba(0, 0, 0, .3) 0 1px 3px;
+}
+
+.montage-tabs.dark .montage-tabs-indicator {
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #767676), color-stop(100%, #5c5c5c));
+
+}
+
+.montage-tabs.dark .montage-tabs-list li {
+    color: #bbb;
+}
+
+.montage-tabs.dark .montage-tabs-list li.selected {
+    color: #333;
+}
+
+/* states */
+
+.montage-tabs.dark .montage-tabs-list li.pressed {
+    background-color: #333;
+    -webkit-box-shadow: rgba(255, 255, 255, .05) 0 1px 0, inset rgba(0, 0, 0, .1) 0 2px 5px;
+}
diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html
new file mode 100755
index 00000000..9beda2b0
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html
@@ -0,0 +1,66 @@
+<!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>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="tabs.css">
+    <script type="text/montage-serialization">
+{
+    "navController": {
+        "prototype": "ui/controller/array-controller",
+        "properties": {
+            "selectObjectsOnAddition": true,
+            "automaticallyOrganizeObjects": true
+        },
+        "bindings": {
+            "content": {"<-": "@owner.tabs"}
+        }
+    },
+
+    "repetition1": {
+        "prototype": "ui/repetition.reel",
+        "properties": {
+            "element": {
+                "#": "tab-list"
+            },
+            "isSelectionEnabled": true,
+            "contentController": {"@": "navController"}
+        }
+    },
+
+    "owner": {
+        "prototype": "ui/tabs.reel",
+        "properties": {
+            "element": {
+                "#": "tabs-nav"
+            },
+            "navController": {
+                "@": "navController"
+            },
+            "_repetition": {
+                "@": "repetition1"
+            },
+            "_indicator": {
+                "#": "montage-tabs-indicator"
+            }
+        },
+        "bindings": {
+            "selectedTabs": {"<-": "@navController.selectedObjects"}
+        }
+    }
+}
+    </script>
+</head>
+<body>
+    <div data-montage-id='tabs-nav' class='montage-tabs montage-container'>
+        <div data-montage-id="montage-tabs-indicator" class="montage-tabs-indicator" style="display: none;"></div>
+        <ul data-montage-id="tab-list" class='montage-tabs-list montage-clearfix'>
+            <li></li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js
new file mode 100755
index 00000000..4836e455
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js
@@ -0,0 +1,180 @@
+/* <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/tabs.reel"
+    @requires montage/core/core
+    @requires montage/ui/component
+    @requires "montage/ui/repetition.reel"
+    @requires "montage/ui/substitution.reel"
+    @requires "montage/ui/dynamic-text.reel"
+    @requires "montage/ui/image.reel"
+    @requires montage/core/uuid
+*/
+var Montage = require("montage").Montage,
+    Component = require("ui/component").Component,
+    Repetition = require("ui/repetition.reel").Repetition,
+    Substitution = require("ui/substitution.reel").Substitution,
+    DynamicText = require("ui/dynamic-text.reel").DynamicText,
+    Image = require("ui/image.reel").Image,
+    Uuid = require("core/uuid").Uuid;
+
+/**
+    @class module:"montage/ui/tabs.reel".Tabs
+*/
+
+var Tabs = exports.Tabs = Montage.create(Component, /** @lends module:"montage/ui/tabs.reel".Tabs# */ {
+
+    _repetition: {
+        value: null,
+        serializable: true
+    },
+
+    _indicator: {
+        value: null,
+        serializable: true
+    },
+/**
+        Description TODO
+        @type {Property}
+        @default {Array} []
+    */
+    tabs: {
+        distinct: true,
+        serializable: true,
+        value: []
+    },
+
+    navController: {
+        value: null,
+        serializable: true
+    },
+    // optional property. If provided, this will result in wiring tab clicks to switching components in content
+    /**
+        Description TODO
+        @type {Property}
+        @default null
+    */
+    content: {
+        enumerable: false,
+        serializable: true,
+        value: null
+    },
+
+    // @private -
+    _selectedTabs: {value: null},
+    selectedTabs: {
+        get: function() {
+            return this._selectedTabs;
+        },
+        set: function(arr) {
+            if(arr && arr.length > 0) {
+                this._selectedTabs = arr;
+                this.selectedTab = arr[0];
+            }
+        }
+    },
+
+    // selectedTabValue is the value of the Tab, selectedTab returns the object representing the tab
+
+    _selectedTabValue: {value: null},
+    selectedTabValue: {
+        get: function() {
+            return this._selectedTabValue;
+        },
+        set: function(value) {
+            this._selectedTabValue = value;
+            if(this.navController) {
+                var index = this._indexOf(value);
+                this.navController.selectedIndexes = [index];
+            }
+        },
+        serializable: true
+    },
+
+
+    _selectedTab: {value: null},
+    selectedTab: {
+        enumerable: false,
+        get: function() {
+            return this._selectedTab;
+        },
+        set: function(value) {
+            if(value && value !== this._selectedTab) {
+                this._selectedTab = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _indexOf: {
+        value: function(value) {
+            var index = 0;
+            // get the index of the this value element in the tabs array
+            var i = 0, len = this.tabs.length;
+            for (; i < len; i++) {
+                if (this.tabs[i].value === value) {
+                    index = i;
+                }
+            }
+            return index;
+
+        }
+    },
+
+    propertyChangeBindingListener: {
+        value: function(type, listener, useCapture, atSignIndex, bindingOrigin, bindingPropertyPath, bindingDescriptor) {
+            // kishore: same as in list.js
+            if (bindingDescriptor.boundObjectPropertyPath.match(/objectAtCurrentIteration/)) {
+                if (this._repetition) {
+                    bindingDescriptor.boundObject = this._repetition;
+                    return this._repetition.propertyChangeBindingListener.apply(this._repetition, arguments);
+                } else {
+                    return null;
+                }
+            } else {
+                return Object.prototype.propertyChangeBindingListener.apply(this, arguments);
+            }
+        }
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            this._orphanedChildren = this.childComponents;
+            this.childComponents = null;
+        }
+    },
+
+    templateDidLoad: {
+        value: function() {
+            var orphanedFragment,
+                currentContentRange = this.element.ownerDocument.createRange();
+            currentContentRange.selectNodeContents(this.element);
+            orphanedFragment = currentContentRange.extractContents();
+
+            this._repetition.element.querySelector('li').appendChild(orphanedFragment);
+            this._repetition.childComponents = this._orphanedChildren;
+            this._repetition.needsDraw = true;
+
+            if(this.content) {
+                // substitution
+                Object.defineBinding(this.content, "switchValue", {
+                    boundObject: this,
+                    boundObjectPropertyPath: 'selectedTab.value'
+                });
+            }
+            var index = (this.selectedTabValue ? this._indexOf(this.selectedTabValue) : 0);
+            this.navController.selectedIndexes = [index];
+
+        }
+    },
+
+    draw: {
+        value: function() {
+            //console.log("draw current tab = " + value);
+        }
+    }
+
+});
-- 
cgit v1.2.3