Helma Logo
helma.org › wiki › JS-based implementation of snippets (aka subskins)
main list history

Version 13 by tobi on 03. November 2006, 19:22

23Well, it's all done very quickly and without a lot of error testing or checking, but IMHO it proves the point of subskins pretty well. // *tobi*

Version 12 by tobi on 20. Juli 2006, 14:19

15A snippets file contains HTML markup with Helma macros as we know it. But furthermore, a special tag (which is an HTML comment in disguise and its syntax is still not carved in stone) disguise) marks the beginning of a snippet:

Version 11 by tobi on 20. Juli 2006, 14:13

19The name is composed of the <code><!snippet:</code> prefix followed by the snippet's name and it ends with a closing <code>></code> at last.
20

Version 10 by tobi on 20. Juli 2006, 14:10

1Just for a simple test implementation I've created two files as attached to this wiki page. (Could be that there's a markup to link them here in the text; alas I don't know it.
2
3<% this.attachments %>

Version 9 by tobi on 20. Juli 2006, 14:08

15<code><!snippet:foobar></code><code><!snippet:image></code>

Version 8 by tobi on 20. Juli 2006, 14:08

11This would (or should) render the "image" snippet which is contained in the file <code>Global/html.snippets</code snippets</code> (currently only global snippets are supported).

Version 7 by tobi on 20. Juli 2006, 14:08

1var renderSnippet =Just for a simple test implementation I've created two files as attached to this wiki page. function(name, param) (Could be that there's a markup to link them here in the text; alas I don't know it.
2 var cache;
3 if (!(cache = res.data["herpes:snippets"])) {
4 cache = res.data["herpes:snippets"] = new Object;
5 }
6  if (cache[name]) {
7  renderSkin(cache[name], param);
8  return;
9  }
3  var NAME = "renderSnippet takes two arguments just as renderSkin does: the first defines the snippet", the second the usual param object.
4  var DELIMITER = ":";
5  var EXTENSION = "." + NAME + "s";
6  var PREFIX = "<!" + NAME + DELIMITER;
5  var dir = new File(appThe snippet argument is composed of the file name (without the extension -- which is <code>.dirsnippets</code>, "Global");btw.) and the snippet's name. Both values are separated by a colon.
6  var file, snippetName;
7  if (name.contains(DELIMITER)) {
8      var parts = name.split(DELIMITER);
9      file = new File(dir, parts[0] + EXTENSION);
10      snippetName = parts[1];
11  } else {
12      file = new File(dir, name + EXTENSION);
13  }
7  if (file.exists()) Here's an example call:
8      var content = file.readAll();
9      var needle, offset, start;
10      if (snippetName) {
11        needle = PREFIX + snippetName;
12        offset = content.indexOf(needle);
13        start = offset + needle.length + 1;
14      } else {
15        offset = content.indexOf(PREFIX);
16        start = offset + content.indexOf(">") + 1;
17      }
18      var end = content.indexOf(PREFIX, start);
19      if (end < 0) {
20      end = content.length;
21      }
22      var snippet = content.substring(start, end);
23      if (snippet) {
24      cache[name] = createSkin(snippet.trim());
25        renderSkin(cache[name], param);
26      }
27  }
28  return;
29};</code></pre>
9<code>renderSnippet("html:image", {src: "http://dev.helma.org/static/xmlbutton.gif"});</code>
10
11This would (or should) render the "image" snippet which is contained in the file <code>Global/html.snippets</code (currently only global snippets are supported).
12
13A snippets file contains HTML markup with Helma macros as we know it. But furthermore, a special tag (which is an HTML comment in disguise and its syntax is still not carved in stone) marks the beginning of a snippet:
14
15<code><!snippet:foobar></code>
16
17Each snippet ends right before the next one begins -- or at the end of the file, resp.
18
19Well, it's all done very quickly and without a lot of error testing or checking, but IMHO it proves the point of subskins pretty well.

Version 6 by tobi on 20. Juli 2006, 13:54

1<pre><code>var var renderSnippet = function(name, param)

Version 5 by tobi on 20. Juli 2006, 13:54

