From 69f0dbbe2ebbbc8d7fa89afe1a7078d0fe206be9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 14 Feb 2012 15:53:08 -0800 Subject: Adding all the components to the panel Signed-off-by: Valerio Virgillito --- .../ComponentsPanelBase.js | 90 +++++++++++++++++++++- 1 file changed, 88 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 7e5a76ee..bb6b049a 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -25,15 +25,60 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component { "text": "Montage Components", "children": [ + { + "text": "Anchor", + "dataFile" : "node_modules/components-data/anchor.json", + "component": "anchor" + }, { "text": "Button", "dataFile" : "node_modules/components-data/button.json", "component": "button" }, + { + "text": "Checkbox", + "dataFile" : "node_modules/components-data/checkbox.json", + "component": "checkbox" + }, + { + "text": "Image Component", + "dataFile" : "node_modules/components-data/image.json", + "component": "imageComponent" + }, + { + "text": "NumberInput", + "dataFile" : "node_modules/components-data/number-input.json", + "component": "numberInput" + }, + { + "text": "Select Input", + "dataFile" : "node_modules/components-data/select.json", + "component": "select" + }, + { + "text": "Radio Button", + "dataFile" : "node_modules/components-data/radio-button.json", + "component": "radioButton" + }, + { + "text": "Range Input", + "dataFile" : "node_modules/components-data/range-input.json", + "component": "rangeInput" + }, + { + "text": "TextArea", + "dataFile" : "node_modules/components-data/textarea.json", + "component": "textarea" + }, { "text": "Textfield", "dataFile" : "node_modules/components-data/textfield.json", "component": "textfield" + }, + { + "text": "Toogle Button", + "dataFile" : "node_modules/components-data/toggle-button.json", + "component": "toggleButton" } ] } @@ -211,6 +256,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component NJevent("elementAdding", {"el": element, "data":styles}); }); + } }, @@ -219,18 +265,58 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component var el; switch(name) { + case "anchor": + el = NJUtils.makeNJElement("a", "Anchor", "component"); + el.elementModel.pi = "AnchorPi"; + break; case "button": el = NJUtils.makeNJElement(name, "Button", "component"); el.elementModel.pi = "ButtonPi"; el.setAttribute("type", "button"); el.innerHTML = "Button"; break; - case "textfield": { + case "checkbox": + el = NJUtils.makeNJElement("input", "Checkbox", "component"); + el.elementModel.pi = "CheckboxPi"; + el.setAttribute("type", "checkbox"); + break; + case "imageComponent": + el = NJUtils.makeNJElement("image", "Image", "component"); + el.elementModel.pi = "ImageComponentPi"; + break; + case "numberInput": + el = NJUtils.makeNJElement("input", "Number Input", "component"); + el.elementModel.pi = "NumberInputPi"; + el.setAttribute("type", "number"); + break; + case "select": + el = NJUtils.makeNJElement("select", "Select", "component"); + el.elementModel.pi = "SelectPi"; + break; + case "radioButton": + el = NJUtils.makeNJElement("input", "Radio Button", "component"); + el.elementModel.pi = "RadioButtonPi"; + el.setAttribute("type", "radio"); + break; + case "rangeInput": + el = NJUtils.makeNJElement("input", "Range Input", "component"); + el.elementModel.pi = "RangeInputPi"; + el.setAttribute("type", "range"); + break; + case "textfield": el = NJUtils.makeNJElement("input", "Textfield", "component"); el.elementModel.pi = "TextfieldPi"; el.setAttribute("type", "text"); break; - } + case "textarea": + el = NJUtils.makeNJElement("textarea", "TextArea", "component"); + el.elementModel.pi = "TextArea"; + break; + case "toggleButton": + el = NJUtils.makeNJElement("button", "Toggle Button", "component"); + el.elementModel.pi = "ToggleButtonPi"; + el.innerHTML = "Off"; + break; } return el; -- cgit v1.2.3 From f2f6ed48634ee4d74dd780c66e58c6b1e00234dd Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 14 Feb 2012 23:47:19 -0800 Subject: Completing the anchor element Signed-off-by: Valerio Virgillito --- js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index bb6b049a..4a0ac2b5 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -268,6 +268,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component case "anchor": el = NJUtils.makeNJElement("a", "Anchor", "component"); el.elementModel.pi = "AnchorPi"; + el.setAttribute("href", "http://www.motorola.com"); + el.innerHTML = "link"; break; case "button": el = NJUtils.makeNJElement(name, "Button", "component"); -- cgit v1.2.3 From 68f8788c80d7f8d7815aca65ffabaa40b9434705 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 14 Feb 2012 23:47:33 -0800 Subject: fixing the controller to handle all properties Signed-off-by: Valerio Virgillito --- js/controllers/elements/component-controller.js | 43 +++++++++++-------------- 1 file changed, 18 insertions(+), 25 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 33b9b79a..7fa62d1e 100644 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js @@ -12,20 +12,15 @@ exports.ComponentController = Montage.create(ElementController, { getProperty: { value: function(el, prop) { switch(prop) { - case "label": - return this.application.ninja.currentDocument.getComponentFromElement(el).label; - break; - case "enabled": - return this.application.ninja.currentDocument.getComponentFromElement(el).enabled; - break; - case "disabled": - return this.application.ninja.currentDocument.getComponentFromElement(el).disabled; - break; - case "value": - return this.application.ninja.currentDocument.getComponentFromElement(el).value; - break; - default: + case "id": + case "class": + case "left": + case "top": + case "width": + case "height": return ElementController.getProperty(el, prop, true); + default: + return this.application.ninja.currentDocument.getComponentFromElement(el)[prop]; } } }, @@ -33,20 +28,18 @@ exports.ComponentController = Montage.create(ElementController, { setProperty: { value: function(el, p, value) { switch(p) { - case "label": - this.application.ninja.currentDocument.getComponentFromElement(el).label = value; - break; - case "enabled": - this.application.ninja.currentDocument.getComponentFromElement(el).enabled = value; - break; - case "disabled": - this.application.ninja.currentDocument.getComponentFromElement(el).disabled = value; - break; - case "value": - this.application.ninja.currentDocument.getComponentFromElement(el).value = value; + case "id": + case "class": + case "left": + case "top": + case "width": + case "height": + ElementController.setProperty(el, p, value); break; default: - ElementController.setProperty(el, p, value); + this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value; + break; + } } } -- cgit v1.2.3 From d1bc0d3e8b3ab3341105c3e29dd2ca11a20d8931 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 15 Feb 2012 00:01:28 -0800 Subject: Adding the button and the dropdown control. Signed-off-by: Valerio Virgillito --- js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 4a0ac2b5..987cd6b5 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -164,6 +164,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component row.prop = props.name; row.defaultValue = props["default"]; row.label = props.name; + row.items = props.possibleValues; section.Section.push([row]); } @@ -192,6 +193,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component return "textbox"; case "boolean": return "checkbox"; + case "select": + return "dropdown"; default: alert("Conversion not implemented for ", type); } -- cgit v1.2.3 From 747616980cad14f0b65fbcc7f497ed9680a39d29 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 15 Feb 2012 14:55:21 -0800 Subject: Adding more components pi Added rest of the components pi. Missing text-input and select Signed-off-by: Valerio Virgillito --- js/controllers/elements/component-controller.js | 14 ++++++++++++-- .../ComponentsPanelBase.reel/ComponentsPanelBase.js | 8 ++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 7fa62d1e..83450d0f 100644 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js @@ -18,7 +18,11 @@ exports.ComponentController = Montage.create(ElementController, { case "top": case "width": case "height": - return ElementController.getProperty(el, prop, true); + if(el.nodeName === "IMG" && (prop === "width" || prop === "height")) { + return this.application.ninja.currentDocument.getComponentFromElement(el)[prop]; + } else { + return ElementController.getProperty(el, prop, true); + } default: return this.application.ninja.currentDocument.getComponentFromElement(el)[prop]; } @@ -34,9 +38,15 @@ exports.ComponentController = Montage.create(ElementController, { case "top": case "width": case "height": - ElementController.setProperty(el, p, value); + if(el.nodeName === "IMG" && (p === "width" || p === "height")) { + this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value; + } else { + ElementController.setProperty(el, p, value); + } break; default: + if(p === "min" || p === "max") value = parseFloat(value); + this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value; break; diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 987cd6b5..bcb14013 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -195,6 +195,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component return "checkbox"; case "select": return "dropdown"; + case "number": + return "hottext"; default: alert("Conversion not implemented for ", type); } @@ -287,7 +289,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component break; case "imageComponent": el = NJUtils.makeNJElement("image", "Image", "component"); - el.elementModel.pi = "ImageComponentPi"; + el.elementModel.pi = "ImagePi"; + el.setAttribute("width", 200); + el.setAttribute("height", 200); break; case "numberInput": el = NJUtils.makeNJElement("input", "Number Input", "component"); @@ -315,7 +319,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component break; case "textarea": el = NJUtils.makeNJElement("textarea", "TextArea", "component"); - el.elementModel.pi = "TextArea"; + el.elementModel.pi = "TextAreaPi"; break; case "toggleButton": el = NJUtils.makeNJElement("button", "Toggle Button", "component"); -- cgit v1.2.3 From 9e3c10d4e12e896107c8551b4e6fc1dfbaf7bda1 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 16 Feb 2012 21:42:18 -0800 Subject: Support for data attributes and adding a random string generator Signed-off-by: Valerio Virgillito --- js/lib/NJUtils.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 8daafa42..887743c5 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, + Uuid = require("montage/core/uuid").Uuid, ElementModel = require("js/models/element-model").ElementModel, Properties3D = require("js/models/properties-3d").Properties3D, ShapeModel = require("js/models/shape-model").ShapeModel, @@ -56,13 +57,18 @@ exports.NJUtils = Object.create(Object.prototype, { ///// Quick "createElement" function "attr" can be classname or object ///// with attribute key/values + ///// Suppor for data attributes make : { value: function(tag, attr) { var el = document.createElement(tag); if (typeof attr === 'object') { for (var a in attr) { if (attr.hasOwnProperty(a)) { - el[a] = attr[a]; + if(a.indexOf("data-") > -1) { + el.setAttribute(a, attr[a]); + } else { + el[a] = attr[a]; + } } } } else if (typeof attr === 'string') { @@ -247,6 +253,20 @@ exports.NJUtils = Object.create(Object.prototype, { } return status; } + }, + + /* ================= misc methods ================= */ + + // Generates an alpha-numeric random number + // len: number of chars + // default length is '8' + generateRandom: { + value: function(len) { + var length; + len ? length = len : length = 8; + + return Uuid.generate().substring(0,length); + } } }); -- cgit v1.2.3 From e0bead5a36ae987c558607b77745c4018caf59f8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 16 Feb 2012 21:42:56 -0800 Subject: Adding a data-RDGE-id attribute to each canvas to save/load canvas data Signed-off-by: Valerio Virgillito --- js/controllers/elements/shapes-controller.js | 1 + js/tools/BrushTool.js | 2 +- js/tools/LineTool.js | 2 +- js/tools/PenTool.js | 2 +- js/tools/ShapeTool.js | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 640119c4..15a18a51 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -59,6 +59,7 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "useWebGl": var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); + canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); canvas.width = el.width; canvas.height = el.height; this.application.ninja.elementMediator.replaceElement(el, canvas); diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index ce8ffbb9..4d44326f 100755 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -201,7 +201,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var top = Math.round(midPt[1] - 0.5 * h); if (!canvas) { - var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); + var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); ElementMediator.addElement(newCanvas, elementModel.data, true); diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 99c374a7..233316a5 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -82,7 +82,7 @@ exports.LineTool = Montage.create(ShapeTool, { h += ~~(yAdj*2); } - canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", null, true); + canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas); ElementMediator.addElement(canvas, elementModel.data, true); diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 9a69b53d..7749d525 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -570,7 +570,7 @@ exports.PenTool = Montage.create(ShapeTool, { if (!canvas) { var newCanvas = null; - newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", null, true); + newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); ElementMediator.addElement(newCanvas, elementModel.data, true); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 4ccb7a8d..29e9b99f 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -66,7 +66,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { var canvas; if(!this._useExistingCanvas()) { - canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", null, true); + canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height, drawData.planeMat, drawData.midPt, canvas); -- cgit v1.2.3 From 90e2b3455a123af8751d63381609b3a5ae304051 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 16 Feb 2012 22:33:08 -0800 Subject: Fixing the selectInput and finishing the textinput Signed-off-by: Valerio Virgillito --- js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index bcb14013..b4eec771 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -300,7 +300,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component break; case "select": el = NJUtils.makeNJElement("select", "Select", "component"); - el.elementModel.pi = "SelectPi"; + el.elementModel.pi = "SelectInputPi"; break; case "radioButton": el = NJUtils.makeNJElement("input", "Radio Button", "component"); -- cgit v1.2.3