Skip to content

F
face
Commit 6ac370f0 by Иван Кубота
Options

add color sort props in all page

parent 29bb3e9a
Showing with 137 additions and 20 deletions
.idea/webResources.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="WebResourcesPaths">
<contentEntries>
<entry url="file://$PROJECT_DIR$">
<entryData>
<resourceRoots>
<path value="file://$PROJECT_DIR$/examples/examples-browser/public" />
</resourceRoots>
</entryData>
</entry>
</contentEntries>
</component>
</project>
\ No newline at end of file
examples/examples-browser/public/js/Observer.js 0 → 100644
var Observable = function() {
this._clearListeners();
};
Observable.prototype = {
on: function(k, v) {
(this._listeners[k] || (this._listeners[k] = [])).push(v);
var _self = this;
return function ReleaseObservable() {
_self.un(k, v);
};
},
un: function(k, v) {
var list = this._listeners[k];
if(list){
var id = list.indexOf(v);
if(id > -1){
list.splice(id, 1);
}
}
},
fire: function(k) {
var listeners = this._listeners[k],
listener;
if(listeners === void 0)
return;
for( var i = 0, _i = listeners.length; i < _i; i++ ){
listener = listeners[ i ];
if(listener) {
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);
},
_clearListeners: function() {
this._listeners = {};
}
};
typeof module === 'object' && (module.exports = Observable);
\ No newline at end of file
examples/examples-browser/views/all.html
...@@ -7,7 +7,20 @@ ...@@ -7,7 +7,20 @@
<script src="js/extract-colors.js"></script> <script src="js/extract-colors.js"></script>
<script src="js/data.js"></script> <script src="js/data.js"></script>
<script src="js/DOM.js"></script> <script src="js/DOM.js"></script>
<script src="js/Observer.js"></script>
<script src="js/Store.js"></script>
<style> <style>
label {
display: block;
}
input.field__input {
position: absolute;
left: 128px;
width: 4em;
border: 0;
border-bottom: 1px solid #999;
text-align: center;
}
body { body {
margin: 16px; margin: 16px;
padding: 0; padding: 0;
...@@ -78,8 +91,28 @@ ...@@ -78,8 +91,28 @@
</head> </head>
<body> <body>
<script> <script>
var store = window.store = new Store({
h: 50,
s: 35,
v: 0
});
var list = ['brows','lips','blush','eyes']; var list = ['brows','lips','blush','eyes'];
var lastEl; var lastEl;
var Input = function(cfg){
var dom = D.h('input', {cls:"field__input", attr: {type: 'number'}});
if(cfg.bind){
cfg.bind.sub(function (val) {
dom.value = val;
});
dom.addEventListener('input', function () {
cfg.bind.set(dom.value);
})
}
return dom;
};
var preview = function(item, el) { var preview = function(item, el) {
lastEl && lastEl.classList.remove('active'); lastEl && lastEl.classList.remove('active');
lastEl && (lastEl.childNodes[0].style.borderColor = '#fff'); lastEl && (lastEl.childNodes[0].style.borderColor = '#fff');
...@@ -111,41 +144,63 @@ ...@@ -111,41 +144,63 @@
}, updateRight; }, updateRight;
D.div({cls: 'viewport', renderTo: document.body}, D.div({cls: 'viewport', renderTo: document.body},
D.div({cls: 'left'}, D.div({cls: 'left'},
D.div({cls: 'block'},
D.div({cls: 'title'},'Color sort:'),
D.h('label', {},
'Hue: ', D.h(Input, {bind: store.bind('h')})
),
D.h('label', {},
'Saturation: ', D.h(Input, {bind: store.bind('s')})
),
D.h('label', {},
'Value: ', D.h(Input, {bind: store.bind('v')})
)
),
list.map(function(name) { list.map(function(name) {
return D.div({cls: 'block'}, return D.div({cls: 'block'},
D.div({cls: 'title'}, name[0].toUpperCase()+name.substr(1)), D.div({cls: 'title'}, name[0].toUpperCase()+name.substr(1)),
(draw)=>{ (draw)=>{
getData(name, function(res) { getData(name, function(res) {
store.sub(['h','s','v'], function(h,s,v){
var list = []; var list = [];
res.products.forEach(function(product) { res.products.forEach( function( product ){
product.variants.forEach(function(variant) { product.variants.forEach( function( variant ){
var color = variant.option2.substr(1), var color = variant.option2.substr( 1 ),
r = parseInt(color[0]+color[1], 16), r = parseInt( color[ 0 ] + color[ 1 ], 16 ),
g = parseInt(color[2]+color[3], 16), g = parseInt( color[ 2 ] + color[ 3 ], 16 ),
b = parseInt(color[4]+color[4], 16); b = parseInt( color[ 4 ] + color[ 4 ], 16 );
list.push({ list.push( {
pid: product.id, pid: product.id,
vid: variant.id, vid: variant.id,
description: product.body_html, description: product.body_html,
title: product.title, title: product.title,
color: variant.option2, color: variant.option2,
colorName: variant.option1, colorName: variant.option1,
img: variant.featured_image && variant.featured_image.src || (product.images[0] || {}).src, img: variant.featured_image && variant.featured_image.src || ( product.images[ 0 ] || {} ).src,
sku: variant.option3, sku: variant.option3,
hsv: rgbToHsv(r,g,b) hsv: rgbToHsv( r, g, b )
}); } );
}); } );
}); } );
list.sort(function(a,b) { list.sort( function( a, b ){
return (a.hsv[0]-b.hsv[0])*10+(b.hsv[2]-a.hsv[2])/2+(a.hsv[1]-b.hsv[1])/2; return ( a.hsv[ 0 ] - b.hsv[ 0 ] ) * h + ( b.hsv[ 2 ] - a.hsv[ 2 ] ) * s + ( a.hsv[ 1 ] - b.hsv[ 1 ] ) * v;
}); } );
draw(list.map(function(item) { draw( list.map( function( item ){
return D.div({attr: {'data-id': item.pid}, cls: 'row', onClick: function(){preview(item, this)}}, return D.div( {
D.div({cls: 'cp', style: {background: item.color}}) attr: { 'data-id': item.pid }, cls: 'row', onClick: function(){
preview( item, this )
}
},
D.div( { cls: 'cp', style: { background: item.color } } )
) )
})) } ) )
});
}); });
} }
) )
......
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