aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/lib/nj-utils.js214
-rw-r--r--js/ninja.reel/ninja.html8
-rw-r--r--js/ninja.reel/ninja.js2
3 files changed, 223 insertions, 1 deletions
diff --git a/js/lib/nj-utils.js b/js/lib/nj-utils.js
new file mode 100644
index 00000000..59ea6095
--- /dev/null
+++ b/js/lib/nj-utils.js
@@ -0,0 +1,214 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
9 ElementModel = require("js/models/element-model").ElementModel,
10 Properties3D = require("js/models/properties-3d").Properties3D,
11 ShapeModel = require("js/models/shape-model").ShapeModel,
12 ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory;
13
14exports.NJUtils = Montage.create( Component, {
15
16
17
18 /* =============== DOM Access ================ */
19
20 ///// Quick "getElementById"
21 $ : {
22 value: function(id) {
23 return document.getElementById(id);
24 }
25 },
26
27 ///// Quick "getElementsByClassName" which also returns as an Array
28 ///// Can return as NodeList by passing true as second argument
29 $$ : {
30 value: function(className, asNodeList) {
31 var list = document.getElementsByClassName(className);
32 return (asNodeList) ? list : this.toArray(list);
33 }
34 },
35
36 ///// Get child nodes of element
37 ///// Omit filter to only return element nodes
38 ///// Pass in filter function to minimize collection, or
39 ///// set to true to include all nodes
40 children : {
41 value : function(el, filter) {
42 var f = filter || function(item) {
43 return item.nodeType === 1;
44 };
45 return this.toArray(el.childNodes).filter(f);
46 }
47 },
48
49 /* ============= DOM Manipulation ============= */
50
51 ///// Creates and returns text node from string
52 textNode : {
53 value: function(text) {
54 return document.createTextNode(text);
55 }
56 },
57
58 ///// Quick "createElement" function "attr" can be classname or object
59 ///// with attribute key/values
60 make : {
61 value: function(tag, attr) {
62 var el = document.createElement(tag);
63 if (typeof attr === 'object') {
64 for (var a in attr) {
65 if (attr.hasOwnProperty(a)) {
66 el[a] = attr[a];
67 }
68 }
69 } else if (typeof attr === 'string') {
70 el.className = (el.className + ' ' + attr).trim();
71 }
72
73 return el;
74 }
75 },
76
77 ///// Element factory function for Ninja Elements
78 ///// selection is the string displayed in the PI
79 makeNJElement: {
80 value: function(tag, selection, controller, attr, isShape) {
81 var el = this.make(tag, attr);
82 this.makeElementModel(el, selection, controller, isShape);
83
84 return el;
85 }
86 },
87
88 ///// Element Model creation for existing elements
89 ///// TODO: find a different place for this function
90 makeElementModel: {
91 value: function(el, selection, controller, isShape) {
92 var p3d = Montage.create(Properties3D).init(el);
93 var shapeProps = null;
94 if(isShape) {
95 shapeProps = Montage.create(ShapeModel);
96 }
97
98 el.elementModel = Montage.create(ElementModel, {
99 type: { value: el.nodeName},
100 selection: { value: selection},
101 controller: { value: ControllerFactory.getController(controller)},
102 pi: { value: controller + "Pi"},
103 props3D: { value: p3d},
104 shapeModel: { value: shapeProps}
105 });
106
107 }
108 },
109
110 ///// Element Model creation for existing elements based on element type.
111 ///// TODO: find a different place for this function and return different element models based on type.
112 makeElementModel2: {
113 value: function(el) {
114 this.makeElementModel(el, "Div", "block", false);
115 }
116 },
117
118 ///// Removes all child nodes and returns node
119 ///// Accepts a single node, or an array of dom nodes
120 empty : {
121 value: function(node) {
122 var elements = [],
123 self = this;
124 if (node.constructor === Array) {
125 node.forEach(function(el) { self.empty(el) });
126 } else {
127 this.toArray(node.childNodes).forEach(function(child) {
128 child.parentNode.removeChild(child);
129 });
130 }
131
132 return node;
133 }
134 },
135
136 queryParentSelector : {
137 value: function(el, strSelector) {
138 // queryParentSelector:
139 // Given a DOM element el (required), walk up the DOM tree
140 // and find the first parent that matches selector strSelector (required).
141 // Returns: The element that matches, or false if there is no match
142 // or if insufficient parameters are supplied.
143
144 if ((typeof(el) === "undefined") || (typeof(strSelector) === "undefined")) {
145 // Parameters are required, m'kay?
146 return false;
147 } else if ((typeof(el) !== "object") || (typeof(strSelector) !== "string" )) {
148 // You also have to use the right parameters.
149 return false;
150 }
151
152 // First, get an empty clone of the parent.
153 var myParent = el.parentNode;
154 var clone = myParent.cloneNode(false);
155 if (clone === null) {
156 return false;
157 }
158
159 // If we're at the top of the DOM, our clone will be an htmlDocument.
160 // htmlDocument has no tagName.
161 if (typeof(clone.tagName) !== "undefined") {
162 // create a bogus div to use as a base for querySelector
163 var temp = document.createElement("div");
164
165 // Append the clone to the bogus div
166 temp.appendChild(clone);
167
168 // Now we can use querySelector! Sweet.
169 var selectorTest = temp.querySelector(strSelector);
170
171 // What has querySelector returned?
172 if (selectorTest === null) {
173 // No match, so recurse.
174 return this.queryParentSelector(myParent, strSelector);
175 } else {
176 // Match! Return the element.
177 return myParent;
178 }
179 } else {
180 // We're at the top of the DOM so we're done.
181 return false;
182 }
183 }
184
185 },
186
187 /* ================= Style methods ================= */
188
189 ///// Get computed height of element
190 height : {
191 value: function(node, pseudo) {
192 return node.ownerDocument.defaultView.getComputedStyle(node, pseudo).getPropertyValue('height');
193 }
194 },
195
196 /* ================= Array methods ================= */
197
198 ///// Return an array from an array-like object
199 toArray : {
200 value: function(arrayLikeObj) {
201 return Array.prototype.slice.call(arrayLikeObj);
202 }
203 },
204
205 /* ================= String methods ================= */
206
207 ///// Return the last part of a path (e.g. filename)
208 getFileNameFromPath : {
209 value: function(path) {
210 return path.substr(path.lastIndexOf('/') + 1);
211 }
212 }
213
214});
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 706c8243..f3ff3d58 100644
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -259,6 +259,11 @@
259 "name": "NewFileWorkflowController" 259 "name": "NewFileWorkflowController"
260 }, 260 },
261 261
262 "njUtils": {
263 "module":"js/lib/nj-utils",
264 "name": "NJUtils"
265 },
266
262 "owner": { 267 "owner": {
263 "module": "js/ninja.reel", 268 "module": "js/ninja.reel",
264 "name": "Ninja", 269 "name": "Ninja",
@@ -279,7 +284,8 @@
279 "stylesController": {"@": "stylesController"}, 284 "stylesController": {"@": "stylesController"},
280 "filePickerController": {"@": "filePickerController"}, 285 "filePickerController": {"@": "filePickerController"},
281 "newFileController": {"@": "newFileController"}, 286 "newFileController": {"@": "newFileController"},
282 "documentBar": {"@": "documentBar"} 287 "documentBar": {"@": "documentBar"},
288 "njUtils": {"@": "njUtils"}
283 } 289 }
284 } 290 }
285 291
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 465533cd..7115b228 100644
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -34,6 +34,8 @@ exports.Ninja = Montage.create(Component, {
34 34
35 templateDidLoad: { 35 templateDidLoad: {