Skip to content

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

Actions Controller

Store: valEqualOnly method that fires only when equality check is passed Observer once method. auto unsubscribe on first happened event Account page: save\restore slider position when user enters\leaves the page. Card: Generate action ACTION.CARD.LEARN_MORE when user clicks on "Изучить" button CardSlider: refactor to object. add save\restore methods. For saving and restoring current scroll position. Switch component: Generate beforeSwitch and afterSwitch events with (to, from) arguments If AfterSwitch is happened before app loaded - event would fire after load.
parent 5d0b3f30
Showing with 102 additions and 115 deletions
src/controller/Action.jsx 0 → 100644
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/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/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
......@@ -6,10 +6,40 @@ import Card from "../../cmp/card/Card";
import CardSlider from "../../cmp/cardSlider/CardSlider";
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( 'loaded' ),
tmpStore.bind( 'newCardsLoaded' ),
],
function( loadedCards, page, loaded, newCardsLoaded ){
console.log( loadedCards, page, loaded, newCardsLoaded )
if( newCardsLoaded !== loadedCards ){
if( loadedCards && page === 'Account' && loaded ){
_( 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">
......@@ -21,118 +51,22 @@ 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)
)
})}
/>
{/* {(()=> {
let c = <div/>;
(async () => {
const result = await AsyncAuthAjax.get(API.ENDPOINTS.GET_USER_NEW_CARDS());
D.appendChild(c, result.map((item, n) =>
{Slider}
<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;
......
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