Permalink
Browse files

added handling of CSS styles; added tests; revised README

  • Loading branch information...
1 parent 7220616 commit ddb7e35bf1fb9c626548b1fefd6609366a1afbb9 Stuart Malin committed Aug 11, 2011
Showing with 135 additions and 13 deletions.
  1. +24 −4 README.md
  2. +20 −2 dist/doml.js
  3. +1 −1 dist/doml.min.js
  4. +26 −3 ender.js
  5. +1 −1 ender.min.js
  6. +20 −2 src/doml.js
  7. +20 −0 test/ender-tests.js
  8. +23 −0 test/the-tests.js
View
@@ -23,6 +23,12 @@ Set attributes:
elem = doml.create('input', 'input', {type:'checkbox', checked: true});
```
+Decorate with CSS attributes:
+```
+elem = doml.create('p', 'hello', {css: "color:red; border:2px solid green;"});
+Set attributes:
+```
+
Embed other DOM nodes:
```
elem = doml.create('div', 'text1', ['p', 'p-text'], 'text2', ['span', 'span-text']);
@@ -72,11 +78,15 @@ enderSet = $.doml(elem);
// chain
body = document.getElementsByTagName('BODY')[0];
-$(body).doml('div', 'hello');
+$(body).doml('div', 'hello'); // appends new DIV (with text "hello" to BODY)
+
+// construct and append a DOM sub-tree
+$(body).doml('div', ['p', 'hello', {id: "p-hello"}], ['span', 'there', {css: "color:red;"}]);
+$(body).doml('div', $.doml('p')[0], $.doml('span')[0]);
```
-Doml does NOT require that [Bonzo](https://github.com/ded/bonzo) be in your Ender lib.
-But that doesn't mean you should incorporate it.
+Doml does not require that [Bonzo](https://github.com/ded/bonzo) be in your Ender lib.
+(But that doesn't mean you shouldn't use it.)
Build
@@ -85,6 +95,16 @@ If you want to build from src:
npm run-script boosh
+Tests
+-----
+
+Test native: <code>$ node test/tests.js</code>
+
+Test in browser: point your browser to <code>test/test.html</code>
+
+Test in browser with Ender: point your browser to <code>test/ender-test.html</code>
+
+
TODO
-----
Make Doml [AMD](http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition) compatible
@@ -93,4 +113,4 @@ Make Doml [AMD](http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition) co
Contributors
-----
- * [Stuart Malin](https://github.com/zhami/doml/commits/master?author=zhami)
+ * [Stuart Malin](https://github.com/zhami/doml/commits/master?author=zhami) [@Zhami](http://twitter.com/#!/zhami)
View
@@ -60,12 +60,27 @@
};
Element.prototype = (function () {
- var handleAttrs, procArg;
+ var handleAttrs, handleCSS, procArg;
//----------------------------------------
// private methods
//----------------------------------------
-
+ handleCSS = function (elem, styleString) {
+ var i, n, styles, s;
+
+ styles = styleString.split(';');
+ n = styles.length;
+ for (i = 0; i < n; i += 1) {
+ s = styles[i];
+ if (s) {
+ s = /\s*([^:]+):\s*(.+)/.exec(s);
+ if (s && s.length === 3) {
+ elem.style[s[1]] = s[2];
+ }
+ }
+ }
+ };
+
handleAttrs = function (attrs) {
var element, n, setAttr;
@@ -79,6 +94,9 @@
case "class":
elem.className = value;
break;
+ case "css":
+ handleCSS(elem, value);
+ break;
default:
elem.setAttribute(name, value);
}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -17,6 +17,11 @@
*/
!function (context) {
+ // a global object for node.js module compatiblity
+ // ============================================
+
+ context['global'] = context;
+
// Implements simple module system
// losely based on CommonJS Modules spec v1.1.1
// ============================================
@@ -25,7 +30,7 @@
function require (identifier) {
var module = modules[identifier] || window[identifier];
- if (!module) throw new Error("Requested module has not been defined.");
+ if (!module) throw new Error("Requested module '" + identifier + "' has not been defined.");
return module;
}
@@ -160,12 +165,27 @@
};
Element.prototype = (function () {
- var handleAttrs, procArg;
+ var handleAttrs, handleCSS, procArg;
//----------------------------------------
// private methods
//----------------------------------------
-
+ handleCSS = function (elem, styleString) {
+ var i, n, styles, s;
+
+ styles = styleString.split(';');
+ n = styles.length;
+ for (i = 0; i < n; i += 1) {
+ s = styles[i];
+ if (s) {
+ s = /\s*([^:]+):\s*(.+)/.exec(s);
+ if (s && s.length === 3) {
+ elem.style[s[1]] = s[2];
+ }
+ }
+ }
+ };
+
handleAttrs = function (attrs) {
var element, n, setAttr;
@@ -179,6 +199,9 @@
case "class":
elem.className = value;
break;
+ case "css":
+ handleCSS(elem, value);
+ break;
default:
elem.setAttribute(name, value);
}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -54,12 +54,27 @@
};
Element.prototype = (function () {
- var handleAttrs, procArg;
+ var handleAttrs, handleCSS, procArg;
//----------------------------------------
// private methods
//----------------------------------------
-
+ handleCSS = function (elem, styleString) {
+ var i, n, styles, s;
+
+ styles = styleString.split(';');
+ n = styles.length;
+ for (i = 0; i < n; i += 1) {
+ s = styles[i];
+ if (s) {
+ s = /\s*([^:]+):\s*(.+)/.exec(s);
+ if (s && s.length === 3) {
+ elem.style[s[1]] = s[2];
+ }
+ }
+ }
+ };
+
handleAttrs = function (attrs) {
var element, n, setAttr;
@@ -73,6 +88,9 @@
case "class":
elem.className = value;
break;
+ case "css":
+ handleCSS(elem, value);
+ break;
default:
elem.setAttribute(name, value);
}
View
@@ -79,6 +79,26 @@
ok(elem.firstElementChild.nextSibling.nodeName === 'SPAN', '2nd child has proper tag');
body.removeChild(elem);
});
+
+ test('doml appends subtree', 9, function() {
+ var theDiv;
+ $(body).doml('div', ['p', 'hello', {id: "p-hello"}, ['span', 'there', {css: "color:red;border:2px solid green;"}]]);
+ elem = theDiv = body.lastElementChild;
+ ok(elem.nodeName === 'DIV', 'element has proper tag');
+ ok(elem.children.length === 1, 'element has 1 child');
+ elem = elem.firstChild;
+ ok(elem.nodeName === 'P', 'child has proper tag');
+ ok(elem.getAttribute('id') === 'p-hello', 'child has proper ID');
+ ok(elem.children.length === 1, 'child has 1 child');
+ ok(elem.childNodes.length === 2, 'element has proper number of elements & text');
+ elem = elem.firstChild; // text node
+ elem = elem.nextSibling; // SPAN element
+ ok(elem.nodeName === 'SPAN', 'grandchild has proper tag');
+ ok(elem.childNodes.length === 1, 'granchild has proper number of nodes');
+ ok(elem.lastChild.nodeValue === 'there', 'grandchild has proper text');
+ body.removeChild(theDiv);
+ });
+
});
Oops, something went wrong.

0 comments on commit ddb7e35

Please sign in to comment.