helma.org/wiki/JS-based implementation of snippets (aka subskins)

Version 13

tobi — Fri, 03 Nov 2006 19:22:43 +0000

23	Well, 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

tobi — Thu, 20 Jul 2006 14:19:32 +0000

15	A 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

tobi — Thu, 20 Jul 2006 14:13:22 +0000

19	The 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

tobi — Thu, 20 Jul 2006 14:10:56 +0000

1	Just 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

tobi — Thu, 20 Jul 2006 14:08:59 +0000

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

Version 8

tobi — Thu, 20 Jul 2006 14:08:49 +0000

11	This 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

tobi — Thu, 20 Jul 2006 14:08:33 +0000

1	var 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
11	This 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
13	A 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
17	Each snippet ends right before the next one begins -- or at the end of the file, resp.
18
19	Well, 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

tobi — Thu, 20 Jul 2006 13:54:54 +0000

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

Version 5

tobi — Thu, 20 Jul 2006 13:54:38 +0000

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

tobi — Thu, 20 Jul 2006 13:54:29 +0000

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

Version 3

tobi — Thu, 20 Jul 2006 13:53:45 +0000

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

Version 2

tobi — Thu, 20 Jul 2006 13:53:16 +0000

Set tags to

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

tobi — Thu, 20 Jul 2006 13:52:40 +0000

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>