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 112 additions and 40 deletions
src/controller/Action.jsx
...@@ -11,7 +11,7 @@ const ACTION = { ...@@ -11,7 +11,7 @@ const ACTION = {
LEARN_MORE: new Action((item)=>{ LEARN_MORE: new Action((item)=>{
store.set({ store.set({
'navigation.current': 'InfoPage', 'navigation.current': 'InfoPage',
'navigation.data': item 'navigation.data': {id: item.id, category: item.category_id}
}); });
}) })
}, },
......
src/controller/MainController.jsx
import { AsyncAuthAjax } from "./Ajax"; import { AsyncAuthAjax } from "./Ajax";
import { API } from "../dict/Consts"; import { API } from "../dict/Consts";
cards.getArray = function() { Model.cards.getArray = function() {
const out = []; const out = [];
for(let key in this._props){ for(let key in this._props){
if(key !== 'commit'){ if(key !== 'commit'){
......
src/core/DOM.js
...@@ -77,6 +77,7 @@ NS.apply = function(a,b) { ...@@ -77,6 +77,7 @@ NS.apply = function(a,b) {
if( cls ){ if( cls ){
if(typeof cls === 'function'){ if(typeof cls === 'function'){
cls(setters.cls(el)); cls(setters.cls(el));
}else if(typeof cls === 'object'){
}else{ }else{
setters.cls(el)(cls); setters.cls(el)(cls);
} }
...@@ -147,7 +148,14 @@ NS.apply = function(a,b) { ...@@ -147,7 +148,14 @@ NS.apply = function(a,b) {
if(typeof cls === 'function'){ if(typeof cls === 'function'){
cls(setters.cls(el)); cls(setters.cls(el));
}else if(typeof cls === 'object' && cls.hook){ }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{ }else{
setters.cls(el)(cls); setters.cls(el)(cls);
} }
......
src/core/data/store/Store.js
...@@ -86,27 +86,36 @@ Store.prototype = { ...@@ -86,27 +86,36 @@ Store.prototype = {
key: String, val: any key: String, val: any
key: {k: v, ...} key: {k: v, ...}
*/ */
set: function(key, val) { set: function(key, val, changeList) {
var isChangeList = changeList !== void 0;
changeList = changeList || [];
if(typeof key === 'object'){ if(typeof key === 'object'){
for(let k in key){ for(let k in key){
this.set(k, key[k]); this.set(k, key[k], changeList);
} }
this._notify(changeList);
return this; return this;
} }
let changeList = [];
this._set( this._set(
typeof key === 'string' ? key.split('.') : key, typeof key === 'string' ? key.split('.') : key,
val, val,
this._props, this._props,
changeList changeList
); );
if(!isChangeList)
this._notify(changeList);
return this;
},
_notify: function(changeList) {
for( let i = changeList.length; i; ){ for( let i = changeList.length; i; ){
const changeListElement = changeList[ --i ]; const changeListElement = changeList[ --i ];
this.fire('change', changeListElement[0], changeListElement[1]); this.fire('change', changeListElement[0], changeListElement[1]);
this.fire(changeListElement[0], changeListElement[1]); this.fire(changeListElement[0], changeListElement[1]);
} }
return this;
}, },
get: function(key, returnLastStore) { get: function(key, returnLastStore) {
key = typeof key === 'string' ? key.split('.') : key; key = typeof key === 'string' ? key.split('.') : key;
...@@ -133,22 +142,29 @@ Store.prototype = { ...@@ -133,22 +142,29 @@ Store.prototype = {
}, },
sub: function(key, fn) { sub: function(key, fn) {
var un;
if(Array.isArray(key)){ if(Array.isArray(key)){
var wrap = () => fn.apply(this, key.map(key=>key instanceof StoreBinding ? key.get() : this.get(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++ ){ for( var i = 0, _i = key.length; i < _i; i++ ){
if(key[i] instanceof StoreBinding){ if(key[i] instanceof StoreBinding){
key[i].sub(wrap); uns.push(key[i].sub(wrap));
}else{ }else{
this.on( key[ i ], wrap ) uns.push(this.on( key[ i ], wrap ))
} }
} }
wrap(); wrap();
return function() {
for( var i = 0, _i = uns.length; i < _i; i++ ){
uns[ i ]();
}
};
}else{ }else{
this.on( key, fn ) un = this.on( key, fn );
fn( this.get( key ) ); fn( this.get( key ) );
return un;
} }
return this;
}, },
equal: function(key, val, fn) { equal: function(key, val, fn) {
const wrap = isEqual(val, fn); const wrap = isEqual(val, fn);
......
src/index.html
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
<script src="core/data/store/Store.js"></script> <script src="core/data/store/Store.js"></script>
$COMMIT$ $COMMIT$
<script src="model/Store.js"></script>
$BUNDLE$ $BUNDLE$
</head> </head>
<body> <body>
......
src/main.jsx
import '/model/Store';
import './view/page/login/Login.jsx'; import './view/page/login/Login.jsx';
import './view/page/account/WelcomePage.jsx'; import './view/page/account/WelcomePage.jsx';
import './view/page/account/Account.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 = { const store = new Store(latest = {
_VERSION_: STORE_VERSION, _VERSION_: STORE_VERSION,
'navigation': { 'navigation': {
...@@ -74,6 +77,35 @@ const createSavableStore = function(name) { ...@@ -74,6 +77,35 @@ const createSavableStore = function(name) {
}; };
const cards = createSavableStore('cards'); 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({ const tmpStore = new Store({
loaded: false, loaded: false,
navigation: {current: 'Login'}, navigation: {current: 'Login'},
...@@ -87,3 +119,7 @@ store.sub('navigation.current', function(val) { ...@@ -87,3 +119,7 @@ store.sub('navigation.current', function(val) {
console.log('APP:navigation', lastNav,'→', val); console.log('APP:navigation', lastNav,'→', val);
lastNav = val; lastNav = val;
}); });
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"; ...@@ -6,7 +6,7 @@ import Logout from "/svg/logout.svg";
import { Page } from "../../page/Page"; import { Page } from "../../page/Page";
import Input from "../../cmp/field/Input"; import Input from "../../cmp/field/Input";
const {IF, NOT} = Store; const {IF, NOT, ELSE} = Store;
const Header = D.declare('view.block.Header', () => { const Header = D.declare('view.block.Header', () => {
const tempPageMenuHidden = new Store.Value.Boolean(true); const tempPageMenuHidden = new Store.Value.Boolean(true);
const actions = { const actions = {
...@@ -17,6 +17,7 @@ const Header = D.declare('view.block.Header', () => { ...@@ -17,6 +17,7 @@ const Header = D.declare('view.block.Header', () => {
}, },
profile: 'Profile' profile: 'Profile'
}; };
tmpStore.sub('isMobile', (is)=> actions.profile = is ? 'Profile': 'Account'); tmpStore.sub('isMobile', (is)=> actions.profile = is ? 'Profile': 'Account');
const action = function(name) { const action = function(name) {
...@@ -36,11 +37,9 @@ const Header = D.declare('view.block.Header', () => { ...@@ -36,11 +37,9 @@ const Header = D.declare('view.block.Header', () => {
})} > })} >
<div class="button-temp"> <div class="button-temp">
<button type={"button"} onClick={()=>tempPageMenuHidden.toggle()}> <button type={"button"} onClick={()=>tempPageMenuHidden.toggle()}>
<IF condition={tempPageMenuHidden}>+</IF> <IF condition={tempPageMenuHidden}>+<ELSE/>–</IF>
<IF condition={NOT(tempPageMenuHidden)}>–</IF>
</button> </button>
<div cls={D.cls({'hidden': tempPageMenuHidden})}>{ <div class={{'hidden': tempPageMenuHidden}}>{
Object.keys(Page) Object.keys(Page)
.map( name => .map( name =>
<button class="temp-button" type={'button'} onClick={() => { <button class="temp-button" type={'button'} onClick={() => {
......
src/view/cmp/cardSlider/CardSlider.jsx
...@@ -13,32 +13,17 @@ const CardSlider = (function(){ ...@@ -13,32 +13,17 @@ const CardSlider = (function(){
this.itemClick = cfg.itemClick || this.itemClick; this.itemClick = cfg.itemClick || this.itemClick;
this.hash = {}; this.hash = {};
this.items = [];
let hash = {},
items = [],
elWrap,
width,
fullCardsCount,
padding;
this.tune = this.tune.bind(this); this.tune = this.tune.bind(this);
this.tuneScrollPosition = this.tuneScrollPosition.bind(this); this.tuneScrollPosition = this.tuneScrollPosition.bind(this);
this.updateVisibleDom = this.updateVisibleDom.bind(this); this.updateVisibleDom = this.updateVisibleDom.bind(this);
let scroller;
this.leftButtonDisabled = new Store.Value.Boolean(true); this.leftButtonDisabled = new Store.Value.Boolean(true);
this.rightButtonDisabled = new Store.Value.Boolean(true); this.rightButtonDisabled = new Store.Value.Boolean(true);
this.initDom(); this.initDom();
let lastFrom, lastTo, last = false;
if(typeof cfg.items === 'function'){ if(typeof cfg.items === 'function'){
cfg.items((items)=>{ cfg.items((items)=>{
this.setItems(items); this.setItems(items);
...@@ -51,6 +36,9 @@ const CardSlider = (function(){ ...@@ -51,6 +36,9 @@ const CardSlider = (function(){
}; };
Slider.prototype = { Slider.prototype = {
lastFrom: void 0,
lastTo: void 0,
last: false,
tuning: false, tuning: false,
waitTimeout: false, waitTimeout: false,
deltaMove: 0, deltaMove: 0,
...@@ -65,7 +53,7 @@ const CardSlider = (function(){ ...@@ -65,7 +53,7 @@ const CardSlider = (function(){
cardWidth: 160, cardWidth: 160,
minPadding: 10, minPadding: 10,
mobilePadding: 10, mobilePadding: 10,
desktopPadding: 310, desktopPadding: 30,
}, },
subscribe: function() { subscribe: function() {
......
src/view/page/login/LoginCode.jsx
...@@ -14,7 +14,7 @@ const LoginCode = D.declare('view.page.LoginCode', ({loginStore}) => { ...@@ -14,7 +14,7 @@ const LoginCode = D.declare('view.page.LoginCode', ({loginStore}) => {
const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_PHONE(), { const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_PHONE(), {
phone: loginStore.get('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){ }catch(e){
loginStore.set('codeChecking', false); loginStore.set('codeChecking', false);
loginStore.set('codeError', true); loginStore.set('codeError', true);
......
src/view/page/product/InfoPage.jsx
import './infoPage.scss'; import './infoPage.scss';
import ArrActive from '/svg/arrow_active.svg'; import ArrActive from '/svg/arrow_active.svg';
import InfoCard from "../../cmp/infoCard/InfoCard.jsx"; import InfoCard from "../../cmp/infoCard/InfoCard.jsx";
import { AsyncAuthAjax } from "../../../controller/Ajax";
import { API } from "../../../dict/Consts";
const InfoPage = D.declare('view.page.InfoPage', () => { const InfoPage = D.declare('view.page.InfoPage', () => {
return <div class="info-page"> return <div class="info-page">
...@@ -9,11 +12,29 @@ const InfoPage = D.declare('view.page.InfoPage', () => { ...@@ -9,11 +12,29 @@ const InfoPage = D.declare('view.page.InfoPage', () => {
<ArrActive width="22" height="18"/> <ArrActive width="22" height="18"/>
</button> </button>
<div class="info-page__card"> <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> </div>
</div> </div>
}) });
export default InfoPage; export default InfoPage;
export {InfoPage}; export {InfoPage};
test/store.js
...@@ -176,5 +176,6 @@ assert.deepEqual(list[${n}].val, ${JSON.stringify(val)}); ...@@ -176,5 +176,6 @@ assert.deepEqual(list[${n}].val, ${JSON.stringify(val)});
console.log(JSON.stringify(s._props)) 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