modjs-architecture 0.4.0 → 0.6.0
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile +1 -0
- data/README.md +20 -20
- data/VERSION +1 -1
- data/docs/dom.html +15 -15
- data/docs/existence.html +25 -25
- data/docs/module.html +10 -10
- data/lib/modjs-architecture.rb +32 -2
- data/lib/modjs-architecture/core/application.js +8 -8
- data/lib/modjs-architecture/core/dom.js +19 -19
- data/lib/modjs-architecture/core/module.js +15 -15
- data/lib/modjs-architecture/helpers/existence.js +33 -33
- data/lib/modjs-architecture/lib/mod.js +55 -55
- data/lib/modjs-architecture/templates/templates.erb.js +3 -0
- data/modjs-architecture.gemspec +10 -4
- data/spec/fixtures/foo-elements.js +2 -2
- data/spec/fixtures/foo.js +3 -3
- data/spec/fixtures/foo_all.js +3 -3
- data/spec/fixtures/foo_elements.js +3 -3
- data/spec/fixtures/foo_model.js +3 -3
- data/spec/fixtures/myapp.js +55 -55
- data/spec/fixtures/templates_compiled.js +4 -0
- data/spec/fixtures/test.jst +1 -0
- data/spec/fixtures/test_two.jst +1 -0
- data/spec/fixtures/update.js +55 -55
- data/spec/javascripts/application_spec.js +1 -1
- data/spec/javascripts/dom_spec.js +8 -8
- data/spec/javascripts/existence_spec.js +75 -75
- data/spec/javascripts/module_spec.js +5 -5
- data/spec/modjs-architecture_spec.rb +18 -11
- data/templates/model.js +1 -1
- data/templates/module.js +2 -2
- metadata +24 -5
- data/lib/modjs-architecture/modjs.architecture +0 -6
data/Gemfile
CHANGED
data/README.md
CHANGED
|
@@ -23,29 +23,29 @@ This will create the myapp application in the example folder (creating the folde
|
|
|
23
23
|
## The Application object
|
|
24
24
|
Mod.js creates an application object which acts as a namespace for your entire application. This global variable will encapsulate most of the code in your web application and act as the central hub of your modules.
|
|
25
25
|
|
|
26
|
-
The application object really couldn't be much simpler. It has one method and one property. The name property is just a string that identifys the object. It's only method is
|
|
26
|
+
The application object really couldn't be much simpler. It has one method and one property. The name property is just a string that identifys the object. It's only method is addModule, which creates a new module, adds that module as a property, and returns a reference to the new module. This method's only purpose is to attach a new module to the global namespace.
|
|
27
27
|
|
|
28
28
|
```js
|
|
29
|
-
myapp.
|
|
29
|
+
myapp.addModule('dashboard'); // creates myapp.dashboard module
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
## Modules
|
|
33
33
|
Modules are the heart of a modjs application. They're not exactly controllers and they're not exactly classes but they share a lot of the same responsibilities as you'd expect from these classical constructs. Modules are based on the typical browser-based workflow. Wait for the DOM, when it's ready attach events, setup plugins, and ajax the shit out of it, etc.
|
|
34
34
|
|
|
35
|
-
Mod.js modules encapsulate this common pattern and create a coherent way to design and create javascript solutions. Modules are only slightly more sophisticated than the application object itself. A modules two main method's are init and
|
|
35
|
+
Mod.js modules encapsulate this common pattern and create a coherent way to design and create javascript solutions. Modules are only slightly more sophisticated than the application object itself. A modules two main method's are init and initWhenReady.
|
|
36
36
|
|
|
37
|
-
Calling
|
|
37
|
+
Calling initWhenReady will wait for the dom to be loaded and then call the init method. By default, the init method does nothing. You will provide the code for the init method. The init method should follow the composed method pattern, a simple list of functions to call when the dom is ready. An example of a typical module looks something like this:
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
40
|
(function(app) {
|
|
41
|
-
var m = app.
|
|
41
|
+
var m = app.addModule('dashboard');
|
|
42
42
|
|
|
43
43
|
m.init = function() {
|
|
44
44
|
setup_tabbed_navigation();
|
|
45
45
|
open_external_links_in_new_tab();
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
m.
|
|
48
|
+
m.initWhenReady();
|
|
49
49
|
|
|
50
50
|
// Private methods
|
|
51
51
|
|
|
@@ -57,7 +57,7 @@ Calling init_when_ready will wait for the dom to be loaded and then call the ini
|
|
|
57
57
|
var links = $('a');
|
|
58
58
|
var re_local = new RegExp(location.hostname);
|
|
59
59
|
var external_links = links.filter(function(i, link) {
|
|
60
|
-
if (
|
|
60
|
+
if (isDefined($(link).attr('href'))) {
|
|
61
61
|
if (href.match(/^https?\:\/\//) && !re_local.test(href)) {
|
|
62
62
|
return true;
|
|
63
63
|
}
|
|
@@ -72,13 +72,13 @@ This probably looks similar to the code you write currently, Mod.js simply makes
|
|
|
72
72
|
|
|
73
73
|
Notice that the entire module is wrapped in a closure. This creates a private scope specific to this module. Public methods and properties can be created by attaching them to the module, private properties and methods are simply defined inside the closure, with no connection to the global scope. Also notice that the application object is passed into the closure and aliased as `app`. This means if application name changes or you wish to copy this module into another application, you only need to change the name in one place. It also has the added advantage of being short when referencing the namespace.
|
|
74
74
|
|
|
75
|
-
Next is the module instantiation: `var m = app.
|
|
75
|
+
Next is the module instantiation: `var m = app.addModule('dashboard')`. This line adds a new Mod.js module to the application and returns a reference to that module to be stored as `m`. This serves multiple purposes. For one, it provides a concrete reference to the current module, you won't have to juggle the `this` variable throughout the code. It also serves to attach public methods and properties to the module's scope.
|
|
76
76
|
|
|
77
77
|
Next, see the `init` method declaration. This is where to put all the code which runs when the DOM is ready to be manipulated. Notice that the `setup_tabbed_navigation` method and the `open_external_links_in_new_tab` method are both defined as private methods inside the closure. By using this pattern, only the `dashboard` module has access to these methods. If you wanted to make these methods publicly accessible, simply add the methods to the module namespace. The previous module re-written with public methods would look like this:
|
|
78
78
|
|
|
79
79
|
```js
|
|
80
80
|
(function(app) {
|
|
81
|
-
var m = app.
|
|
81
|
+
var m = app.addModule('dashboard');
|
|
82
82
|
|
|
83
83
|
m.init = function() {
|
|
84
84
|
m.setup_tabbed_navigation();
|
|
@@ -93,7 +93,7 @@ Next, see the `init` method declaration. This is where to put all the code which
|
|
|
93
93
|
var links = $('a');
|
|
94
94
|
var re_local = new RegExp(location.hostname);
|
|
95
95
|
var external_links = links.filter(function(i, link) {
|
|
96
|
-
if (
|
|
96
|
+
if (isDefined($(link).attr('href'))) {
|
|
97
97
|
if (href.match(/^https?\:\/\//) && !re_local.test(href)) {
|
|
98
98
|
return true;
|
|
99
99
|
}
|
|
@@ -102,7 +102,7 @@ Next, see the `init` method declaration. This is where to put all the code which
|
|
|
102
102
|
external_links.attr('target', '_blank');
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
m.
|
|
105
|
+
m.initWhenReady();
|
|
106
106
|
})(myapp);
|
|
107
107
|
```
|
|
108
108
|
|
|
@@ -110,13 +110,13 @@ This makes these methods available publicly through the application namespace. F
|
|
|
110
110
|
|
|
111
111
|
```js
|
|
112
112
|
(function(app){
|
|
113
|
-
var m = app.
|
|
113
|
+
var m = app.addModule('some_other_module');
|
|
114
114
|
|
|
115
115
|
m.init = function() {
|
|
116
116
|
app.dashboard.open_external_links_in_new_tab();
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
m.
|
|
119
|
+
m.initWhenReady();
|
|
120
120
|
})(myapp);
|
|
121
121
|
```
|
|
122
122
|
|
|
@@ -139,7 +139,7 @@ The modules and application directories contain the main scripts of your applica
|
|
|
139
139
|
//= require "../plugins/foo"
|
|
140
140
|
|
|
141
141
|
(function(app) {
|
|
142
|
-
var m = app.
|
|
142
|
+
var m = app.addModule('dashboard');
|
|
143
143
|
|
|
144
144
|
...
|
|
145
145
|
})(myapp);
|
|
@@ -155,7 +155,7 @@ In this day and age of javascript programming, it seems everyone starts with a D
|
|
|
155
155
|
|
|
156
156
|
```js
|
|
157
157
|
(function(app) {
|
|
158
|
-
var m = app.
|
|
158
|
+
var m = app.addModule('dashboard');
|
|
159
159
|
|
|
160
160
|
//= require "../elements/dashboard.elements"
|
|
161
161
|
|
|
@@ -187,14 +187,14 @@ Now to update the dashboard.module file to use the new cahced selectors:
|
|
|
187
187
|
|
|
188
188
|
```js
|
|
189
189
|
(function(app) {
|
|
190
|
-
var m = app.
|
|
190
|
+
var m = app.addModule('dashboard');
|
|
191
191
|
|
|
192
192
|
m.init = function() {
|
|
193
193
|
setup_tabbed_navigation();
|
|
194
194
|
open_external_links_in_new_tab();
|
|
195
195
|
};
|
|
196
196
|
|
|
197
|
-
m.
|
|
197
|
+
m.initWhenReady();
|
|
198
198
|
|
|
199
199
|
// Private methods
|
|
200
200
|
|
|
@@ -205,7 +205,7 @@ Now to update the dashboard.module file to use the new cahced selectors:
|
|
|
205
205
|
function open_external_links_in_new_tab() {
|
|
206
206
|
var re_local = new RegExp(location.hostname);
|
|
207
207
|
var external_links = m.elements('links').filter(function(i, link) {
|
|
208
|
-
if (
|
|
208
|
+
if (isDefined($(link).attr('href'))) {
|
|
209
209
|
if (href.match(/^https?\:\/\//) && !re_local.test(href)) {
|
|
210
210
|
return true;
|
|
211
211
|
}
|
|
@@ -224,7 +224,7 @@ Models in Mod.js are simply json structures that are owned by the module. Each m
|
|
|
224
224
|
|
|
225
225
|
```js
|
|
226
226
|
(function(app) {
|
|
227
|
-
var m = app.
|
|
227
|
+
var m = app.addModule('dashboard');
|
|
228
228
|
|
|
229
229
|
//= require "../elements/dashboard.elements"
|
|
230
230
|
//= require "../models/dashboard.model"
|
|
@@ -241,7 +241,7 @@ Models in Mod.js are simply json structures that are owned by the module. Each m
|
|
|
241
241
|
Now that the model is included in our module we can use the `dashboard.model.js` file to attach data to our module. Using the simple example of a plugin configuration object, we'll add configuration data to the `tabs` plugin being used by `setup_tabbed_navigation`:
|
|
242
242
|
|
|
243
243
|
```js
|
|
244
|
-
m.
|
|
244
|
+
m.setData('tab_config', {
|
|
245
245
|
selectedTab: 2,
|
|
246
246
|
transition: 'fade'
|
|
247
247
|
});
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.
|
|
1
|
+
0.6.0
|
data/docs/dom.html
CHANGED
|
@@ -2,43 +2,43 @@
|
|
|
2
2
|
<span class="nx">queue</span> <span class="o">=</span> <span class="p">[];</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Set a <code>cache</code> property to store selected elements and an <code>is_ready</code> property to determine DOM status.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">DOM</span><span class="p">()</span> <span class="p">{</span>
|
|
3
3
|
<span class="k">this</span><span class="p">.</span><span class="nx">cache</span> <span class="o">=</span> <span class="p">{};</span>
|
|
4
4
|
<span class="k">this</span><span class="p">.</span><span class="nx">is_ready</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
5
|
-
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h3>
|
|
5
|
+
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h3>addEvent</h3>
|
|
6
6
|
|
|
7
|
-
<p>Convenience method to attach events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
7
|
+
<p>Convenience method to attach events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">addEvent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">fn</span><span class="p">,</span> <span class="nx">capture</span><span class="p">)</span> <span class="p">{</span>
|
|
8
8
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">capture</span><span class="p">))</span> <span class="p">{</span>
|
|
9
9
|
<span class="nx">capture</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
10
10
|
<span class="p">}</span>
|
|
11
11
|
|
|
12
|
-
<span class="k">if</span> <span class="p">(</span><span class="nx">
|
|
12
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">isString</span><span class="p">(</span><span class="nx">element</span><span class="p">))</span> <span class="p">{</span>
|
|
13
13
|
<span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cache</span><span class="p">[</span><span class="nx">element</span><span class="p">];</span>
|
|
14
14
|
<span class="p">}</span>
|
|
15
15
|
|
|
16
16
|
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">fn</span><span class="p">,</span> <span class="nx">capture</span><span class="p">);</span>
|
|
17
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>
|
|
17
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>removeEvent</h3>
|
|
18
18
|
|
|
19
|
-
<p>Convenience method to remove events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
19
|
+
<p>Convenience method to remove events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">removeEvent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">fn</span><span class="p">,</span> <span class="nx">capture</span><span class="p">)</span> <span class="p">{</span>
|
|
20
20
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">capture</span><span class="p">))</span> <span class="p">{</span>
|
|
21
21
|
<span class="nx">capture</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
22
22
|
<span class="p">}</span>
|
|
23
23
|
|
|
24
|
-
<span class="k">if</span> <span class="p">(</span><span class="nx">
|
|
24
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">isString</span><span class="p">(</span><span class="nx">element</span><span class="p">))</span> <span class="p">{</span>
|
|
25
25
|
<span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cache</span><span class="p">[</span><span class="nx">element</span><span class="p">];</span>
|
|
26
26
|
<span class="p">}</span>
|
|
27
27
|
|
|
28
28
|
<span class="nx">element</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">fn</span><span class="p">,</span> <span class="nx">capture</span><span class="p">);</span>
|
|
29
29
|
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h3>call<em>when</em>ready</h3>
|
|
30
30
|
|
|
31
|
-
<p>Pass a function to call when the DOM is ready</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
31
|
+
<p>Pass a function to call when the DOM is ready</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">callWhenReady</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">func</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>if DOM is already loaded execute the function</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">is_ready</span><span class="p">)</span> <span class="p">{</span>
|
|
32
32
|
<span class="k">return</span> <span class="nx">func</span><span class="p">();</span>
|
|
33
33
|
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>if timer is ticking</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">timer</span><span class="p">)</span> <span class="p">{</span>
|
|
34
34
|
<span class="nx">queue</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">func</span><span class="p">);</span>
|
|
35
|
-
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>this is the first in the queue</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>attach to the load event, just in case it finishes first.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">
|
|
35
|
+
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>this is the first in the queue</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>attach to the load event, just in case it finishes first.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="nb">window</span><span class="p">,</span> <span class="s1">'load'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">executeReadyQueue</span><span class="p">);</span>
|
|
36
36
|
<span class="nx">queue</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">func</span><span class="p">);</span>
|
|
37
|
-
<span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">
|
|
37
|
+
<span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">executeReadyQueue</span><span class="p">,</span> <span class="mi">13</span><span class="p">);</span>
|
|
38
38
|
<span class="p">}</span>
|
|
39
39
|
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h3>execute<em>ready</em>queue</h3>
|
|
40
40
|
|
|
41
|
-
<p>Execute all methods in the <code>queue</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
41
|
+
<p>Execute all methods in the <code>queue</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">executeReadyQueue</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
42
42
|
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">is_ready</span><span class="p">)</span> <span class="p">{</span>
|
|
43
43
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
44
44
|
<span class="p">}</span>
|
|
@@ -53,17 +53,17 @@
|
|
|
53
53
|
<span class="nx">queue</span> <span class="o">=</span> <span class="p">[];</span>
|
|
54
54
|
<span class="k">this</span><span class="p">.</span><span class="nx">is_ready</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
|
55
55
|
<span class="p">}</span>
|
|
56
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <h3>
|
|
56
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <h3>addElements</h3>
|
|
57
57
|
|
|
58
|
-
<p>Add cached elements to the <code>DOM.cache</code> from an object of name/value pairs containing selected DOM elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
58
|
+
<p>Add cached elements to the <code>DOM.cache</code> from an object of name/value pairs containing selected DOM elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">addElements</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">elements</span><span class="p">)</span> <span class="p">{</span>
|
|
59
59
|
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">elements</span><span class="p">)</span> <span class="p">{</span>
|
|
60
60
|
<span class="k">if</span> <span class="p">(</span><span class="nx">elements</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
|
|
61
|
-
<span class="k">this</span><span class="p">.</span><span class="nx">
|
|
61
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">addElement</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">elements</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
|
|
62
62
|
<span class="p">}</span>
|
|
63
63
|
<span class="p">}</span>
|
|
64
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h3>
|
|
64
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h3>addElement</h3>
|
|
65
65
|
|
|
66
|
-
<p>Add a single element to the <code>DOM.cache</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
66
|
+
<p>Add a single element to the <code>DOM.cache</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">DOM</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">addElement</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
|
|
67
67
|
<span class="k">this</span><span class="p">.</span><span class="nx">cache</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">element</span><span class="p">;</span>
|
|
68
68
|
<span class="p">};</span>
|
|
69
69
|
|
data/docs/existence.html
CHANGED
|
@@ -9,52 +9,52 @@ identity of variables.</p> </td> <td class="code">
|
|
|
9
9
|
|
|
10
10
|
<p>Convenience function to detect undefined status</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">is_undefined</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
11
11
|
<span class="k">return</span> <span class="k">typeof</span> <span class="nx">suspect</span> <span class="o">==</span> <span class="s2">"undefined"</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="kc">false</span><span class="p">;</span>
|
|
12
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h3>
|
|
12
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h3>isTypeof</h3>
|
|
13
13
|
|
|
14
|
-
<p>Strict type checking against the <code>suspect</code>'s constructor</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
14
|
+
<p>Strict type checking against the <code>suspect</code>'s constructor</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isTypeof</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
15
15
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">type</span><span class="p">))</span> <span class="p">{</span>
|
|
16
|
-
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"
|
|
16
|
+
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"isTypeof(Type, suspect): type is undefined"</span><span class="p">);</span>
|
|
17
17
|
<span class="p">}</span>
|
|
18
18
|
|
|
19
19
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">suspect</span><span class="p">))</span> <span class="p">{</span>
|
|
20
|
-
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"
|
|
20
|
+
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"isTypeof(Type, suspect): suspect is undefined"</span><span class="p">);</span>
|
|
21
21
|
<span class="p">}</span>
|
|
22
22
|
|
|
23
23
|
<span class="k">return</span> <span class="nx">suspect</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">==</span> <span class="nx">type</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="kc">false</span><span class="p">;</span>
|
|
24
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h3>
|
|
24
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h3>isNumeric</h3>
|
|
25
25
|
|
|
26
|
-
<p>Determines <code>suspect</code> holds a numeric value</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
26
|
+
<p>Determines <code>suspect</code> holds a numeric value</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isNumeric</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
27
27
|
<span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">suspect</span><span class="p">))</span> <span class="p">{</span>
|
|
28
28
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
29
29
|
<span class="p">}</span>
|
|
30
30
|
<span class="k">return</span> <span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">suspect</span><span class="p">))</span> <span class="o">&&</span> <span class="nb">isFinite</span><span class="p">(</span><span class="nx">suspect</span><span class="p">);</span>
|
|
31
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>
|
|
31
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>isString</h3>
|
|
32
32
|
|
|
33
|
-
<p>Alias method for String detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
34
|
-
<span class="k">return</span> <span class="nx">
|
|
35
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h3>
|
|
33
|
+
<p>Alias method for String detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
34
|
+
<span class="k">return</span> <span class="nx">isTypeof</span><span class="p">(</span><span class="nb">String</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">);</span>
|
|
35
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h3>isArray</h3>
|
|
36
36
|
|
|
37
|
-
<p>Alias method for Array detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
38
|
-
<span class="k">return</span> <span class="nx">
|
|
39
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h3>
|
|
37
|
+
<p>Alias method for Array detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isArray</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
38
|
+
<span class="k">return</span> <span class="nx">isTypeof</span><span class="p">(</span><span class="nb">Array</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">);</span>
|
|
39
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h3>isNumber</h3>
|
|
40
40
|
|
|
41
|
-
<p>Alias method for Number detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
42
|
-
<span class="k">return</span> <span class="nx">
|
|
43
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h3>
|
|
41
|
+
<p>Alias method for Number detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
42
|
+
<span class="k">return</span> <span class="nx">isTypeof</span><span class="p">(</span><span class="nb">Number</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">);</span>
|
|
43
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h3>isDate</h3>
|
|
44
44
|
|
|
45
|
-
<p>Alias method for Date detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
46
|
-
<span class="k">return</span> <span class="nx">
|
|
45
|
+
<p>Alias method for Date detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isDate</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
46
|
+
<span class="k">return</span> <span class="nx">isTypeof</span><span class="p">(</span><span class="nb">Date</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">);</span>
|
|
47
47
|
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h3>is_bool</h3>
|
|
48
48
|
|
|
49
49
|
<p>Alias method for Boolean detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">is_bool</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
50
|
-
<span class="k">return</span> <span class="nx">
|
|
51
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <h3>
|
|
50
|
+
<span class="k">return</span> <span class="nx">isTypeof</span><span class="p">(</span><span class="nb">Boolean</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">);</span>
|
|
51
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <h3>isRegExp</h3>
|
|
52
52
|
|
|
53
|
-
<p>Alias method for RegExp detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
54
|
-
<span class="k">return</span> <span class="nx">
|
|
55
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h3>
|
|
53
|
+
<p>Alias method for RegExp detection</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isRegExp</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
54
|
+
<span class="k">return</span> <span class="nx">isTypeof</span><span class="p">(</span><span class="nb">RegExp</span><span class="p">,</span> <span class="nx">suspect</span><span class="p">);</span>
|
|
55
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h3>isEmpty</h3>
|
|
56
56
|
|
|
57
|
-
<p>Convenience method to detect whether the <code>suspect</code> is empty</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
57
|
+
<p>Convenience method to detect whether the <code>suspect</code> is empty</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isEmpty</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
58
58
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">suspect</span><span class="p">))</span> <span class="p">{</span>
|
|
59
59
|
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
|
60
60
|
<span class="p">}</span>
|
|
@@ -62,7 +62,7 @@ identity of variables.</p> </td> <td class="code">
|
|
|
62
62
|
<span class="k">return</span> <span class="nx">suspect</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">;</span>
|
|
63
63
|
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <h3>is<em>not</em>empty</h3>
|
|
64
64
|
|
|
65
|
-
<p>Convenience method to detect whether the <code>suspect</code> is not empty</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">
|
|
65
|
+
<p>Convenience method to detect whether the <code>suspect</code> is not empty</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">isNotEmpty</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">suspect</span><span class="p">)</span> <span class="p">{</span>
|
|
66
66
|
<span class="k">return</span> <span class="nx">suspect</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="mi">1</span><span class="p">;</span>
|
|
67
67
|
<span class="p">};</span>
|
|
68
68
|
|
data/docs/module.html
CHANGED
|
@@ -18,7 +18,7 @@ The <code>name</code> property is a convenience to be able to ask a module it's
|
|
|
18
18
|
|
|
19
19
|
<p>Wait for the DOM to be ready and execute the actions</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Module</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">run</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
20
20
|
<span class="kd">var</span> <span class="nx">mod</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
21
|
-
<span class="k">this</span><span class="p">.</span><span class="nx">dom</span><span class="p">.</span><span class="nx">
|
|
21
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">dom</span><span class="p">.</span><span class="nx">callWhenReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
22
22
|
<span class="nx">mod</span><span class="p">.</span><span class="nx">execute</span><span class="p">();</span>
|
|
23
23
|
<span class="p">});</span>
|
|
24
24
|
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>execute</h3>
|
|
@@ -31,27 +31,27 @@ The <code>name</code> property is a convenience to be able to ask a module it's
|
|
|
31
31
|
passing a string retrieves an element, passing an object sets elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Module</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">elements</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">elements</span><span class="p">)</span> <span class="p">{</span>
|
|
32
32
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">elements</span><span class="p">))</span> <span class="p">{</span>
|
|
33
33
|
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">dom</span><span class="p">.</span><span class="nx">cache</span><span class="p">;</span>
|
|
34
|
-
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Look up cached element by string key</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">
|
|
34
|
+
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Look up cached element by string key</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">isString</span><span class="p">(</span><span class="nx">elements</span><span class="p">))</span> <span class="p">{</span>
|
|
35
35
|
<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">;</span>
|
|
36
36
|
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">dom</span><span class="p">.</span><span class="nx">cache</span><span class="p">[</span><span class="nx">name</span><span class="p">];</span>
|
|
37
37
|
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>cache the DOM objects</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="p">{</span>
|
|
38
|
-
<span class="k">this</span><span class="p">.</span><span class="nx">dom</span><span class="p">.</span><span class="nx">
|
|
38
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">dom</span><span class="p">.</span><span class="nx">addElements</span><span class="p">(</span><span class="nx">elements</span><span class="p">);</span>
|
|
39
39
|
<span class="p">}</span>
|
|
40
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h3>
|
|
40
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h3>setData</h3>
|
|
41
41
|
|
|
42
|
-
<p>Convenience method to add properties to the <code>data</code> property of the module</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Module</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">
|
|
42
|
+
<p>Convenience method to add properties to the <code>data</code> property of the module</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Module</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">setData</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
|
43
43
|
<span class="k">if</span> <span class="p">(</span><span class="nx">is_undefined</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
|
|
44
|
-
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'.
|
|
44
|
+
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'.setData(key, value): key is undefined'</span><span class="p">);</span>
|
|
45
45
|
<span class="p">}</span>
|
|
46
46
|
|
|
47
|
-
<span class="k">if</span> <span class="p">(</span><span class="nx">
|
|
48
|
-
<span class="k">throw</span> <span class="k">new</span> <span class="nx">SyntaxError</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'Module.
|
|
47
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">isTypeof</span><span class="p">(</span><span class="nb">String</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">is_undefined</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> <span class="p">{</span>
|
|
48
|
+
<span class="k">throw</span> <span class="k">new</span> <span class="nx">SyntaxError</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'Module.setData(key, value): value is undefined'</span><span class="p">);</span>
|
|
49
49
|
<span class="p">}</span>
|
|
50
50
|
|
|
51
|
-
<span class="k">if</span> <span class="p">(</span><span class="nx">
|
|
51
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">isTypeof</span><span class="p">(</span><span class="nb">String</span><span class="p">,</span> <span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
|
|
52
52
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
|
53
53
|
<span class="p">}</span>
|
|
54
|
-
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">
|
|
54
|
+
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">isTypeof</span><span class="p">(</span><span class="nb">Object</span><span class="p">,</span> <span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
|
|
55
55
|
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">key</span><span class="p">;</span>
|
|
56
56
|
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">property</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
|
57
57
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="nx">property</span><span class="p">];</span>
|
data/lib/modjs-architecture.rb
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
require 'EJS'
|
|
2
|
+
|
|
1
3
|
module ArchitectureJS
|
|
2
4
|
class Generator
|
|
3
5
|
def generate_file(filename, template, path = nil)
|
|
@@ -22,7 +24,7 @@ module ModJS
|
|
|
22
24
|
module_function :base_dir, :lib_dir
|
|
23
25
|
|
|
24
26
|
class Blueprint < ArchitectureJS::Blueprint
|
|
25
|
-
# this line adds the
|
|
27
|
+
# this line adds the framework to ArchitectureJS
|
|
26
28
|
ArchitectureJS::register_blueprint 'modjs', self
|
|
27
29
|
|
|
28
30
|
def initialize(config, root = nil)
|
|
@@ -38,7 +40,7 @@ module ModJS
|
|
|
38
40
|
super(@config, root)
|
|
39
41
|
|
|
40
42
|
add_templates "#{ModJS::base_dir}/templates"
|
|
41
|
-
@directories = %w'application elements lib models modules plugins spec'
|
|
43
|
+
@directories = %w'application elements lib models modules plugins spec templates'
|
|
42
44
|
end
|
|
43
45
|
|
|
44
46
|
def create
|
|
@@ -82,6 +84,7 @@ module ModJS
|
|
|
82
84
|
def update
|
|
83
85
|
read_config
|
|
84
86
|
update_application_file
|
|
87
|
+
compile_templates
|
|
85
88
|
super
|
|
86
89
|
end
|
|
87
90
|
|
|
@@ -147,5 +150,32 @@ module ModJS
|
|
|
147
150
|
@errors = true
|
|
148
151
|
puts ArchitectureJS::Notification.error "Sprockets error: #{error.message}"
|
|
149
152
|
end
|
|
153
|
+
|
|
154
|
+
def compile_templates
|
|
155
|
+
app_name = @config[:name]
|
|
156
|
+
compiled_templates = fetch_templates
|
|
157
|
+
formatted_templates = format_templates(compiled_templates)
|
|
158
|
+
template = ERB.new File.read("#{ModJS::base_dir}/lib/modjs-architecture/templates/templates.erb.js")
|
|
159
|
+
|
|
160
|
+
File.open("#{@root}/application/templates.js", "w+") do |f|
|
|
161
|
+
f << template.result(binding)
|
|
162
|
+
end
|
|
163
|
+
end
|
|
164
|
+
|
|
165
|
+
def fetch_templates
|
|
166
|
+
templates = {}
|
|
167
|
+
Dir.glob("#{@root}/templates/**/*.jst").each do |template|
|
|
168
|
+
name = File.basename(template).gsub(/\.jst$/, '')
|
|
169
|
+
templates[name] = EJS.compile(File.read(template))
|
|
170
|
+
end
|
|
171
|
+
templates
|
|
172
|
+
end
|
|
173
|
+
|
|
174
|
+
def format_templates(compiled_templates)
|
|
175
|
+
formatted_templates = compiled_templates.map do |name, function|
|
|
176
|
+
"\"#{name}\": #{function}"
|
|
177
|
+
end
|
|
178
|
+
end
|
|
179
|
+
|
|
150
180
|
end # class Project
|
|
151
181
|
end # module ArchitectureJS
|
|
@@ -6,27 +6,27 @@ Mod.Application = (function() {
|
|
|
6
6
|
|
|
7
7
|
// Constructing an application requires a name.
|
|
8
8
|
function Application(name) {
|
|
9
|
-
if (
|
|
9
|
+
if (isUndefined(name)) {
|
|
10
10
|
throw new Error("new Mod.Application(name): name is undefined");
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
this.name = name;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
//###
|
|
16
|
+
//### addModule
|
|
17
17
|
// A factory method to attach modules to the application object.
|
|
18
18
|
// This method makes sure to avaoid naming collisions
|
|
19
|
-
Application.prototype.
|
|
20
|
-
if (
|
|
21
|
-
throw new Error("Mod.Application.
|
|
19
|
+
Application.prototype.addModule = function(name) {
|
|
20
|
+
if (isUndefined(name)) {
|
|
21
|
+
throw new Error("Mod.Application.addModule(name): name is undefined");
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
if (
|
|
25
|
-
throw new Error("Mod.Application.
|
|
24
|
+
if (isDefined(this[name])) {
|
|
25
|
+
throw new Error("Mod.Application.addModule('" + name + "'): '" + name + "' already declared");
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
if (this.name === name) {
|
|
29
|
-
throw new Error("Mod.Application.
|
|
29
|
+
throw new Error("Mod.Application.addModule('" + name + "'): a module cannot have the same name as the application. It's bad idea. Do you really want to write " + name + "." + name + "? It's confusing.'");
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
return this[name] = new Mod.Module(name);
|