idom by idibidiart

Templated HTML view compositing

/*! idi.bidi.dom 
* 
* 
* idom v0.17
* 
* Key-value JSON API for template-based HTML view compositing 
*
* 
* ****************************************************************************
* 
* Copyright (c) Marc Fawzi, Deep Thought, Inc. 2012
* 
* http://javacrypt.wordpress.com
* 
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* 
* 
* *****************************************************************************
* 
* Some portions are derived from NattyJS, an early precursor by the same author 
* "Copyright (c) Marc Fawzi, NiNu, Inc. 2011-2012" published under BSD License.  
*
*/
 


/* * idi.bidi.dom - Anti-Templating Framework For Javascript -- offers a new and * different way for interacting with the DOM. In abstract terms, it takes the DOM * and adds variables, scope, variable memoization, multiple-inheritance and * type polymorphism (with the Node Prototype as the user defined type) In logical * terms, it offers a flat JSON API for creating, populating, and de-populating * predetermined DOM structures with the ability to link, directly access, populate * and de-populate other such DOM structures at any depth within them. It gives us * a simpler alternative to the browser's hierarchical DOM manipulation API while * allowing us to reduce the amount of HTML as well as separate the HTML from the * presentation logic. * */
Example:
<!--************************************************* VIEW OBJECTS ***************************************************--> <div style='display: none'> <!-- Start of Node --> <div idom-node-id='teamInfo' idom-class='idom$teamsClass' idom-style='background-color: idom$bgColorTeams; idom$cssTransform'> <!-- Start of Node Prototype --> <div idom-class='idom$teamsProtoClass' idom-style='background-color: idom$instanceColorTeams;'> <div idom-style='padding: 5px;'>idom$caption</div> <!-- @idom userInfo --> </div> <!-- End of Node Prototype --> </div> <!-- End of Node --> <!-- Start of Node --> <div idom-node-id='userInfo' idom-class='idom$usersClass' idom-style='background-color: idom$bgColorUsers'> <!-- Start of Node Prototype --> <div idom-class='idom$usersProtoClass' idom-style='border: idom$borderStyle;'> <div idom-onclick='idom$someHandler'>user: idom$username   id: idom$id</div> <div idom-class='idom$usersExtendedClass' idom-style='background-color: idom$bgColorUsersExtended; display: idom$displayStatus'> <div>last name: idom$lastName<br>work: idom$work</div> </div> </div> <!-- End of Node Prototype --> </div> <!-- End of Node --> </div>

Click on any user below to see the event handler for the target element in action





Randomly colored

idom$caption
user: idom$username   id: idom$id
last name: idom$lastName
work: idom$work

	

Show Code for Example 1 Hide Code for Example 1 /****************************************************************************** * * README: * * This version should work in all recent versions of the major browsers * * idi.bidi.dom - Anti-Templating Framework For Javascript -- offers a new and * different way for interacting with the DOM. In abstract terms, it takes the DOM * and adds variables, scope, variable memoization, multiple-inheritance and * type polymorphism (with the Node Prototype as the user defined type) In logical * terms, it offers a flat JSON API for creating, populating, and de-populating * predetermined DOM structures with the ability to link, directly access, populate * and de-populate other such DOM structures at any depth within them. It gives us * a simpler alternative to the browser's hierarchical DOM manipulation API while * allowing us to reduce the amount of HTML as well as separate the HTML from the * presentation logic. * * Why use it? * * idi.bidi.dom reduces HTML on a page to a minimum and places a simple and consistent * JSON API between presentation logic and the DOM * * What does it do? * * idi.bidi.dom allows the DOM to be decomposed into Nodes each having a Node Prototype * with data-injected variables in their markup. Multiple instances of each Node (i.e. * data populated versions, each with its own persisted data) may be created, populated * with data, and inserted into --or deleted from-- the Node (with the ability to target * specific, previously inserted instances of the Node or all such instances). Each Node * may embed any number of other Nodes, at any depth within its Node Prototype's markup. * * Additionally, idi.bidi.dom allows us to clone populated Nodes to create copies of the * Node (and any Linked Nodes within it) which can be re-populated and de-populated in * direct fashion. * * Usage: * * format: document.querySelector('#someNode').idom$(data [, settings]) * * output: creates a new instance of the Node using 'data' (json) to populate the * special variables in the Node, then after/before to (or replace) existing * instance(s) of the Node * * forClone: id of the clone the data being populated is intended for. This is omitted * when operating on cloned nodes * * data: {key: value, key: value, key: value, etc} * where the key must match the variable name in the data minus the idom$ prefix * * settings: {mode: 'replace'|'after'|'before'|'node'|'proto', targetInstanceName: * value, instanceName: value} ... replace is default mode * * if there are no populated instances of the Node then after/before/replace will create * a new instance of the Node (so if a targetInstanceName is supplied in this case it will * throw an error, so call .$isPopulated() first to be sure before invoking this method with * targetInstanceName, unless you know the node is populated) * * If 'mode' is set to 'node' in settings then no other settings param is expected * and only the node's attributes are populated. Setting mode to 'node' will cause idom * to populate only the attributes in the node itself and does not create any populated * instances of its node prototype. idom also offers a way to populate just the attributes * of each node instance by setting mode to 'proto' and specifying targetInstanceName or none * for all node instances in a given node. Both 'proto' and 'node' modes may be useful when * working with the node attributes or the node instance attributes where a jQuery plugin/ * widget is instantiated (after caching) on a given node instance. * * targetInstanceName: (1) idom-instance-name value for the instance of the Node to insert at * in after and before modes. If null, insert after/before the last/first previously populated * instance of the Node, or as the first instance if none were previously populated. * * targetInstanceName: (2) dom-instance-name value for instance(s) of the Node Protoype to * replace when in replace mode. If null, replace all instances. * * instanceName: idom-instance-name value for instance of Prototype Node being populated. * ********************************************************************************* * * Other idom methods are * * .idom$dePopulate([settings]) which can delete certain populated instances of the Node * Prototype or all populated instances * * .idom$isPopulated() may be queried before specifying targetInstanceName to verify the * existence of populated instance(s) of the node prototype (the targets) * * idom$clone may be used to clone an entire node (including any linked nodes) after it's * been populated) * * idom.eventHandler may be used to defined inline events, e.g. onclick=idom$someHandler * and setting someHandler to idom.eventHandler(event, this, someFunction) during instance * creation which binds 'this' context to the element the event was triggered on and passes * the event, parent node id for the instance, and the instanceName * * idom.baseSelector maybe used on node and instance id's to strip out the clone and any link * references from instanceName which is * ********************************************************************************** * * About Events: * * If a handler is defined on the node it will only have access to the node id. If it's * defined on or in the node prototype it will have access to the instance id * * The context of 'this' inside the handler function is the element the event is * defined on * * Event handlers that are NOT defined using inline event handlers (like onclick, * onmouseover, etc) are not handled by idom at this time. * * *********************************************************************************/