Skip to content

K
kus-admin
Commit 29212d95 by Иван Кубота
Options

Debug menu:

Add new cards count bounder Store: New ELSE component and it's support in IF Account: New cards show logic update. Switch to 'No new cards' if count = 0 CardSlider: Refactor to JS class for speed, better readability, maintain and usage ease.
parent 7fa5a823
Showing with 79 additions and 47 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment