it's working

examples/examples-browser/public/js/DOM.js

@@ -16,6 +16,8 @@ NS.apply = function(a,b) {
 };
 
 (function(NS, glob, document){
+
+    var ArraySlice = [].slice;
     var svgNS = 'http://www.w3.org/2000/svg';
 
     var setters = {
@@ -54,10 +56,10 @@ NS.apply = function(a,b) {
 
         if(typeOfType === 'function'){
             // factory passed
-            return type(cfg, [].slice.call(arguments, 2));
+            return type(cfg, ArraySlice.call(arguments, 2));
         }else if(typeof type === 'object' && type.hook){
             // hooked future element creation
-            return type.hook(cfg, [].slice.call(arguments, 2));
+            return type.hook(cfg, ArraySlice.call(arguments, 2));
         }
 
 
@@ -166,7 +168,7 @@ NS.apply = function(a,b) {
     };
     'div,template,span,input,label,canvas,span,textarea,table,tr,td,th,tBody,tHead'.split( ',' ).forEach( function( name ){
         D[ name ] = function(){
-            return domEl.apply( null, [ name ].concat([].slice.call(arguments)))
+            return domEl.apply( null, [ name ].concat(ArraySlice.call(arguments)))
         };
     } );
 
@@ -188,13 +190,13 @@ NS.apply = function(a,b) {
                 cfg = {};
             }
             cfg.el = createElementSVG( name );
-            return domEl.apply( null, [ null ].concat([].slice.call(arguments)))
+            return domEl.apply( null, [ null ].concat(ArraySlice.call(arguments)))
         };
     } );
 
     D.html = function(cfg){
         var el = domEl('div', cfg);
-      el.innerHTML =  [].slice.call(arguments,1).join('\n');
+        el.innerHTML =  ArraySlice.call(arguments,1).join('\n');
         return el;
     };
     D.h = domEl;
@@ -224,25 +226,53 @@ NS.apply = function(a,b) {
             isInDOM && D._recursiveCmpCall(el, subEl, 'beforeRemoveFromDOM');
             el.removeChild(subEl);
             isInDOM && D._recursiveCmpCall(el, subEl, 'afterRemoveFromDOM');
-
         }
     };
     var DFragment = DocumentFragment;
