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/popup.reel/compass_app_log.txt | 48 ++++++ js/components/popup.reel/config.rb | 9 + js/components/popup.reel/css/popup.css | 43 +++++ js/components/popup.reel/css/popup.scss | 52 ++++++ js/components/popup.reel/popup.html | 37 ++++ js/components/popup.reel/popup.js | 245 +++++++++++++++++++++++++++ 6 files changed, 434 insertions(+) create mode 100644 js/components/popup.reel/compass_app_log.txt create mode 100755 js/components/popup.reel/config.rb create mode 100644 js/components/popup.reel/css/popup.css create mode 100755 js/components/popup.reel/css/popup.scss create mode 100644 js/components/popup.reel/popup.html create mode 100644 js/components/popup.reel/popup.js (limited to 'js/components/popup.reel') diff --git a/js/components/popup.reel/compass_app_log.txt b/js/components/popup.reel/compass_app_log.txt new file mode 100644 index 00000000..8a3fb984 --- /dev/null +++ b/js/components/popup.reel/compass_app_log.txt @@ -0,0 +1,48 @@ +2011-06-28 18:13:06 create css/popup.css +2011-06-28 18:13:12 identical css/popup.css +2011-06-28 18:14:08 overwrite css/popup.css +2011-06-28 18:14:20 overwrite css/popup.css +2011-06-28 18:14:29 overwrite css/popup.css +2011-06-28 18:17:23 overwrite css/popup.css +2011-06-28 18:17:27 overwrite css/popup.css +2011-06-28 18:17:56 overwrite css/popup.css +2011-06-28 18:18:09 overwrite css/popup.css +2011-06-28 18:20:30 overwrite css/popup.css +2011-06-28 18:22:35 overwrite css/popup.css +2011-06-28 18:24:12 overwrite css/popup.css +2011-06-28 18:24:23 overwrite css/popup.css +2011-06-28 18:24:33 overwrite css/popup.css +2011-06-28 18:25:17 overwrite css/popup.css +2011-06-28 18:26:21 overwrite css/popup.css +2011-06-28 18:26:33 overwrite css/popup.css +2011-06-28 18:26:42 overwrite css/popup.css +2011-06-28 18:26:57 overwrite css/popup.css +2011-06-28 18:29:57 overwrite css/popup.css +2011-06-28 18:30:14 overwrite css/popup.css +2011-06-28 18:30:23 overwrite css/popup.css +2011-06-28 18:30:48 overwrite css/popup.css +2011-06-28 18:31:03 overwrite css/popup.css +2011-06-29 10:18:31 overwrite css/popup.css +2011-06-29 10:18:47 overwrite css/popup.css +2011-06-29 10:37:19 overwrite css/popup.css +2011-06-29 10:40:29 overwrite css/popup.css +2011-06-29 10:45:37 overwrite css/popup.css +2011-06-29 10:45:53 identical css/popup.css +2011-06-29 10:46:52 overwrite css/popup.css +2011-06-29 10:47:02 identical css/popup.css +2011-06-29 13:30:47 overwrite css/popup.css +2011-06-29 13:31:14 overwrite css/popup.css +2011-12-20 17:06:48 overwrite css/popup.css +2011-12-22 11:29:15 overwrite css/popup.css +2011-12-22 11:29:24 identical css/popup.css +2011-12-22 11:30:05 overwrite css/popup.css +2011-12-22 11:30:33 overwrite css/popup.css +2011-12-22 11:30:51 overwrite css/popup.css +2011-12-22 11:32:30 overwrite css/popup.css +2011-12-22 11:33:06 overwrite css/popup.css +2011-12-22 11:33:12 overwrite css/popup.css +2011-12-22 11:33:32 identical css/popup.css +2011-12-22 11:33:36 overwrite css/popup.css +2011-12-22 11:34:48 overwrite css/popup.css +2012-01-26 11:42:18 overwrite css/popup.css +2012-01-26 11:42:20 overwrite css/popup.css diff --git a/js/components/popup.reel/config.rb b/js/components/popup.reel/config.rb new file mode 100755 index 00000000..9b55af19 --- /dev/null +++ b/js/components/popup.reel/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "css" +images_dir = "img" +javascripts_dir = "../" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/js/components/popup.reel/css/popup.css b/js/components/popup.reel/css/popup.css new file mode 100644 index 00000000..9eb91760 --- /dev/null +++ b/js/components/popup.reel/css/popup.css @@ -0,0 +1,43 @@ +@charset "UTF-8"; +/* + 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. + */ +/* line 12, popup.scss */ +.default_popup { + position: absolute; + width: auto; + float: left; + font-family: 'Droid Sans', sans-serif; + color: #FFF; + background: #494949; + border: 1px solid #292929; + border-radius: 8px; + padding: 8px; + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); + pointerEvents: auto; +} + +/* line 32, popup.scss */ +.default_popup .content { + overflow: auto; + float: left; +} + +/* line 38, popup.scss */ +.default_popup .tooltip { + position: absolute; + overflow: hidden; +} + +/* line 44, popup.scss */ +.default_popup .tooltip span { + -webkit-transform: rotate(45deg); + width: 12px; + height: 12px; + margin: 3px; + display: block; + background: #494949; + border: 1px solid #292929; +} diff --git a/js/components/popup.reel/css/popup.scss b/js/components/popup.reel/css/popup.scss new file mode 100755 index 00000000..782165a4 --- /dev/null +++ b/js/components/popup.reel/css/popup.scss @@ -0,0 +1,52 @@ +@charset "UTF-8"; +/* + 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. + */ + +$grey_dark: #292929; +$grey_light: #494949; + +.default_popup +{ + //MUST HAVE TO ALLOW FOR SIZE AJUSTMENTS + position: absolute; + width: auto; + float: left; + + //TEXT STYLES + font-family: 'Droid Sans', sans-serif; + color: #FFF; + + //BACKGROUND AND CONTAINER + background: $grey_light; + border: 1px solid $grey_dark; + border-radius: 8px; + padding: 8px; + box-shadow: 0px 0px 8px rgba(0, 0, 0, .8); + pointerEvents: auto; +} + +.default_popup .content +{ + overflow: auto; + float: left; +} + +.default_popup .tooltip +{ + position: absolute; + overflow: hidden; +} + +.default_popup .tooltip span +{ + -webkit-transform:rotate(45deg); + width: 12px; + height: 12px; + margin: 3px; + display: block; + background: $grey_light; + border: 1px solid $grey_dark; +} \ No newline at end of file diff --git a/js/components/popup.reel/popup.html b/js/components/popup.reel/popup.html new file mode 100644 index 00000000..b6f147aa --- /dev/null +++ b/js/components/popup.reel/popup.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/js/components/popup.reel/popup.js b/js/components/popup.reel/popup.js new file mode 100644 index 00000000..ae483ea9 --- /dev/null +++ b/js/components/popup.reel/popup.js @@ -0,0 +1,245 @@ +/* +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; +//////////////////////////////////////////////////////////////////////// +//Exporting as Popup +exports.Popup = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + // + _content: { + numerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + content: { + enumerable: true, + get: function() { + return this._content; + }, + set: function(value) { + this._content = value; + } + }, + //////////////////////////////////////////////////////////////////// + // + _position: { + numerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + //Position is set with X,Y Coordinates from Top and Left respetively + position: { + enumerable: true, + get: function() { + return this._position; + }, + set: function(value) { + this._position = value; + if (value.x) { + this.element.style.left = value.x; + } + if (value.y) { + this.element.style.top = value.y; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + _tooltip: { + numerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + tooltip: { + enumerable: true, + get: function() { + return this._tooltip; + }, + set: function(value) { + this._tooltip = value; + } + }, + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { + enumerable: false, + value: function() { + this.element.style.pointerEvents = 'auto'; + } + }, + //////////////////////////////////////////////////////////////////// + // + willDraw: { + enumerable: false, + value: function() { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + draw: { + enumerable: false, + value: function() { + // + if (!this._content) { + return; + } + if (!this._content.style.width) { + this._content.style.width = 'auto'; + } + if (!this._content.style.float) { + this._content.style.float = 'left'; + } + this.element.getElementsByClassName('content')[0].appendChild(this._content); + // + if (!this.tooltip) { + this.tooltip = {}; + this.tooltip.side = 'none'; + this.tooltip.align = 'none'; + } + switch (this.tooltip.side.toLowerCase()) { + case 'top': + this.element.style.marginTop = (this.element.getElementsByClassName('tooltip')[0].clientHeight) + 'px'; + break; + case 'bottom': + this.element.style.marginTop = -(this.element.clientHeight+(this.element.getElementsByClassName('tooltip')[0].clientHeight)) + 'px'; + break; + case 'left': + this.element.style.marginLeft = (this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px'; + break; + case 'right': + this.element.style.marginLeft = -(this.element.clientWidth + this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px'; + break; + default: + //console.log("Error: Tooltip side value of "+this.tooltip.side.toLowerCase()+" property not allowed"); + break; + } + // + switch (this.tooltip.align.toLowerCase()) { + case 'top': + this.element.style.marginTop = -Math.round((this.element.getElementsByClassName('tooltip')[0].clientHeight/2)+this.element.getElementsByClassName('tooltip')[0].offsetTop) + 'px'; + break; + case 'bottom': + this.element.style.marginTop = -Math.round(this.element.clientHeight-((this.element.clientHeight - this.element.getElementsByClassName('tooltip')[0].offsetTop)-(this.element.getElementsByClassName('tooltip')[0].clientHeight/2))) + 'px'; + break; + case 'left': + this.element.style.marginLeft = -Math.round(this.element.clientWidth-((this.element.clientWidth - this.element.getElementsByClassName('tooltip')[0].offsetLeft)-(this.element.getElementsByClassName('tooltip')[0].clientWidth/2))) + 'px'; + break; + case 'right': + this.element.style.marginLeft = -(this.element.clientWidth - this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px'; + break; + case 'center': + this.element.style.marginLeft = -Math.round(this.element.clientWidth/2-((this.element.clientWidth/2 - this.element.getElementsByClassName('tooltip')[0].offsetLeft)-(this.element.getElementsByClassName('tooltip')[0].clientWidth/2))) + 'px'; + break; + case 'middle': + this.element.style.marginTop = -Math.round(this.element.clientHeight/2-((this.element.clientHeight/2 - this.element.getElementsByClassName('tooltip')[0].offsetTop)-(this.element.getElementsByClassName('tooltip')[0].clientHeight/2))) + 'px'; + break; + default: + //console.log("Error: Tooltip align value of "+this.tooltip.align.toLowerCase()+" property not allowed"); + break; + } + // + this.drawTooltip(); + } + }, + //////////////////////////////////////////////////////////////////// + // + didDraw: { + enumerable: false, + value: function() { + //Removed own event, relying on firstDraw event of m-js + } + }, + //////////////////////////////////////////////////////////////////// + // + drawTooltip: { + enumerable: true, + value: function () { + // + var longD = '22px', shortD = '10px', shortP = '-10px', longP = '8px', tip = this.element.getElementsByClassName('tooltip')[0]; + // + if (this.tooltip && this.tooltip.side) { + switch (this.tooltip.side.toLowerCase()) { + case 'top': + tip.style.top = shortP; + tip.style.height = shortD; + tip.style.width = longD; + break; + case 'bottom': + tip.style.bottom = shortP; + tip.style.height = shortD; + tip.style.width = longD; + tip.getElementsByTagName('span')[0].style.marginTop = '-6px'; + break; + case 'left': + tip.style.left = shortP; + tip.style.width = shortD; + tip.style.height = longD; + //this.element.style.left = parseInt(this.element.style.left) + parseInt(tip.style.width) + 'px'; + break; + case 'right': + tip.style.right = shortP; + tip.style.width = shortD; + tip.style.height = longD; + tip.getElementsByTagName('span')[0].style.marginLeft = '-6px'; + break; + default: + tip.style.display = 'none'; + //console.log("Error: Tooltip side value of "+this.tooltip.side.toLowerCase()+" property not allowed"); + break; + } + } else { + tip.style.display = 'none'; + } + // + if (this.tooltip && this.tooltip.align) { + switch (this.tooltip.align.toLowerCase()) { + case 'top': + tip.style.top = longP; + break; + case 'bottom': + tip.style.bottom = longP; + break; + case 'left': + tip.style.left = longP; + break; + case 'right': + tip.style.right = longP; + break; + case 'center': + tip.style.left = '50%'; + tip.style.marginLeft = -Math.round(parseFloat(tip.style.width)/2)+'px'; + break; + case 'middle': + tip.style.top = '50%'; + tip.style.marginTop = -Math.round(parseFloat(tip.style.height)/2)+'px'; + break; + default: + tip.style.display = 'none'; + //console.log("Error: Tooltip align value of "+this.tooltip.align.toLowerCase()+" property not allowed"); + break; + } + } else { + tip.style.display = 'none'; + } + } + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file -- cgit v1.2.3