https://github.com/benzap/dom.barf
Create HTML strings by composing javascript functions. Inspired by Hiccup
https://github.com/benzap/dom.barf
data-driven javascript string-generator template-engine
Last synced: 10 months ago
JSON representation
Create HTML strings by composing javascript functions. Inspired by Hiccup
- Host: GitHub
- URL: https://github.com/benzap/dom.barf
- Owner: benzap
- Created: 2015-02-12T21:01:08.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-01-05T15:16:25.000Z (about 10 years ago)
- Last Synced: 2025-03-15T03:42:08.355Z (10 months ago)
- Topics: data-driven, javascript, string-generator, template-engine
- Language: JavaScript
- Homepage: http://benzap.github.io/DOM.Barf/
- Size: 28.3 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.html
Awesome Lists containing this project
README
readme
<!--/*--><![CDATA[/*><!--*/
.title { text-align: center; }
.todo { font-family: monospace; color: red; }
.done { color: green; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.right { margin-left: auto; margin-right: 0px; text-align: right; }
.left { margin-left: 0px; margin-right: auto; text-align: left; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: visible;
padding-top: 1.2em;
}
pre.src:before {
display: none;
position: absolute;
background-color: white;
top: -10px;
right: 10px;
padding: 3px;
border: 1px solid black;
}
pre.src:hover:before { display: inline;}
pre.src-sh:before { content: 'sh'; }
pre.src-bash:before { content: 'sh'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-R:before { content: 'R'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-java:before { content: 'Java'; }
pre.src-sql:before { content: 'SQL'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.right { text-align: center; }
th.left { text-align: center; }
th.center { text-align: center; }
td.right { text-align: right; }
td.left { text-align: left; }
td.center { text-align: center; }
dt { font-weight: bold; }
.footpara:nth-child(2) { display: inline; }
.footpara { display: block; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
/*]]>*/-->
/*
@licstart The following is the entire license notice for the
JavaScript code in this tag.
Copyright (C) 2012-2013 Free Software Foundation, Inc.
The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
readme
Table of Contents
- 1. DOM.Barf
- 2. Small Example
- 3. Download
- 4. Features and Operation
- 5. Examples
-
6. API Reference
-
6.1. DOM.Barf.SpitOut(<tagName>, [tagAttributes], [tagChildren], [options])
-
6.2. DOM.Barf.toSpit(<tagName>, [passedOptions])
-
6.3. DOM.Barf.ToCss(<selectorName>, [attrs])
-
6.4. DOM.Barf.ToRaw([children])
- 7. Predefined 'toSpit' Functions
- 8. More Examples
1 DOM.Barf
DOM.Barf is my take on generating stringified HTML code from a set
of simple composable functions representing HTML Elements.
It carries some inspiration from hiccup, but has none of it's
awesome features.
2 Small Example
var _s = DOM.Barf;
_s.h1 = _s.toSpit("h1");
var fruitListing = ["banana", "apple", "tomato"];
var output = _s.div({id: "main-container"}, [
_s.h1(null, "Fruit Listing"),
_s.ul(null,
fruitListing.map(function(elem) {
return _s.li({class: "fruit-element"}, elem);
})),
]);
console.log(output);
This produces the HTML string output (formatted for convenience)
<div id="main-container">
<h1>Fruit Listing</h1>
<ul>
<li class="fruit-element">banana</li>
<li class="fruit-element">apple</li>
<li class="fruit-element">tomato</li>
</ul>
</div>
4 Features and Operation
- DOM.Barf's main functionality consists of composable functions
that only need to return a string. This allows for easily
extending DOM.Barf with some dribble.
- Helpful shortcuts and helper functions for quickly expressing
yourself in disgust.
-
DOM.Barf.ToCss for generating stylesheet expressions
-
DOM.Barf.ToRaw for for even more composability!
- By default, conveniently converts camelCased attributes into
dashed variable names (ex. BorderBottomSize –>
border-bottom-size)
5 Examples
todo
6 API Reference
6.1 DOM.Barf.SpitOut(<tagName>, [tagAttributes], [tagChildren], [options])
This is the raw input method to barf / spit out a string
representation of XML. This returns a string representation of:
<tagName {tagAttributes()}>{tagChildren()}</tagName>
6.1.1 Keyword Arguments:
- tagName
- the tag of our XML element
- tagAttributes
- a dictionary listing of XML attributes for the current tag
- tagChildren
- a list of other DOM.Barf functions which are
concatenated to fill this current DOM string. This
can also just be a list of strings, as the
resulting listing should form a list of strings.
- options
- optional hash-table listing optional arguments
6.1.2 Optional Arguments:
- bSingular
- whether the given XML element is singular. Namely,
it has a forward flash, and no children. ex. meta
tags –> <meta> [default:false]
- bConvertCamelCase
- determines whether attributes, and listed
attribute style's names are converted from camelcase to the
equivalent dash-named, which is common in html
attributes. ex. EquivHtmlTerm –> equiv-html-term.
[default:true]
6.1.3 Returns:
A string representing the HTML element described
6.2 DOM.Barf.toSpit(<tagName>, [passedOptions])
Provides partial application for the DOM.Barf.SpitOut function,
while providing permanently passedOptions which can still be
overriden at evaluation.
6.2.1 Keyword Arguments:
- tagName
- the tagname to be generated from our returned partial
function
- passedOptions
- optional hash-table permanently setting
optional arguments equivalent to
DOM.Barf.SpitOut optional arguments.
6.2.2 Returns:
A partial function of the form function([tagAttributes],
[tagChildren], [options]) with the same characteristics as
DOM.Barf.SpitOut.
6.2.3 Examples:
var _s = DOM.Barf;
_s.a = _s.toSpit("a");
_s.a() //<a></a>
_a.a({href: "http://www.google.com"}, "link") //<a href="http://www.google.com">link</a>
_s.meta = _s.toSpit("meta", {bSingular:true})
_s.meta({httpEquiv: "X-UA-Compatible", content: "IE=edge"}) //<meta http-equiv="X-UA-Compatible" content="IE=edge">
6.3 DOM.Barf.ToCss(<selectorName>, [attrs])
Generates a stylesheet for the provided selector tag, and tag
attributes.
6.3.1 Keyword Arguments:
- selectorName
- The name to provide for the css selector
- attrs
- dictionary of attributes to provide for the given css
selector
6.3.2 Examples:
var _s = DOM.Barf;
_s.ToCss("a:hover", {textDecoration: "none", fontSize: "12px"}) // a:hover {text-decoration:none;font-size: 12px;}
_s.style(null, [
_s.ToCss("body", {
position: "relative",
margin: "auto auto",
width: "600px",
}),
_s.ToCss("#main-container", {
position: "relative",
width: "100%",
height: "100%",
}),
]);
//<style>body {position:relative; margin: auto auto; width: 600px;} #maincontainer {position: relative; width: 100%; height: 100%;}</style>
6.4 DOM.Barf.ToRaw([children])
Concatenates and allows raw input of string data into DOM.Barf
Keyword Arguments:
- children
- equivalent to DOM.Barf.SpitOut's tagChildren
field.
6.4.1 Remarks
This function is functionally equivalent to concatenating a list
of strings. –> children.reduce(function(a,b){a+b},"")
7 Predefined 'toSpit' Functions
- DOM.Barf.html = DOM.Barf.toSpit("html");
- DOM.Barf.head = DOM.Barf.toSpit("head");
- DOM.Barf.title = DOM.Barf.toSpit("title");
- DOM.Barf.body = DOM.Barf.toSpit("body");
- DOM.Barf.div = DOM.Barf.toSpit("div");
- DOM.Barf.img = DOM.Barf.toSpit("img", {bSingular:true});
- DOM.Barf.a = DOM.Barf.toSpit("a");
- DOM.Barf.p = DOM.Barf.toSpit("p");
- DOM.Barf.input = DOM.Barf.toSpit("input");
- DOM.Barf.table = DOM.Barf.toSpit("table");
- DOM.Barf.tr = DOM.Barf.toSpit("tr");
- DOM.Barf.td = DOM.Barf.toSpit("td");
- DOM.Barf.li = DOM.Barf.toSpit("li");
- DOM.Barf.ul = DOM.Barf.toSpit("ul");
- DOM.Barf.style = DOM.Barf.toSpit("style");
- DOM.Barf.script = DOM.Barf.toSpit("script");
- DOM.Barf.meta = DOM.Barf.toSpit("meta", {bSingular:true});
8 More Examples
coming soon