From 0bb13001ce07e5256a6e395325a898ab4ac93e1c Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Mon, 13 Feb 2012 02:05:07 -0800
Subject: Fixed Color on text edit. Also Fixed Indent & Outdent button. toggle
bullet and numbered now bound to text tool
---
.../text-properties.reel/text-properties.css | 4 +
.../text-properties.reel/text-properties.html | 8 +-
.../text-properties.reel/text-properties.js | 116 +++++++++++++++++----
js/tools/TextTool.js | 1 +
4 files changed, 104 insertions(+), 25 deletions(-)
(limited to 'js')
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index 6aa61812..f7bb8295 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -12,6 +12,10 @@
padding: 0px 8px;
}
+.optionsTextTool select {
+ margin: 2px;
+}
+
.optionsTextTool > *, .optionsTextTool .btnGroup > * {
float:left;
}
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index 7ded1236..a7d2af10 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -236,7 +236,7 @@
"element": {"#": "indent"},
"pressedClass": "active",
"preventFocus": true,
- "identifier": "outdent",
+ "identifier": "indent",
"label": ">>"
},
"listeners": [
@@ -253,7 +253,7 @@
"element": {"#": "outdent"},
"pressedClass": "active",
"preventFocus": true,
- "identifier": "<<",
+ "identifier": "outdent",
"label": "<<"
},
"listeners": [
@@ -310,10 +310,10 @@
-
+
-
+
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index 55274322..7ae0cfda 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
+var ArrayController = require("montage/ui/controller/array-controller").ArrayController;
var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
exports.TextProperties = Montage.create(ToolProperties, {
@@ -29,18 +30,57 @@ exports.TextProperties = Montage.create(ToolProperties, {
outdent: {value: null},
numberedList: {value: null},
bulletedList: {value: null},
+ fontTypes: {value: null},
+ fontSizes: {value: null},
prepareForDraw: {
value: function() {
+ // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component
+// this.fontTypes = Montage.create(ArrayController);
+// this.fontTypes.content = [
+// { value: "Arial", text: "Arial" },
+// { value: "Arial Black", text: "Arial Black" },
+// { value: "Courier New", text: "Courier New" },
+// { value: "Garamond", text: "Garamond" },
+// { value: "Georgia", text: "Georgia" },
+// { value: "Open Sans", text: "Open Sans" },
+// { value: "Tahoma", text: "Tahoma" },
+// { value: "Times New Roman", text: "Times New Roman" },
+// { value: "Trebuchet MS", text: "Trebuchet MS" },
+// { value: "Verdana", text: "Verdana" }
+// ];
+
+ //this.fontSelection.contentController = this.fontTypes;
+//
+// this.fontSizes = Montage.create(ArrayController);
+// this.fontSizes.content = [
+// { value: 1, text: "8pt" },
+// { value: 2, text: "10pt" },
+// { value: 3, text: "12pt" },
+// { value: 4, text: "14pt" },
+// { value: 5, text: "18pt" },
+// { value: 6, text: "24pt" },
+// { value: 7, text: "36pt" }
+// ];
+// this.fontSize.contentController = this.fontSizes;
+
this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
- this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
+ this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
}
},
handleEditorSelect: {
value: function(e) {
this.application.ninja.stage.textTool.updateStates();
+// this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname;
+//
+// for( var i = 0; i < this.fontSize.items.length; i++) {
+// if (this.application.ninja.stage.textTool.states.fontsize == i + 1) {
+// this.fontSize.value = this.fontSize.items[i]
+// break;
+// }
+// }
}
},
@@ -133,6 +173,18 @@ exports.TextProperties = Montage.create(ToolProperties, {
}
},
+ handleBulletedListAction: {
+ value: function(e) {
+ this.application.ninja.stage.textTool.doAction("insertunorderedlist");
+ }
+ },
+
+ handleNumberedListAction: {
+ value: function(e) {
+ this.application.ninja.stage.textTool.doAction("insertorderedlist");
+ }
+ },
+
handleFontSizeChange: {
value: function(e) {
//We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size.
@@ -214,6 +266,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
oneway: true
});
+ Object.defineBinding(this.numberedList, "pressed", {
+ boundObject: this.application.ninja.stage.textTool,
+ boundObjectPropertyPath: "states.insertorderedlist",
+ boundValueMutator: this.validatePressed,
+ oneway: true
+ });
+
+ Object.defineBinding(this.bulletedList, "pressed", {
+ boundObject: this.application.ninja.stage.textTool,
+ boundObjectPropertyPath: "states.insertunorderedlist",
+ boundValueMutator: this.validatePressed,
+ oneway: true
+ });
+
+ Object.defineBinding(this.fontSelection, "value", {
+ boundObject: this.application.ninja.stage.textTool,
+ boundObjectPropertyPath: "states.fontname",
+ boundValueMutator: this.validateFont,
+ oneway: true
+ });
+
+ Object.defineBinding(this.fontSize, "value", {
+ boundObject: this.application.ninja.stage.textTool,
+ boundObjectPropertyPath: "states.fontsize",
+ boundValueMutator: this.validateFontSize.bind(this),
+ oneway: true
+ });
+
this.initialized = true;
}
@@ -226,40 +306,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
}
},
- initialized: {
- value: false
+ validateFont: {
+ value: function(val) {
+ return val;
+ }
},
- handleFontSelectionChange: {
- value: function() {
- this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
- this.application.ninja.stage.textTool.element.focus();
+ validateFontSize: {
+ value: function(val) {
+ val = parseInt(val);
+ return this.fontSize.items[val];
}
},
- handleNumberedListAction: {
- value: function(e) {
- //this.numberedList.value = false;
- this.bulletedList.value = false;
- this.application.ninja.stage.textTool.doAction("insertorderedlist");
- this.application.ninja.stage.textTool.element.focus();
- }
+ initialized: {
+ value: false
},
- handleBulletedListAction: {
+ handleFontSelectionChange: {
value: function(e) {
- this.numberedList.value = false;
- //this.bulletedList.value = false;
- this.application.ninja.stage.textTool.doAction("insertunorderedlist");
+ this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
this.application.ninja.stage.textTool.element.focus();
}
},
handleFontColorChange: {
value: function(e) {
- this.application.ninja.stage.textTool.element.style.color = e._event.color.css;
- this.application.ninja.stage.textTool.element.focus();
-
+ this.application.ninja.stage.textTool.element.firstChild.style.color = e._event.color.css;
+ this.application.ninja.stage.textTool.element.firstChild.focus();
//this.application.ninja.stage.textTool.doAction("forecolor",e._event.color.css);
}
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 760af55b..4c464173 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -21,6 +21,7 @@ exports.TextTool = Montage.create(DrawingTool, {
this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
this.application.ninja.stage.textTool.value = "";
this.application.ninja.stage.textTool.element.style.display = "none";
+ this.applyElementStyles(this.application.ninja.stage.textTool.element.firstChild, this.selectedElement, ["color"]);
}
//Set Selected Element
this._selectedElement = val;
--
cgit v1.2.3