merge

src/core/data/store/Store.js

@@ -246,11 +246,25 @@ Store.OR = Store.AGGREGATE(function(values, length) {
   }
   return result;
 });
+Store.ELSE = function(){if(!( this instanceof Store.ELSE))return new Store.ELSE()};
 Store.IF = function(cfg, children){
+  var holders = {true: [], false: []},
+    holder = holders.true;
+  for( var i = 0, _i = children.length; i < _i; i++ ){
+    var child = children[ i ];
+    if(child instanceof Store.ELSE){
+      holder = holders.false;
+    }else{
+      holder.push(child);
+    }
+  }
+  holders.true.length === 0 && (holders.true = null);
+  holders.false.length === 0 && (holders.false = null);
+
   return function( update ){
     if( 'condition' in cfg )
       var hook = function( cond ){
-        update( cond ? children : null );
+        update( cond ? holders.true : holders.false );
       };
       if(cfg.condition instanceof HookPrototype){
         cfg.condition.hook( hook );

src/model/Store.js

@@ -78,7 +78,8 @@ const tmpStore = new Store({
   loaded: false,
   navigation: {current: 'Login'},
   isMobile: false,
-  width: window.innerWidth
+  width: window.innerWidth,
+  newItemCount: 1000
 });
 
 let lastNav = null;

src/view/block/header/Header.jsx

@@ -4,6 +4,7 @@ import Logo  from '/svg/logo.svg';
 import User from "/svg/user.svg";
 import Logout from "/svg/logout.svg";
 import { Page } from "../../page/Page";
+import Input from "../../cmp/field/Input";
 
 const {IF, NOT} = Store;
 const Header = D.declare('view.block.Header', () => {
@@ -49,7 +50,7 @@ const Header = D.declare('view.block.Header', () => {
                         {name}
                     </button>
                 )
-            }</div>
+            }<div>New cards count <Input type={'number'} bind={tmpStore.bind('newItemCount')}/></div></div>
         </div>
         <IF condition={NOT(store.valEqual( 'navigation.current', 'Login'))}>
             <div className="page-header__wrapper">

src/view/block/header/Header.scss

@@ -144,6 +144,7 @@
 	top: 0;
 	left: 0;
 	z-index: 1;
+	background: rgba(0,0,100,0.4);
 	.hidden {
 		display: none;
 	}

src/view/page/account/Account.jsx

@@ -5,38 +5,49 @@ import {API} from "../../../dict/Consts";
 import Card from "../../cmp/card/Card";
 import CardSlider from "../../cmp/cardSlider/CardSlider";
 import AccountNavigation from "../../block/accountNav/AccountNavigation";
-
+const {IF, ELSE} = Store;
 const Account = D.declare('view.page.Account', () => {
+
+  const showSlider = new Store.Value.Boolean(true);
+  // subscribe to new cards
+  store.sub(
+    [
+      'loaded.cards',
+      tmpStore.bind( 'afterNavigation.to' ),
+      tmpStore.bind( 'newCardsLoaded' ),
+      tmpStore.bind( 'newItemCount' )
+    ],
+    function( loadedCards, to, newCardsLoaded, newItemCount ){
+
+      let stamp = [loadedCards, newItemCount].join(';');
+      if( newCardsLoaded !== stamp ){
+        if( loadedCards && to === 'Account' ){
+          const newCards = cards
+            .getArray()
+            .filter( card => card.seen === false )
+            .sort( ( a, b ) => a.id - b.id )
+            .slice(0, newItemCount);
+
+          // finally we get new cards!
+
+
+          showSlider.set(newCards.length);
+          Slider.setItems(newCards);
+
+
+          tmpStore.set( 'newCardsLoaded', stamp )
+        }
+      }
+    }
+  );
+
     let Slider = new CardSlider( {
 
         name: "newCardsSlider",
 
         itemClick: ( item, action ) => {
           action.execute( item );
-        },
-
-
-        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">
@@ -51,29 +62,33 @@ const Account = D.declare('view.page.Account', () => {
                 <div class="account-page__content-inner">
                     <div class="account-page__cards">
                         <h2 class="account-page__title">Новые карточки для вашей должности:</h2>
-                      {Slider}
+                      <IF condition={showSlider}>
+                        {Slider}
+                      <ELSE/>
                         <div className="account-page__no-cards">
-                            <div className="account-page__no-cards-info">
-                                <div className="account-page__no-cards-item">
-                                    <Card
-                                        type={'product'}
-                                        disabled
-                                        title={'Карточек нет'}
-                                        image={'/uploads/images/card-disabled.png'}
-                                    />
-                                </div>
-                                <div className="account-page__no-cards-text">
-                                    <p>Вы&nbsp;просмотрели все новые карточки этого месяца.</p>
-                                    <p>Так держать!</p>
-                                </div>
+                          <div className="account-page__no-cards-info">
+                            <div className="account-page__no-cards-item">
+                              <Card
+                                type={'product'}
+                                disabled
+                                title={'Карточек нет'}
+                                image={'/uploads/images/card-disabled.png'}
+                              />
                             </div>
-                            <div className="account-page__no-cards-image">
-                                <picture>
-                                    <source srcset="uploads/images/assistant-nocards-mob.svg" media={"(max-width: 767px"}/>
-                                    <img src="uploads/images/assistant-nocards.svg" alt=""/>
-                                </picture>
+                            <div className="account-page__no-cards-text">
+                              <p>Вы&nbsp;просмотрели все новые карточки этого месяца.</p>
+                              <p>Так держать!</p>
                             </div>
+                          </div>
+                          <div className="account-page__no-cards-image">
+                            <picture>
+                              <source srcSet="uploads/images/assistant-nocards-mob.svg" media={"(max-width: 767px"}/>
+                              <img src="uploads/images/assistant-nocards.svg" alt=""/>
+                            </picture>
+                          </div>
                         </div>
+                      </IF>
+
                         <div className="account-page__nav">
                             <AccountNavigation/>
                         </div>