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 --- .../Color/colortoolbar.reel/colortoolbar.html | 54 +++++++ js/panels/Color/colortoolbar.reel/colortoolbar.js | 176 +++++++++++++++++++++ js/panels/Color/colortoolbar.reel/config.rb | 9 ++ .../Color/colortoolbar.reel/css/colortoolbar.css | 45 ++++++ .../Color/colortoolbar.reel/css/colortoolbar.scss | 52 ++++++ 5 files changed, 336 insertions(+) create mode 100644 js/panels/Color/colortoolbar.reel/colortoolbar.html create mode 100644 js/panels/Color/colortoolbar.reel/colortoolbar.js create mode 100755 js/panels/Color/colortoolbar.reel/config.rb create mode 100644 js/panels/Color/colortoolbar.reel/css/colortoolbar.css create mode 100755 js/panels/Color/colortoolbar.reel/css/colortoolbar.scss (limited to 'js/panels/Color/colortoolbar.reel') diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.html b/js/panels/Color/colortoolbar.reel/colortoolbar.html new file mode 100644 index 00000000..9ab54836 --- /dev/null +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + +

+ +

+ + + +

+ +

+ + + +

+ +

+ + + + \ No newline at end of file diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js new file mode 100644 index 00000000..19fe7b85 --- /dev/null +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -0,0 +1,176 @@ +/* +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.ColorToolbar = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + //Storing stroke (stores color in mode use to select color) + _stroke: { + enumerable: false, + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]} + }, + //////////////////////////////////////////////////////////////////// + // + stroke: { + enumerable: true, + get: function() { + return this._stroke; + }, + set: function(value) { + if (value !== this._stroke) { + this._stroke = value; + } + } + }, + //////////////////////////////////////////////////////////////////// + //Storing fill (stores color in mode use to select color) + _fill: { + enumerable: false, + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]} + }, + //////////////////////////////////////////////////////////////////// + // + fill: { + enumerable: true, + get: function() { + return this._fill; + }, + set: function(value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + willDraw: { + enumerable: false, + value: function() { + // + var buttons = this.element.getElementsByTagName('button'); + // + this.fill_btn = buttons [1]; + this.stroke_btn = buttons[0]; + // + this.fill_btn.props = {side: 'left', align: 'top', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: 20}; + this.stroke_btn.props = {side: 'left', align: 'top', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: 20}; + } + }, + //////////////////////////////////////////////////////////////////// + // + draw: { + enumerable: false, + value: function() { + // + this.application.ninja.colorController.addButton('chip', this.fill_btn); + this.application.ninja.colorController.addButton('chip', this.stroke_btn); + // + this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); + this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + } + }, + //////////////////////////////////////////////////////////////////// + // + didDraw: { + enumerable: false, + value: function() { + // + this.fill_btn.addEventListener('change', function (e) { + // + var temp; + // + this.fill = e._event; + // + if (e._event.color && e._event.color.l) { + temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); + temp.a = e._event.color.a; + } else if (e._event.color && e._event.color.r){ + temp = e._event.color; + temp.a = e._event.color.a; + } else { + temp = null; + } + //WebGL uses array + if (temp) { + this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; + } else { + this.fill.webGlColor = null; + } + // + this.application.ninja.colorController.colorModel.input = 'fill'; + // + var color = e._event.color; + if (e._event.colorMode !== 'nocolor' && color) { + color.wasSetByCode = false; + color.type = 'change'; + this.application.ninja.colorController.colorModel[e._event.colorMode] = color; + } else { + this.application.ninja.colorController.colorModel.applyNoColor(); + } + // + this.application.ninja.colorController.colorModel.input = 'chip'; + }.bind(this)); + // + this.stroke_btn.addEventListener('change', function (e) { + // + var temp; + // + this.stroke = e._event; + // + if (e._event.color && e._event.color.l) { + temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); + temp.a = e._event.color.a; + } else if (e._event.color && e._event.color.r){ + temp = e._event.color; + temp.a = e._event.color.a; + } else { + temp = null; + } + //WebGL uses array + if (temp) { + this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; + } else { + this.stroke.webGlColor = null; + } + // + this.application.ninja.colorController.colorModel.input = 'stroke'; + // + var color = e._event.color; + if (e._event.colorMode !== 'nocolor' && color) { + color.wasSetByCode = false; + color.type = 'change'; + this.application.ninja.colorController.colorModel[e._event.colorMode] = color; + } else { + this.application.ninja.colorController.colorModel.applyNoColor(); + } + // + this.application.ninja.colorController.colorModel.input = 'chip'; + }.bind(this)); + } + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/panels/Color/colortoolbar.reel/config.rb b/js/panels/Color/colortoolbar.reel/config.rb new file mode 100755 index 00000000..9b55af19 --- /dev/null +++ b/js/panels/Color/colortoolbar.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/panels/Color/colortoolbar.reel/css/colortoolbar.css b/js/panels/Color/colortoolbar.reel/css/colortoolbar.css new file mode 100644 index 00000000..759ef4f8 --- /dev/null +++ b/js/panels/Color/colortoolbar.reel/css/colortoolbar.css @@ -0,0 +1,45 @@ +@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 17, colortoolbar.scss */ +.colortoolbar button { + float: left; + clear: both; + width: 27px; + height: 27px; + background: black; + border: 1px solid #000; + padding: 0; + margin: 0px; +} + +/* line 29, colortoolbar.scss */ +.colortoolbar div { + float: left; + clear: both; + width: 27px; + height: 27px; + margin: 6px 10px 1px 9px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; +} + +/* line 39, colortoolbar.scss */ +.colortoolbar div.cpe_colortoolbar_container { + margin: 0px 0px 4px 7px; +} + +/* line 44, colortoolbar.scss */ +.toolbar_hr { + height: 1px; + border: none; + background-color: #565656; + border-top: 1px solid #3E3E3E; + margin: 8px 6px 0px 4px; + width: 32px; + display: block; +} diff --git a/js/panels/Color/colortoolbar.reel/css/colortoolbar.scss b/js/panels/Color/colortoolbar.reel/css/colortoolbar.scss new file mode 100755 index 00000000..79fb37b6 --- /dev/null +++ b/js/panels/Color/colortoolbar.reel/css/colortoolbar.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. + +*/ + +.colortoolbar +{ + +} + +.colortoolbar button +{ + float: left; + clear: both; + width: 27px; + height: 27px; + background: black; + border: 1px solid #000; + padding: 0; + margin: 0px; +} + +.colortoolbar div +{ + float: left; + clear: both; + width: 27px; + height: 27px; + margin: 6px 10px 1px 9px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; +} + +.colortoolbar div.cpe_colortoolbar_container +{ + margin: 0px 0px 4px 7px; +} + +.toolbar_hr +{ + height: 1px; + border: none; + background-color: #565656; + border-top: 1px solid #3E3E3E; + margin: 8px 6px 0px 4px; + width: 32px; + display: block; +} -- cgit v1.2.3