merge

src/controller/Action.jsx

+const Action = function(fn) {
+  this.fn = fn;
+};
+Action.prototype = {
+  execute: function() {
+    this.fn.apply(this, arguments);
+  }
+};
+const ACTION = {
+  CARD: {
+    LEARN_MORE: new Action((item)=>{
+      store.set({
+        'navigation.current': 'InfoPage',
+        'navigation.data': item
+      });
+    })
+  },
+  Action
+};
+
+export default ACTION
+export {ACTION};
+

src/controller/MainController.jsx

@@ -30,8 +30,8 @@ store.sub(['navigation.current', 'loaded.cards'], async function(page, loaded) {
 });
 
 tmpStore.sub([
-  'isMobile', 'navigation.current'
-], (is, page)=>{
-  if(!is && page === 'Profile')
+  'isMobile', 'navigation.current', 'loaded'
+], (is, page, loaded)=>{
+  if(!is && page === 'Profile' && loaded)
     store.set('navigation.current', 'Account');
 });
\ No newline at end of file

src/core/Observer.js

@@ -27,6 +27,15 @@ Observable.prototype = {
             const listener = listeners[ i ];
             listener.apply(this, [].slice.call(arguments, 1));
         }
+    },
+    once: function(k, v) {
+        var _self = this,
+          wrap = function() {
+            v.apply(this, arguments);
+            _self.un(k, wrap)
+          };
+        this.on(k, wrap);
+
     }
 };
 typeof module === 'object' && (module.exports = Observable);
\ No newline at end of file

src/core/data/store/Store.js

@@ -168,7 +168,13 @@ Store.prototype = {
   valEqual: function(key, val) {
     const me = this;
     return function backwardCallback(update) {
-      me.equal(key, val, compareResult => update(compareResult));
+      me.equal(key, val, compareResult => {update(compareResult)});
+    }
+  },
+  valEqualOnly: function(key, val) {
+    const me = this;
+    return function backwardCallback(update) {
+      me.equal(key, val, compareResult => {compareResult && update(compareResult)});
     }
   },
   valTrue: function(key) {

src/dict/Consts.jsx

@@ -203,7 +203,7 @@ const Consts = {
     MONTH_YEAR: "LLLL yyyy",
     DAY_MONTH: "dd.MM",
   },
-}
+};
 
 Consts.LOCAL_STORAGE.TOKEN.GET_TOKEN = (token) => `Bearer ${token}`
 
@@ -219,4 +219,6 @@ for(let key in Consts.API.ENDPOINTS){
 }
 
 export default Consts
-export const API = Consts.API;
+const API = Consts.API;
+export {API};
+export {Consts};

src/main.jsx

