goji - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

lib/Compiler.js

@@ -66,2 +66,60 @@ 'use strict';
 /**
+ * Parses for elements that have a <code>g-class</code> attribute and renders
+ * them. If present, the attribute will be evaluated as an expression and the
+ * result will be appended to the <code>class</code> attribute (creating it
+ * if one does not already exist).
+ *
+ * @param {object} $ A cheerio object that respresents the template
+ * @param {object} context The context for the template actions
+ * @param {object} gContext A context of extra information provided by Goji
+ * @returns {object} The modified cheerio object
+ * @since 0.3.0
+ * @private
+ */
+Compiler.prototype._class = function _class($, context, gContext) {
+  var _$ = (typeof $ === 'function') ? $ : cheerio.load($.toString());
+  return _$('[g-class]').each(function gClass(i, elem) {
+    var $elem = _$(elem);
+    var expression = exprjs.parse($elem.attr('g-class'));
+    var result = exprjs.run(expression, context, gContext);
+
+    $elem.addClass(result);
+    $elem.removeAttr('g-class');
+
+    return $elem;
+  });
+};
+
+/**
+ * Parses for elements that have a <code>g-classprepend</code> attribute and
+ * renders them. If present, the attribute will be evaluated as an expression
+ * and the result will be prepended to the <code>class</code> attribute
+ * (creating it if one does not already exist).
+ *
+ * @param {object} $ A cheerio object that respresents the template
+ * @param {object} context The context for the template actions
+ * @param {object} gContext A context of extra information provided by Goji
+ * @returns {object} The modified cheerio object
+ * @since 0.3.0
+ * @private
+ */
+Compiler.prototype._classprepend = function _classprepend($, context, gContext) {
+  var _$ = (typeof $ === 'function') ? $ : cheerio.load($.toString());
+  return _$('[g-classprepend]').each(function gClassprepend(i, elem) {
+    var $elem = _$(elem);
+    var expression = exprjs.parse($elem.attr('g-classprepend'));
+    var result = exprjs.run(expression, context, gContext);
+    var classes = $elem.attr('class');
+
+    if (classes) {
+      $elem.attr('class', result + ' ' + classes);
+    } else {
+      $elem.addClass(result);
+    }
+
+    return $elem;
+  });
+};
+
+/**
  * <p>Parses for elements that have a <code>g-each</code> attribute and renders
@@ -89,9 +147,11 @@ * them. If the element also has a <code>g-text</code> attribute, then the
   var self = this;
-  var iter = {
-    i: 0,
-    get odd() {
-      return (this.i % 2) !== 0;
-    },
-    get even() {
-      return (this.i % 2) === 0;
+  var iterContext = {
+    iter: {
+      i: 0,
+      get odd() {
+        return (this.i % 2) !== 0;
+      },
+      get even() {
+        return (this.i % 2) === 0;
+      }
     }
@@ -102,3 +162,3 @@ };
     // This thing is a mess
-    iter.i = 0;
+    iterContext.iter.i = 0;
     var $elem = $(elem);
@@ -113,3 +173,3 @@ var parts = $elem.attr('g-each').split(' in ').map(function(val) {
 
-    // Evaluate the subsitution expression if it is directly on the element
+    // Evaluate the substitution expression if it is directly on the element
     var gText = $elem.attr('g-text');
@@ -131,2 +191,13 @@ if (gText) {
 
+    var parseClasses = function() {
+      var result = $node;
+      if ($node.attr('g-class')) {
+        result = self._class($node, _context, iterContext);
+      } else if ($node.attr('g-classprepend')) {
+        result = self._classprepend($node, _context, iterContext);
+      }
+
+      return result;
+    };
+
     var iterRender = function(){};
@@ -136,7 +207,8 @@ if (gText) {
         _context[varName] = item;
-        var result = exprjs.run(expr2, _context, iter);
+        var result = exprjs.run(expr2, _context, iterContext);
         $node.html(result);
-        $parent.append($node.clone());
+        var _$node = parseClasses();
+        $parent.append(_$node.clone());
 
-        iter.i += 1;
+        iterContext.iter.i += 1;
       };
@@ -147,7 +219,8 @@ } else {
         _context[varName] = item;
-        var result = self._render(innerTemplate, _context, iter);
+        var result = self._render(innerTemplate, _context, iterContext);
         $node.html(result);
-        $parent.append($node.clone());
+        var _$node = parseClasses();
+        $parent.append(_$node.clone());
 
-        iter.i += 1;
+        iterContext.iter.i += 1;
       };
@@ -267,2 +340,4 @@ }
   this._each($, context, gContext); // Should be parsed first
+  this._class($, context, gContext);
+  this._classprepend($, context, gContext);
   this._text($, context, gContext);
@@ -269,0 +344,0 @@

package.json

 {
   "name": "goji",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "An HTML templating engine inspired by Thymeleaf",
@@ -5,0 +5,0 @@ "main": "goji.js",

Readme.md

@@ -109,2 +109,25 @@ # Goji
 
+### g-class
+`g-class` appends the result of an expression to the element's class
+attribute. For example, given the following HTML:
+
+```html
+<div g-class="foo.class" class="bar">placeholder</div>
+```
+
+The rendered template would be:
+
+```html
+<div class="bar foo">placeholder</div>
+```
+
+Where the expression `foo.class` evaluates to "foo".
+
+If the element does not already have a class attribute, the the
+attribute will be added.
+
+### g-classprepend
+`g-classprepend` works like `g-class` except it prepends the class
+attribute with the result of the `g-classprepend` expression.
+
 ### g-text
@@ -198,2 +221,48 @@ `g-text` substitutes the result of an expression in place of the element's
 
+`g-each` includes the following extra context on each iteration:
+
+```javascript
+{
+  iter: {
+    i: `number`,
+    odd: `boolean`,
+    even: `boolean`
+  }
+}
+```
+
+Thus, on the third iteration, the extra context would be:
+
+```javascript
+{
+  iter: {
+    i: 2,
+    odd: false,
+    even: true
+  }
+}
+```
+
+Combined with `g-class`, you can render the following template:
+
+```html
+<ul>
+    <li g-each="item in items"
+        g-text="item"
+        g-class="(iter.odd) ? 'odd' : 'even'">placeholder</li>
+  </ul>
+```
+
+Into:
+
+```html
+<ul>
+  <li class="even">list item 1</li>
+  <li class="odd">list item 2</li>
+  <li class="even">list item 3</li>
+</ul>
+```
+
+Given the same context as the first example in this section.
+
 ### g-include
@@ -200,0 +269,0 @@ `g-include` inserts the content of a fragment in place of the element's

No alert changes

Improved metrics

Total package byte prevSize

1133617

increased by1.3%

Lines of code

979

increased by7.35%

Number of lines in readme file

314

increased by28.16%

No dependency changes