From 8966fc4903f0eec61816d9b9bdbcac9b7d99c320 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 2 Jul 2012 13:19:00 -0700 Subject: Bug: Font Name & Size not updating text tool Signed-off-by: Armen Kesablyan --- .../text-properties.reel/text-properties.js | 261 +++++---------------- 1 file changed, 55 insertions(+), 206 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js') 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 c5729e98..4f944adf 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -8,13 +8,15 @@ 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; +var Converter = require("montage/core/converter/converter").Converter; exports.TextProperties = Montage.create(ToolProperties, { - className: {value: null, serializable: true}, - tagType: {value: null, serializable: true}, - fontSelection: {value: null, serializable: true}, - fontSettings: {value: null, serializable: true}, + + fontName: {value: null, serializable: true}, fontSize: {value: null, serializable: true}, + + fontSettings: {value: null, serializable: true}, // Note: Isn't used currently will need fontSettings Popup + fontColor: {value: null, serializable: true}, btnBold: {value: null, serializable: true}, btnItalic: {value: null, serializable: true}, @@ -33,66 +35,59 @@ exports.TextProperties = Montage.create(ToolProperties, { fontTypes: {value: null, serializable: true}, fontSizes: {value: null, serializable: true}, + // Draw Cycle 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.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; - this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; - } - }, + 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.handleEditorSelect.bind(this), false); + + //Bind to Rich Text editor that lives on the stage component + Object.defineBinding(this.application.ninja.stage.textTool, "fontName", { + boundObject: this.fontName, + boundObjectPropertyPath: "value", + oneway: false + }); + + Object.defineBinding(this.application.ninja.stage.textTool, "fontSize", { + boundObject: this.fontSize, + boundObjectPropertyPath: "value", + oneway: false + }); + + Object.defineBinding(this.btnBold, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "bold", + oneway: false + }); + + Object.defineBinding(this.btnItalic, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "italic", + oneway: false + }); + + Object.defineBinding(this.btnUnderline, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "underline", + oneway: false + }); + + Object.defineBinding(this.btnStrikethrough, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "strikeThrough", + oneway: false + }); + } + }, + + // Events 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); - } - }, - - handleClick: { - value: function(event) { - // this.selectedElement = event._event.target.id; } }, @@ -161,158 +156,12 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - 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: { - value: function() { - if (!this.initialized) { - - //Setup Font Selection tool - 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: "bold", - oneway: false - }); - - Object.defineBinding(this.btnItalic, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "italic", - oneway: false - }); - - Object.defineBinding(this.btnUnderline, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "underline", - oneway: false - }); - - Object.defineBinding(this.btnStrikethrough, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "strikeThrough", - oneway: false - }); - - Object.defineBinding(this.alignLeft, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "justify", - boundValueMutator: this.validateJustify, - oneway: false - }); -// -// Object.defineBinding(this.alignCenter, "pressed", { -// boundObject: this.application.ninja.stage.textTool, -// boundObjectPropertyPath: "justifycenter", -// boundValueMutator: this.validatePressed, -// oneway: true -// }); -// -// Object.defineBinding(this.alignRight, "pressed", { -// boundObject: this.application.ninja.stage.textTool, -// boundObjectPropertyPath: "justifyright", -// boundValueMutator: this.validatePressed, -// oneway: true -// }); -// -// Object.defineBinding(this.alignJustify, "pressed", { -// boundObject: this.application.ninja.stage.textTool, -// boundObjectPropertyPath: "justifyfull", -// boundValueMutator: this.validatePressed, -// oneway: true -// }); -// -// Object.defineBinding(this.numberedList, "pressed", { -// boundObject: this.application.ninja.stage.textTool, -// boundObjectPropertyPath: "insertorderedlist", -// boundValueMutator: this.validatePressed, -// oneway: true -// }); -// -// Object.defineBinding(this.bulletedList, "pressed", { -// boundObject: this.application.ninja.stage.textTool, -// boundObjectPropertyPath: "insertunorderedlist", -// boundValueMutator: this.validatePressed, -// oneway: true -// }); -// -// Object.defineBinding(this.fontSelection, "value", { -// boundObject: this.application.ninja.stage.textTool, -// boundObjectPropertyPath: "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; - } - - } - }, - - validatePressed: { - value: function(val) { - if (val == "true") return true; else return false - } - }, - - validateFont: { - value: function(val) { - return val; - } - }, - - validateFontSize: { - value: function(val) { - val = parseInt(val); - return this.fontSize.items[val - 1]; - } - }, - - initialized: { - value: false - }, - - handleFontSelectionChange: { - value: function(e) { - this.application.ninja.stage.textTool.element.focus(); - this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); - - //Note: Set Font Color on selection to ColorChip Component; - //this.this.application.ninja.stage.textTool.foreColor - - } - }, handleFontColorChange: { value: function(e) { this.application.ninja.stage.textTool.foreColor = 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 3d3e37c55e96b74c6c0a2841574fb03814d52999 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 3 Jul 2012 12:19:56 -0700 Subject: Text Tool 2 Signed-off-by: Armen Kesablyan --- .../text-properties.reel/text-properties.js | 128 +++++++++++++-------- 1 file changed, 83 insertions(+), 45 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js') 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 4f944adf..126665e2 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -8,32 +8,70 @@ 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; -var Converter = require("montage/core/converter/converter").Converter; exports.TextProperties = Montage.create(ToolProperties, { fontName: {value: null, serializable: true}, fontSize: {value: null, serializable: true}, - - fontSettings: {value: null, serializable: true}, // Note: Isn't used currently will need fontSettings Popup - fontColor: {value: null, serializable: true}, + btnBold: {value: null, serializable: true}, btnItalic: {value: null, serializable: true}, btnUnderline: {value: null, serializable: true}, btnStrikethrough: {value: null, serializable: true}, - txtLink: {value: null, serializable: true}, - linkTarget: {value: null, serializable: true}, + alignLeft: {value: null, serializable: true}, alignCenter: {value: null, serializable: true}, alignRight: {value: null, serializable: true}, alignJustify: {value: null, serializable: true}, + indent: {value: null, serializable: true}, outdent: {value: null, serializable: true}, + numberedList: {value: null, serializable: true}, bulletedList: {value: null, serializable: true}, - fontTypes: {value: null, serializable: true}, - fontSizes: {value: null, serializable: true}, + + // Events + handleEditorSelect: { + value: function(e) { + this.alignLeft.pressed = false; + this.alignCenter.pressed = false; + this.alignRight.pressed = false; + this.alignJustify.pressed = false; + this.bulletedList.pressed = false; + this.numberedList.pressed = false; + + + switch(this.application.ninja.stage.textTool.justify) { + case "left": + this.alignLeft.pressed = true; + break; + case "center": + this.alignCenter.pressed = true; + break; + case "right": + this.alignRight.pressed = true; + break; + case "full": + this.alignJustify.pressed = true; + } + + switch(this.application.ninja.stage.textTool.listStyle) { + case "ordered": + this.numberedList.pressed = true; + break; + case "unordered": + this.bulletedList.pressed = true; + } + } + }, + + handleEditorBlur: { + value: function(e) { + + } + }, + // Draw Cycle prepareForDraw: { @@ -46,6 +84,7 @@ exports.TextProperties = Montage.create(ToolProperties, { this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false); + //Bind to Rich Text editor that lives on the stage component Object.defineBinding(this.application.ninja.stage.textTool, "fontName", { boundObject: this.fontName, @@ -85,83 +124,82 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - // Events - handleEditorSelect: { - value: function(e) { - - } - }, - - handleAlignLeftAction: { + // Actions + handleJustifyLeftAction: { 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"); + this.alignCenter.pressed = false; + this.alignRight.pressed = false; + this.alignJustify.pressed = false; + this.application.ninja.stage.textTool.justify = "left"; } }, - handleAlignCenterAction: { + handleJustifyCenterAction: { 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"); + this.alignLeft.pressed = false; + this.alignRight.pressed = false; + this.alignJustify.pressed = false; + this.application.ninja.stage.textTool.justify = "center" } }, - handleAlignRightAction: { + handleJustifyRightAction: { 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"); + this.alignLeft.pressed = false; + this.alignCenter.pressed = false; + this.alignJustify.pressed = false; + this.application.ninja.stage.textTool.justify = "right"; } }, - handleAlignJustifyAction: { + handleJustifyAction: { 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"); + this.alignLeft.pressed = false; + this.alignCenter.pressed = false; + this.alignRight.pressed = false; + this.application.ninja.stage.textTool.justify = "full"; } }, handleIndentAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("indent"); + this.application.ninja.stage.textTool.indent(); } }, handleOutdentAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("outdent"); + this.application.ninja.stage.textTool.outdent(); } }, handleBulletedListAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("insertunorderedlist"); + this.numberedList.pressed = false; + if(e._currentTarget.pressed) { + this.application.ninja.stage.textTool.listStyle = "unordered"; + } else { + this.application.ninja.stage.textTool.listStyle = "none"; + } } }, handleNumberedListAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("insertorderedlist"); + this.bulletedList.pressed = false; + if(e._currentTarget.pressed) { + this.application.ninja.stage.textTool.listStyle = "ordered"; + } else { + this.application.ninja.stage.textTool.listStyle = "none"; + } } }, handleFontColorChange: { value: function(e) { - this.application.ninja.stage.textTool.foreColor = e._event.color.css; + this.application.ninja.stage.textTool.element.style.color = e._event.color.css; } } }); - -- cgit v1.2.3