Skip to content

Instantly share code, notes, and snippets.

@pofigizm

pofigizm/esnextbin.md

Last active October 12, 2016 13:03
Show Gist options
  • Save pofigizm/83a686975fabb4899e9f453c24180fc2 to your computer and use it in GitHub Desktop.
Save pofigizm/83a686975fabb4899e9f453c24180fc2 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
</head>
<body>
<style>
body {
width: 100%;
height: 100%;
text-align: center;
padding-top: 40px;
}
input, button {
width: 200px;
font-size: 20px;
}
textarea {
display: block;
width: 400px;
height: 200px;
margin: 20px auto;
font-size: 20px;
}
</style>
<div>
<input id='perl' value='main-4'/>
<button id='perlit'>get view</button>
</div>
<br/>
<input id='input' value='1320110010000'/>
<button id='doit'>get clases</button>
<textarea id='output'></textarea>
<textarea id='input2'>story story--size-10by10 story--title story--title-bo-xs story--text story--text-medium story--author story--author-user story--time story--extra</textarea>
<button id='getit'>get view</button>
<input id='output2' value=''/>
<textarea id='valid' style="opacity: 0.2"></textarea>
<script>
window.perlit.addEventListener('click', () => {
window.input.value = getView(window.perl.value);
})
window.doit.addEventListener('click', () => {
window.output.textContent = getClass(window.input.value);
})
window.getit.addEventListener('click', () => {
window.output2.value = getHash(window.input2.value);
window.valid.textContent = validate(window.input2.value);
})
</script>
</body>
</html>
Raw
index.js
/* eslint-disable quote-props */
first = 'story';
const mods = {
size: {
'0': '',
'1': 'size-10by10',
'2': 'size-13by10',
'3': 'size-15by10',
'4': 'size-20by10',
'5': 'size-26by10',
'6': 'size-30by10',
'7': 'size-10by04',
'8': 'size-10by05',
'9': 'size-10by07',
'a': 'size-10byinf',
'b': 'size-13by16',
'c': 'size-30by13',
'd': 'size-30by16',
'e': 'size-30byinf',
'f': 'size-40by20',
'g': 'size-20by22',
'h': 'size-09by10', // special view for black cards
'i': 'size-20by14',
},
title: {
'0': '',
'1': 'title title-m-xxs',
'2': 'title title-bo-xxs',
'3': 'title title-bo-xs',
'4': 'title title-bo-s',
'5': 'title title-bo-l',
'6': 'title title-bo-xxl',
'7': 'title title-bl-xxs',
'8': 'title title-bl-xs',
'9': 'title title-bl-s',
'a': 'title title-bl-m',
'b': 'title title-bl-l',
'c': 'title title-bl-xl',
'd': 'title title-bl-xxl',
'e': 'title title-bl-xm',
'f': 'title title-m-xs',
'g': 'title title-bl-ss',
},
text: {
'0': '',
'1': 'text text-small',
'2': 'text text-medium',
'3': 'text text-large',
'4': 'text text-xlarge',
},
pic: {
'0': '',
'1': 'pic-widesmall',
'2': 'pic-widemedium',
'3': 'pic-widelarge',
'4': 'pic-fixsmall',
'5': 'pic-fixmedium',
'6': 'pic-fixmedium pic-right',
'7': 'pic-cover100',
'8': 'pic-cover50',
'9': 'pic-cover50 pic-right',
'a': 'pic-cover70',
'b': 'pic-cover70 pic-right',
'c': 'pic-widexlarge',
'd': 'pic-main',
'e': 'pic-wideinf',
},
author: {
'0': '',
'1': 'author author-user',
'2': 'author author-users',
'3': 'author author-partner',
},
time: {
'0': '',
'1': 'time',
},
category: {
'0': '',
'1': 'category',
},
quote: {
'0': '',
'1': 'quote',
},
extra: {
'0': '',
'1': 'extra',
},
extrameta: {
'0': '',
'1': 'extrameta',
},
archive: {
'0': '',
'1': 'archive',
},
recommended: {
'0': '',
'1': 'recommended',
},
promo: {
'0': '',
'1': 'promo promo-self',
'2': 'promo promo-comm',
'3': 'promo promo-buy',
},
};
const modsKey = [
'size',
'title',
'text',
'pic',
'author',
'time',
'category',
'quote',
'extra',
'extrameta',
'archive',
'recommended',
'promo',
];
const perl = {
'main-top-1': 'ib0d110010000',
'main-top-2': '9g07110010000',
'main-top-3': '8g00110010000',
// 'main-other': '7200310000000',
'main-1': '3420110010000',
'main-1-image': '3907110010000',
// 'main-2': '6a28110010000',
// 'main-2-right': '6a29110010000',
'main-3': '4428110010000',
'main-3-right': '4429110010000',
'main-4': '1320110010000',
// 'main-4-header': '1800110010000',
'main-4-image': '1807110010000',
'main-4-image-text': 'aa32100000000',
// 'black-1': 'h120110010000',
// 'black-2': 'h107110010000',
'main-category-5': '4907110010000',
// 'main-category-4': '1320110010000', // main-4
// 'main-category-4-header': '1800110010000', // main-4-header
// 'main-category-4-image': '1807110010000', // main-4-image
'category-1': 'ge0c110010000',
// 'category-3': '4428110010000', // main-3
// 'category-4': '1320110010000', // main-4
// 'category-4-header': '1800110010000', // main-4-header
'category-4-image-header': '1301110010000',
'category-4-image-fluid': 'a40e100000000',
'footer-1': 'a202110000000',
// 'footer-2': 'a204110000000',
'footer-3': 'a200110000000',
// 'feed-big': 'fb07010010000',
'feed-middle': 'db07110010000',
'feed-image': 'e535110010000',
'feed': 'e530110010000',
'social-preview': '0107100000000',
};
const getSize = (view) => {
const m = mods.size[view[0]];
return {
width: parseInt(m.slice(5, 7), 10) || null,
height: parseInt(m.slice(9, 11), 10) || null,
};
};
const getType = code => {
const type = Object.entries(perl).find(([, v]) => v === code);
return type && type[0];
};
const getClass = (code = '', prefix = first) => {
const type = getType(code);
const start = type ? `${ prefix } ${ prefix }--type-${ type }` : prefix;
return modsKey
.reduce((res, key, ix) => {
return res + ' ' +
(mods[key][code.slice(ix, ix + 1)] || '')
.split(' ')
.map(e => e === '' ? '' : prefix + '--' + e)
.join(' ')
;
}, start)
.replace(/\s+/g, ' ')
;
};
const getHash = (code = '', prefix = first) => {
const _code = ` ${ code } `;
return modsKey
.reduce((res, key) => {
const next =
(Object.keys(mods[key])
.filter(k => k !== '0')
.map(k => ({ k, v: mods[key][k] }))
.filter(k => k.v
.split(' ')
.every(e => _code.includes(` ${ prefix }--${ e } `))
)
[0] || {}).k
;
return res + (next || 0);
}, '')
;
};
// return not matched styles
const validate = (code = '', hash = getHash(code), prefix = first) => {
return modsKey
.slice(0, hash.length)
.reduce((res, key, ix) => {
let _res = res;
mods[key][hash[ix]]
.split(' ')
.forEach(e => {
_res = _res.replace(`${ prefix }--${ e } `, '');
})
;
return _res;
}, code.replace(prefix, '') + ' ')
.replace(/\s+/g, ' ')
.replace(/^\s$/g, '')
;
};
const getShowObject = (code = '') => {
return modsKey
.reduce((res, key, ix) => {
if (['size', 'title'].includes(key)) {
return res;
}
return {
...res,
[`show_${ key }`]: Number(!(['0', '.', ''].includes(code[ix]) || !code[ix])),
};
}, {})
;
};
window.getView = p => perl[p];
window.getClass = getClass;
window.getHash = getHash;
window.validate = validate;
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"babel-runtime": "6.11.6"
}
}
Raw
transpiled.js
'use strict';
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends3 = require('babel-runtime/helpers/extends');
var _extends4 = _interopRequireDefault(_extends3);
var _keys = require('babel-runtime/core-js/object/keys');
var _keys2 = _interopRequireDefault(_keys);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _entries = require('babel-runtime/core-js/object/entries');
var _entries2 = _interopRequireDefault(_entries);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* eslint-disable quote-props */
first = 'story';
var mods = {
size: {
'0': '',
'1': 'size-10by10',
'2': 'size-13by10',
'3': 'size-15by10',
'4': 'size-20by10',
'5': 'size-26by10',
'6': 'size-30by10',
'7': 'size-10by04',
'8': 'size-10by05',
'9': 'size-10by07',
'a': 'size-10byinf',
'b': 'size-13by16',
'c': 'size-30by13',
'd': 'size-30by16',
'e': 'size-30byinf',
'f': 'size-40by20',
'g': 'size-20by22',
'h': 'size-09by10', // special view for black cards
'i': 'size-20by14'
},
title: {
'0': '',
'1': 'title title-m-xxs',
'2': 'title title-bo-xxs',
'3': 'title title-bo-xs',
'4': 'title title-bo-s',
'5': 'title title-bo-l',
'6': 'title title-bo-xxl',
'7': 'title title-bl-xxs',
'8': 'title title-bl-xs',
'9': 'title title-bl-s',
'a': 'title title-bl-m',
'b': 'title title-bl-l',
'c': 'title title-bl-xl',
'd': 'title title-bl-xxl',
'e': 'title title-bl-xm',
'f': 'title title-m-xs',
'g': 'title title-bl-ss'
},
text: {
'0': '',
'1': 'text text-small',
'2': 'text text-medium',
'3': 'text text-large',
'4': 'text text-xlarge'
},
pic: {
'0': '',
'1': 'pic-widesmall',
'2': 'pic-widemedium',
'3': 'pic-widelarge',
'4': 'pic-fixsmall',
'5': 'pic-fixmedium',
'6': 'pic-fixmedium pic-right',
'7': 'pic-cover100',
'8': 'pic-cover50',
'9': 'pic-cover50 pic-right',
'a': 'pic-cover70',
'b': 'pic-cover70 pic-right',
'c': 'pic-widexlarge',
'd': 'pic-main',
'e': 'pic-wideinf'
},
author: {
'0': '',
'1': 'author author-user',
'2': 'author author-users',
'3': 'author author-partner'
},
time: {
'0': '',
'1': 'time'
},
category: {
'0': '',
'1': 'category'
},
quote: {
'0': '',
'1': 'quote'
},
extra: {
'0': '',
'1': 'extra'
},
extrameta: {
'0': '',
'1': 'extrameta'
},
archive: {
'0': '',
'1': 'archive'
},
recommended: {
'0': '',
'1': 'recommended'
},
promo: {
'0': '',
'1': 'promo promo-self',
'2': 'promo promo-comm',
'3': 'promo promo-buy'
}
};
var modsKey = ['size', 'title', 'text', 'pic', 'author', 'time', 'category', 'quote', 'extra', 'extrameta', 'archive', 'recommended', 'promo'];
var perl = {
'main-top-1': 'ib0d110010000',
'main-top-2': '9g07110010000',
'main-top-3': '8g00110010000',
// 'main-other': '7200310000000',
'main-1': '3420110010000',
'main-1-image': '3907110010000',
// 'main-2': '6a28110010000',
// 'main-2-right': '6a29110010000',
'main-3': '4428110010000',
'main-3-right': '4429110010000',
'main-4': '1320110010000',
// 'main-4-header': '1800110010000',
'main-4-image': '1807110010000',
'main-4-image-text': 'aa32100000000',
// 'black-1': 'h120110010000',
// 'black-2': 'h107110010000',
'main-category-5': '4907110010000',
// 'main-category-4': '1320110010000', // main-4
// 'main-category-4-header': '1800110010000', // main-4-header
// 'main-category-4-image': '1807110010000', // main-4-image
'category-1': 'ge0c110010000',
// 'category-3': '4428110010000', // main-3
// 'category-4': '1320110010000', // main-4
// 'category-4-header': '1800110010000', // main-4-header
'category-4-image-header': '1301110010000',
'category-4-image-fluid': 'a40e100000000',
'footer-1': 'a202110000000',
// 'footer-2': 'a204110000000',
'footer-3': 'a200110000000',
// 'feed-big': 'fb07010010000',
'feed-middle': 'db07110010000',
'feed-image': 'e535110010000',
'feed': 'e530110010000',
'social-preview': '0107100000000'
};
var getSize = function getSize(view) {
var m = mods.size[view[0]];
return {
width: parseInt(m.slice(5, 7), 10) || null,
height: parseInt(m.slice(9, 11), 10) || null
};
};
var getType = function getType(code) {
var type = (0, _entries2.default)(perl).find(function (_ref) {
var _ref2 = (0, _slicedToArray3.default)(_ref, 2);
var v = _ref2[1];
return v === code;
});
return type && type[0];
};
var getClass = function getClass() {
var code = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
var prefix = arguments.length <= 1 || arguments[1] === undefined ? first : arguments[1];
var type = getType(code);
var start = type ? prefix + ' ' + prefix + '--type-' + type : prefix;
return modsKey.reduce(function (res, key, ix) {
return res + ' ' + (mods[key][code.slice(ix, ix + 1)] || '').split(' ').map(function (e) {
return e === '' ? '' : prefix + '--' + e;
}).join(' ');
}, start).replace(/\s+/g, ' ');
};
var getHash = function getHash() {
var code = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
var prefix = arguments.length <= 1 || arguments[1] === undefined ? first : arguments[1];
var _code = ' ' + code + ' ';
return modsKey.reduce(function (res, key) {
var next = ((0, _keys2.default)(mods[key]).filter(function (k) {
return k !== '0';
}).map(function (k) {
return { k: k, v: mods[key][k] };
}).filter(function (k) {
return k.v.split(' ').every(function (e) {
return _code.includes(' ' + prefix + '--' + e + ' ');
});
})[0] || {}).k;
return res + (next || 0);
}, '');
};
// return not matched styles
var validate = function validate() {
var code = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
var hash = arguments.length <= 1 || arguments[1] === undefined ? getHash(code) : arguments[1];
var prefix = arguments.length <= 2 || arguments[2] === undefined ? first : arguments[2];
return modsKey.slice(0, hash.length).reduce(function (res, key, ix) {
var _res = res;
mods[key][hash[ix]].split(' ').forEach(function (e) {
_res = _res.replace(prefix + '--' + e + ' ', '');
});
return _res;
}, code.replace(prefix, '') + ' ').replace(/\s+/g, ' ').replace(/^\s$/g, '');
};
var getShowObject = function getShowObject() {
var code = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
return modsKey.reduce(function (res, key, ix) {
if (['size', 'title'].includes(key)) {
return res;
}
return (0, _extends4.default)({}, res, (0, _defineProperty3.default)({}, 'show_' + key, Number(!(['0', '.', ''].includes(code[ix]) || !code[ix]))));
}, {});
};
window.getView = function (p) {
return perl[p];
};
window.getClass = getClass;
window.getHash = getHash;
window.validate = validate;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment