m_j2c

Apply j2c style into DOM & virtual DOM(default support mithril)

Demo

Installation

$ npm install m_j2c

use in browser (can also be used in node)

var j2c = require('j2c')
var m_j2c = require('m_j2c')

then below way of apply css to browser DOM:

var obj= { '.item li':{float:'left'} }	// define style object
m_j2c( obj, document.querySelector('#some_ul') )	//apply j2c style to #some_ul

This will do 3 things in order:

1. insert style tag into header, which contains css:

.item_j2c_qh10fm_1imf8sp_8nqwug_810slq_6 li{
float:left;
}

1. #some_ul and it's children, change .item class into .item_j2c_qh10fm_1imf8sp_8nqwug_810slq_6
2. cache the generated style name && dom ref

Benefit

• no css name conflict, all class is localized! ( powered by j2c )
• js object computation to CSS!
• add css namespaces to a page/dom, a js function call to switch

More example

apply named style object to DOM

var css={
    navbar: { '.item':{color:'red'} },	// define sytle object
    content: { '.item':{color:'blue'} }	// define sytle object
}
m_j2c.setNS('colorfulSkin')		//will create if not exists
function applyCSS(){
    m_j2c.add('navbar', css.navbar)	// add sytle object to `navbar` key in `colorfulSkin` (create if not exists)
    m_j2c.add('content', css.content)	// add sytle object to `content` key in `colorfulSkin` (create if not exists)
 
    m_j2c('navbar', document.querySelector('#nav .item') )	// apply style to DOM
    m_j2c('content', document.querySelector('#content .item') )	// apply style to DOM
}
applyCSS()	// now the page style is colorful

above defined a colorfulSkin namespace, and two style names navbar & content in that namespace

then apply to two different dom accordingly.

now #nav and #content has different style for .item, thanks to the j2c localized class name.

switch to another namespace

var css={
    navbar: { '.item':{color:'white'} },	// define sytle object
    content: { '.item':{color:'black'} }	// define sytle object
}
m_j2c.setNS('blackwhite')		//will create if not exists
applyCSS()	// now the page style is black'n white

add / remove some css style from existing rules

m_j2c.add('navbar', { '.item':{color:'navy', float:'left'} } )  //will update `color`,add `float` for navbar style & dom
m_j2c.remove('navbar', { '.item':{float:'left'} } )  //will remove `float` for navbar style & dom

Using with Mithril

it's very easy, m_j2c act with a middleware for mithril v-dom, so below code:

var com = {
    view:function(){
        return m_j2c('navbar', m('div.item', 'content') )
    }
}

will apply navbar in current namespace(e.g. blackwhite above) to mithril v-dom, return new v-dom with class name modified

and later if you want to change style, just:

m_j2c.add('navbar', { '.item':{color:'navy', float:'left'} } )  // will trigger m.redraw, and update the v-dom to apply new style

m_j2c API

Variables

m_j2c.DEFAULT_NS

• string internal var store, initial value is 'default', you can change directly, when first used

m_j2c.j2c

• function j2c reference. Mostly, you can use m_j2c to manager your j2c

Functions

m_j2c.setNS(ns)

**Set current namespace to ns, and refresh dom; previously applied dom style of current namespace will be reverted **

• ns [string optional] namespace. if omit, use m_j2c.DEFAULT_NS

m_j2c.setNS()	//switch to default namespace
m_j2c.setNS('colorful')	//set colorful as current namespace, and switch to it

m_j2c.getNS()

**Get current active namespace **

m_j2c.getNS()	//'colorful'

m_j2c.removeNS(ns)

**Remove namespace and it's style, swtich to default namespace(m_j2c.DEFAULT_NS) **

• ns [string] namespace to remove

m_j2c.removeNS('colorful')	//remove colorful name space, and switch current namespace to 'default'

m_j2c(m)

Specify mithril instance, for trigger m.redraw

• m [function] mithril m instance. will check window.m internally first, or specified use it. add, remove, setNS, removeNS function will trigger a m.redraw. If no m detected, m_j2c also work except auto redraw. Only need call once.
• return m_j2c handler to allow chain with other function

m_j2c(m).add('name', cssObj)	//set m and

m_j2c(cssObj, [dom||v-dom])

Apply cssObj rule to dom/v-dom, using an auto generated name

• cssObj [object] style to apply, auto generate a temp name
• dom||v-dom [object optional] the target to apply style.
• return modified v-dom or dom list that applied j2c class

