0.0.0

OSWS Templates

version: 0.0.0 beta

How?

Install

npm install osws-templates

Include

Commonjs

You can use this paths on server:

• module osws-templates
• file node_modules/osws-templates/index.js

JavaScript

var Templates = require('osws-templates');

Requirejs

You can use this paths on client:

• file node_modules/osws-templates/templates.js

JavaScript

define('osws-templates', function(Templates) {});

Example

Simple

var div = Templates.div, a = Templates.a, img = Templates.img;

div('.my-super-class.container')(
	a('[href=http://google.com/]')(
		img({src: 'http://google.com/images/logo.png'})
	)
).render(function(error, result) {
	console.log(result);
	// <div class="my-super-class container"><a href="http://google.com/"><img src="http://google.com/images/logo.png"/></a></div>
});

Extend

var div = Templates.div, a = Templates.a, img = Templates.img;

var buka = div('.my-super-class#buka')().extend(function(parent) {
	this.constructor = function() {
		parent.constructor.apply(this, arguments);

		// arguments[0] == this.arguments // '.info'

		this.content(
			a('[href=http://google.com/]')(
				img({src: 'http://google.com/images/logo.png'})
			)
		);
	};
});

var template = buka('.info')();

template.render(function(error, result) {
	console.log(result);
	// <div id="buka" class="my-super-class info"><a href="http://google.com/"><img src="http://google.com/images/logo.png"/></a></div>
});

Inherit

var div = Templates.div, a = Templates.a, img = Templates.img;

var buka = div('.my-super-class#buka')(
	a('[href=http://google.com/]')(
		img({src: 'http://google.com/images/logo.png'})
	)
).inherit();

var template = buka('.info')();

template.render(function(error, result) {
	console.log(result);
	// <div id="buka" class="my-super-class info"><a href="http://google.com/"><img src="http://google.com/images/logo.png"/></a></div>
});

What?

Content

