├── .travis.yml
├── package.json
├── .gitignore
├── specs
├── runner.html
└── scriberSpec.js
├── webpack.config.js
├── LICENSE
├── dist
├── scriber.min.js
└── scriber.js
├── README.md
└── src
└── scriber.js
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "4.1"
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "scriber-js",
3 | "version": "0.2.0",
4 | "main": "./dist/scriber.min.js",
5 | "license": "MIT",
6 | "devDependencies": {
7 | "webpack": "^1.12.13",
8 | "babel-core": "^6.4.5",
9 | "babel-loader": "^6.2.2",
10 | "mocha": "^2.4.5",
11 | "should": "^8.2.1",
12 | "sinon": "^1.17.3",
13 | "mocha-phantomjs": "^4.0.2"
14 | },
15 | "scripts": {
16 | "test": "mocha-phantomjs specs/runner.html",
17 | "build": "webpack"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
--------------------------------------------------------------------------------
/specs/runner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Mocha Test Runner
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/specs/scriberSpec.js:
--------------------------------------------------------------------------------
1 | describe("Constructs elements", function() {
2 | it("constructs a root element", function() {
3 | var elem = scriber.div().id("idTest").class("test-class").end().toString();
4 | Should(elem).be.exactly('');
5 | });
6 |
7 |
8 | it("constructs child elements", function() {
9 | var elem = scriber.div().id("idTest").class("test-class")
10 | .span().class("red").end()
11 | .input().value("my value").end()
12 | .end().toString();
13 | Should(elem).be.exactly('
');
14 | });
15 |
16 | it("constructs child with text nodes", function() {
17 | var elem = scriber.div().id("idTest").class("test-class")
18 | .span().class("red").end()
19 | .input().value("my value").end()
20 | .text("Hello World !")
21 | .br().end()
22 | .end().toString();
23 | Should(elem).be.exactly('Hello World !
');
24 | });
25 |
26 | });
27 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var fs = require('fs');
3 |
4 | var file = fs.readFileSync('./package.json', 'utf8');
5 | var VERSION = JSON.parse(file).version;
6 | var BANNER = 'scriber - ' + VERSION +
7 | ' https://github.com/jccazeaux/scriber\n' +
8 | ' Copyright (c) 2015 Jean-Christophe Cazeaux.\n' +
9 | ' Licensed under the MIT license.\n';
10 |
11 | module.exports = {
12 | context: __dirname,
13 | entry: {
14 | 'scriber': './src/scriber',
15 | 'scriber.min': './src/scriber'
16 | },
17 |
18 | output: {
19 | path: './dist',
20 | filename: '[name].js',
21 | library: 'scriber',
22 | libraryTarget: 'umd'
23 | },
24 |
25 | plugins: [
26 | new webpack.optimize.UglifyJsPlugin({
27 | include: /\.min\.js$/,
28 | minimize: true
29 | }),
30 | new webpack.BannerPlugin(BANNER)
31 | ],
32 |
33 | module: {
34 | loaders: [
35 | {
36 | test: /\.js$/,
37 | exclude: '/node_modules/',
38 | loader: 'babel-loader'
39 | }
40 | ]
41 | },
42 |
43 | resolve: {
44 | extensions: ['', '.js']
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jean-Christophe Cazeaux
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/dist/scriber.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * scriber - 0.1.0 https://github.com/jccazeaux/scriber
3 | * Copyright (c) 2015 Jean-Christophe Cazeaux.
4 | * Licensed under the MIT license.
5 | *
6 | */
7 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.scriber=e():t.scriber=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e){function r(t){function e(t){return function(){return l.element(t)}}function n(t){return function(e){return l.attr(t,e)}}this.parent=null;var a=t,u=[],s=[],l=this;this.attr=function(t,e){return s[t]=e,this},this.element=function(t){var e=new r(t);return e.parent=this,u.push(e),e};for(var c=0;c
34 | ```
35 |
36 | # api
37 | ## scriber.<tagName>() or scriber.Element(<tagName>)
38 | Creates the root element. You can use generic "element" function with will take the tagName as parameter, or a shortcut function wich name will be the tagName.
39 |
40 | This function will return an "Element" object to work on the new created element
41 |
42 | ## Element.<tagName>() or Element.element(<tagName>)
43 | Creates a child element with same rules.
44 |
45 | This function returns the created element. To close this element, use the end function.
46 |
47 | ## Element.end()
48 | Ends the current element. Returns the parent element.
49 |
50 | ## Element.(<String> value) or Element.attr(<String> name, <String> value)
51 | Creates an attribute on the element. You can use either a shortcut function or generic element() function
52 |
53 | ## Element.text(<String> value)
54 | Adds a text node. No need to end a text node as it does not accept children.
55 |
56 | ## Element.toString()
57 | Return the element as a String
58 |
59 | ## Element.toHTMLElement()
60 | Return the element as HTMLElement object
61 |
62 | # Shortcut methods
63 | ## For tags
64 | Scriber supports shortcuts for the following tags
65 | ```Javascript
66 | ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body",
67 | "br","button","canvas","caption","center","cite","code","col","colgroup","datalist","dd","del","details","dfn","dialog","dir","div",
68 | "dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1",- "h6","head","header","hr",
69 | "html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta",
70 | "meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby",
71 | "s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody",
72 | "td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"]
73 | ```
74 | ## For attributes
75 | Scriber supports shortcuts for the following attributes. The style attribute has no shortcut because the style method already handles the style tag. If you really want to add a style attribute (instead of class), use the generic attr("style") method.
76 | ```Javascript
77 | ["alt", "diabled", "href", "src", "title", "value", "name", "id", "class"]
78 | ``
79 |
--------------------------------------------------------------------------------
/src/scriber.js:
--------------------------------------------------------------------------------
1 | var possibleTags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1",- "h6","head","header","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"];
2 | var possibleAttributes = ["alt", "diabled", "href", "src", "title", "value", "name", "id", "class"];
3 |
4 | /**
5 | * Element object, represents a DOM element
6 | */
7 | function Element(_type) {
8 | this.parent = null;
9 | var type = _type;
10 | var elements = [];
11 | var attrs = [];
12 | var that = this;
13 |
14 | /**
15 | * Add an attribute
16 | * @param {String} name - attribute name
17 | * @param {String} value - attribute value
18 | * @return {Object} this, for fluent coding
19 | */
20 | this.attr = function(name, value) {
21 | attrs[name] = value;
22 | return this;
23 | };
24 |
25 | /**
26 | * Add an child element
27 | * @param {String} type - element type
28 | * @return {Object} this, for fluent coding
29 | */
30 | this.element = function(type) {
31 | var elem = new Element(type);
32 | elem.parent = this;
33 | elements.push(elem);
34 | return elem;
35 | };
36 |
37 | // This adds shortcut for every tag element
38 | for (var j =0 ; j < possibleTags.length ; j++) {
39 | this[possibleTags[j]] = specificElement(possibleTags[j]);
40 | }
41 | /**
42 | * Closure function for the shortcut functions
43 | * @param {String} type
44 | * @return {Function}
45 | */
46 | function specificElement(type) {
47 | return function() {
48 | return that.element(type);
49 | };
50 | }
51 |
52 | // This adds shortcut for every attributs element
53 | for (j =0 ; j < possibleAttributes.length ; j++) {
54 | this[possibleAttributes[j]] = specificAttribute(possibleAttributes[j]);
55 | }
56 | /**
57 | * Closure function for the shortcut functions
58 | * @param {String} type
59 | * @return {Function}
60 | */
61 | function specificAttribute(name) {
62 | return function(value) {
63 | return that.attr(name, value);
64 | };
65 | }
66 |
67 | /**
68 | * Ends the current Element. So we return the parent
69 | * @return {Object} this, for fluent coding
70 | */
71 | this.end = function() {
72 | return this.parent;
73 | };
74 |
75 | /**
76 | * Converts to HTML Element
77 | * @return {DOMElement} ELement created
78 | */
79 | this.toHTMLElement = function() {
80 | var elem = document.createElement(type);
81 | for (var attrName in attrs) {
82 | elem.setAttribute(attrName, attrs[attrName]);
83 | }
84 | var currentElem = null;
85 | for (var i = 0 ; i < elements.length ; i++) {
86 | currentElem = elements[i];
87 | if (typeof currentElem === "string") {
88 | elem.appendChild(document.createTextNode(currentElem));
89 | }
90 | else {
91 | elem.appendChild(elements[i].toHTMLElement());
92 | }
93 | }
94 | return elem;
95 | };
96 |
97 | /**
98 | * Adds a text node
99 | * @param {String} content
100 | * @return {Object} this, for fluent coding
101 | */
102 | this.text = function(content) {
103 | elements.push(content);
104 | return this;
105 | };
106 |
107 | /**
108 | * Returns as String
109 | * @return {String}
110 | */
111 | this.toString = function() {
112 | return this.toHTMLElement().outerHTML;
113 | };
114 |
115 | }
116 |
117 | var scriber = {};
118 |
119 | /**
120 | * Create the root element
121 | * @param {String} type - element type
122 | * @return {Object} this, for fluent coding
123 | */
124 | scriber.element = function(type) {
125 | var root = new Element(type);
126 | root.parent = root;
127 | return root;
128 | };
129 |
130 | // This adds shortcut for every tag element
131 | for (var j =0 ; j < possibleTags.length ; j++) {
132 | scriber[possibleTags[j]] = specificElement(possibleTags[j]);
133 | }
134 | /**
135 | * Closure function for the shortcut functions
136 | * @param {String} type
137 | * @return {Function}
138 | */
139 | function specificElement(type) {
140 | return function() {
141 | return scriber.element(type);
142 | };
143 | }
144 |
145 | module.exports = scriber;
--------------------------------------------------------------------------------
/dist/scriber.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * scriber - 0.1.0 https://github.com/jccazeaux/scriber
3 | * Copyright (c) 2015 Jean-Christophe Cazeaux.
4 | * Licensed under the MIT license.
5 | *
6 | */
7 | (function webpackUniversalModuleDefinition(root, factory) {
8 | if(typeof exports === 'object' && typeof module === 'object')
9 | module.exports = factory();
10 | else if(typeof define === 'function' && define.amd)
11 | define([], factory);
12 | else if(typeof exports === 'object')
13 | exports["scriber"] = factory();
14 | else
15 | root["scriber"] = factory();
16 | })(this, function() {
17 | return /******/ (function(modules) { // webpackBootstrap
18 | /******/ // The module cache
19 | /******/ var installedModules = {};
20 |
21 | /******/ // The require function
22 | /******/ function __webpack_require__(moduleId) {
23 |
24 | /******/ // Check if module is in cache
25 | /******/ if(installedModules[moduleId])
26 | /******/ return installedModules[moduleId].exports;
27 |
28 | /******/ // Create a new module (and put it into the cache)
29 | /******/ var module = installedModules[moduleId] = {
30 | /******/ exports: {},
31 | /******/ id: moduleId,
32 | /******/ loaded: false
33 | /******/ };
34 |
35 | /******/ // Execute the module function
36 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
37 |
38 | /******/ // Flag the module as loaded
39 | /******/ module.loaded = true;
40 |
41 | /******/ // Return the exports of the module
42 | /******/ return module.exports;
43 | /******/ }
44 |
45 |
46 | /******/ // expose the modules object (__webpack_modules__)
47 | /******/ __webpack_require__.m = modules;
48 |
49 | /******/ // expose the module cache
50 | /******/ __webpack_require__.c = installedModules;
51 |
52 | /******/ // __webpack_public_path__
53 | /******/ __webpack_require__.p = "";
54 |
55 | /******/ // Load entry module and return exports
56 | /******/ return __webpack_require__(0);
57 | /******/ })
58 | /************************************************************************/
59 | /******/ ([
60 | /* 0 */
61 | /***/ function(module, exports) {
62 |
63 | var possibleTags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", -"h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"];
64 | var possibleAttributes = ["alt", "diabled", "href", "src", "title", "value", "name", "id", "class"];
65 |
66 | /**
67 | * Element object, represents a DOM element
68 | */
69 | function Element(_type) {
70 | this.parent = null;
71 | var type = _type;
72 | var elements = [];
73 | var attrs = [];
74 | var that = this;
75 |
76 | /**
77 | * Add an attribute
78 | * @param {String} name - attribute name
79 | * @param {String} value - attribute value
80 | * @return {Object} this, for fluent coding
81 | */
82 | this.attr = function (name, value) {
83 | attrs[name] = value;
84 | return this;
85 | };
86 |
87 | /**
88 | * Add an child element
89 | * @param {String} type - element type
90 | * @return {Object} this, for fluent coding
91 | */
92 | this.element = function (type) {
93 | var elem = new Element(type);
94 | elem.parent = this;
95 | elements.push(elem);
96 | return elem;
97 | };
98 |
99 | // This adds shortcut for every tag element
100 | for (var j = 0; j < possibleTags.length; j++) {
101 | this[possibleTags[j]] = specificElement(possibleTags[j]);
102 | }
103 | /**
104 | * Closure function for the shortcut functions
105 | * @param {String} type
106 | * @return {Function}
107 | */
108 | function specificElement(type) {
109 | return function () {
110 | return that.element(type);
111 | };
112 | }
113 |
114 | // This adds shortcut for every attributs element
115 | for (j = 0; j < possibleAttributes.length; j++) {
116 | this[possibleAttributes[j]] = specificAttribute(possibleAttributes[j]);
117 | }
118 | /**
119 | * Closure function for the shortcut functions
120 | * @param {String} type
121 | * @return {Function}
122 | */
123 | function specificAttribute(name) {
124 | return function (value) {
125 | return that.attr(name, value);
126 | };
127 | }
128 |
129 | /**
130 | * Ends the current Element. So we return the parent
131 | * @return {Object} this, for fluent coding
132 | */
133 | this.end = function () {
134 | return this.parent;
135 | };
136 |
137 | /**
138 | * Converts to HTML Element
139 | * @return {DOMElement} ELement created
140 | */
141 | this.toHTMLElement = function () {
142 | var elem = document.createElement(type);
143 | for (var attrName in attrs) {
144 | elem.setAttribute(attrName, attrs[attrName]);
145 | }
146 | var currentElem = null;
147 | for (var i = 0; i < elements.length; i++) {
148 | currentElem = elements[i];
149 | if (typeof currentElem === "string") {
150 | elem.appendChild(document.createTextNode(currentElem));
151 | } else {
152 | elem.appendChild(elements[i].toHTMLElement());
153 | }
154 | }
155 | return elem;
156 | };
157 |
158 | /**
159 | * Adds a text node
160 | * @param {String} content
161 | * @return {Object} this, for fluent coding
162 | */
163 | this.text = function (content) {
164 | elements.push(content);
165 | return this;
166 | };
167 |
168 | /**
169 | * Returns as String
170 | * @return {String}
171 | */
172 | this.toString = function () {
173 | return this.toHTMLElement().outerHTML;
174 | };
175 | }
176 |
177 | var scriber = {};
178 |
179 | /**
180 | * Create the root element
181 | * @param {String} type - element type
182 | * @return {Object} this, for fluent coding
183 | */
184 | scriber.element = function (type) {
185 | var root = new Element(type);
186 | root.parent = root;
187 | return root;
188 | };
189 |
190 | // This adds shortcut for every tag element
191 | for (var j = 0; j < possibleTags.length; j++) {
192 | scriber[possibleTags[j]] = specificElement(possibleTags[j]);
193 | }
194 | /**
195 | * Closure function for the shortcut functions
196 | * @param {String} type
197 | * @return {Function}
198 | */
199 | function specificElement(type) {
200 | return function () {
201 | return scriber.element(type);
202 | };
203 | }
204 |
205 | module.exports = scriber;
206 |
207 | /***/ }
208 | /******/ ])
209 | });
210 | ;
--------------------------------------------------------------------------------