1 files changed, 297 insertions, 13 deletions

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 313693b1..88d38ffe 100644..100755
--- 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, {
@@ -25,26 +26,64 @@ exports.TextProperties = Montage.create(ToolProperties, {
     alignCenter: {value: null},
     alignRight: {value: null},
     alignJustify: {value: null},
-    indentRight: {value: null},
-    indentLeft: {value: null},
+    indent: {value: null},
+    outdent: {value: null},
     numberedList: {value: null},
     bulletedList: {value: null},
+    fontTypes: {value: null},
+    fontSizes: {value: null},
 
     prepareForDraw: {
         value: function() {
-            this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"];
-            this.fontSettings.label = "Settings";
-            this.btnBold.label = "Bold";
-            this.btnItalic.label = "Italic";
-            this.btnUnderline.label = "Underline";
-            this.btnStrikethrough.label = "Strikethrough";
-            this.alignLeft.label = "Left";
-            this.alignCenter.label = "Center";
-            this.alignRight.label = "Right";
-            this.alignJustify.label = "Justify";
+            // 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.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;
+//                }
+//            }
+        }
+    },
+
     _subPrepare: {
         value: function() {
             //this.divElement.addEventListener("click", this, false);
@@ -54,6 +93,251 @@ exports.TextProperties = Montage.create(ToolProperties, {
     handleClick: {
         value: function(event) {
            // this.selectedElement = event._event.target.id;
+
+        }
+    },
+
+    handleBtnBoldAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("bold");
+        }
+    },
+
+    handleBtnItalicAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("italic");
+        }
+    },
+
+    handleBtnUnderlineAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("underline");
+        }
+    },
+
+    handleBtnStrikethroughAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("strikethrough");
+        }
+    },
+    
+    handleAlignLeftAction: {
+        value: function(e) {
+            //this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyleft");
+        }
+    },
+
+    handleAlignCenterAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            //this.alignCenter.value = false;
+            this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifycenter");
+        }
+    },
+
+    handleAlignRightAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            //this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyright");
+        }
+    },
+
+    handleAlignJustifyAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            this.alignRight.value = false;
+            //this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyfull");
+        }
+    },
+
+    handleIndentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("indent");
+        }
+    },
+
+    handleOutdentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("outdent");
+        }
+    },
+
+    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.
+            for( var i = 0; i < this.fontSize.items.length; i++) {
+                if (this.fontSize.value === this.fontSize.items[i]) {
+                    this.application.ninja.stage.textTool.doAction("fontsize", (i +1));
+                    break;
+                }
+            }
+        }
+    },
+
+    defineInitialProperties: {