@@ -16,7 +16,12 @@ export default function() {
 
   let dom = <div renderTo={document.body} cls="page-content">
     <view.block.Header/>
-    {Switch({cls: 'page-content__inner', key: 'navigation.current'},
+    {Switch({
+        cls: 'page-content__inner',
+        key: 'navigation.current',
+        beforeSwitch: (val, old)=>{tmpStore.set('beforeNavigation', {from:old, to: val});},
+        afterSwitch: (val, old)=>{tmpStore.set('afterNavigation', {from:old, to: val});}
+      },
       Object.keys(Page).reduce((store, pageName)=>{
         store[pageName] = new Page[pageName]();
         return store;

src/model/Store.js

@@ -81,3 +81,8 @@ const tmpStore = new Store({
   width: window.innerWidth
 });
 
+let lastNav = null;
+store.sub('navigation.current', function(val) {
+  console.log('APP:navigation', lastNav,'→', val);
+  lastNav = val;
+});
\ No newline at end of file

src/view/cmp/card/Card.jsx

@@ -2,8 +2,10 @@ import './card.scss';
 import Eye from '/svg/eye.svg';
 import Button from "../button/Button";
 import Format from "../format/Format";
-
+import ACTION from "../../../controller/Action";
+const noFn = ()=>{};
 const Card = D.declare('view.cmp.Card', (cfg) => {
+    const action = cfg.action || noFn;
     return <div className={D.cls('card card--'+
         (cfg.disabled?'disabled':
             cfg.seen?'seen':cfg.type))}>
@@ -19,7 +21,7 @@ const Card = D.declare('view.cmp.Card', (cfg) => {
                         <Eye width="20" height="13"/>
                     </div>
                     :
-                    <Button class={"button card__button"} onclick={cfg.onclick}>
+                    <Button class={"button card__button"} onclick={()=>cfg.action(ACTION.CARD.LEARN_MORE)}>
                         <span>Изучить</span>
                     </Button>
             )

src/view/cmp/switch/Switch.jsx

@@ -3,6 +3,8 @@ const Switch = D.declare('Switch', (cfg, contentHash) => {
   if(cfg.content){
     contentHash = cfg.content;
   }
+  let {beforeSwitch, afterSwitch} = cfg;
+
   if(Array.isArray(contentHash)){
     if(contentHash.length === 0){
       if(cfg.content)
@@ -23,12 +25,15 @@ const Switch = D.declare('Switch', (cfg, contentHash) => {
             'cmp-switch',
             cfg.cls,
             { 'cmp-switch__filled': val in contentHash } ) ) ) } );
-
+  let oldValue;
   (cfg.store || store).sub( cfg.key, (val)=> {
+    beforeSwitch && beforeSwitch(val, oldValue);
     D.removeChildren(cmp);
     if(val in contentHash)
       D.appendChild( cmp, contentHash[ val ] );
+    afterSwitch && (tmpStore.get('loaded') ? afterSwitch(val, oldValue) : tmpStore.once('loaded', ()=> afterSwitch(val, oldValue)));
 
+    oldValue = val;
   });
 
   return cmp;

src/view/page/account/Account.jsx

@@ -4,13 +4,42 @@ import {AsyncAuthAjax} from "../../../controller/Ajax";
 import {API} from "../../../dict/Consts";
 import Card from "../../cmp/card/Card";
 import CardSlider from "../../cmp/cardSlider/CardSlider";
-import AccountNavigation from "../../block/accountNav/AccountNavigation.jsx";
+import AccountNavigation from "../../block/accountNav/AccountNavigation";
 
 const Account = D.declare('view.page.Account', () => {
+    let Slider = new CardSlider( {
 
+        name: "newCardsSlider",
 
+        itemClick: ( item, action ) => {
+          action.execute( item );
+        },
 
-    return <div class="account-page">
+
+        items: _ => store.sub(
+          [
+            'loaded.cards',
+            'navigation.current',
+            tmpStore.bind( 'afterNavigation.to' ),
+            tmpStore.bind( 'newCardsLoaded' ),
+          ],
+          function( loadedCards, to, newCardsLoaded ){
+            if( newCardsLoaded !== loadedCards ){
+              if( loadedCards && to === 'Account' ){
+                _( cards
+                  .getArray()
+                  .filter( card => card.seen === false )
+                  .sort( ( a, b ) => a.id - b.id )
+                );
+
+                tmpStore.set( 'newCardsLoaded', loadedCards )
+              }
+            }
+          }
+        )
+      } );
+
+    const dom = <div class="account-page">
         <h1 class="readers-only">Страница личного кабинета сотрудника</h1>
         <div class="account-page__wrapper">
             <div class="account-page__menu">
@@ -22,24 +51,7 @@ const Account = D.declare('view.page.Account', () => {
                 <div class="account-page__content-inner">
                     <div class="account-page__cards">
                         <h2 class="account-page__title">Новые карточки для вашей должности:</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)
-                                          )
-                                  })}
-                        />
+                      {Slider}
                         <div className="account-page__no-cards">
                             <div className="account-page__no-cards-info">
                                 <div className="account-page__no-cards-item">
@@ -65,100 +77,22 @@ const Account = D.declare('view.page.Account', () => {
                         <div className="account-page__nav">
                             <AccountNavigation/>
                         </div>
-                       {/* {(()=> {
-                            let c = <div/>;
-                            (async () => {
-                                const result = await AsyncAuthAjax.get(API.ENDPOINTS.GET_USER_NEW_CARDS());
-
-                                D.appendChild(c, result.map((item, n) =>
-
-
-                                    <div class="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>
-                                ));
-
-                            })();
 
 
-                            return c
-
-                        })()}*/}
-                        {/*
-                        <div class="cards-list__item">
-                            <div class="card card--info">
-                                <div class="card__image">
-                                    <img src="/uploads/images/card_product1.jpg" alt=""/>
-                                </div>
-                                <h3 class="card__title">Название карточки</h3>
-                                <div class="card__footer">
-                                    <Button class={"button card__button"}>
-                                        <span>Изучить</span>
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cards-list__item">
-                            <div class="card card--product">
-                                <div class="card__image">
-                                    <img src="/uploads/images/card_product2.jpg" alt=""/>
-                                </div>
-                                <h3 class="card__title">Название карточки</h3>
-                                <div class="card__footer">
-                                    <Button class={"button card__button"}>
-                                        <span>Изучить</span>
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cards-list__item">
-                            <div class="card card--other">
-                                <div class="card__image">
-                                    <img src="/uploads/images/card_product3.jpg" alt=""/>
-                                </div>
-                                <h3 class="card__title">Название карточки</h3>
-                                <div class="card__footer">
-                                    <Button class={"button card__button"}>
-                                        <span>Изучить</span>
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cards-list__item">
-                            <div class="card card--seen">
-                                <div class="card__image">
-                                    <img src="/uploads/images/card_product4.jpg" alt=""/>
-                                </div>
-                                <h3 class="card__title">Название карточки</h3>
-                                <div class="card__footer">
-                                    <div class="card__note">
-                                        <span>Просмотрена</span>
-                                        <Eye width="20" height="13" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cards-list__item">
-                            <div class="card card--disabled">
-                                <div class="card__image">
-                                    <img src="/uploads/images/card-disabled.png" alt=""/>
-                                </div>
-                                <h3 class="card__title">Карточек нет</h3>
-                                <div class="card__footer">
-                                </div>
-                            </div>
-                        </div>*/}
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </div>;
+
+  tmpStore.valEqualOnly('afterNavigation.to', 'Account')(function() {
+    Slider.restore();
+  });
+  tmpStore.valEqualOnly('beforeNavigation.from', 'Account')(function() {
+    Slider.save();
+  });
+
+  return dom;
 });
 
 export default Account;