From 3a754133dbc138390503341fd2e9beba3e43aa4b Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 27 Jan 2012 12:05:17 -0800 Subject: Merged old FileIO --- js/components/tools-properties/text-properties.reel/text-properties.css | 0 js/components/tools-properties/text-properties.reel/text-properties.html | 0 js/components/tools-properties/text-properties.reel/text-properties.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 js/components/tools-properties/text-properties.reel/text-properties.css mode change 100644 => 100755 js/components/tools-properties/text-properties.reel/text-properties.html mode change 100644 => 100755 js/components/tools-properties/text-properties.reel/text-properties.js (limited to 'js/components/tools-properties/text-properties.reel') diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css old mode 100644 new mode 100755 diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html old mode 100644 new mode 100755 diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js old mode 100644 new mode 100755 -- cgit v1.2.3 From d7ead10b566e7de121b2cd2c99fecca8469d63b8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:30:47 -0800 Subject: Initial Text tool completion. --- .../text-properties.reel/text-properties.css | 4 +- .../text-properties.reel/text-properties.html | 202 +++++++++++++++------ .../text-properties.reel/text-properties.js | 149 ++++++++++++++- 3 files changed, 294 insertions(+), 61 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel') 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 d581c6c3..2eb608d3 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -30,4 +30,6 @@ font-size:11px; } - +.optionsTextTool .fontSelection { + width:100px; +} \ No newline at end of file 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 fb57c06d..14123b12 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -33,8 +33,8 @@ "alignCenter": {"@": "alignCenter"}, "alignRight": {"@": "alignRight"}, "alignJustify": {"@": "alignJustify"}, - "indentRight": {"@": "indentRight"}, - "indentLeft": {"@": "indentLeft"}, + "indent": {"@": "indent"}, + "outdent": {"@": "outdent"}, "numberedList": {"@": "numberedList"}, "bulletedList": {"@": "bulletedList"} } @@ -57,8 +57,16 @@ "module": "js/components/combobox.reel", "name": "Combobox", "properties": { - "element": {"#": "fontSelection"} - } + "element": {"#": "fontSelection"}, + "identifier": "fontSelection" + }, + "listeners": [ + { + "type": "change", + "listener": {"@": "owner"} + } + ] + }, "fontSettings": { "module": "js/components/button.reel", @@ -72,48 +80,90 @@ "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { - "element": {"#": "fontSize"} - } - }, + "element": {"#": "fontSize"}, + "value": 12, + "identifier": "fontSize" + }, + "listeners": [ + { + "type": "change", + "listener": {"@": "owner"} + }, + { + "type": "changing", + "listener": {"@": "owner"} + } + ] - "fontColor": { - "module": "js/components/button.reel", - "name": "Button", - "properties": { - "element": {"#": "fontColor"} - } }, + + "fontColor": { + "module" : "js/components/ui/color-chip.reel", + "name" : "ColorChip", + "properties" : { + "element" : {"#": "fontColor"}, + "mode": "chip" + } + }, "btnBold": { "module": "js/components/button.reel", "name": "Button", "properties": { "element": {"#": "btnBold"}, - "_isToggleButton": true - } + "_isToggleButton": true, + "identifier": "btnBold" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "btnItalic": { "module": "js/components/button.reel", "name": "Button", "properties": { "element": {"#": "btnItalic"}, - "_isToggleButton": true - } + "_isToggleButton": true, + "identifier": "btnItalic" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "btnUnderline": { "module": "js/components/button.reel", "name": "Button", "properties": { "element": {"#": "btnUnderline"}, - "_isToggleButton": true - } + "_isToggleButton": true, + "identifier": "btnUnderline" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "btnStrikethrough": { "module": "js/components/button.reel", "name": "Button", "properties": { "element": {"#": "btnStrikethrough"}, - "_isToggleButton": true - } + "_isToggleButton": true, + "identifier": "btnStrikethrough" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "txtLink": { "module": "js/components/textfield.reel", @@ -134,66 +184,106 @@ "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "alignLeft"} - } + "element": {"#": "alignLeft"}, + "_isToggleButton": true, + "identifier": "alignLeft" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "alignCenter": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "alignCenter"} - } + "element": {"#": "alignCenter"}, + "_isToggleButton": true, + "identifier": "alignCenter" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "alignRight": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "alignRight"} - } + "element": {"#": "alignRight"}, + "_isToggleButton": true, + "identifier": "alignRight" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "alignJustify": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "alignJustify"} - } + "element": {"#": "alignJustify"}, + "_isToggleButton": true, + "identifier": "alignJustify" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, - "indentRight": { + "indent": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "indentRight"} + "element": {"#": "indent"} } }, - "indentLeft": { + "outdent": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "indentLeft"} + "element": {"#": "outdent"} } }, "bulletedList": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "bulletedList"} - } + "element": {"#": "bulletedList"}, + "_isToggleButton": true, + "identifier": "bulletedList" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "numberedList": { "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "numberedList"} - } - }, - "fontColor": { - "module" : "js/components/ui/color-chip.reel", - "name" : "ColorChip", - "properties" : { - "element" : {"#": "fontColor"}, - "mode": "chip" - } - } + "element": {"#": "numberedList"}, + "_isToggleButton": true, + "identifier": "numberedList" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] + } } @@ -202,16 +292,16 @@
- - - - + + + + - - + + - + @@ -223,10 +313,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 313693b1..de0b5fa3 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -25,8 +25,8 @@ 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}, @@ -42,9 +42,34 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.label = "Center"; this.alignRight.label = "Right"; this.alignJustify.label = "Justify"; + this.indent.label = "-->" + this.outdent.label = "<--"; + this.numberedList.label = "1 2 3"; + this.bulletedList.label = "• • •"; + 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.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); + Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", { + boundObject: this.btnBold, + boundObjectPropertyPath: "value" + }); + } }, - + + handleEditorSelect: { + value: function(e) { + console.log("hello"); + this.application.ninja.stage.textTool.updateStates(); + } + }, + + defaultFontSize: { + value: "12px" + }, + _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -54,6 +79,122 @@ exports.TextProperties = Montage.create(ToolProperties, { handleClick: { value: function(event) { // this.selectedElement = event._event.target.id; + + } + }, + + handleFontSizeChange: { + + }, + + handleBtnBoldAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("bold", true); + } + }, + + handleBtnItalicAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("italic", true); + } + }, + + handleBtnUnderlineAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("underline", true); + } + }, + + handleBtnStrikethroughAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("strikethrough", true); + } + }, + + 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", true); + } + }, + + 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", true); } - } + }, + + 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", true); + } + }, + + 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("strikethrough", null); + } + }, + + handleIndentAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("indent", null); + } + }, + + handleOutdentAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("outdent", null); + } + }, + + handleFontSizeChange: { + value: function(e) { + + } + }, + + handleFontSizeChanging: { + value: function(e) { + + } + }, + + handleFontSelectionChange: { + value: function() { + this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); + } + }, + + handleNumberedListAction: { + value: function(e) { + //this.numberedList.value = false; + this.bulletedList.value = false; + this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + } + }, + + handleOrderedListAction: { + value: function(e) { + this.numberedList.value = false; + //this.bulletedList.value = false; + this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + } + }, + }); \ No newline at end of file -- cgit v1.2.3 From 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:43:22 -0800 Subject: Refactored rich text editor location --- js/components/tools-properties/text-properties.reel/text-properties.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/components/tools-properties/text-properties.reel') 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 de0b5fa3..dac30da0 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -61,7 +61,6 @@ exports.TextProperties = Montage.create(ToolProperties, { handleEditorSelect: { value: function(e) { - console.log("hello"); this.application.ninja.stage.textTool.updateStates(); } }, -- cgit v1.2.3 From ce963d45cdf2703d2d4eedfa94394b178f86e0f1 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 9 Feb 2012 17:11:38 -0800 Subject: More Text Tool Updates --- .../text-properties.reel/text-properties.css | 28 +-- .../text-properties.reel/text-properties.html | 204 +++++++++++---------- .../text-properties.reel/text-properties.js | 162 +++++++++++----- 3 files changed, 241 insertions(+), 153 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel') 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 2eb608d3..6aa61812 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -5,31 +5,33 @@ */ .optionsTextTool { - display: -webkit-box; - -webkit-box-orient:horizontal; - -webkit-box-align: stretch; - padding: 5px; + padding: 6px; } - -.optionsTextTool > * { - -webkit-box-flex:0; +.optionsTextTool .btnGroup { + padding: 0px 8px; } -.optionsTextTool .button { - width: auto; - +.optionsTextTool > *, .optionsTextTool .btnGroup > * { + float:left; } -.optionsTextTool .hottextunit { - padding-top:5px; +.optionsTextTool button { + width: auto; + padding: 4px 8px !important; + margin-left:4px; } .optionsTextTool .label, .optionsTextTool .hottextunit { - float:none; font-size:11px; } .optionsTextTool .fontSelection { width:100px; +} + +.optionsTextTool .fontColor { + width: 20px; + height: 18px; + margin: 2px 6px; } \ No newline at end of file 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 14123b12..7ded1236 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -77,41 +77,30 @@ }, "fontSize": { - "module": "js/components/hottextunit.reel", - "name": "HotTextUnit", + "module": "js/components/combobox.reel", + "name": "Combobox", "properties": { "element": {"#": "fontSize"}, - "value": 12, "identifier": "fontSize" }, "listeners": [ { "type": "change", "listener": {"@": "owner"} - }, - { - "type": "changing", - "listener": {"@": "owner"} } ] }, - - "fontColor": { - "module" : "js/components/ui/color-chip.reel", - "name" : "ColorChip", - "properties" : { - "element" : {"#": "fontColor"}, - "mode": "chip" - } - }, + "btnBold": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnBold"}, - "_isToggleButton": true, - "identifier": "btnBold" + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnBold", + "label": "B" }, "listeners": [ { @@ -121,12 +110,14 @@ ] }, "btnItalic": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnItalic"}, - "_isToggleButton": true, - "identifier": "btnItalic" + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnItalic", + "label": "I" }, "listeners": [ { @@ -136,12 +127,14 @@ ] }, "btnUnderline": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnUnderline"}, - "_isToggleButton": true, - "identifier": "btnUnderline" + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnUnderline", + "label": "U" }, "listeners": [ { @@ -151,12 +144,14 @@ ] }, "btnStrikethrough": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnStrikethrough"}, - "_isToggleButton": true, - "identifier": "btnStrikethrough" + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnStrikethrough", + "label": "S" }, "listeners": [ { @@ -165,28 +160,16 @@ } ] }, - "txtLink": { - "module": "js/components/textfield.reel", - "name": "TextField", - "properties": { - "element": {"#": "txtLink"} - } - }, - "linkTarget": { - "module": "js/components/combobox.reel", - "name": "Combobox", - "properties": { - "element": {"#": "linkTarget"} - } - }, - + "alignLeft": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "alignLeft"}, - "_isToggleButton": true, - "identifier": "alignLeft" + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignLeft", + "label": "Left" }, "listeners": [ { @@ -196,12 +179,14 @@ ] }, "alignCenter": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "alignCenter"}, - "_isToggleButton": true, - "identifier": "alignCenter" + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignCenter", + "label": "Center" }, "listeners": [ { @@ -211,12 +196,14 @@ ] }, "alignRight": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "alignRight"}, - "_isToggleButton": true, - "identifier": "alignRight" + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignRight", + "label": "Right" }, "listeners": [ { @@ -226,12 +213,14 @@ ] }, "alignJustify": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "alignJustify"}, - "_isToggleButton": true, - "identifier": "alignJustify" + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignJustify", + "label": "Justify" }, "listeners": [ { @@ -241,26 +230,48 @@ ] }, "indent": { - "module": "js/components/button.reel", + "module": "montage/ui/button.reel", "name": "Button", "properties": { - "element": {"#": "indent"} - } + "element": {"#": "indent"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "outdent", + "label": ">>" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "outdent": { - "module": "js/components/button.reel", + "module": "montage/ui/button.reel", "name": "Button", "properties": { - "element": {"#": "outdent"} - } + "element": {"#": "outdent"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "<<", + "label": "<<" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "bulletedList": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "bulletedList"}, - "_isToggleButton": true, - "identifier": "bulletedList" + "pressedClass": "active", + "preventFocus": true, + "identifier": "bulletedList", + "label": "• • •" }, "listeners": [ { @@ -270,12 +281,14 @@ ] }, "numberedList": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "numberedList"}, - "_isToggleButton": true, - "identifier": "numberedList" + "pressedClass": "active", + "preventFocus": true, + "identifier": "numberedList", + "label": "1 2 3" }, "listeners": [ { @@ -301,24 +314,27 @@ - - - - - - - - -
- - - - +
+
+ + + + +
+
+ + + + +
+
+ + +
+
+ +
- - - -
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 dac30da0..55274322 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -32,30 +32,9 @@ exports.TextProperties = Montage.create(ToolProperties, { 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"; - this.indent.label = "-->" - this.outdent.label = "<--"; - this.numberedList.label = "1 2 3"; - this.bulletedList.label = "• • •"; 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.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); - Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", { - boundObject: this.btnBold, - boundObjectPropertyPath: "value" - }); - + this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; } }, @@ -65,10 +44,6 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - defaultFontSize: { - value: "12px" - }, - _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -82,31 +57,27 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - handleFontSizeChange: { - - }, - handleBtnBoldAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("bold", true); + this.application.ninja.stage.textTool.doAction("bold"); } }, handleBtnItalicAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("italic", true); + this.application.ninja.stage.textTool.doAction("italic"); } }, handleBtnUnderlineAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("underline", true); + this.application.ninja.stage.textTool.doAction("underline"); } }, handleBtnStrikethroughAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("strikethrough", true); + this.application.ninja.stage.textTool.doAction("strikethrough"); } }, @@ -116,7 +87,7 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.value = false; this.alignRight.value = false; this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyLeft", true); + this.application.ninja.stage.textTool.doAction("justifyleft"); } }, @@ -126,7 +97,7 @@ exports.TextProperties = Montage.create(ToolProperties, { //this.alignCenter.value = false; this.alignRight.value = false; this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyCenter", true); + this.application.ninja.stage.textTool.doAction("justifycenter"); } }, @@ -136,7 +107,7 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.value = false; //this.alignRight.value = false; this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyRight", true); + this.application.ninja.stage.textTool.doAction("justifyright"); } }, @@ -146,37 +117,123 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.value = false; this.alignRight.value = false; //this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("strikethrough", null); + this.application.ninja.stage.textTool.doAction("justifyfull"); } }, handleIndentAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("indent", null); + this.application.ninja.stage.textTool.doAction("indent"); } }, handleOutdentAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("outdent", null); + this.application.ninja.stage.textTool.doAction("outdent"); } }, 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; + } + } } }, - handleFontSizeChanging: { - value: function(e) { + defineInitialProperties: { + value: function() { + if (!this.initialized) { + + //Setup Font Selection tool + this.fontColor = this.element.getElementsByClassName("fontColor")[0]; + this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; + this.application.ninja.colorController.addButton("chip", this.fontColor); + this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); + + this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); + + Object.defineBinding(this.btnBold, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.bold", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.btnItalic, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.italic", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.btnUnderline, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.underline", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.btnStrikethrough, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.strikethrough", + boundValueMutator: this.validatePressed, + oneway: true + }); + Object.defineBinding(this.alignLeft, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifyleft", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.alignCenter, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifycenter", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.alignRight, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifyright", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.alignJustify, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifyfull", + boundValueMutator: this.validatePressed, + oneway: true + }); + + this.initialized = true; + } + + } + }, + + validatePressed: { + value: function(val) { + if (val == "true") return true; else return false } }, + initialized: { + value: false + }, + handleFontSelectionChange: { value: function() { this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); + this.application.ninja.stage.textTool.element.focus(); } }, @@ -184,16 +241,29 @@ exports.TextProperties = Montage.create(ToolProperties, { value: function(e) { //this.numberedList.value = false; this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + this.application.ninja.stage.textTool.doAction("insertorderedlist"); + this.application.ninja.stage.textTool.element.focus(); } }, - handleOrderedListAction: { + handleBulletedListAction: { value: function(e) { this.numberedList.value = false; //this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + this.application.ninja.stage.textTool.doAction("insertunorderedlist"); + 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.doAction("forecolor",e._event.color.css); + + } + } + + }); \ No newline at end of file -- cgit v1.2.3 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 +++++++++++++++++---- 3 files changed, 103 insertions(+), 25 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel') 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); } -- cgit v1.2.3 From 36cefa3526988cb4dfea107fedaa954a2703260d Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 13 Feb 2012 02:20:23 -0800 Subject: Fixed binding to font size dropdown --- js/components/tools-properties/text-properties.reel/text-properties.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/components/tools-properties/text-properties.reel') 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 7ae0cfda..88d38ffe 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -315,7 +315,7 @@ exports.TextProperties = Montage.create(ToolProperties, { validateFontSize: { value: function(val) { val = parseInt(val); - return this.fontSize.items[val]; + return this.fontSize.items[val - 1]; } }, -- cgit v1.2.3 From 695d1235cd6715a5e911eb61c43af4464a128129 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 16 Feb 2012 14:52:10 -0800 Subject: fixing the Text tool toggle buttons Signed-off-by: Valerio Virgillito --- .../text-properties.reel/text-properties.html | 30 ++++++++++++++-------- 1 file changed, 20 insertions(+), 10 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel') 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 a7d2af10..13a88ba7 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -100,7 +100,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "btnBold", - "label": "B" + "pressedLabel": "B", + "unpressedLabel": "B" }, "listeners": [ { @@ -117,7 +118,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "btnItalic", - "label": "I" + "pressedLabel": "I", + "unpressedLabel": "I" }, "listeners": [ { @@ -134,7 +136,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "btnUnderline", - "label": "U" + "pressedLabel": "U", + "unpressedLabel": "U" }, "listeners": [ { @@ -151,7 +154,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "btnStrikethrough", - "label": "S" + "pressedLabel": "S", + "unpressedLabel": "S" }, "listeners": [ { @@ -169,7 +173,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "alignLeft", - "label": "Left" + "pressedLabel": "Left", + "unpressedLabel": "Left" }, "listeners": [ { @@ -186,7 +191,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "alignCenter", - "label": "Center" + "pressedLabel": "Center", + "unpressedLabel": "Center" }, "listeners": [ { @@ -203,7 +209,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "alignRight", - "label": "Right" + "pressedLabel": "Right", + "unpressedLabel": "Right" }, "listeners": [ { @@ -220,7 +227,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "alignJustify", - "label": "Justify" + "pressedLabel": "Justify", + "unpressedLabel": "Justify" }, "listeners": [ { @@ -271,7 +279,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "bulletedList", - "label": "• • •" + "pressedLabel": "• • •", + "unpressedLabel": "• • •" }, "listeners": [ { @@ -288,7 +297,8 @@ "pressedClass": "active", "preventFocus": true, "identifier": "numberedList", - "label": "1 2 3" + "pressedLabel": "1 2 3", + "unpressedLabel": "1 2 3" }, "listeners": [ { -- cgit v1.2.3