m_j2c( {'.item':{ color:'red' }} , document.querySelector('div.item') )	//apply cssObj to dom `div.item` and it's children
m_j2c( {'.item':{ color:'red' }} , m('.item', 'content') )	// apply cssObj to  mithril `m` result

m_j2c([ns], name, [dom||v-dom])

Apply class rule to dom/v-dom

• ns [string optional] namespace. if omit, use current namespace; '' denote m_j2c.DEFAULT_NS
• name [string] name of ns to get style sheet, the ns and name just key path internally
• dom||v-dom [object optional] the target to apply style. For dom, just an alias for m_j2c.applyClass function For v-dom, transform to apply j2c. anything that is not normal v-dom will return as is, like m.component, {subtree:retain}
• return modified v-dom or dom list that applied j2c class

m_j2c('name', document.querySelector('div.abc') )	//apply current namespace:name style to dom `div.abc` and it's children
m_j2c('name', m('.item', 'content') )	// apply current namespace:name style to  mithril `m` result
m_j2c('', 'name', m('.item', 'content') )	//apply default namespace:name style to mithril `m` result

m_j2c.add([ns], name, cssObj)

Add class rule to ns:name, extend from cssObj and refresh dom/v-dom

• ns [string optional] namespace. if omit, use current namespace; '' denote m_j2c.DEFAULT_NS
• name [string] name of ns to get style sheet, the ns and name just key path internally
• cssObj [object optional] the style object to be added

m_j2c.add('name', {'.item':{ color:'red' }} )	//add red color to .item in current namespace:name, and update style&dom
m_j2c.add('', 'name', {'.item':{ color:'red' }} )	//add red color to .item in default namespace:name, and update style&dom

m_j2c.remove([ns], name, [cssObj])

Remove class rule from ns:name, which has truthy value in cssOb and refresh dom/v-domj

• ns [string optional] namespace. if omit, use current namespace; '' denote m_j2c.DEFAULT_NS
• name [string] name of ns to get style sheet, the ns and name just key path internally
• cssObj [object optional] the style object to be removed, which has truthy value in cssObj. If falsy, will detele ns:name style totally

m_j2c.remove('name' )	//remove current namespace:name totally
m_j2c.remove('name', {'.item':{ color:'red' }} )	//remove red color to .item in current namespace:name, and update style&dom
m_j2c.remove('', 'name', {'.item':{ color:'red' }} )	//remove red color to .item in default namespace:name, and update style&dom

m_j2c.applyClass([ns], name, [target])

Apply DOM node class name into j2c, return affected dom list

• ns [string optional] namespace. if omit, use current namespace; '' denote m_j2c.DEFAULT_NS
• name [string] name of ns to get style sheet, the ns and name just key path internally
• target [DOM optional] target to apply style to. If falsy, document.body will be used

m_j2c.applyClass('name' )	//apply current namespace:name to body and it's children
m_j2c.applyClass('name', document.querySelector('#some_ul') )	//apply current namespace:name to #some_ul and it's children
m_j2c.applyClass('', 'name', document.querySelector('#some_ul') )	//apply default namespace:name to #some_ul and it's children

m_j2c.revertClass([target], [ns], [name])

Revert DOM node class name into original, return affected dom list

• target [DOM optional] target to apply style to. If falsy, document.body will be used
• ns [string optional] namespace. if omit, use current namespace; '' denote m_j2c.DEFAULT_NS
• name [string optional] name of ns to get style sheet, the ns and name just key path internally

m_j2c.revertClass()	//revert all style of current namespace in body and it's children
m_j2c.revertClass(document.querySelector('#some_ul') )	 //revert all style of current namespace in #some_ul and it's children
m_j2c.revertClass(document.querySelector('#some_ul'), null, 'name')	 //revert style of current namespace:name in #some_ul and it's children
m_j2c.revertClass(document.querySelector('#some_ul'), '', 'name' )	//revert style of default namespace:name to #some_ul and it's children

m_j2c.getClass([ns], name)

**Get class-j2c class map for name, return object, key is original class name, value is j2c class name **

• ns [string optional] namespace. if omit, use current namespace; '' denote m_j2c.DEFAULT_NS
• name [string] name of ns to get style sheet, the ns and name just key path internally

m_j2c.getClass('name' )	//get current namespace:name style map
m_j2c.getClass('', 'name' )	//get default namespace:name style map

m_j2c.domClassMap()

**Return internal dom list array which has j2c class applied **