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') 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