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 --- js/components/menu/menu-entry.reel/menu-entry.css | 64 +++++++++ js/components/menu/menu-entry.reel/menu-entry.html | 81 +++++++++++ js/components/menu/menu-entry.reel/menu-entry.js | 79 ++++++++++ js/components/menu/menu-item.reel/menu-item.css | 72 ++++++++++ js/components/menu/menu-item.reel/menu-item.html | 83 +++++++++++ js/components/menu/menu-item.reel/menu-item.js | 160 +++++++++++++++++++++ js/components/menu/menu.reel/menu.css | 14 ++ js/components/menu/menu.reel/menu.html | 89 ++++++++++++ js/components/menu/menu.reel/menu.js | 108 ++++++++++++++ 9 files changed, 750 insertions(+) create mode 100644 js/components/menu/menu-entry.reel/menu-entry.css create mode 100644 js/components/menu/menu-entry.reel/menu-entry.html create mode 100644 js/components/menu/menu-entry.reel/menu-entry.js create mode 100644 js/components/menu/menu-item.reel/menu-item.css create mode 100644 js/components/menu/menu-item.reel/menu-item.html create mode 100644 js/components/menu/menu-item.reel/menu-item.js create mode 100644 js/components/menu/menu.reel/menu.css create mode 100644 js/components/menu/menu.reel/menu.html create mode 100644 js/components/menu/menu.reel/menu.js (limited to 'js/components/menu') diff --git a/js/components/menu/menu-entry.reel/menu-entry.css b/js/components/menu/menu-entry.reel/menu-entry.css new file mode 100644 index 00000000..ea0fa6d1 --- /dev/null +++ b/js/components/menu/menu-entry.reel/menu-entry.css @@ -0,0 +1,64 @@ +/* + 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. + */ + +.topMenuItem { + float: left; + display: inline; +} + +.topMenuItem .menubg{ + color: #f7f7f7; +} + +.topMenuItem .menuName { + font-family: 'Droid Sans', sans-serif; + font-size: 10pt; + padding: 3px 12px 3px 8px; + text-shadow : 1px 1px 1px #000000; +} + +.menubg{ + display: inline; +} + +.menubg.checked .check { + opacity: 1; +} + +.selected { + background-color: #7F7F7F; +} + +.menu-label { + font-family: 'Droid Sans', sans-serif; + font-size: 10pt; + padding: 3px 12px 3px 8px; + text-shadow: 1px 1px 1px black; +} + +.subEntries{ + position: absolute; + z-index: 100000; + float:left; + font-family: 'Droid Sans', sans-serif !important; + color: #ffffff; + background: #494949; + border: 1px solid #292929; + border-radius: 8px; + padding: 8px 0px 8px 0px; + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); + white-space:nowrap; +} + +.menuItem { + font-size: 9pt; + padding: 4px 8px; + display: block; + float: none; + position: relative; + background: #474747; + color: white; +} diff --git a/js/components/menu/menu-entry.reel/menu-entry.html b/js/components/menu/menu-entry.reel/menu-entry.html new file mode 100644 index 00000000..bba5e65d --- /dev/null +++ b/js/components/menu/menu-entry.reel/menu-entry.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + +

+ +

+ + + diff --git a/js/components/menu/menu-entry.reel/menu-entry.js b/js/components/menu/menu-entry.reel/menu-entry.js new file mode 100644 index 00000000..57e6ec87 --- /dev/null +++ b/js/components/menu/menu-entry.reel/menu-entry.js @@ -0,0 +1,79 @@ +/* +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. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.MenuEntry = Montage.create(Component, { + topHeader: { value: null }, + topHeaderText: { value: null }, + + // Reference to the parent Menu component + _menu: { + value: null + }, + + data: { + value: null + }, + + select: { + value: function() { + this.element.classList.add("selected"); + this.subEntries.style.display = "block"; + } + }, + + deselect: { + value: function() { + this.element.classList.remove("selected"); + this.subEntries.style.display = "none"; + } + }, + + _menuIsActive: { + value: false + }, + + menuIsActive: { + get: function() { + return this._menuIsActive; + }, + set: function(value) { + if(value) this.topHeader.addEventListener("mouseover", this, false); + } + }, + + handleClick: { + value: function(event) { + this._menu.toggleActivation(this); + } + }, + + handleMouseover: { + value: function(event) { + this._menu.activeEntry = this; + } + }, + + prepareForDraw: { + value: function() { + + this.subEntries.style.display = "none"; + + this.topHeaderText.innerHTML = this.data.header; + + this.element.addEventListener("click", this, false); + + Object.defineBinding(this, "menuIsActive", { + boundObject: this._menu, + boundObjectPropertyPath: "active", + oneway: true + }); + + } + } +}); \ No newline at end of file diff --git a/js/components/menu/menu-item.reel/menu-item.css b/js/components/menu/menu-item.reel/menu-item.css new file mode 100644 index 00000000..e5ceda5c --- /dev/null +++ b/js/components/menu/menu-item.reel/menu-item.css @@ -0,0 +1,72 @@ +/* + 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. + */ + +.menuItem .menuName { + font-family: 'Droid Sans', sans-serif; + font-size: 10pt; + padding: 3px 12px 3px 8px; + text-shadow : 1px 1px 1px #000000; +} + +.menuItem:hover { + background-color: #7f7f7f; +} + +.menubg .subEntries { + top: 0%; + left: 100%; + width: auto; + white-space:nowrap; +} + +.itemSeparator:hover { + background-color: #474747; +} + +.separator{ + width:100%; + height:2px; + position: relative; + border: 1px groove #474747 ; + border-radius: 2px; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#474747), to(#cccccc)); + opacity: 0.5; +} + +.disabled { + opacity: 0.5; +} + +.disabled:hover { + background-color: #474747; +} + +.menubg .check { + float:left; + background-image: url(../../../../images/menu/checkmark.png); + background-repeat: no-repeat; + background-position: center; + width: 10px; + height: 15px; + opacity: 0; +} + +.menubg.submenu .rightArrow { + float: right; + background-image:url('../../../../images/menu/arrow.png'); + background-repeat: no-repeat; + background-position: center; + width: 10px; + height: 15px; + position: absolute; + right:4px; + top: 5px; + margin-left: 8px; +} + +.subEntries.subMenu .rightArrow { + opacity: 0; +} \ No newline at end of file diff --git a/js/components/menu/menu-item.reel/menu-item.html b/js/components/menu/menu-item.reel/menu-item.html new file mode 100644 index 00000000..d199a440 --- /dev/null +++ b/js/components/menu/menu-item.reel/menu-item.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + +

+ + + + + + +

+ + + diff --git a/js/components/menu/menu-item.reel/menu-item.js b/js/components/menu/menu-item.reel/menu-item.js new file mode 100644 index 00000000..64a89a6a --- /dev/null +++ b/js/components/menu/menu-item.reel/menu-item.js @@ -0,0 +1,160 @@ +/* +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. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.MenuItem = Montage.create(Component, { + + data: { + value: null + }, + + _enabled: { + value: null + }, + + enabled: { + get: function() { + return this._enabled; + }, + set: function(value) { + if(value !== this._enabled) { + this._enabled = value; + this.needsDraw = true; + } + } + }, + + _checked: { + value: null + }, + + checked: { + get: function() { + return this._checked; + }, + set: function(value) { + /* + if( Object.prototype.toString.call( value ) === '[object Array]' ) { + value = value.indexOf(this.data.displayText + "Panel") >= 0; + } + */ + + if(this._checked !== value) { + this._checked = value; + this.needsDraw = true; + } + } + }, + + submenu: { + value: false + }, + + subentries: { + value: [] + }, + + prepareForDraw: { + value: function() { + if(!this.data) return; + + if(this.data.separator) { + this.element.classList.add("itemSeparator"); + this.itemBackground.classList.remove("menubg"); + this.itemBackground.classList.add("separator"); + + return; + + } + + // Binding the checked to the assigned bound property + if(this.data.checked) { + Object.defineBinding(this, "checked", { + boundObject: this.application.ninja.appModel, + boundObjectPropertyPath: this.data.checked.boundProperty + }); + + } + + if(this.data.enabled.boundProperty) { + Object.defineBinding(this, "enabled", { + boundObject: this.application.ninja[this.data.enabled.boundObj], + boundObjectPropertyPath: this.data.enabled.boundProperty + }); + + } else { + this.enabled = this.data.enabled; + } + + if(this.data.submenu) { + this.submenu = true; + + this.subentries = this.data.entries; + + this.subMenu.classList.add("subMenu"); + this.element.addEventListener("mouseover", this, false); + this.element.addEventListener("mouseout", this, false); + + } + + + this.itemText.innerHTML = this.data.displayText; + this.element.addEventListener("mousedown", this, true); + } + }, + + draw: { + value: function() { + + if(this.enabled) { + this.element.classList.remove("disabled"); + } else { + this.element.classList.add("disabled"); + } + + if(this.checked) { + this.itemBackground.classList.add("checked"); + } else { + this.itemBackground.classList.remove("checked"); + } + + if(this.submenu) { + this.itemBackground.classList.add("submenu"); + } + } + }, + + captureMousedown: { + value: function(event) { + + if(this.data.radio && this.checked) return; + + if(this.enabled || !this.submenu) { + if(this.data.action) { + NJevent ( this.data.action ); + } else if(this.checked !== null) { + this.checked = !this.checked; + } + } + + } + }, + + handleMouseover: { + value: function() { + if(this.enabled) this.subMenu.style.display = "block"; + } + }, + + handleMouseout: { + value: function() { + this.subMenu.style.display = "none"; + } + } + +}); \ No newline at end of file diff --git a/js/components/menu/menu.reel/menu.css b/js/components/menu/menu.reel/menu.css new file mode 100644 index 00000000..557ffc71 --- /dev/null +++ b/js/components/menu/menu.reel/menu.css @@ -0,0 +1,14 @@ +/* + 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. + */ + +.horizontal-menu { + list-style: none; + margin: 0px; + padding: 5px; + float: left; + cursor: default; + display: block; +} \ No newline at end of file diff --git a/js/components/menu/menu.reel/menu.html b/js/components/menu/menu.reel/menu.html new file mode 100644 index 00000000..2cc6bf9b --- /dev/null +++ b/js/components/menu/menu.reel/menu.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + diff --git a/js/components/menu/menu.reel/menu.js b/js/components/menu/menu.reel/menu.js new file mode 100644 index 00000000..fb221640 --- /dev/null +++ b/js/components/menu/menu.reel/menu.js @@ -0,0 +1,108 @@ +/* +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. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.Menu = Montage.create(Component, { + + _active: { + value: false + }, + + active: { + get: function() { + return this._active; + }, + set: function(value) { + this._active = value; + } + }, + + _activeEntry: { + value: null + }, + + activeEntry: { + get: function() { + return this._activeEntry; + }, + set: function(value) { + if(this.active) { + + if(this._activeEntry) this._activeEntry.deselect(); + + this._activeEntry = value; + + this._activeEntry.select(); + + } + } + }, + + toggleActivation: { + value: function(item) { + if(this.active) { + this._activeEntry.deselect(); + this._activeEntry = null; + this.active = false; + this.element.ownerDocument.removeEventListener('mousedown', this, false); + } else { + this.active = true; + this.activeEntry = item; + this.element.ownerDocument.addEventListener('mousedown', this, false); + } + } + }, + + prepareForDraw: { + value: function() { + + } + }, + + handleMousedown: { + value: function(evt) { + + if(this.active && (this.getZIndex(evt.target) < 9000 || evt.target.id === "topMenu")) { + this._activeEntry.deselect(); + this._activeEntry = null; + this.active = false; + + //console.log(this.rep.objects[1]); + //this.controller.content[1].header = "BLAH"; + } + +// console.log(evt.target.style['z-index']); +// console.log(this.getZIndex(evt.target)); + + } + }, + + getZIndex: { + value: function(elem) { + + var position, value, zIndex; + while (elem && elem !== document) { +// position = elem.style.position; + position = document.defaultView.getComputedStyle(elem, "").getPropertyValue("position"); + + if (position === "absolute" || position === "relative" || position === "fixed") { + // webkit returns a string for zindex value and "" if zindex is not available +// zIndex = elem.style['z-index']; + zIndex = document.defaultView.getComputedStyle(elem, "").getPropertyValue("z-index"); + value = parseInt(zIndex, 10); + if (!isNaN(value) && value !== 0) { + return value; + } + } + elem = elem.parentNode; + } + return 0; + } + } + +}); \ No newline at end of file -- cgit v1.2.3