Permalink
Browse files

death to slots.

  • Loading branch information...
1 parent a7e339c commit 08ef01ff769c06c6790fd75fe615db448cb831eb @paularmstrong committed Sep 3, 2011
Showing with 2 additions and 212 deletions.
  1. +0 −2 README.md
  2. +0 −64 docs/tags.md
  3. +2 −3 index.js
  4. +0 −49 lib/tags.js
  5. +0 −94 lib/widgets.js
View
@@ -50,8 +50,6 @@ Swig is a template engine inspired by the Django syntax. It has a few extensions
Swig reads template files and translates them into javascript functions using the Function constructor. When we later render a template we call the evaled function passing a context object as an argument. This makes the rendering very fast. The template tags are defined as strings of Javascript code - which is a bit ugly, but there are helpers that will make writing tags easier for you.
-The slots system will allow you to define your own HTML snippets that will be rendered with a special context.
-
## Template syntax
While Swig is inspired by the [Django template syntax][1], there are a few differences:
View
@@ -68,67 +68,3 @@ Will output:
<p>Hello "you" & 'them'</p>
&lt;p&gt;Hello &quot;you&quot; &amp; &#39;them&#39; &lt;/p&gt;
-
-## slot
-
-Use slots where you want highly customized content that depends heavily on dynamic data. They work in pair with widget functions that you can write yourself.
-
-Template code
-
- <div>
- {% slot main %}
- </div>
- <div>
- {% slot sidebar %}
- </div>
-
-Node.js code
-
- context.slots = {
- main: [
- "<h1>This is a paragraph as a normal string.</h1>", // String
-
- { tagname: 'analytics', // Widget object
- uaCode: 'UA-XXXXX-X' },
- ],
-
- sidebar: [
- "<h3>Navigation</h3>", // String
-
- { tagname: 'navigation', // Widget object
- links: [
- '/home',
- '/about',
- '/kittens'
- ]}
- ]
- }
-
- context.widgets = {
- analytics: function (context) {
- // this inside widget functions is bound to the widget object
- return "<script>..." + this.uaCode + "...</script>";
- },
- navigation: function (context) {
- var i, html = "";
- for (i=0; i<this.links; i++)
- html += "<a href='" + links[i] + "'>" + links[i] + "</a>";
- return html;
- }
- }
-
- template.render(context)
-
-Result
-
- <div>
- <h1>This is a paragraph as a normal string.</h1>
- <script>...UA-XXXXX-X...</script>
- </div>
- <div>
- <h3>Navigation</h3>
- <a href='/home'>/home</a>
- <a href='/about'>/about</a>
- <a href='/kittens'>/kittens</a>
- </div>
-
View
@@ -7,7 +7,6 @@ var fs = require("fs"),
tags = require("tags"),
parser = require("parser"),
- widgets = require("widgets"),
filters = require('filters'),
helpers = require('helpers'),
@@ -60,7 +59,7 @@ createTemplate = function (data, id) {
}
// The compiled render function - this is all we need
- render = new Function("__context", "__parents", "__filters", "__widgets", '__escape',
+ render = new Function("__context", "__parents", "__filters", '__escape',
[ '__parents = __parents ? __parents.slice() : [];'
// Prevents circular includes (which will crash node without warning)
, 'for (var i=0, j=__parents.length; i<j; ++i) {'
@@ -77,7 +76,7 @@ createTemplate = function (data, id) {
);
template.render = function (context, parents) {
- return render.call(this, context, parents, config.filters, widgets, helpers.escaper);
+ return render.call(this, context, parents, config.filters, helpers.escaper);
};
return template;
View
@@ -15,55 +15,6 @@ exports.block = { ends: true };
exports.parent = {};
/**
-* TODO: This tag is tightly coupled with the context stricture of a specific project.
-* It is not part of the Django template specification.
-* Example slot data structure
-* slots: {
-* main_content: [
-*
-* { tagname: 'h1',
-* style: 'width:200px',
-* class: 'wm-page-element',
-* content: 'This is a heading <a href="http://example.com">with a link</a>'},
-*
-* "<p>This is a paragraph as a normal string.</p>",
-*
-* "<p>Normal strings get echoed into the template directly.</p>",
-*
-* { tagname: 'p',
-* style: '',
-* class: 'wm-page-element',
-* content: 'This is some text.'}],
-*
-* sidebar_content: [
-* { tagname: 'image',
-* style: '',
-* class: '',
-* content: '<img src="/static/uploads/image.jpg" title="Image Jpeg">'}]
-* }
-*/
-exports.slot = function (indent) {
- var slot = this.args[0];
-
- indent = indent || "";
-
- return ['(function () {'
- , ' if (' + check(slot, '__context.slots') + ') {'
- , ' var __widget, __slot = ' + escape(slot, '__context.slots') + '.content || [];'
- , ' for (var __i=0, __j = (+__slot.length) || 0; __i < __j; ++__i) {'
- , ' __widget = __slot[__i];'
- , ' if (__widget === undefined || __widget === null || __widget === false)'
- , ' continue;'
- , ' if (typeof __widget === "string")'
- , ' __output.push(__widget)'
- , ' else if (__widget.tagname && __widgets && typeof __widgets[__widget.tagname] === "function")'
- , ' __output.push(__widgets[__widget.tagname].call(__widget, __context, __parents));'
- , ' }'
- , ' }'
- , '})();'].join("\n" + indent);
-};
-
-/**
* Includes another template. The included template will have access to the
* context, but won't have access to the variables defined in the parent template,
* like for loop counters.
View
@@ -1,94 +0,0 @@
-var textWidgetGenerator = function (tagname) {
- return function () {
- var output = ["<", tagname],
- i;
-
- for (i in this) {
- if (this.hasOwnProperty(i) && i !== "content" && 1 !== "tagname") {
- output.push(" ", i, "='", this[i], "'");
- }
- }
-
- output.push(">", this.content, "</", tagname, ">");
- return output.join("");
- };
-};
-
-/**
-* Renders a paragraph. This is fairly simple.
-*/
-exports.p = textWidgetGenerator("p");
-/**
-* Renders a paragraph. This is fairly simple.
-*/
-exports.h1 = textWidgetGenerator("h1");
-
-/**
-* Renders a paragraph. This is fairly simple.
-*/
-exports.h2 = textWidgetGenerator("h2");
-
-/**
-* Renders a paragraph. This is fairly simple.
-*/
-exports.h3 = textWidgetGenerator("h3");
-
-/**
-* Renders an oredered list. This is fairly simple.
-*/
-exports.ol = textWidgetGenerator("ol");
-
-/**
-* Renders an unoredered list. This is fairly simple.
-*/
-exports.ul = textWidgetGenerator("ul");
-
-/**
-* Renders a blockquote. This is fairly simple.
-*/
-exports.q = textWidgetGenerator("q");
-
-/**
-* Renders a simple composite widget.
-*/
-exports.list = exports.image = function (context) {
- var output = ["<div"],
- i;
-
- for (i in this) {
- if (this.hasOwnProperty(i) && i !== "content" && 1 !== "tagname") {
- output.push(" ", i, "='", this[i], "'");
- }
- }
-
- output.push(" data-tagname='", this.tagname, "'");
- output.push(">", this.content, "</div>");
-
- return output.join("");
-};
-
-/**
-* This helper renders a slot independently from a template.
-*/
-exports.renderSlot = function (slotContent, context) {
- var slot = slotContent || [],
- output = [],
- widget,
- i = 0,
- j = slot.length;
-
- for (i, j; i < j; i += 1) {
- widget = slot[i];
- if (widget === undefined || widget === null || widget === false) {
- continue;
- }
-
- if (typeof widget === 'string') {
- output.push(widget);
- } else if (widget.tagname && typeof exports[widget.tagname] === "function") {
- output.push(exports[widget.tagname].call(widget, context));
- }
- }
-
- return output.join("");
-};

0 comments on commit 08ef01f

Please sign in to comment.