store hook mechanics, dom hooks mechanic, Boolean hook example

src/core/DOM.js

@@ -113,6 +113,9 @@ NS.apply = function(a,b) {
         if(typeof type === 'function'){
             return type(cfg, [].slice.call(arguments, 2));
         }
+        if(typeof type === 'object' && type.hook){
+            return type.hook(cfg, [].slice.call(arguments, 2));
+        }
         cfg = cfg || {};
         var cls = cfg.cls || cfg['class'] || cfg.className,
             style = cfg.style,
@@ -143,6 +146,8 @@ NS.apply = function(a,b) {
         if( cls ){
             if(typeof cls === 'function'){
                 cls(setters.cls(el));
+            }else if(typeof cls === 'object' && cls.hook){
+                return cls.hook(setters.cls(el));
             }else{
                 setters.cls(el)(cls);
             }
@@ -156,6 +161,8 @@ NS.apply = function(a,b) {
             if(attr.hasOwnProperty( i )){
                 if( typeof attr[ i ] === 'function' ){
                     attr[ i ]( setters.attr( el, i ) );
+                }else if(typeof attr[ i ] === 'object' && attr[ i ].hook){
+                    return attr[ i ].hook(setters.attr(el, i));
                 }else{
                     setters.attr( el, i )( attr[ i ] );
                 }
@@ -239,6 +246,7 @@ NS.apply = function(a,b) {
             return ;
         }
         if( type !== 'object' ){
+            // TODO : add hook
             if( type === 'function' ){
                 //var tmp = D.Text();//( {cls: 'zero-wrapper'} );
                 //el.appendChild( tmp );
@@ -278,11 +286,11 @@ NS.apply = function(a,b) {
     var dpID = 1;
     var DataPiece = function(id){this.id = id;};
     DataPiece.prototype = {value: void 0, update: function(){}};
-    var DataPieceFactory = function(refs, fn) {
+    var DataPieceFactory = function(refs, fn, scope) {
         var id = dpID++;
         var dp = new DataPiece(id);
         refs.push(dp);
-        fn(function(val) {
+        fn.call(scope, function(val) {
             dp.value = val;
             dp.update();
         });
@@ -312,7 +320,9 @@ NS.apply = function(a,b) {
                 out.push( token );
             }else if(typeof token === 'object'){
                 if(token instanceof DataPiece){
-                    token.value && out.push(token.value);
+                    token.value && out.push( token.value );
+                }else if ( token.hook ){
+                    args[i] = DataPieceFactory(refs, token.hook, token);
                 }else if(Array.isArray(token)){
                     tmp = D._cls(token, refs, depth+1);
                     // TODO check for push tmp
@@ -323,6 +333,8 @@ NS.apply = function(a,b) {
                             token[key].value && out.push(key);
                         }else if(typeof token[key] === 'function'){
                             token[ key ] = DataPieceFactory(refs, token[ key ]);
+                        }else if(typeof token[key] === 'object' && token[key].hook){
+                            token[key] = DataPieceFactory(refs, token[ key ].hook, token[key])
                         }else{
                             token[ key ] && out.push( key );
                         }

src/core/LivestReloading.js

@@ -33,7 +33,7 @@ async function subscribe() {
           });
 
     }catch(e){
-console.error(e)
+      console.error(e)
     }
     //showMessage(message);
     // Call subscribe() again to get the next message

src/core/data/store/Store.js

@@ -190,11 +190,16 @@ Store.AGGREGATE = function(fn) {
       };
       for(let i = 0; i < _i; i++){
         // set backward callback
-        args[i]( val => {
+        let hook = val => {
           // update item corresponding value and check condition
-          vals[i] = val;
+          vals[ i ] = val;
           check();
-        })
+        };
+        if(args[i] instanceof HookPrototype){
+          args[i].hook(hook)
+        }else{
+          args[ i ]( hook )
+        }
       }
 
     };
@@ -220,12 +225,64 @@ Store.OR = Store.AGGREGATE(function(values, length) {
 Store.IF = function(cfg, children){
   return function( update ){
     if( 'condition' in cfg )
-      cfg.condition( function( cond ){
+      var hook = function( cond ){
         update( cond ? children : null );
-      } );
+      };
+      if(cfg.condition instanceof HookPrototype){
+        cfg.condition.hook( hook );
+      }else{
+        cfg.condition( hook );
+      }
   }
 };
 Store.NOT = Store.AGGREGATE(function(values, length) {
   return !values[0];
 });
+
+var HookPrototype = function() {};
+HookPrototype.prototype = {
+  setter: function(val) { return val; },
+  //getter: function(val) { return val; },
+  set: function(val) {
+    val = this.setter(val);
+    var oldVal = this.get();
+    if(!this.equal(oldVal, val)){
+      this.data = val;
+      this._emit(oldVal, val);
+    }
+  },
+  equal: function(oldVal, newVal){
+    return newVal === oldVal;
+  },
+  get: function() {
+    return this.data;
+  },
+
+  hook: function(fn) { this.subscribers.push(fn); fn(this.get()); },
+  _emit: function(oldVal, val) {
+    var subscribers = this.subscribers;
+    for( var i = 0, _i = subscribers.length; i < _i; i++ ){
+      subscribers[ i ](val);
+    }
+  }
+};
+var HookFactory = function(accessor) {
+  var Hook = function(cfg) {
+    this.data = {};
+    this.subscribers = [];
+    this.set(cfg);
+  };
+  Hook.prototype = Object.assign( new HookPrototype(), accessor );
+
+  return Hook;
+};
+
+Store.Value = {
+  Boolean: new HookFactory({
+    setter: function(val) { return !!val; },
+    toggle: function() { this.set(!this.get()); }
+  })
+};
+Store.HookPrototype = HookPrototype;
+
 typeof module === 'object' && (module.exports = Store);

src/model/Store.js

-const store = new Store({
+let latest;
+const store = new Store(latest = {
   commit: window.CommitID,
   'navigation': {
-    current: 'login'
+    current: 'Login'
   },
   'account': {
     userID: 5,
@@ -16,19 +17,27 @@ const store = new Store({
 try{
   var data = JSON.parse( localStorage.getItem( 'store' ) );
   window.addEventListener && console.log(data)
-  if(window.CommitID !== store.get('commit')){
+  if(data.commit !== store.get('commit')){
     console.warn('STORE: warn outdated:');
     console.warn('\t\tCurrent data: '+ store.get('commit'), store._props);
     console.warn('\t\tSaved data: '+ window.CommitID, data);
-    console.warn('\tRun restoreStore() for restore saved state');
-    window.restoreStore = function() {
+    console.warn('\tRun Store.restore() for restore saved state');
+    console.warn('\tRun Store.update() for load latest default state');
+
+    Store.restore = function() {
       for( var k in data ){
         if(k !== 'commit'){
           store.set( k, data[ k ] );
         }
       }
     };
-
+    Store.update = function() {
+      for( var k in latest ){
+        if(k !== 'commit'){
+          store.set( k, latest[ k ] );
+        }
+      }
+    };
   }else{
     for( var k in data ){
       store.set( k, data[ k ] );

src/view/block/header/Header.jsx

@@ -7,16 +7,22 @@ import { Page } from "../../page/Page";
 
 const {IF, NOT} = Store;
 export default D.declare('view.block.Header', () => {
+    const tempPageMenuHidden = new Store.Value.Boolean(true);
     return <header class={D.cls(
         "page-header", {
             "page-header--inner": (NOT(store.valEqual( 'navigation.current', 'login')))
         })}   >
         <div class="button-temp">
-            {
-                Object.keys(Page).map(name=>
-                    <button type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
-                )
-            }
+            <button type={"button"} onClick={()=>tempPageMenuHidden.toggle()}>
+                <IF condition={tempPageMenuHidden}>+</IF>
+                <IF condition={NOT(tempPageMenuHidden)}>–</IF>
+
+            </button>
+            <div cls={D.cls({'hidden': tempPageMenuHidden})}>{
+                    Object.keys(Page).map(name=>
+                        <button class="temp-button" type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
+                    )
+            }</div>
         </div>
         <IF condition={NOT(store.valEqual( 'navigation.current', 'login'))}>
             <div className="page-header__wrapper">

src/view/block/header/Header.scss

@@ -130,4 +130,14 @@
 	top: 0;
 	left: 0;
 	z-index: 1;
+	.hidden {
+		display: none;
+	}
+	.temp-button {
+		display: block;
+		margin: 10px;
+		width: 160px;
+		padding: 8px 0;
+	}
+
 }