+    D.insertBefore = function(newChild, refChild) {
+        var f = document.createDocumentFragment();
+        D.appendChild(f, newChild);
+        var el = refChild.parentNode,
+          subEl = newChild;
+
+        var isInDOM = D.isInDOM(el);
+        isInDOM && D._recursiveCmpCall(el, f, 'beforeAddToDOM');
+        el.insertBefore( f, refChild );
+        isInDOM && D._recursiveCmpCall(el, {childNodes: newChild}, 'afterAddToDOM');
+
+    };
     D.appendChild = function(el, subEl){
         var type = typeof subEl;
 
         if(subEl === null){
             return ;
         }
-        if( type !== 'object' ){
+        var notObject = type !== 'object';
+        var isHook = !notObject && ('hook' in subEl);
+
+        if(isHook){
+            type = 'function'; notObject = true;
+        }
+        if( notObject ){
             // TODO : add hook
             if( type === 'function' ){
                 var tmp = D.Text('');//( {cls: 'zero-wrapper'} );
                 el.appendChild( tmp );
                 var list = [];
-                subEl( function(){
+                el.setAttribute('data-hooked', 'yep');
+
+                // maybe do it through outer weak map?
+                el.__un = el.__un || [];
+                var hookFn;
+
+                if(isHook){
+                    hookFn = function(val){
 // TODO: append 2 TextNodes and remove children between them
 
+                        if(list.length === 1){
+                            list[0].textContent = val;
+                        }else{
+
                             if(el instanceof DFragment){
                                 el = tmp.parentNode;
                             }
@@ -253,13 +283,41 @@ NS.apply = function(a,b) {
                                 list[ i ].parentNode === el && el.removeChild( list[ i ] );
                             }
                             var fragment = document.createDocumentFragment();
-                    D.appendChild( fragment, [].slice.call( arguments ) );
-                    list = [].slice.call(fragment.childNodes);
+                            D.appendChild( fragment, ArraySlice.call( arguments ) );
+                            list = ArraySlice.call( fragment.childNodes );
+
+                            if( !tmp || !tmp.parentNode )
+                                return;
+                            el.insertBefore( fragment, tmp );
+                        }
+                    };
+
+                    el.__un.push(subEl.hook( hookFn ));
+                }else{
+
+                    hookFn = function(){
+// TODO: append 2 TextNodes and remove children between them
+
+                        if(el instanceof DFragment){
+                            el = tmp.parentNode;
+                        }
+                        if(!el)
+                            return;
+
+                        for( var i = 0, _i = list.length; i < _i; i++ ){
+                            list[ i ].parentNode === el && el.removeChild( list[ i ] );
+                        }
+                        var fragment = document.createDocumentFragment();
+                        D.appendChild( fragment, ArraySlice.call( arguments ) );
+                        list = ArraySlice.call(fragment.childNodes);
 
                         if(!tmp || !tmp.parentNode)
                             return;
                         el.insertBefore(fragment, tmp);
-                } )
+                    };
+
+                    el.__un.push(subEl( hookFn ));
+                }
             }else if( subEl !== void 0 && subEl !== false && subEl !== null ){
                 el.appendChild( D.Text( subEl ) );
             }
@@ -267,7 +325,8 @@ NS.apply = function(a,b) {
             var isInDOM = D.isInDOM(el);
             subEl.dom.__cmp = subEl;
             isInDOM && D._recursiveCmpCall(el, subEl.dom, 'beforeAddToDOM');
-            el.appendChild( subEl.dom );
+            D.appendChild(el, subEl.dom);
+            //el.appendChild( subEl.dom );
             isInDOM && D._recursiveCmpCall(el, subEl.dom, 'afterAddToDOM');
 
             //subEl
@@ -446,7 +505,7 @@ NS.apply = function(a,b) {
           }
       };
     var log = function(evt) {
-        _log.push({type: 'log', evt: evt, args: [].slice.call(arguments, 1)});
+        _log.push({type: 'log', evt: evt, args: ArraySlice.call(arguments, 1)});
         if(!later)
             later = setTimeout(realLog, 3000);
 
@@ -454,7 +513,8 @@ NS.apply = function(a,b) {
     var emptyFn = function() {};
 
     D.Unsubscribe = function(fn) {
-        this.fn = [fn];
+        this.fn = [];
+        fn && this.fn.push(fn);
     };
     D.Unsubscribe.prototype = {
         un: function() {
@@ -474,12 +534,13 @@ NS.apply = function(a,b) {
             }
         }
     };
+
     var unsubscribable = function(name) {
-        return function(el, fn) {
+        return function(el, fn, arg) {
             typeof fn !== 'function' && (fn = getCallableFunction(fn));
-            el.addEventListener(name, fn);
+            el.addEventListener(name, fn, arg);
             return new D.Unsubscribe(function() {
-                el.removeEventListener(name, fn);
+                el.removeEventListener(name, fn, arg);
             });
         };
     };
@@ -490,7 +551,46 @@ NS.apply = function(a,b) {
         over: unsubscribable('mouseover'),
     };
 
+    D.AnimationFrame = function(fn) {
+        var requested = false,
+          arg,
 
+          update = function() {
+              fn.call(null, arg);
+              requested = false;
+          };
+
+        return function(a) {
+            arg = a;
+            if(!requested){
+                requestAnimationFrame(update);
+                requested = true;
+            }
+        };
+    };
+    D.overlay = {
+        inited: false,
+        show: function() {
+            this.init();
+            this.el.style.display = 'block';
+        },
+        hide: function() {
+            this.init();
+            this.el.style.display = 'none';
+        },
+        init: function() {
+            if(this.inited)
+                return;
+            this.inited = true;
+            this.el = D.div({
+                renderTo: document.body,
+                cls: 'D-overlay', style: {display: 'none', position: 'absolute', zIndex:10000, left: 0, right: 0, top: 0, bottom: 0}})
+            this.el.addEventListener('mousemove', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }, true)
+        }
+    };
 })(window['NS'], typeof window !== "undefined" ? window :
   typeof WorkerGlobalScope !== "undefined" ? self :
     typeof global !== "undefined" ? global :

examples/examples-browser/public/js/colors.js

@@ -315,3 +315,10 @@ function rgbToHsl(r, g, b) {
 
   return [ h, s, l ];
 }
+function HEX2RGB(hex){
+  var color = (hex+'').substr( 1 ) || '',
+    r = parseInt( color[ 0 ] + color[ 1 ], 16 ),
+    g = parseInt( color[ 2 ] + color[ 3 ], 16 ),
+    b = parseInt( color[ 4 ] + color[ 4 ], 16 );
+  return [r,g,b];
+}
\ No newline at end of file