Skip to content

Instantly share code, notes, and snippets.

@error404as

error404as/colors visuzl

Last active September 5, 2016 13:57
Show Gist options
  • Save error404as/91b7813788773b3fbdf6b66331f707a0 to your computer and use it in GitHub Desktop.
Save error404as/91b7813788773b3fbdf6b66331f707a0 to your computer and use it in GitHub Desktop.
Download ZIP
colors visuzl
Raw
colors visuzl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<a href='https://output.jsbin.com/dunira'>JS Bin</a>
<textarea id="src" cols="30" rows="10">.err input, .err select, input.err, select.err {border-color: rgba(#d40f0f, 0.5); color: #f0f;}
.eeeee{color:#f0f}
.dddddd{background-color:#f0f}</textarea>
<button id="colors">Parse Colors</button>
<div id="result"></div>
</body>
</html>
Raw
script.js
var btn = document.getElementById('colors');
var src = document.getElementById('src');
var result = document.getElementById('result');
btn.addEventListener('click',function(){
process(src.value)
});
result.addEventListener('click',function(e){
e.stopPropagation();
if(e.target.className === 'count'){
e.target.parentElement.className = 'opened';
} else {
e.target.parentElement.parentElement.className = '';
}
});
function process(source){
console.clear(); console.log('>> '+new Date().getTime());
var colors = {};
var lines = source.split('\n');
lines = lines.forEach(function(rule){
var selector = rule.substring( 0, rule.indexOf('{') ).split(',').map(function(itm){ return itm.trim(); });
var value = rule.substring( rule.indexOf('{')+1, rule.length-1 ).replace(/\s/g,'').toLowerCase().split(';');
value.forEach(function(prop){
if(prop){
var clr = prop.match(/#([0-9a-f]{3}){1,2}/i);
var propName = prop.substring( 0, prop.indexOf(':') )
if(clr){
clr = clr[0];
if(colors[clr]){
colors[clr].selectors = colors[clr].selectors.concat(selector);
} else {
colors[clr] = {
selectors: selector,
property: {}
};
}
if(colors[clr].property[propName]){
colors[clr].property[propName] = ++colors[clr].property[propName];
} else {
colors[clr].property[propName] = 1;
}
if(colors[clr].rules){
colors[clr].rules = ++colors[clr].rules;
} else {
colors[clr].rules = 1;
}
}
}
});
});
visualize(colors);
}
function visualize(data){
var html = '';
for(var itm in data){
html += '<section>';
html += `<div class="color"><i style="background:${itm};"></i>${itm}</div>`;
html += '<div class="rules">In rules: '+data[itm].rules+'</div>';
html += '<div class="prop">As property (times): '+JSON.stringify(data[itm].property,'',2)+'</div>';
html += '<dl><dt>In selectors:</dt><dd><div class="count">'+data[itm].selectors.length+' [...]</div><div class="list">'+data[itm].selectors.sort().map( itm => `<div>${itm}</div>`).join('')+'</div></dd></dl>';
html += '</section>';
}
// html += '\n' + JSON.stringify(data,'',2);
result.innerHTML = html
}
process(src.value);
Raw
styles.css
textarea {display: block; width: 90%; height: 150px; margin-bottom: 5px;}
#result {padding: 30px 0; display: flex; flex-wrap: wrap;}
section {
position: relative;
display: inline-block;
vertical-align: top;
width: 350px;
margin: 5px; padding:10px 10px 10px 60px;
font: 12px/1.4 Lucida Console, Courier New, monospace, serif;
border: 1px solid #888;
white-space: pre;
}
.color {padding-bottom: 5px; font: bold 17px monospace;}
.color i {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 50px;
margin-right: 6px;
box-shadow: 0 0 2px #000;
}
dl {margin: 0;}
dl .list {display: none; padding-left: 20px; color: #999;}
dl .list div:hover {color: #000;}
dl .count {padding-left: 6px; cursor: pointer;}
dl dt,dl dd {display: inline-block; margin: 0;}
dl dd {cursor: pointer;}
dl dd:hover {color: orange;}
dl dd.opened {display: block;}
dl dd.opened .count {display: none;}
dl dd.opened .list {display: block; white-space: normal;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment