Skip to content
This repository
Browse code

Added support for cloaked data-src and data-href attributes as well a…

…s cloaked templates through <script>.
  • Loading branch information...
commit ee683faa5c243dc77fbc7847a03cb933360721fe 1 parent c4b0753
Bram Stein authored September 25, 2011
4  examples/simple/resources.html
@@ -31,8 +31,8 @@
31 31
           {{#contents}}
32 32
             {{^hidden}}
33 33
               <div class="article">
34  
-                <img class="thumb" src="{{thumb}}"/>
35  
-                <h3><a href="{{url}}">{{title}}</a></h3>
  34
+                <img class="thumb" data-src="{{thumb}}"/>
  35
+                <h3><a data-href="{{url}}">{{title}}</a></h3>
36 36
                 <p class="byline">{{byline}}</p>
37 37
               </div>
38 38
             {{/hidden}}
2  src/externs/mustache.js
@@ -14,6 +14,6 @@ Mustache.name;
14 14
 Mustache.version;
15 15
 
16 16
 /**
17  
- * @type {function(!string, !Object, Object=, function(!string)): ?string}
  17
+ * @type {function(!string, !Object, Object=, function(!string)=): ?string}
18 18
  */
19 19
 Mustache.to_html = function (template, view, partials, send_fun) {};
3  src/layout/page.js
@@ -4,6 +4,7 @@ goog.require('treesaver.capabilities');
4 4
 goog.require('treesaver.debug');
5 5
 goog.require('treesaver.dimensions');
6 6
 goog.require('treesaver.dom');
  7
+goog.require('treesaver.template');
7 8
 goog.require('treesaver.layout.Grid');
8 9
 goog.require('treesaver.ui.Scrollable');
9 10
 
@@ -64,7 +65,7 @@ goog.scope(function() {
64 65
       '[' + dom.customAttributePrefix + 'template=document]',
65 66
       this.node
66 67
     ).forEach(function(el) {
67  
-      el.innerHTML = Mustache.to_html(el.innerHTML, content.doc.meta);
  68
+      treesaver.template.expand(el, el.innerHTML, content.doc.meta);
68 69
     });
69 70
 
70 71
     // Containers
24  src/lib/template.js
... ...
@@ -0,0 +1,24 @@
  1
+goog.provide('treesaver.template');
  2
+goog.require('treesaver.dom');
  3
+
  4
+goog.scope(function() {
  5
+  var dom = treesaver.dom;
  6
+
  7
+  /**
  8
+   * @param {!Element} container
  9
+   * @param {!string} template
  10
+   * @param {!Object} view
  11
+   * @param {Object=} partials
  12
+   * @param {function(!string)=} send_fun
  13
+   */
  14
+  treesaver.template.expand = function (container, template, view, partials, send_fun) {
  15
+    container.innerHTML = Mustache.to_html(template, view, partials, send_fun);
  16
+
  17
+    dom.querySelectorAll('img[data-src], iframe[data-src], video[data-src]', container).forEach(function(e) {
  18
+      e.setAttribute('src', e.getAttribute('data-src'));
  19
+    });
  20
+    dom.querySelectorAll('a[data-href]', container).forEach(function(e) {
  21
+      e.setAttribute('href', e.getAttribute('data-href'));
  22
+    });
  23
+  };
  24
+});
19  src/ui/chrome.js
@@ -11,6 +11,7 @@ goog.require('treesaver.dimensions');
11 11
 goog.require('treesaver.dom');
12 12
 goog.require('treesaver.network');
13 13
 goog.require('treesaver.scheduler');
  14
+goog.require('treesaver.template');
14 15
 goog.require('treesaver.ui.ArticleManager');
15 16
 goog.require('treesaver.ui.Index');
16 17
 goog.require('treesaver.ui.Scrollable');
@@ -247,7 +248,7 @@ goog.scope(function() {
247 248
 
248 249
       dom.querySelectorAll('[' + treesaver.dom.customAttributePrefix + 'template]', this.node).forEach(function(el) {
249 250
         var template_name = dom.getCustomAttr(el, 'template'),
250  
-            elementArray, templateArray;
  251
+            elementArray, templateArray, newEl;
251 252
 
252 253
         switch (template_name) {
253 254
         case 'position':
@@ -271,8 +272,14 @@ goog.scope(function() {
271 272
         }
272 273
 
273 274
         // Add
274  
-        elementArray.push(el);
275 275
         templateArray.push(el.innerHTML);
  276
+
  277
+        if (el.nodeName.toLowerCase() === 'script') {
  278
+          newEl = document.createElement('div');
  279
+          el.parentNode.replaceChild(newEl, el);
  280
+          el = newEl;
  281
+        }
  282
+        elementArray.push(el);
276 283
       }, this);
277 284
 
278 285
       this.menus = dom.querySelectorAll('.menu', this.node);
@@ -1403,7 +1410,7 @@ goog.scope(function() {
1403 1410
     this.positionElements.forEach(function(el, i) {
1404 1411
       var template = this.positionTemplates[i];
1405 1412
 
1406  
-      el.innerHTML = Mustache.to_html(template, {
  1413
+      treesaver.template.expand(el, template, {
1407 1414
         'pagenumber': ArticleManager.getCurrentPageNumber(),
1408 1415
         'pagecount': ArticleManager.getCurrentPageCount(),
1409 1416
         'url': ArticleManager.getCurrentUrl(),
@@ -1417,7 +1424,7 @@ goog.scope(function() {
1417 1424
     this.publicationElements.forEach(function(el, i) {
1418 1425
       var template = this.publicationTemplates[i];
1419 1426
 
1420  
-      el.innerHTML = Mustache.to_html(template, ArticleManager.index.meta);
  1427
+      treesaver.template.expand(el, template, ArticleManager.index.meta);
1421 1428
     }, this);
1422 1429
   };
1423 1430
 
@@ -1425,7 +1432,7 @@ goog.scope(function() {
1425 1432
     this.currentDocumentElements.forEach(function(el, i) {
1426 1433
       var template = this.currentDocumentTemplates[i];
1427 1434
 
1428  
-      el.innerHTML = Mustache.to_html(template, ArticleManager.getCurrentDocument().meta);
  1435
+      treesaver.template.expand(el, template, ArticleManager.getCurrentDocument().meta);
1429 1436
     }, this);
1430 1437
   };
1431 1438
 
@@ -1581,7 +1588,7 @@ goog.scope(function() {
1581 1588
     this.indexElements.forEach(function(el, i) {
1582 1589
       var template = this.indexTemplates[i];
1583 1590
 
1584  
-      el.innerHTML = Mustache.to_html(template, toc);
  1591
+      treesaver.template.expand(el, template, toc);
1585 1592
     }, this);
1586 1593
 
1587 1594
     this.updateTOCActive();
71  test/deps.js
... ...
@@ -1,44 +1,45 @@
1 1
 // This file was autogenerated by calcdeps.py
2 2
 goog.addDependency("../../../src/treesaver.js", ['treesaver'], ['treesaver.capabilities', 'treesaver.constants', 'treesaver.debug', 'treesaver.dom', 'treesaver.events', 'treesaver.history', 'treesaver.resources', 'treesaver.scheduler', 'treesaver.styles', 'treesaver.ui.Article', 'treesaver.ui.ArticleManager', 'treesaver.ui.Chrome', 'treesaver.ui.StateManager']);
3  
-goog.addDependency("../../../src/externs/animationframe.js", [], []);
4  
-goog.addDependency("../../../src/externs/ios.js", [], []);
5  
-goog.addDependency("../../../src/externs/mustache.js", [], []);
6 3
 goog.addDependency("../../../src/externs/treesaver.js", [], []);
7  
-goog.addDependency("../../../src/layout/block.js", ['treesaver.layout.Block'], ['treesaver.array', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.layout.Figure']);
8  
-goog.addDependency("../../../src/layout/breakrecord.js", ['treesaver.layout.BreakRecord'], ['treesaver.array', 'treesaver.layout.ContentPosition']);
9  
-goog.addDependency("../../../src/layout/column.js", ['treesaver.layout.Column'], ['treesaver.dimensions', 'treesaver.dom']);
10  
-goog.addDependency("../../../src/layout/container.js", ['treesaver.layout.Container'], ['treesaver.dimensions', 'treesaver.dom']);
11  
-goog.addDependency("../../../src/layout/content.js", ['treesaver.layout.Content'], ['treesaver.css', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.layout.Block']);
12  
-goog.addDependency("../../../src/layout/contentposition.js", ['treesaver.layout.ContentPosition'], []);
13  
-goog.addDependency("../../../src/layout/figure.js", ['treesaver.layout.Figure'], ['treesaver.array', 'treesaver.capabilities', 'treesaver.dom', 'treesaver.layout.FigureSize', 'treesaver.string']);
14  
-goog.addDependency("../../../src/layout/figuresize.js", ['treesaver.layout.FigureSize'], ['treesaver.dom']);
15  
-goog.addDependency("../../../src/layout/grid.js", ['treesaver.layout.Grid'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.dom', 'treesaver.dimensions', 'treesaver.layout.Column', 'treesaver.layout.Container']);
16  
-goog.addDependency("../../../src/layout/page.js", ['treesaver.layout.Page'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.layout.Grid', 'treesaver.ui.Scrollable']);
  4
+goog.addDependency("../../../src/externs/mustache.js", [], []);
  5
+goog.addDependency("../../../src/externs/ios.js", [], []);
  6
+goog.addDependency("../../../src/externs/animationframe.js", [], []);
  7
+goog.addDependency("../../../src/ui/articlemanager.js", ['treesaver.ui.ArticleManager'], ['treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.events', 'treesaver.network', 'treesaver.resources', 'treesaver.ui.Article', 'treesaver.ui.ArticlePosition', 'treesaver.ui.Document', 'treesaver.ui.Index', 'treesaver.uri']);
  8
+goog.addDependency("../../../src/ui/article.js", ['treesaver.ui.Article'], ['treesaver.array', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.events', 'treesaver.layout.BreakRecord', 'treesaver.layout.Content', 'treesaver.layout.ContentPosition', 'treesaver.layout.Grid', 'treesaver.layout.Page', 'treesaver.scheduler']);
  9
+goog.addDependency("../../../src/ui/index.js", ['treesaver.ui.Index'], ['treesaver.debug', 'treesaver.events', 'treesaver.json', 'treesaver.network', 'treesaver.object', 'treesaver.storage', 'treesaver.ui.Document', 'treesaver.ui.TreeNode', 'treesaver.uri']);
  10
+goog.addDependency("../../../src/ui/articleposition.js", ['treesaver.ui.ArticlePosition'], []);
  11
+goog.addDependency("../../../src/ui/lightbox.js", ['treesaver.ui.LightBox'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.ui.Scrollable']);
  12
+goog.addDependency("../../../src/ui/document.js", ['treesaver.ui.Document'], ['treesaver.events', 'treesaver.storage', 'treesaver.ui.Article', 'treesaver.ui.TreeNode', 'treesaver.uri']);
  13
+goog.addDependency("../../../src/ui/treenode.js", ['treesaver.ui.TreeNode'], []);
  14
+goog.addDependency("../../../src/ui/chrome.js", ['treesaver.ui.Chrome'], ['treesaver.array', 'treesaver.capabilities', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.network', 'treesaver.scheduler', 'treesaver.template', 'treesaver.ui.ArticleManager', 'treesaver.ui.Index', 'treesaver.ui.Scrollable']);
  15
+goog.addDependency("../../../src/ui/scrollable.js", ['treesaver.ui.Scrollable'], ['treesaver.capabilities', 'treesaver.dom']);
  16
+goog.addDependency("../../../src/ui/statemanager.js", ['treesaver.ui.StateManager'], ['treesaver.capabilities', 'treesaver.constants', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.events', 'treesaver.resources', 'treesaver.scheduler', 'treesaver.ui.Chrome', 'treesaver.ui.LightBox']);
  17
+goog.addDependency("../../../src/lib/object.js", ['treesaver.object'], []);
  18
+goog.addDependency("../../../src/lib/dimensions.js", ['treesaver.dimensions'], ['treesaver.capabilities', 'treesaver.css', 'treesaver.debug']);
  19
+goog.addDependency("../../../src/lib/scheduler.js", ['treesaver.scheduler'], ['treesaver.array']);
  20
+goog.addDependency("../../../src/lib/uri.js", ['treesaver.uri'], []);
  21
+goog.addDependency("../../../src/lib/template.js", ['treesaver.template'], ['treesaver.dom']);
17 22
 goog.addDependency("../../../src/lib/array.js", ['treesaver.array'], []);
18  
-goog.addDependency("../../../src/lib/capabilities.js", ['treesaver.capabilities'], ['treesaver.array', 'treesaver.constants']);
  23
+goog.addDependency("../../../src/lib/resources.js", ['treesaver.resources'], ['treesaver.array', 'treesaver.constants', 'treesaver.debug', 'treesaver.dom', 'treesaver.network']);
19 24
 goog.addDependency("../../../src/lib/constants.js", ['treesaver.constants'], []);
  25
+goog.addDependency("../../../src/lib/string.js", ['treesaver.string'], []);
20 26
 goog.addDependency("../../../src/lib/css.js", ['treesaver.css'], []);
21  
-goog.addDependency("../../../src/lib/debug.js", ['treesaver.debug'], ['treesaver.capabilities', 'treesaver.scheduler']);
22  
-goog.addDependency("../../../src/lib/dimensions.js", ['treesaver.dimensions'], ['treesaver.capabilities', 'treesaver.css', 'treesaver.debug']);
23  
-goog.addDependency("../../../src/lib/dom.js", ['treesaver.dom'], ['treesaver.array', 'treesaver.scheduler']);
24 27
 goog.addDependency("../../../src/lib/events.js", ['treesaver.events'], ['treesaver.debug']);
25  
-goog.addDependency("../../../src/lib/history.js", ['treesaver.history'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.events', 'treesaver.scheduler', 'treesaver.storage']);
26  
-goog.addDependency("../../../src/lib/json.js", ['treesaver.json'], ['treesaver.debug']);
27  
-goog.addDependency("../../../src/lib/network.js", ['treesaver.network'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.events', 'treesaver.scheduler']);
28  
-goog.addDependency("../../../src/lib/object.js", ['treesaver.object'], []);
29  
-goog.addDependency("../../../src/lib/resources.js", ['treesaver.resources'], ['treesaver.array', 'treesaver.constants', 'treesaver.debug', 'treesaver.dom', 'treesaver.network']);
30  
-goog.addDependency("../../../src/lib/scheduler.js", ['treesaver.scheduler'], ['treesaver.array']);
31 28
 goog.addDependency("../../../src/lib/storage.js", ['treesaver.storage'], ['treesaver.debug']);
32  
-goog.addDependency("../../../src/lib/string.js", ['treesaver.string'], []);
  29
+goog.addDependency("../../../src/lib/json.js", ['treesaver.json'], ['treesaver.debug']);
33 30
 goog.addDependency("../../../src/lib/styles.js", ['treesaver.styles'], ['treesaver.debug', 'treesaver.dom']);
34  
-goog.addDependency("../../../src/lib/uri.js", ['treesaver.uri'], []);
35  
-goog.addDependency("../../../src/ui/article.js", ['treesaver.ui.Article'], ['treesaver.array', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.events', 'treesaver.layout.BreakRecord', 'treesaver.layout.Content', 'treesaver.layout.ContentPosition', 'treesaver.layout.Grid', 'treesaver.layout.Page', 'treesaver.scheduler']);
36  
-goog.addDependency("../../../src/ui/articlemanager.js", ['treesaver.ui.ArticleManager'], ['treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.events', 'treesaver.network', 'treesaver.resources', 'treesaver.ui.Article', 'treesaver.ui.ArticlePosition', 'treesaver.ui.Document', 'treesaver.ui.Index', 'treesaver.uri']);
37  
-goog.addDependency("../../../src/ui/articleposition.js", ['treesaver.ui.ArticlePosition'], []);
38  
-goog.addDependency("../../../src/ui/chrome.js", ['treesaver.ui.Chrome'], ['treesaver.array', 'treesaver.capabilities', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.network', 'treesaver.scheduler', 'treesaver.ui.ArticleManager', 'treesaver.ui.Index', 'treesaver.ui.Scrollable']);
39  
-goog.addDependency("../../../src/ui/document.js", ['treesaver.ui.Document'], ['treesaver.events', 'treesaver.storage', 'treesaver.ui.Article', 'treesaver.ui.TreeNode', 'treesaver.uri']);
40  
-goog.addDependency("../../../src/ui/index.js", ['treesaver.ui.Index'], ['treesaver.debug', 'treesaver.events', 'treesaver.json', 'treesaver.network', 'treesaver.object', 'treesaver.storage', 'treesaver.ui.Document', 'treesaver.ui.TreeNode', 'treesaver.uri']);
41  
-goog.addDependency("../../../src/ui/lightbox.js", ['treesaver.ui.LightBox'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.ui.Scrollable']);
42  
-goog.addDependency("../../../src/ui/scrollable.js", ['treesaver.ui.Scrollable'], ['treesaver.capabilities', 'treesaver.dom']);
43  
-goog.addDependency("../../../src/ui/statemanager.js", ['treesaver.ui.StateManager'], ['treesaver.capabilities', 'treesaver.constants', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.events', 'treesaver.resources', 'treesaver.scheduler', 'treesaver.ui.Chrome', 'treesaver.ui.LightBox']);
44  
-goog.addDependency("../../../src/ui/treenode.js", ['treesaver.ui.TreeNode'], []);
  31
+goog.addDependency("../../../src/lib/network.js", ['treesaver.network'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.events', 'treesaver.scheduler']);
  32
+goog.addDependency("../../../src/lib/history.js", ['treesaver.history'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.events', 'treesaver.scheduler', 'treesaver.storage']);
  33
+goog.addDependency("../../../src/lib/debug.js", ['treesaver.debug'], ['treesaver.capabilities', 'treesaver.scheduler']);
  34
+goog.addDependency("../../../src/lib/dom.js", ['treesaver.dom'], ['treesaver.array', 'treesaver.scheduler']);
  35
+goog.addDependency("../../../src/lib/capabilities.js", ['treesaver.capabilities'], ['treesaver.array', 'treesaver.constants']);
  36
+goog.addDependency("../../../src/layout/figure.js", ['treesaver.layout.Figure'], ['treesaver.array', 'treesaver.capabilities', 'treesaver.dom', 'treesaver.layout.FigureSize', 'treesaver.string']);
  37
+goog.addDependency("../../../src/layout/contentposition.js", ['treesaver.layout.ContentPosition'], []);
  38
+goog.addDependency("../../../src/layout/figuresize.js", ['treesaver.layout.FigureSize'], ['treesaver.dom']);
  39
+goog.addDependency("../../../src/layout/grid.js", ['treesaver.layout.Grid'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.dom', 'treesaver.dimensions', 'treesaver.layout.Column', 'treesaver.layout.Container']);
  40
+goog.addDependency("../../../src/layout/column.js", ['treesaver.layout.Column'], ['treesaver.dimensions', 'treesaver.dom']);
  41
+goog.addDependency("../../../src/layout/container.js", ['treesaver.layout.Container'], ['treesaver.dimensions', 'treesaver.dom']);
  42
+goog.addDependency("../../../src/layout/block.js", ['treesaver.layout.Block'], ['treesaver.array', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.layout.Figure']);
  43
+goog.addDependency("../../../src/layout/breakrecord.js", ['treesaver.layout.BreakRecord'], ['treesaver.array', 'treesaver.layout.ContentPosition']);
  44
+goog.addDependency("../../../src/layout/page.js", ['treesaver.layout.Page'], ['treesaver.capabilities', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.template', 'treesaver.layout.Grid', 'treesaver.ui.Scrollable']);
  45
+goog.addDependency("../../../src/layout/content.js", ['treesaver.layout.Content'], ['treesaver.css', 'treesaver.debug', 'treesaver.dimensions', 'treesaver.dom', 'treesaver.layout.Block']);

0 notes on commit ee683fa

Please sign in to comment.
Something went wrong with that request. Please try again.