wip Slider

src/controller/MainController.jsx

+import { AsyncAuthAjax } from "./Ajax";
+import { API } from "../dict/Consts";
+
+cards.getArray = function() {
+  const out = [];
+  for(let key in this._props){
+    if(key !== 'commit'){
+      out.push(this._props[key]);
+    }
+  }
+  return out;
+};
+store.sub('navigation.current', (val)=>tmpStore.set('navigation.current', val));
+
+store.sub(['navigation.current', 'loaded.cards'], async function(page, loaded) {
+  if(page !== 'Login' && !loaded){
+    //try{
+      const result = await AsyncAuthAjax.get( API.ENDPOINTS.GET_USER_NEW_CARDS() );
+
+      result.forEach(function(card) {
+        cards.set(card.id+'', {...card, seen: false})
+      });
+      store.set('loaded.cards', true);
+
+    /*}catch(e){
+      console.error(e)
+    }*/
+
+  }
+});
+
+tmpStore.sub([
+  'isMobile', 'navigation.current'
+], (is, page)=>{
+  if(!is && page === 'Profile')
+    store.set('navigation.current', 'Account');
+});
\ No newline at end of file

src/core/data/store/Store.js

@@ -134,10 +134,14 @@ Store.prototype = {
 
   sub: function(key, fn) {
     if(Array.isArray(key)){
-      var wrap = () => fn.apply(this, key.map(key=>this.get(key)));
+      var wrap = () => fn.apply(this, key.map(key=>key instanceof StoreBinding ? key.get() : this.get(key)));
 
       for( var i = 0, _i = key.length; i < _i; i++ ){
-        this.on(key[i], wrap)
+        if(key[i] instanceof StoreBinding){
+          key[i].sub(wrap);
+        }else{
+          this.on( key[ i ], wrap )
+        }
       }
       wrap();
     }else{
@@ -184,6 +188,9 @@ StoreBinding.prototype = {
   },
   set: function (val) {
     this.store.set(this.key, val);
+  },
+  get: function() {
+    return this.store.get(this.key);
   }
 };
 Store.prototype = Object.assign(new Observable, Store.prototype);
@@ -249,7 +256,20 @@ Store.IF = function(cfg, children){
 Store.NOT = Store.AGGREGATE(function(values, length) {
   return !values[0];
 });
-
+Store.debounce = function(fn, dt) {
+  var timeout = false, args, scope,
+    realCall = function() {
+      timeout = false;
+      fn.apply(scope, args)
+    };
+  return function(){
+    args = [].slice.call(arguments);
+    scope = this;
+    if(!timeout){
+      timeout = setTimeout(realCall, dt);
+    }
+  }
+};
 var HookPrototype = function() {};
 HookPrototype.prototype = {
   setter: function(val) { return val; },
@@ -297,3 +317,4 @@ Store.Value = {
 Store.HookPrototype = HookPrototype;
 
 typeof module === 'object' && (module.exports = Store);
+(typeof window === 'object') && (window.Store = Store);
\ No newline at end of file

src/main.jsx

@@ -9,6 +9,7 @@ import "/global-styles/base.scss";
 
 import { Switch } from "./view/cmp/switch/Switch";
 import {Page} from "./view/page/Page";
+import '/controller/MainController';
 
 export default function() {
   let tagField, exportEl;
@@ -24,10 +25,12 @@ export default function() {
   </div>;
   const w = window;
   w.addEventListener('resize', function() {
-    store.set({
-      isMobile: w.innerWidth < 1025
+    tmpStore.set({
+      isMobile: w.innerWidth < 1025,
+      width: w.innerWidth
     });
   });
+  tmpStore.set('loaded', true);
 };
 
 

src/model/Store.js

 let latest;
 const store = new Store(latest = {
   commit: window.CommitID,
-  isMobile: false,
   'navigation': {
     current: 'Login'
   },
+  loaded: {
+    cards: false
+  },
   'account': {
     userID: 5,
     name: 'Диогроген Курославович',
@@ -12,8 +14,6 @@ const store = new Store(latest = {
   }
 });
 
-
-
 try{
   var data = JSON.parse( localStorage.getItem( 'store' ) );
   if(data.commit !== store.get('commit')){
@@ -48,3 +48,36 @@ try{
 store.on('change', function() {
   localStorage.setItem('store', JSON.stringify(store._props));
 });
+
+const createSavableStore = function(name) {
+  const store = new Store(latest = {
+    commit: window.CommitID
+  });
+  try{
+    var data = JSON.parse( localStorage.getItem( name ) );
+    if(data.commit === store.get('commit')){
+      for( var k in data ){
+        store.set( k, data[ k ] );
+      }
+    }
+  }catch( e ){}
+  let shouldSave,
+    saveFn = function() {
+      localStorage.setItem(name, JSON.stringify(store._props));
+      shouldSave = false;
+    };
+  store.on('change', function() {
+    if(!shouldSave)
+      shouldSave = setTimeout(saveFn, 500);
+  });
+  return store;
+};
+
+const cards = createSavableStore('cards');
+const tmpStore = new Store({
+  loaded: false,
+  navigation: {current: 'Login'},
+  isMobile: false,
+  width: window.innerWidth
+});
+

src/view/block/card/card.scss

@@ -67,12 +67,7 @@ $cardTypes: (
 	flex-wrap: wrap;
 }
 
-.cards-list__item {
-	display: flex;
-	flex-direction: column;
-	margin-right: 30px;
-	margin-bottom: 30px;
-}
+
 
 .card {
 	@include colorCards;

src/view/block/header/Header.jsx

@@ -16,7 +16,7 @@ const Header = D.declare('view.block.Header', () => {
         },
         profile: 'Profile'
     };
-    store.sub('isMobile', (is)=> actions.profile = is ? 'Profile': 'Account');
+    tmpStore.sub('isMobile', (is)=> actions.profile = is ? 'Profile': 'Account');
 
     const action = function(name) {
         if(store.get('isTesting')){

src/view/cmp/cardSlider/CardSlider.jsx

+import Card from "../card/Card";
+import './CardSlider.scss';
+
+const CardSlider = D.declare( 'view.cmp.CardSlider', (cfg) => {
+  let current = [],
+    hash = {},
+    items = [],
+    cardWidth = 160,
+    minPadding = 20,
+    wrap,
+    width,
+    fullCardsCount,
+    padding,
+    updateSize = function() {
+      width = dom.clientWidth;
+      fullCardsCount = width/(cardWidth+minPadding)|0;
+      padding = (width-fullCardsCount*cardWidth)/(fullCardsCount-1);
+      wrap.style.width = (items.length*(padding+cardWidth)-padding)+'px';
+    },
+    update = function() {
+      updateSize();
+      updateVisibleDom();
+
+      /*D.removeChildren(wrap);
+      D.appendChild(wrap, items.map(function(item, n) {
+        return <div className="cards-list__item">
+          <Card
+            type={'product,info,other'.split( ',' )[ n % 3 ]}
+            disabled={n % 5 === 0}
+            seen={n % 4 === 0}
+            title={item.name}
+            image={item.image}
+          />
+        </div>
+      }));*/
+    };
+
+
+  tmpStore.sub('width', Store.debounce(function(w) {
+    //console.log(w)
+    update();
+  }, 30));
+
+
+  let dom = <div class='cmp-CardSlider'>
+    {wrap = <div class='slides-wrap'>{' '}</div>}
+  </div>;
+
+  let lastFrom, lastTo, last = false;
+  let updateVisibleDom = function() {
+    let from = Math.floor(dom.scrollLeft/(cardWidth+padding)-1),
+        count = Math.ceil(dom.clientWidth/(cardWidth+padding)),
+        to;
+    to = from + count *2;
+    from -=count;
+    from = Math.max(0, from);
+    to = Math.min(to, items.length);
+
+//console.log({from, to, cardWidth, padding})
+    for(let i = from; i< to; i++){
+      if(!(i in hash)){
+        hash[i] = {
+          dom: (function(item, n) {
+            return <div className="cards-list__item">
+              <Card
+                type={'product,info,other'.split( ',' )[ n % 3 ]}
+                disabled={n % 5 === 0}
+                seen={n % 4 === 0}
+                title={item.name}
+                image={item.image}
+              />
+            </div>
+          })(items[i], i),
+          inDOM: false,
+          x: 0
+        };
+      }
+    }
+    if(last){
+      for( let i = lastFrom; i < lastTo; i++ ){
+        if(i < from || i >= to){
+          if(hash[i].inDOM){
+            hash[i].inDOM = false;
+            wrap.removeChild(hash[i].dom);
+          }
+        }
+      }
+    }
+    for(let i = from; i< to; i++){
+      let x = i*(cardWidth+padding);
+      if(hash[i].x !== x){
+        hash[i].dom.style.left = (hash[i].x = x)+'px';
+      }
+      if(!hash[i].inDOM){
+        wrap.appendChild(hash[i].dom);
+        hash[i].inDOM = true;
+      }
+    }
+
+
+    lastFrom = from;
+    lastTo = to;
+    last = true;
+
+  };
+
+  dom.addEventListener('scroll', Store.debounce(function() {
+    requestAnimationFrame(updateVisibleDom)
+  }, 1000/60));
+  cfg.items(function(i) {
+    items = i;
+    //update();
+
+    update();
+
+  });
+
+  return dom;
+} );
+
+export default CardSlider;
+export { CardSlider };
\ No newline at end of file

src/view/cmp/cardSlider/CardSlider.scss

+.slides-wrap {
+  min-height: 260px;
+}
+.cmp-CardSlider {
+  width: 100%;
+  position: relative;
+  overflow-x: scroll;
+}
+
+.cards-list__item {
+  position: absolute;
+   display: flex;
+   flex-direction: column;
+   //margin-right: 30px;
+   margin-bottom: 30px;
+ }
\ No newline at end of file

src/view/page/account/Account.jsx

@@ -4,14 +4,11 @@ import '../../block/card/card.scss';
 import {AsyncAuthAjax} from "../../../controller/Ajax";
 import {API} from "../../../dict/Consts";
 import Card from "../../cmp/card/Card";
+import CardSlider from "../../cmp/cardSlider/CardSlider";
 
 const Account = D.declare('view.page.Account', () => {
-    store.sub([
-      'isMobile', 'navigation.current'
-    ], (is, page)=>{
-        if(!is && page === 'Profile')
-            store.set('navigation.current', 'Account');
-    });
+
+
 
     return <div class="account-page">
         <h1 class="readers-only">Страница личного кабинета сотрудника</h1>
@@ -25,8 +22,24 @@ const Account = D.declare('view.page.Account', () => {
                 <div class="account-page__content-inner">
                     <div class="cards-list">
                         <h2 class="readers-only">Список непросмотренных карточек</h2>
+                        <CardSlider
+                          items={_=> store.sub(
+                            [
+                                'loaded.cards',
+                                'navigation.current',
+                                tmpStore.bind('loaded')
+                            ],
+                            (loadedCards, page, loaded,w)=>{
 
-                        {(()=> {
+                                      if(loadedCards && page === 'Account' && loaded)
+                                          _(cards
+                                            .getArray()
+                                            .filter(card=>card.seen === false)
+                                            .sort((a,b)=>a.id-b.id), w+(w<1024?0:320+30*2+30*2)
+                                          )
+                                  })}
+                        />
+                       {/* {(()=> {
                             let c = <div/>;
                             (async () => {
                                 const result = await AsyncAuthAjax.get(API.ENDPOINTS.GET_USER_NEW_CARDS());
@@ -50,7 +63,7 @@ const Account = D.declare('view.page.Account', () => {
 
                             return c
 
-                        })()}
+                        })()}*/}
                         {/*
                         <div class="cards-list__item">
                             <div class="card card--info">