50<pre><code><!snippet:link>
51<a href="<% param.href %>"><% param.text %></a>
52<!snippet:image>
53<img src="<% param.src %>"
54    <% param.width prefix='width="' suffix='"' %>
55    <% param.height prefix='height="' suffix='"' %>
56    border="0" />
57<!snippet:table>
58<table border="0" cellspacing="0" cellpadding="0">
59<% param.rows %>
60</table>
61<!snippet:tablerow>
62<tr>
63<% param.cells %>
64</tr>
65<!snippet:tablecell>
66<td><% param.data %></td></code></pre>

Version 4 by tobi on 20. Juli 2006, 13:54

52
54<img src="&lt;% <% param.src %>"
55     &lt;% <% param.width prefix='width="' suffix='"' %>
56     &lt;% <% param.height prefix='height="' suffix='"' %>
56
59&lt;% <% param.rows %>
61
64&lt;% <% param.cells %>
66
68<td>&lt;% <td><% param.data %></td></code></pre>

Version 3 by tobi on 20. Juli 2006, 13:53

54<img src="<% &lt;% param.src %>"
55     <% &lt;% param.width prefix='width="' suffix='"' %>
56     <% &lt;% param.height prefix='height="' suffix='"' %>
59<% &lt;% param.rows %>
64<% &lt;% param.cells %>
68<td><% <td>&lt;% param.data %></td></code></pre>

Version 2 by tobi on 20. Juli 2006, 13:53

1<code>var <pre><code>var renderSnippet = function(name, param)
48};</code>};</code></pre>
50<code><!snippet:link><pre><code><!snippet:link>
70<td><% param.data %></td></code>%></td></code></pre>

Version 1 by tobi on 20. Juli 2006, 13:52

1<code>var renderSnippet = function(name, param) {
2 var cache;
3 if (!(cache = res.data["herpes:snippets"])) {
4 cache = res.data["herpes:snippets"] = new Object;
5 }
6  if (cache[name]) {
7  renderSkin(cache[name], param);
8  return;
9  }
3  var NAME = "snippet";
4  var DELIMITER = ":";
5  var EXTENSION = "." + NAME + "s";
6  var PREFIX = "<!" + NAME + DELIMITER;
7
8  var dir = new File(app.dir, "Global");
9  var file, snippetName;
10  if (name.contains(DELIMITER)) {
11      var parts = name.split(DELIMITER);
12      file = new File(dir, parts[0] + EXTENSION);
13      snippetName = parts[1];
14  } else {
15      file = new File(dir, name + EXTENSION);
16  }
17
18  if (file.exists()) {
19      var content = file.readAll();
20      var needle, offset, start;
21      if (snippetName) {
22        needle = PREFIX + snippetName;
23        offset = content.indexOf(needle);
24        start = offset + needle.length + 1;
25      } else {
26        offset = content.indexOf(PREFIX);
27        start = offset + content.indexOf(">") + 1;
28      }
29      var end = content.indexOf(PREFIX, start);
30      if (end < 0) {
31      end = content.length;
32      }
33      var snippet = content.substring(start, end);
34      if (snippet) {
35      cache[name] = createSkin(snippet.trim());
36        renderSkin(cache[name], param);
37      }
38  }
39  return;
40};</code>
41
42<code><!snippet:link>
43<a href="<% param.href %>"><% param.text %></a>
44
45<!snippet:image>
46<img src="<% param.src %>"
47    <% param.width prefix='width="' suffix='"' %>
48    <% param.height prefix='height="' suffix='"' %>
49    border="0" />
50
51<!snippet:table>
52<table border="0" cellspacing="0" cellpadding="0">
53<% param.rows %>
54</table>
55
56<!snippet:tablerow>
57<tr>
58<% param.cells %>
59</tr>
60
61<!snippet:tablecell>
62<td><% param.data %></td></code>
Page created by tobi on Thu Jul 20 2006 13:52:40 GMT-0000 (UTC).
Page last modified by tobi on Fri Nov 03 2006 19:22:44 GMT-0000 (UTC).
This site is powered by gobi & helma