|
|   // Is not intended for final use! Only for core.
|   // This is the first and the last object that is created manually with `new`
|   // All of its expansion can be called without `new`
+-- Prototype: new () => instance: Prototype
|   |   |
|   |   +-- parent: Prototype
|   |   +-- extend(injector: (parent: Prototype).call(instance: Prototype) => void) => instance: Prototype
|   |   |
|   |   | // `injector` is not equal to `constructor`. `constructor` inherited, `injector` no.
|   |   | // The `constructor` and other class options are overridden in the `injector`.
|   |   +-- returner: ().call(instance: Prototype) => any
|   |   | // For internal use only.
|   |   | // // Can be overridden!
|   |   |
|   |   | // Inherited option causes each extension?
|   |   +-- constructor: ().call(instance: Prototype) => any
|   |   | // For internal use only.
|   |   | // Can be overridden!
|   |   |
|   |   | // Personal for each element Renderer.Queue
|   |   +-- queue: Renderer.Queue
|   |   | // Can be overridden!
|   |   | // Override in `constructor`.
|   |
|   |   | // Nice Renderer.Queue .renderAsync wrapper.
|   |   +-- render: (callback: IAsyncCallback) => void
|   |   | // Can be overridden!
|   |   | // Override in `constructor`.
|   |
|   | // Control flow of renderer queues
|   +-- Flow: [new] () => instance: Prototype
|   |   |   |
|   |   |   | // Flow contents
|   |   |   +-- contents: Renderer.Queue[]
|   |   |   |
|   |   |   | // Add contents flow to element queue
|   |   |   +-- generator: () => void
|   |   |   | // Override in `constructor`.
|   |   |   | // Can be overridden!
|   |   |   |
|   |   |   | // Add content into tag before exists content
|   |   |   +-- before: (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance: Prototype
|   |   |   | // Override in `constructor`.
|   |   |   | // Can be overridden!
|   |   |   |
|   |   |   | // Add content into tag after exists content
|   |   |   +-- content: (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance: Prototype
|   |   |   | // Override in `constructor`.
|   |   |   | // Can be overridden!
|   |   |   |
|   |   |   | // Equal to content
|   |   |   +-- after: (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance: Prototype
|   |   |   | // Override in `constructor`.
|   |   |   | // Can be overridden!
|   |   |   |
|   |   |   | // extend the one-time inheritance
|   |   |   +-- inherit: () => constructor: Prototype
|   |   |   | // Override in `constructor`.
|   |   |   | // Can be overridden!
|   |   |
|   |   +-- content: [new] (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance: Prototype
|   |
|   |   // Tools for generatin double or single structures.
|   |   // Not ready for manual use! Only inheritance.
|   +-- Tag: [new] ([selector: string], [attributes: [name: string]: string]) => instance: Prototype
|       |   |
|       |   +-- parseSelectors: ([selector: string]) => void
|       |   | // name priority: parent.name > instance.name > selector
|       |   | // id priority: attributes > parent.attributes.id > instance.attributes.id > selector
|       |   | // class prioryty: instance.attributes.class + parent.attributes.class + selector
|       |   | // attributes priority: attributes > parent.attributes
|       |   |
|       |   +-- parseAttributes: ([attributes: [name: string]: string]) => void
|       |   | // attributes priority: attributes > parent.attributes
|       |   |
|       |   | // Generate single/first double open tag quote
|       |   +-- _singleOpen: () => string
|       |   | // Override in `constructor`.
|       |   | // Can be overridden!
|       |   |
|       |   | // Generate second double open tag quote
|       |   +-- _doubleOpen: () => string
|       |   | // Override in `constructor`.
|       |   | // Can be overridden!
|       |   |
|       |   | // Generate close single tag quote
|       |   +-- _singleClose: () => string
|       |   | // Override in `constructor`.
|       |   | // Can be overridden!
|       |   |
|       |   | // Generate close double tag quote
|       |   +-- _doubleClose: () => string
|       |   | // Override in `constructor`.
|       |   | // Can be overridden!
|       |   |
|       |   | // Generate tag attributes
|       |   +-- _attr: () => string
|       |   | // Override in `constructor`.
|       |   | // Can be overridden!
|       |
|       |   // Tool for single tags generating.
|       +-- Single: [new] ([selector: string], [attributes: [name: string]: string]) => instance: Prototype
|       |       |
|       |       | // Generate single tag structore from `_singleClose` `name` and `_close` options
|       |       +-- generator: () => void
|       |       | // Override in `constructor`.
|       |       | // Can be overridden!
|       |       |
|       |       | // Clear double tag variables inheritance.
|       |       |
|       |       +-- before = undefined
|       |       +-- content = undefined
|       |       +-- after = undefined
|       |
|       |   +-- single tags: `br` `hr` `img` `input` `base` `frame` `link` `meta`
|       |
|       |   // Tool for double tags generating.
|       +-- Double: [new] ([selector: string], [attributes: [name: string]: string]) => instance.content
|           |   |
|           |   | // Double tag returns content method when creates
|           |   +-- returner: () => instance.content
|           |   // Override in `constructor`.
|           |   // Can be overridden!
|           |
|           +-- double tags: `html` `body` `h1` `h2` `h3` `h4` `h5` `h6` `hgroup` `div` `p` `address` `blockquote` `pre` `ul` `ol` `li` `dl` `dt` `dd` `fieldset` `legend` `form` `noscript` `object` `table` `thead` `tbody` `tfoot` `tr` `td` `th` `col` `colgroup` `caption` `span` `b` `big` `strong` `i` `var` `cite` `em` `q` `del` `s` `strike` `tt` `code` `kbd` `samp` `small` `sub` `sup` `dfn` `bdo` `abbr` `acronym` `a` `button` `textarea` `select` `option` `article` `aside` `figcaption` `figure` `footer` `header` `section` `main` `nav` `menu` `audio` `video` `embed` `canvas` `output` `details` `summary` `mark` `meter` `progress` `template` `comment`
|