aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorValerio Virgillito2012-06-26 13:15:26 -0700
committerValerio Virgillito2012-06-26 13:15:26 -0700
commit87a8b62f71bb72274c3dd1fa389e88c12d482ebb (patch)
treebf9f995e2972c0a61355f24e64231cdf0b2c86b5 /js/tools
parent8821e662484aedb027e26a873883e6ca3fb55a51 (diff)
parenta95bba25c3ba6e31784a452e9b94748cc870ba5d (diff)
downloadninja-87a8b62f71bb72274c3dd1fa389e88c12d482ebb.tar.gz
Merge pull request #323 from dhg637/binding
Binding View - Binding Tool & Binding Panel
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/TextTool.js48
-rw-r--r--js/tools/bindingTool.js102
2 files changed, 136 insertions, 14 deletions
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 0aef6c1c..aa79b8bc 100755
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,7 +6,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 DrawingTool = require("js/tools/drawing-tool").DrawingTool, 8 DrawingTool = require("js/tools/drawing-tool").DrawingTool,
9 //RichTextEditor = ("node_modules/labs/rich-text-editor.reel").RichTextEditor,
10 ElementsMediator = require("js/mediators/element-mediator").ElementMediator; 9 ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
11 10
12exports.TextTool = Montage.create(DrawingTool, { 11exports.TextTool = Montage.create(DrawingTool, {
@@ -23,24 +22,32 @@ exports.TextTool = Montage.create(DrawingTool, {
23 return this._selectedElement; 22 return this._selectedElement;
24 }, 23 },
25 set: function(val) { 24 set: function(val) {
25 //Set Selected Element
26 if (this._selectedElement !== null) { 26 if (this._selectedElement !== null) {
27 this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; 27 this.applyStyle();
28 this.application.ninja.stage.textTool.value = "";
29 this.application.ninja.stage.textTool.element.style.display = "none";
30 ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool");
31 } 28 }
32 //Set Selected Element
33 this._selectedElement = val; 29 this._selectedElement = val;
34 if(val !== null) { 30 if(this._selectedElement !== null) {
35 this.drawTextTool(); 31 this.drawTextTool();
36 this.handleScroll(); 32 this.handleScroll();
37 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); 33 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
38 } else { 34 } else {
39 this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); 35 this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this);
40 } 36 }
37
41 } 38 }
42 }, 39 },
43 40
41 applyStyle: {
42 value: function() {
43 this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
44 this.application.ninja.stage.textTool.value = "";
45 this.application.ninja.stage.textTool.element.style.display = "none";
46 //ElementsMediator.setProperty([this.selectedElement], "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element)["color"]], "Change", "textTool");
47 }
48
49 },
50
44 HandleLeftButtonDown: { 51 HandleLeftButtonDown: {
45 value: function(event) { 52 value: function(event) {
46 this.selectedElement = null; 53 this.selectedElement = null;
@@ -96,6 +103,22 @@ exports.TextTool = Montage.create(DrawingTool, {
96 } 103 }
97 }, 104 },
98 105
106 getSelectedElement: {
107 value: function(editor) {
108 var element = editor._selectedRange.startContainer;
109 if (element.nodeType == 3) {
110 element = element.parentNode;
111 }
112 return element;
113 }
114 },
115
116 getStyleOfSelectedElement: {
117 value: function(editor) {
118 return window.getComputedStyle(this.getSelectedElement(editor));
119 }
120 },
121
99 applyElementStyles : { 122 applyElementStyles : {
100 value: function(fromElement, toElement, styles) { 123 value: function(fromElement, toElement, styles) {
101 styles.forEach(function(style) { 124 styles.forEach(function(style) {
@@ -108,11 +131,11 @@ exports.TextTool = Montage.create(DrawingTool, {
108 drawTextTool: { 131 drawTextTool: {
109 value: function() { 132 value: function() {
110 var self = this; 133 var self = this;
111
112 this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; 134 this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML;
113 if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } 135 if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; }
114 this.selectedElement.innerHTML = ""; 136 this.selectedElement.innerHTML = "";
115 137
138
116 //Styling Options for text tool to look identical to the text you are manipulating. 139 //Styling Options for text tool to look identical to the text you are manipulating.
117 this.application.ninja.stage.textTool.element.style.display = "block"; 140 this.application.ninja.stage.textTool.element.style.display = "block";
118 this.application.ninja.stage.textTool.element.style.position = "absolute"; 141 this.application.ninja.stage.textTool.element.style.position = "absolute";
@@ -124,14 +147,11 @@ exports.TextTool = Montage.create(DrawingTool, {
124 // Set font styling (Size, Style, Weight) 147 // Set font styling (Size, Style, Weight)
125 this.application.ninja.stage.textTool.didDraw = function() { 148 this.application.ninja.stage.textTool.didDraw = function() {
126 self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]); 149 self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]);
127 self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); 150 self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]);
128 var range = document.createRange(), 151 this.selectAll();
129 sel = window.getSelection();
130 sel.removeAllRanges();
131 range.selectNodeContents(self.application.ninja.stage.textTool.element.firstChild);
132 sel.addRange(range);
133 this.didDraw = function() {}; 152 this.didDraw = function() {};
134 } 153 }
154
135 } 155 }
136 }, 156 },
137 157
diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js
new file mode 100644
index 00000000..1e1c9e5b
--- /dev/null
+++ b/js/tools/bindingTool.js
@@ -0,0 +1,102 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 DrawingTool = require("js/tools/drawing-tool").DrawingTool,
9ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase;
10SelectionTool = require("js/tools/SelectionTool").SelectionTool;
11
12
13exports.BindingTool = Montage.create(ModifierToolBase, {
14 drawingFeedback: { value: { mode: "Draw2D", type: "" } },
15 _selectedComponent: {
16 value: null
17 },
18
19 selectedComponent: {
20 get:function() {
21 return this._selectedComponent;
22 },
23 set: function(val) {
24 this._selectedComponent = val;
25 this.application.ninja.stage.bindingView.selectedComponent = val;
26 }
27 },
28
29 Configure: {
30 value: function (doActivate)
31 {
32 if (doActivate)
33 {
34 NJevent("enableStageMove");
35 this.application.ninja.workspaceMode = "binding";
36 if (this.application.ninja.selectedElements.length !== 0 ) {
37 if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") {
38 this.selectedComponent = this.application.ninja.selectedElements[0].controller;
39 } else {
40 this.selectedComponent = null;
41 }
42
43 }
44 }
45 else
46 {
47 NJevent("disableStageMove");
48 this.application.ninja.workspaceMode = "default";
49 this.selectedComponent = null;
50 }
51
52 }
53 },
54
55 HandleLeftButtonDown: {
56 value: function(event) {
57 NJevent("enableStageMove");
58 }
59 },
60
61 HandleMouseMove: {
62 value: function(event) {
63 /*
64 In the mouse over event we need to validate if the mouse over is over a hud.
65 If it on top of a hud bring that single hud to the top to associate with.
66 */
67
68 this.application.ninja.stage.bindingView.handleMousemove(event);
69 //this.doDraw(event);
70 }
71 },
72
73 HandleLeftButtonUp: {
74 value: function(event) {
75 if(!this.application.ninja.stage.bindingView._isDrawingConnection) {
76 if(this._escape) {
77 this._escape = false;
78 return;
79 }
80
81 if(this._hasDraw) {
82 this._hasDraw = false;
83 //this.endDraw(event);
84 } else {
85 this.doSelection(event);
86 if (this.application.ninja.selectedElements.length !== 0 ) {
87 if(this.application.ninja.selectedElements[0].controller) {
88 this.selectedComponent = this.application.ninja.selectedElements[0].controller;
89 } else {
90 this.selectedComponent = null;
91 }
92 } else {
93 this.selectedComponent = null;
94 }
95 this._isDrawing = false;
96 }
97 }
98 //this.endDraw(event);
99 //NJevent("disableStageMove");
100 }
101 }
102}); \ No newline at end of file