Skip to content

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

Store:

set: multivalue set property now set all values and then inform change subscribers sub: return UnsubscribeFunction ELSE Logic Component DOM feature: setting class object with Reactive Values Main move model/Store to project (it was in core) CardSlider: tiny bugfix Login daily token update InfoPage - wip
parent 29212d95
Showing with 117 additions and 46 deletions
src/controller/Action.jsx
......@@ -11,7 +11,7 @@ const ACTION = {
LEARN_MORE: new Action((item)=>{
store.set({
'navigation.current': 'InfoPage',
'navigation.data': item
'navigation.data': {id: item.id, category: item.category_id}
});
})
},
......
src/controller/MainController.jsx
import { AsyncAuthAjax } from "./Ajax";
import { API } from "../dict/Consts";
cards.getArray = function() {
Model.cards.getArray = function() {
const out = [];
for(let key in this._props){
if(key !== 'commit'){
......
src/core/DOM.js
......@@ -77,6 +77,7 @@ NS.apply = function(a,b) {
if( cls ){
if(typeof cls === 'function'){
cls(setters.cls(el));
}else if(typeof cls === 'object'){
}else{
setters.cls(el)(cls);
}
......@@ -147,7 +148,14 @@ NS.apply = function(a,b) {
if(typeof cls === 'function'){
cls(setters.cls(el));
}else if(typeof cls === 'object' && cls.hook){
return cls.hook(setters.cls(el));
cls.hook(setters.cls(el));
}else if(typeof cls === 'object'){
var resolvedCls = D.cls(cls);
if(typeof resolvedCls === 'function'){
resolvedCls(setters.cls(el));
}else{
setters.cls(el)(resolvedCls);
}
}else{
setters.cls(el)(cls);
}
......
src/core/data/store/Store.js
......@@ -86,27 +86,36 @@ Store.prototype = {
key: String, val: any
key: {k: v, ...}
*/
set: function(key, val) {
set: function(key, val, changeList) {
var isChangeList = changeList !== void 0;
changeList = changeList || [];
if(typeof key === 'object'){
for(let k in key){
this.set(k, key[k]);
this.set(k, key[k], changeList);
}
this._notify(changeList);
return this;
}
let changeList = [];
this._set(
typeof key === 'string' ? key.split('.') : key,
val,
this._props,
changeList
);
if(!isChangeList)
this._notify(changeList);
return this;
},
_notify: function(changeList) {
for( let i = changeList.length; i; ){
const changeListElement = changeList[ --i ];
this.fire('change', changeListElement[0], changeListElement[1]);
this.fire(changeListElement[0], changeListElement[1]);
}
return this;
},
get: function(key, returnLastStore) {
key = typeof key === 'string' ? key.split('.') : key;
......@@ -133,22 +142,29 @@ Store.prototype = {
},
sub: function(key, fn) {
var un;
if(Array.isArray(key)){
var wrap = () => fn.apply(this, key.map(key=>key instanceof StoreBinding ? key.get() : this.get(key)));
var uns = [];
for( var i = 0, _i = key.length; i < _i; i++ ){
if(key[i] instanceof StoreBinding){
key[i].sub(wrap);
uns.push(key[i].sub(wrap));
}else{
this.on( key[ i ], wrap )
uns.push(this.on( key[ i ], wrap ))
}
}
wrap();
return function() {
for( var i = 0, _i = uns.length; i < _i; i++ ){
uns[ i ]();
}
};
}else{
this.on( key, fn )
un = this.on( key, fn );
fn( this.get( key ) );
return un;
}
return this;
},
equal: function(key, val, fn) {
const wrap = isEqual(val, fn);
......
src/index.html
......@@ -16,7 +16,6 @@
<script src="core/data/store/Store.js"></script>
$COMMIT$
<script src="model/Store.js"></script>
$BUNDLE$
</head>
<body>
......
src/main.jsx
import '/model/Store';
import './view/page/login/Login.jsx';
import './view/page/account/WelcomePage.jsx';
import './view/page/account/Account.jsx';
......
src/model/Store.js → src/model/Store.jsx
let latest, STORE_VERSION = 'v0.1';
import { AsyncAuthAjax } from "../controller/Ajax";
import { API } from "../dict/Consts";
let latest, STORE_VERSION = 'v0.2';
const store = new Store(latest = {
_VERSION_: STORE_VERSION,
'navigation': {
......@@ -74,6 +77,35 @@ const createSavableStore = function(name) {
};
const cards = createSavableStore('cards');
const categories = createSavableStore('categories');
const Model = {
cards: cards,
categories: categories
};
categories.loading = {};
categories.load = async function(category, cb) {
category+='';
if(this.get(category)){
cb(this.get(category))
}else if(this.loading[category]){
this.loading[category].push(cb)
}else{
this.loading[category] = [cb];
try{
const result = await AsyncAuthAjax.get( API.ENDPOINTS.CATEGORIES_CATEGORY( category ) );
Model.categories.set(category, result);
this.loading[category].forEach((cb)=>cb(result));
delete this.loading[category];
}catch(e){
}
}
if(!this.loading[category]){
}
};
const tmpStore = new Store({
loaded: false,
navigation: {current: 'Login'},
......@@ -86,4 +118,8 @@ let lastNav = null;
store.sub('navigation.current', function(val) {
console.log('APP:navigation', lastNav,'→', val);
lastNav = val;
});
\ No newline at end of file
});
window.store = store;
window.tmpStore = tmpStore;
window.Model = Model;
\ No newline at end of file
src/view/block/header/Header.jsx
......@@ -6,7 +6,7 @@ import Logout from "/svg/logout.svg";
import { Page } from "../../page/Page";
import Input from "../../cmp/field/Input";
const {IF, NOT} = Store;
const {IF, NOT, ELSE} = Store;
const Header = D.declare('view.block.Header', () => {
const tempPageMenuHidden = new Store.Value.Boolean(true);
const actions = {
......@@ -17,6 +17,7 @@ const Header = D.declare('view.block.Header', () => {
},
profile: 'Profile'
};
tmpStore.sub('isMobile', (is)=> actions.profile = is ? 'Profile': 'Account');
const action = function(name) {
......@@ -36,11 +37,9 @@ const Header = D.declare('view.block.Header', () => {
})} >
<div class="button-temp">
<button type={"button"} onClick={()=>tempPageMenuHidden.toggle()}>
<IF condition={tempPageMenuHidden}>+</IF>
<IF condition={NOT(tempPageMenuHidden)}>–</IF>
<IF condition={tempPageMenuHidden}>+<ELSE/>–</IF>
</button>
<div cls={D.cls({'hidden': tempPageMenuHidden})}>{
<div class={{'hidden': tempPageMenuHidden}}>{
Object.keys(Page)
.map( name =>
<button class="temp-button" type={'button'} onClick={() => {
......
src/view/cmp/cardSlider/CardSlider.jsx
......@@ -13,32 +13,17 @@ const CardSlider = (function(){
this.itemClick = cfg.itemClick || this.itemClick;
this.hash = {};
let hash = {},
items = [],
elWrap,
width,
fullCardsCount,
padding;
this.items = [];
this.tune = this.tune.bind(this);
this.tuneScrollPosition = this.tuneScrollPosition.bind(this);
this.updateVisibleDom = this.updateVisibleDom.bind(this);
let scroller;
this.leftButtonDisabled = new Store.Value.Boolean(true);
this.rightButtonDisabled = new Store.Value.Boolean(true);
this.initDom();
let lastFrom, lastTo, last = false;
if(typeof cfg.items === 'function'){
cfg.items((items)=>{
this.setItems(items);
......@@ -51,6 +36,9 @@ const CardSlider = (function(){
};
Slider.prototype = {
lastFrom: void 0,
lastTo: void 0,
last: false,
tuning: false,
waitTimeout: false,
deltaMove: 0,
......@@ -65,7 +53,7 @@ const CardSlider = (function(){
cardWidth: 160,
minPadding: 10,
mobilePadding: 10,
desktopPadding: 310,
desktopPadding: 30,
},
subscribe: function() {
......
src/view/page/account/Account.jsx
......@@ -61,7 +61,7 @@ const Account = D.declare('view.page.Account', () => {
<div class="account-page__content">
<div class="account-page__content-inner">
<div class="account-page__cards">
<h2 class="account-page__title">Новые карточки для вашей должности:</h2>
<h2 class="account-page__title">Новые карточки для вашей должности:</h2>
<IF condition={showSlider}>
{Slider}
<ELSE/>
......@@ -89,9 +89,9 @@ const Account = D.declare('view.page.Account', () => {
</div>
</IF>
<div className="account-page__nav">
<AccountNavigation/>
</div>
<div className="account-page__nav">
<AccountNavigation/>
</div>
</div>
......
src/view/page/login/LoginCode.jsx
......@@ -14,7 +14,7 @@ const LoginCode = D.declare('view.page.LoginCode', ({loginStore}) => {
const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_PHONE(), {
phone: loginStore.get('phone')
} );
store.set('account.token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1ODAzOTg0MzksImV4cCI6MTU4MDQ4NDgzOSwicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfRU1QTE9ZRUUiXSwicGhvbmUiOiI3OTk5OTg3NzQxNCIsImlkIjo1fQ.YEAUmK7pMjqSdp1PIEjHfPqm0vCHOcJyBIUCI-UBvBJc3oljxGie5Lxwa6SvPY_h28P64Ib9yttBD9Fs3_i4RubltMlgKMtBv3cNPQdWxiiskwJiVrYrQWQ1MIiLKCoiIG3GCF1cWNQ4Wa-hE5o3ZSg7xtRdCIPD0rCP1KSg5LTrz2KMBIINmHxW7VFSDld3Ydo_BN_t8s6Q8vl9yxetbVXRD7dYwLReWEtqS95Ty9T8tnPZ8HDF3xmQUIk7U6YYptDRpytvCzaOAuvnFi2czR0U_ZeLb1z0Gyv07X4jm28XmrEVNqSEMzeAbT70WdDeTa5m5ltozouZUI8lMXAMVewlAoNmk458SDDGyxGNVuvSvvYu1joQ99uyeNwx35tUb1Qqw4Qv_tzcOSkSrDwFt75-2oTV9dhY3Pb7r5uSm41TTLGlH1VVQ3ZjCo3GgHopXrnEV9igAuR7oagLe4baqlouksC-Y4LHv-aNHMRSF4az2uar0TZcJrBTv3UZiBkQH7WXTDmNXsMRz_BcCpf6jvUNDCasESzVI1REzrshTyGGzHjImAFlRrRuldCWWlg8qUyaYxPZVs_KSs4dXAuAxvLVZWkRaj7QSWFlaSauXih5IDCC3P3eDFeKrtU4knwOthyfQCJGMc6JC9Z4i1A67ccPXDSYxe9oClMPCHzH6PA')
store.set('account.token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1ODA0OTQwNTgsImV4cCI6MTU4MDU4MDQ1OCwicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfRU1QTE9ZRUUiXSwicGhvbmUiOiI3OTk5OTg3NzQxNCIsImlkIjo1fQ.W3_nAZDaZ_4PY1uIMDWjslYc33cIfT7pAIxBsugmlbPx94sl1QLRg_KemRST08PWTXyZfo9gEQ1zYOS5yICz5yo5eFF6FYyKvZ0ZNonVp17aTfVR1HiGM2V0nGbVPcfUhxNqKlVXjSsQAS_z0aX_p2K1f9HCPWE4S9FAdbbOU-NWKwcDwoGV4A9NO5jt-yZ1xzBIpj8r4Ia_eU_SU4zqQMPzYwz5LMr0oL3Zo7dzsTzEJLNwZL7xzFvzRlEJAmhfn1KZOiAPicVEqL3Vxp8Yk-KXQisIplbrR5DlU_vaxcdBeDmt2jO2Ifj2_N97MxZ8cHdF0DQPOSScU20Wz96slh8B0SXtNgEbENL2AhDaVbZPJdXVCK2dr88VNXIohM5cicm8AglknbVG3lYVgbEG9QgSmHOEw6OLQYhp3hnXbm0_pk9S6b_5zozzBQ-f0b6cbkuXH6HUBNhZyZfBLNNU-jElRod8OMd6FFIHaYU8y7SLDDRlF0IQxVgezT5g-tjeSDKLuBr6Bc0yNnNAyad1UBMIHWB4yEXuW7CWai1Qg3k35LqU-Kz2KisRkKuwjj8dj7zB2v0d3wNWqeSX-C_irL2ZAcLr4iNK_bQBuJvH64G1U4Peh22tyrqpMHkdRXcx649wfiZ0bmXk1ldM3feDhoh-BQpSP7ARIZ0J_Gc-IY4')
}catch(e){
loginStore.set('codeChecking', false);
loginStore.set('codeError', true);
......
src/view/page/product/InfoPage.jsx
import './infoPage.scss';
import ArrActive from '/svg/arrow_active.svg';
import InfoCard from "../../cmp/infoCard/InfoCard.jsx";
import { AsyncAuthAjax } from "../../../controller/Ajax";
import { API } from "../../../dict/Consts";
const InfoPage = D.declare('view.page.InfoPage', () => {
return <div class="info-page">
......@@ -9,11 +12,29 @@ const InfoPage = D.declare('view.page.InfoPage', () => {
<ArrActive width="22" height="18"/>
</button>
<div class="info-page__card">
<InfoCard />
{( update ) => {
let un, un2;
tmpStore.valEqualOnly( 'afterNavigation.to', 'InfoPage' )( async() => {
un && un();
un2 && un2();
un = store.sub('navigation.data.category', function(category) {
Model.categories.load(category, function(data) {
debugger
});
});
console.log( 'data', store.get( 'navigation.data' ) )
} );
}}
<InfoCard/>
</div>
</div>
</div>
})
});
export default InfoPage;
export {InfoPage};
test/store.js
......@@ -176,5 +176,6 @@ assert.deepEqual(list[${n}].val, ${JSON.stringify(val)});
console.log(JSON.stringify(s._props))
})
});
});
\ No newline at end of file
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