Permalink
Browse files

initial import

  • Loading branch information...
1 parent 43f02d7 commit 09254d1cd6a7d70c95df0601518445c69b008d74 @dburrows committed May 19, 2009
Showing with 360 additions and 0 deletions.
  1. +20 −0 MIT-LICENCE
  2. +73 −0 README.textile
  3. +114 −0 lib/markup-builder.js
  4. BIN test/moon.gif
  5. +44 −0 test/single_test.html
  6. +5 −0 test/test_helpers.js
  7. +104 −0 test/test_suite.html
View
20 MIT-LICENCE
@@ -0,0 +1,20 @@
+Copyright (c) 2008-2009 David Burrows (http://www.imergent.com)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
73 README.textile
@@ -0,0 +1,73 @@
+
+h1. markupBuilder
+
+Easy markup string building in Javascript, inspired by Jim Weirich's Builder library - scratched an itch for me as I kept screwing html up when constructing it with javascript string methods, didn't like implementing templates in JS and the Builder style was a good fit for rapid dev.
+
+Currently I don't use this in production so it's not got an extensive test suite, hasn't had multi-browser QA and doesn't support all html tags - in fact it's generally horrible but vaguely usuable. Caveat Emptor etc. Would welcome any ideas, better yet fork the repo and fix something if it's really bugging you and send me a pull request.
+
+h3. Usage
+
+<pre>
+
+// alias markupBuilder for convenience
+var b = markupBuilder();
+
+//basic tag
+//generates string ''<div></div>'
+
+test_div = b.div();
+
+//basic tag with text
+//generates string
+
+test_span = b.span("hello world");
+
+// self closing tag with attributes
+// generates string '<img src="moon.gif" width="200" height="100" />'
+
+test_img = b.img({src:"moon.gif",width:"200",height:"100"});
+
+
+// standard list
+// generates string '<ul><li>apples</li><li>oranges</li><li>pears</li></ul>'
+
+standardList = b.ul(
+ b.li("apples"),
+ b.li("oranges"),
+ b.li("pears")
+ );
+
+// list from array
+// generates string '<ul><li>apples</li><li>oranges</li><li>pears</li></ul>'
+
+myItems = ["apples","oranges","pears","grapes","bananas"];
+arraylist = b.ul(
+ b.li(myItems)
+ )
+
+// put them all together for complex markup
+complexMarkup = b.table(
+ b.tr(
+ b.td("moon"),
+ b.td(
+ b.img({
+ src: "moon.gif",
+ width: "200",
+ height: "100"
+ })
+ )
+ ),
+ b.tr(
+ b.td('oranges'),
+ b.td(
+ b.ul(
+ b.li(myItems)
+ )
+ )
+ )
+ )
+</pre>
+
+TODO: pass in yaml for list/table generation
+TODO: wrapping array/yaml data in multiple tags
+TODO: tables from multi-dimensional arrays
View
114 lib/markup-builder.js
@@ -0,0 +1,114 @@
+/*!
+ * markup-builder 0.1
+ * http://github.com/dburrows/markup-builder
+ *
+ * Copyright (c) 2009 David Burrows
+ * Licensed under the MIT licenses.
+ *
+ */
+function markupBuilder() {
+
+var SINGLETAGS = ",area,base,basefont,br,hr,input,img,link,meta,";
+
+this.build = function(tag,data) {
+ if ( data.length == 0 ) {
+ return simpleTag(tag)
+ } else {
+ tag_data = data[0];
+ markup = "";
+ for (var i=1;i<data.length;i++) {
+ markup += data[i];
+ }
+ if (typeof tag_data == "string") {
+ return simpleTag(tag,data[0],markup);
+ } else if (tag_data instanceof Array) {
+ return markupFromArray(tag,data[0],markup);
+ } else if (typeof tag_data == "object") {
+ return tagWithAttributes(tag,data[0],markup);
+ } else {
+ console.log("function signature wrong, check argument syntax")
+ }
+ }
+}
+
+
+this.simpleTag = function(tag,content,markup) {
+ if (markup==undefined) markup = "";
+ if (content==undefined) content = "";
+ var m = "";
+ if ( SINGLETAGS.indexOf("," + tag + ",") > 0) {
+ m = "<" + tag + " />";
+ } else {
+ m = "<" + tag + ">"+ content + markup + "</" + tag + ">";
+ }
+ return m;
+}
+
+this.markupFromArray = function(tag,contentArray,markup) {
+ if (markup==undefined) markup = "";
+ if (content==undefined) content = "";
+ m = "";
+ for (i=0;i<contentArray.length;i++) {
+ m += "<" + tag + ">"+ contentArray[i] + markup + "</" + tag + ">";
+ }
+ return m;
+}
+
+this.tagWithAttributes = function(tag,attributes,markup) {
+ if (markup==undefined) markup = "";
+ if (content==undefined) content = "";
+ txt = "";
+ if (attributes.text) {
+ txt = attributes.text;
+ delete attributes.text;
+ }
+ m = "";
+ if ( SINGLETAGS.indexOf("," + tag + ",") > 0) {
+ m = "<" + tag;
+ for (var prop in attributes) {
+ m += " " + prop + '="' + attributes[prop] + '"';
+ }
+ m += " />";
+ } else {
+ m = "<" + tag;
+ for (var prop in attributes) {
+ m += " " + prop + '="' + attributes[prop] + '"';
+ }
+ m += " >" + txt + markup + '</' + tag + '>';
+ }
+ return m;
+}
+
+p= {};
+p.table = function() {
+ return build("table", arguments );
+},
+p.tr = function() {
+ return build("tr",arguments );
+},
+p.td = function() {
+ return build("td",arguments);
+}
+p.div = function() {
+ return build("div", arguments);
+}
+p.span = function() {
+ return build("span", arguments);
+}
+p.p = function() {
+ return build("p", arguments);
+}
+p.ul = function() {
+ return build("ul", arguments);
+}
+p.li = function() {
+ return build("li", arguments);
+}
+p.img = function() {
+ return build("img", arguments);
+}
+p.br = function(){
+ return build("br", arguments)
+}
+return p;
+};
View
BIN test/moon.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
44 test/single_test.html
@@ -0,0 +1,44 @@
+<html>
+<head>
+ <title>single test harness</title>
+ <script src="../lib/markup-builder.js" type="text/javascript" charset="utf-8"></script>
+ <script>
+ function assert( value, desc ) {
+ var li = document.createElement("li");
+ li.className = value ? "pass" : "fail";
+ li.appendChild( document.createTextNode( desc ) );
+ document.getElementById("results").appendChild( li );
+ }
+
+ </script>
+ <style>
+ #results li.pass { color: green; }
+ #results li.fail { color: red; }
+ </style>
+</head>
+<body>
+ <ul id="results"></ul>
+ <script type="text/javascript" charset="utf-8">
+
+//usage examples
+
+// test fixtures
+myItems = ["apples","oranges","pears","grapes","bananas"];
+
+//alias markupBuilder for convenience
+var b = markupBuilder();
+
+tableWithAttributes = b.table( {id:"big-table",class:"moneymoney"},
+ b.tr(
+ b.td("baa"),
+ b.td({id:"moo",text:"nanoo",spoon:"lalalala"})
+ )
+ );
+console.log(tableWithAttributes);
+
+
+
+</script>
+
+</body>
+</html>
View
5 test/test_helpers.js
@@ -0,0 +1,5 @@
+function printObject(myObj) {
+ for (myKey in myObj){
+ console.log ("myObj["+myKey +"] = "+myObj[myKey]);
+ }
+}
View
104 test/test_suite.html
@@ -0,0 +1,104 @@
+<html>
+<head>
+ <title>markup-builder test suite</title>
+ <script src="test_helpers.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../lib/markup-builder.js" type="text/javascript" charset="utf-8"></script>
+ <script>
+ function assert( value, desc ) {
+ var li = document.createElement("li");
+ li.className = value ? "pass" : "fail";
+ li.appendChild( document.createTextNode( desc ) );
+ document.getElementById("results").appendChild( li );
+ }
+
+ window.onload = function(){
+ assert( true, "Test Suite Running." );
+ // single tags
+ assert( (test_div == '<div></div>'), "build single tag");
+ assert( (test_span == '<span>hello world</span>'), "build single tag with content");
+ assert( (test_para == '<p id="first_para" class="content" >hello moon</p>'), 'build single tag with attributes and content')
+ assert( (test_img == '<img src="moon.gif" width="200" height="100" />'), "build self closing tag with attributes");
+
+ // complex markup
+ assert( (arraylist == "<ul><li>apples</li><li>oranges</li><li>pears</li><li>grapes</li><li>bananas</li></ul>"), "build list from array");
+ assert( (standardList == "<ul><li>apples</li><li>oranges</li><li>pears</li></ul>"), "build standard list");
+ assert( (complexMarkup == '<table><tr><td>moon</td><td><img src="moon.gif" width="200" height="100" /></td></tr><tr><td>oranges</td><td><ul><li>apples</li><li>oranges</li><li>pears</li><li>grapes</li><li>bananas</li></ul></td></tr></table>'), "build complex markup")
+ };
+ </script>
+ <style>
+ #results li.pass { color: green; }
+ #results li.fail { color: red; }
+ </style>
+</head>
+<body>
+
+<ul id="results"></ul>
+
+<script type="text/javascript" charset="utf-8">
+
+// test fixtures
+var th = "kasdj";
+myItems = ["apples","oranges","pears","grapes","bananas"];
+
+// alias markupBuilder for convenience
+var b = markupBuilder();
+
+//single tag
+test_div = b.div();
+console.log("test_div: " + test_div);
+
+//single tag with text
+test_span = b.span("hello world");
+console.log('test_span' + test_span);
+
+//single tag with attributes & text
+test_para = b.p({text: "hello moon",id: "first_para", class: "content"});
+console.log('test_para' + test_para);
+
+// single img tag
+test_img = b.img({src:"moon.gif",width:"200",height:"100"});
+console.log("test_img: " + test_img);
+
+// standard list
+standardList = b.ul(
+ b.li("apples"),
+ b.li("oranges"),
+ b.li("pears")
+) ;
+console.log("standardList: " + standardList);
+
+// list from array
+arraylist = b.ul(
+ b.li(myItems)
+);
+console.log("arraylist: " + arraylist);
+
+// complex markup
+complexMarkup = b.table(
+ b.tr(
+ b.td("moon"),
+ b.td(
+ b.img({
+ src: "moon.gif",
+ width: "200",
+ height: "100"
+ })
+ )
+ ),
+ b.tr(
+ b.td('oranges'),
+ b.td(
+ b.ul(
+ b.li(myItems)
+ )
+ )
+ )
+);
+console.log("complexMarkup: " + complexMarkup);
+
+
+
+</script>
+
+</body>
+</html>

0 comments on commit 09254d1

Please sign in to comment.