Skip to content

K
kus-admin
Commit 3d166b91 by talequale
Options

card

parents 81c30218 6d8f8a73
Showing with 375 additions and 36 deletions
src/core/DOM.js
......@@ -44,7 +44,7 @@ NS.apply = function(a,b) {
cls: true, className: true, 'class': true,
attr: true, style: true, renderTo: true,
prop: true, bind: true,
on: true
on: true, renderto: true
};
var fastDomEl = function(type, cfg) {
cfg = cfg || {};
......@@ -248,8 +248,8 @@ NS.apply = function(a,b) {
if( type !== 'object' ){
// TODO : add hook
if( type === 'function' ){
//var tmp = D.Text();//( {cls: 'zero-wrapper'} );
//el.appendChild( tmp );
var tmp = D.Text('');//( {cls: 'zero-wrapper'} );
el.appendChild( tmp );
var list = [];
subEl( function(){
......@@ -259,7 +259,7 @@ NS.apply = function(a,b) {
var fragment = document.createDocumentFragment();
D.appendChild( fragment, [].slice.call( arguments ) );
list = [].slice.call(fragment.childNodes);
el.appendChild(fragment);
el.insertBefore(fragment, tmp);
} )
}else if( subEl !== void 0 && subEl !== false && subEl !== null ){
el.appendChild( D.Text( subEl ) );
......@@ -384,7 +384,8 @@ NS.apply = function(a,b) {
D.declare = function(name, ctor) {
var uses;
if(name in usage){
console.log(`${name} declaration updated. Usage count: ${usage[name].instances.length}`)
log('updated', `${name} (${usage[name].instances.length})`)
usage[ name ].ctor = ctor;
uses = usage[ name ].instances;
for( var i = 0, _i = uses.length; i < _i; i++ ){
......@@ -395,7 +396,8 @@ NS.apply = function(a,b) {
}
}
}else{
console.log(`${name} declared`)
log('declared', `${name}`);
uses = (usage[ name ] = {ctor: ctor, instances: []}).instances;
}
return populate(name, function construct (cfg, p) {
......@@ -403,7 +405,29 @@ NS.apply = function(a,b) {
uses.push({dom: dom, cfg: cfg, p: p});
return dom;
});
}
};
var _log = [], later = false,
realLog = function() {
later = false;
var aggregated = _log.reduce(function(s, item) {
(s[item.evt] || (s[item.evt] = [])).push(item);
return s;
}, {});
_log.length = 0;
for(var evt in aggregated){
console.log('DOM:'+evt+' → '+aggregated[evt].map(function(item) {
return item.args.join(' ');
}).join(', '));
}
};
var log = function(evt) {
_log.push({type: 'log', evt: evt, args: [].slice.call(arguments, 1)});
if(!later)
later = setTimeout(realLog, 1000);
};
})(window['NS'], typeof window !== "undefined" ? window :
typeof WorkerGlobalScope !== "undefined" ? self :
typeof global !== "undefined" ? global :
......
src/core/Require.js
......@@ -74,10 +74,10 @@ ansispan.foregroundColors = {
var script = document.createElement( 'script' );
script.setAttribute( 'type', script.type = 'text/javascript' );
script.onload = function(a,b,c){
if(fileName.indexOf('Fields')>-1){
/*if(fileName.indexOf('Fields')>-1){
//debugger
console.log('akkk',a,b,c)
}
}*/
};
script.onerror = function(a,b,c){
......@@ -107,7 +107,6 @@ ansispan.foregroundColors = {
var _define = function(name) {
var definition = definitions[name];
if(definition.notResolved === 0){
console.log(name,'execute')
definition.fn.apply(null, definition.deps.map(function(dep) {
return dep === 'exports' ? definition.exports : definitions[dep].exports
}));
......@@ -133,7 +132,6 @@ ansispan.foregroundColors = {
if( dep === 'exports' )
continue;
var skip = false;
console.log(dep)
if( !( dep in definitions ) ){
var matched = false;
for( var j = 0, _j = InstantLoaders.length; j < _j; j++ ){
......
src/core/data/store/Store.js
......@@ -82,7 +82,18 @@ Store.prototype = {
recursiveSet(keys.slice(0, keys.length - 1), pointer, key, val, changeList);
},
/*
key: String, val: any
key: {k: v, ...}
*/
set: function(key, val) {
if(typeof key === 'object'){
for(let k in key){
this.set(k, key[k]);
}
return this;
}
let changeList = [];
this._set(
typeof key === 'string' ? key.split('.') : key,
......@@ -95,7 +106,7 @@ Store.prototype = {
this.fire('change', changeListElement[0], changeListElement[1]);
this.fire(changeListElement[0], changeListElement[1]);
}
return;
return this;
},
get: function(key, returnLastStore) {
key = typeof key === 'string' ? key.split('.') : key;
......
src/model/Store.js
......@@ -8,7 +8,6 @@ const store = new Store(latest = {
userID: 5,
name: 'Диогроген Курославович',
phone: '79999877414',
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1ODAzMDg0NTcsImV4cCI6MTU4MDM5NDg1Nywicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfRU1QTE9ZRUUiXSwicGhvbmUiOiI3OTk5OTg3NzQxNCIsImlkIjo1fQ.yt7LqaBkHZ_YFXg4WV8LRrm6eW9RdBjFbWNlLBYJXDyFPKjeVuR9PTGwnZdztqRxnGEKc60FnZfqpf52rfTdgkZWuuy_jXQbxfUzRvuD2GHPd4Ds12ucQnbij71-Rv0d8mA4L3EzbEQzMfSwoQsjhY6PXmhHRft4mSuXm0Cx4cn7ms92gTBFGbSWA-Ru395jTcaTpWdpAyIQFCMwAyQ1zQDRwsYc4RPPVKTH2BhkGVLVWlMDh_D22kduV-zcEzxEAFvOf6HhctsYBaasByhXIHVKQUcSKjA5bz_eftW7XQWeer0gQNR3OLRP9Qo7INL8GnhVhGEuu5UL6x0JJ9FeutOhZ4xa0jOqwzmYRcTMP63LbWNoSGHgn-UY14yG_O31Ij0wDNS-VqhCoVB1IdGawWX_p3eKLuUvCX38ZLs3cAIU1vmHlF--0KNSwo3OeYj-U9R8tWPi-zkUDw29ZAM1wu38uXI4_bw_UG2g53cSdjxuIQw8sLmAp7EF-6R1q28YQecqVKm-d8VgVeVAh8ueicFeejSzgax-3GRjHR9Kudqgxescas6rm6g5iV_-73VUXrn-8rvg2vXuB3nF-7X-SWV2gKFBP9u0hTGMBeseODyjohN3bWjnfPWU0rWhwNUsPIJabzg0iICv4a5li507TCaHg025HEa2V2mayj0wkk8'
}
});
......@@ -16,13 +15,12 @@ const store = new Store(latest = {
try{
var data = JSON.parse( localStorage.getItem( 'store' ) );
window.addEventListener && console.log(data)
if(data.commit !== store.get('commit')){
console.warn('STORE: warn outdated:');
console.warn('\t\tCurrent data: '+ store.get('commit'), store._props);
console.warn('\t\tSaved data: '+ window.CommitID, data);
console.warn('\tRun Store.restore() for restore saved state');
console.warn('\tRun Store.update() for load latest default state');
console.warn('STORE:outdated, new state → localStorage');
console.warn('\tSTORE:currentData #'+ store.get('commit'), store._props);
console.warn('\tSTORE:savedData # '+ window.CommitID, data);
console.warn('\tSTORE:hint → Run Store.restore() for restore saved state');
console.warn('\tStore:hint → Run Store.update() for load latest default state');
Store.restore = function() {
for( var k in data ){
......@@ -42,7 +40,7 @@ try{
for( var k in data ){
store.set( k, data[ k ] );
}
console.log('STORE: loaded from localStorage');
console.log('STORE:loaded ← localStorage', data);
}
}catch( e ){}
......
src/svg/eye.svg 0 → 100644
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 13.5234C15.5228 13.5234 20 7.02344 20 7.02344C20 7.02344 15.5228 0.523438 10 0.523438C4.47715 0.523438 0 7.02344 0 7.02344C0 7.02344 4.47715 13.5234 10 13.5234ZM9.99984 10.5248C11.8408 10.5248 13.3332 8.95782 13.3332 7.02482C13.3332 5.09182 11.8408 3.52482 9.99984 3.52482C8.15889 3.52482 6.6665 5.09182 6.6665 7.02482C6.6665 8.95782 8.15889 10.5248 9.99984 10.5248Z" fill="#34BE5B"/>
<ellipse cx="10" cy="6.82363" rx="2" ry="2.1" fill="#34BE5B"/>
</svg>
src/text/String.Typography.js → src/text/String.Typography.jsx
var textCache = {};
String.Typography = function(text, cfg) {
const {html} = cfg;
const {html} = cfg || {};
if(typeof text !== 'string')
return text;
......@@ -168,4 +168,5 @@ String.Search = function(string, search) {
}
return yep;
};
\ No newline at end of file
};
export const Typography = String.Typography;
\ No newline at end of file
src/view/block/card/card.scss 0 → 100644
$cardTypes: (
product: (
base: #FEE5C8,
text: #C94C0A,
button : #EC7B3F,
shadow: #F6D0AD,
border: #EC7B3F
),
info: (
base: #BDD6DE,
text: #3B6977,
button : #4591A9,
shadow: #B9D3CF,
border: #4591A9
),
other: (
base: #DBE2AE,
text: #A0B809,
button : #A0B809,
shadow: #DBE2AD,
border: #A0B809
),
seen: (
base: #fff,
text: #605D5D,
button: #605D5D,
shadow: rgba(#fff, 0),
border: #8a8a8a
),
disabled: (
base: #F0F0F0,
text: #CDCCCC,
button: rgba(#fff, 0),
shadow: rgba(#fff, 0),
border: #F0F0F0
)
);
@mixin colorCards($prefix: '--') {
@each $name, $theme in $cardTypes {
&#{$prefix}#{$name} {
color: map_get($theme, text);
background-color: map_get($theme, base);
border-color: map_get($theme, base);
box-shadow: 0 30px 30px -10px desaturate(rgba(map_get($theme, shadow), 0.5), 15%);
&:hover {
border-color: map_get($theme, border);
box-shadow: 0 35px 40px -20px desaturate(rgba(map_get($theme, shadow), 0.5), 15%);
}
&:active,
&:focus {
box-shadow: none;
outline: none;
}
.card__button {
background-color: map_get($theme, button);
}
}
}
}
.cards-list {
display: flex;
flex-wrap: wrap;
}
.cards-list__item {
display: flex;
flex-direction: column;
margin-right: 30px;
margin-bottom: 30px;
}
.card {
@include colorCards;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
padding: 10px;
width: 160px;
min-height: 210px;
color: #605D5D;
background-color: $bg-main;
border: 1px solid $bg-main;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
.card__image {
width: 140px;
height: 90px;
border-radius: 6px;
overflow: hidden;
}
.card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.card__title {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin: 10px 0;
font-weight: 500;
font-size: 15px;
line-height: 20px;
}
button.card__button {
@include hover;
color: $bg-main;
font-weight: 400;
padding: 5px 10px;
min-width: 120px;
font-size: 12px;
line-height: 16px;
border-radius: 8px;
&:hover,
&:active,
&:focus {
color: $bg-main;
}
}
.card__note {
display: flex;
align-items: center;
font-weight: 400;
font-size: 12px;
line-height: 30px;
color: #B2C5B7;
}
.card__note svg {
display: block;
margin-left: 9px;
}
.card--disabled {
cursor: default;
}
.card--disabled .card__title {
font-size: 13px;
line-height: 17px;
}
src/view/block/header/Header.jsx
......@@ -6,7 +6,7 @@ import Logout from "/svg/logout.svg";
import { Page } from "../../page/Page";
const {IF, NOT} = Store;
export default D.declare('view.block.Header', () => {
const Header = D.declare('view.block.Header', () => {
const tempPageMenuHidden = new Store.Value.Boolean(true);
return <header class={D.cls(
"page-header", {
......@@ -19,9 +19,15 @@ export default D.declare('view.block.Header', () => {
</button>
<div cls={D.cls({'hidden': tempPageMenuHidden})}>{
Object.keys(Page).map(name=>
<button class="temp-button" type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
)
Object.keys(Page)
.map( name =>
<button class="temp-button" type={'button'} onClick={() => {
store.set('navigation.current', name);
tempPageMenuHidden.toggle();
}}>
{name}
</button>
)
}</div>
</div>
<IF condition={NOT(store.valEqual( 'navigation.current', 'Login'))}>
......@@ -48,3 +54,6 @@ export default D.declare('view.block.Header', () => {
</header>
});
export default Header;
export {Header};
\ No newline at end of file
src/view/cmp/card/Card.jsx 0 → 100644
import Button from "../../page/account/Account";
import Eye from '/svg/eye.svg';
const Card = D.declare('view.cmp.Card', (cfg) => {
return <div className={D.cls('card card--'+(cfg.disabled?'disabled':cfg.type))}>
<div className="card__image">
<img src="/uploads/images/card_product3.jpg" alt=""/>
</div>
<h3 className="card__title">{cfg.title}</h3>
<div className="card__footer">
{cfg.disabled ? null:
cfg.seen ?
<div className="card__note">
<span>Просмотрена</span>
<Eye width="20" height="13"/>
</div>
:
<Button class={"button card__button"} onclick={cfg.onclick}>
<span>Изучить</span>
</Button>
}
</div>
</div>
})
export default Card;
export {Card};
src/view/cmp/format/Format.jsx 0 → 100644
import { Typography } from "../../../text/String.Typography";
const Format = D.declare( 'view.cmp.Format', (cfg, children) => {
const html = Typography(children.join(' '), {html: cfg.html});
const div = <div/>
div.innerHTML = html;
return <>
{[...div.childNodes]}
</>
} );
export default Format;
export { Format };
\ No newline at end of file
src/view/page/account/Account.jsx
import './accountPage.scss';
import AccountBlock from '../../block/account/Account.jsx';
import Button from "/view/cmp/button/Button.jsx";
import Eye from '/svg/eye.svg';
import '../../block/card/card.scss';
const Account = D.declare('view.page.Account', () => {
return <div class="account-page">
......@@ -12,7 +15,72 @@ const Account = D.declare('view.page.Account', () => {
</div>
<div class="account-page__content">
<div class="account-page__content-inner">
<div class="cards-list">
<h2 class="readers-only">Список непросмотренных карточек</h2>
<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>
......
src/view/page/login/Login.jsx
......@@ -7,10 +7,12 @@ import Arr from '../../../svg/arr.svg';
import LoginHelp from './LoginHelp.jsx';
import LoginPhone from './LoginPhone.jsx';
import LoginCode from './LoginCode.jsx';
import { AsyncAuthAjax } from "../../../controller/Ajax";
import { API } from "../../../dict/Consts";
const {AND, OR, IF} = Store;
const Login = D.declare('view.page.Login', () => {
const loginStore = new Store({
const initialState = {
phone: '79999877415',
code: '',
codeValid: false,
......@@ -22,9 +24,29 @@ const Login = D.declare('view.page.Login', () => {
incorrectPhone: false,
displayHelpPage: false,
codeError: false
});
};
const loginStore = new Store(
Object.assign({}, initialState)
);
store.sub('account.token', async function(data){
if(!data){
let phone = store.get('account.phone') || loginStore.get('phone') || initialState.phone;
store.set( 'navigation.current', 'Login' );
loginStore.set(initialState);
loginStore.set({phone})
}else{
const result = await AsyncAuthAjax.get( API.ENDPOINTS.GET_USER( store.get( 'account.userID' ) ) );
store.set( 'account.data', result );
if( result.lastLoginAt ){
store.set( 'navigation.current', 'Account' );
}else{
store.set( 'navigation.current', 'Welcome' );
}
}
});
return <div className={"login-page"}>
<div class="login-page__big-logo">
......
src/view/page/login/LoginCode.jsx
......@@ -2,21 +2,23 @@ import Button from "/view/cmp/button/Button.jsx";
import { AsyncAjax } from "/core/Ajax.jsx";
import { API } from "/dict/Consts.jsx";
import Arr from '/svg/arr.svg';
import { AsyncAuthAjax } from "../../../controller/Ajax";
const {AND, OR, IF} = Store;
const LoginCode = D.declare('view.page.LoginCode', ({loginStore}) => {
const checkCode = function () {
const checkCode = async function () {
loginStore.set('codeChecking', true);
loginStore.set('codeError', false);
try{
// TODO: GET AUTH TOKEN. SOMEHOW
const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_PHONE(), {
phone: loginStore.get('phone')
} );
store.set('account.token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1ODAzMDg0NTcsImV4cCI6MTU4MDM5NDg1Nywicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfRU1QTE9ZRUUiXSwicGhvbmUiOiI3OTk5OTg3NzQxNCIsImlkIjo1fQ.yt7LqaBkHZ_YFXg4WV8LRrm6eW9RdBjFbWNlLBYJXDyFPKjeVuR9PTGwnZdztqRxnGEKc60FnZfqpf52rfTdgkZWuuy_jXQbxfUzRvuD2GHPd4Ds12ucQnbij71-Rv0d8mA4L3EzbEQzMfSwoQsjhY6PXmhHRft4mSuXm0Cx4cn7ms92gTBFGbSWA-Ru395jTcaTpWdpAyIQFCMwAyQ1zQDRwsYc4RPPVKTH2BhkGVLVWlMDh_D22kduV-zcEzxEAFvOf6HhctsYBaasByhXIHVKQUcSKjA5bz_eftW7XQWeer0gQNR3OLRP9Qo7INL8GnhVhGEuu5UL6x0JJ9FeutOhZ4xa0jOqwzmYRcTMP63LbWNoSGHgn-UY14yG_O31Ij0wDNS-VqhCoVB1IdGawWX_p3eKLuUvCX38ZLs3cAIU1vmHlF--0KNSwo3OeYj-U9R8tWPi-zkUDw29ZAM1wu38uXI4_bw_UG2g53cSdjxuIQw8sLmAp7EF-6R1q28YQecqVKm-d8VgVeVAh8ueicFeejSzgax-3GRjHR9Kudqgxescas6rm6g5iV_-73VUXrn-8rvg2vXuB3nF-7X-SWV2gKFBP9u0hTGMBeseODyjohN3bWjnfPWU0rWhwNUsPIJabzg0iICv4a5li507TCaHg025HEa2V2mayj0wkk8')
}catch(e){
}
setTimeout(function() {
loginStore.set('codeChecking', false);
loginStore.set('codeError', true);
}, 2000)
}
};
loginStore.sub('code', function (code) {
loginStore.set('codeValid', (code+'').length === 6);
......
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