-
Notifications
You must be signed in to change notification settings - Fork 2
/
scripts.js
executable file
·130 lines (110 loc) · 4.15 KB
/
scripts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
'use scrict';
(function startSorting() {
/*
* Start sorting
*
* Gets an array of hex codes to be sorted
*/
$('.btn-primary').on('click', function(e) {
e.preventDefault();
var $tilesContainer = $('.tiles'),
$toggleDetails = $('<button class="btn btn-default">Toggle details</button>'),
$lines = $('textarea').val().split(/\n/),
unsortedArrayOfColorObjects = [];
for (var i=0; i < $lines.length; i++) {
// only push this line if it contains a non whitespace character.
if (/\S/.test($lines[i])) {
unsortedArrayOfColorObjects.push({
hex: $.trim($lines[i])
});
}
}
var sortedArrayOfColorObjects = sortColors(unsortedArrayOfColorObjects);
// Empty first
$tilesContainer.empty();
$.each(sortedArrayOfColorObjects, function(index, value) {
var red = hexToRgb(value.hex).r,
green = hexToRgb(value.hex).g,
blue = hexToRgb(value.hex).b,
tile = '<li class="tile" style="background-color:' + value.hex + ';">' +
'<div class="tile-details">' +
'<p class="tile-hex">Hex: <code>' + value.hex + '</code></p>' +
'<p class="tile-rgb">RGB: <code class="red">' + red + '</code> <code class="green">' + green + '</code> <code class="blue">' + blue + '</code></p>' +
'<div>' +
'</li>';
$tilesContainer.append(tile);
// Make the tiles sortable manually
$tilesContainer.sortable();
$tilesContainer.disableSelection();
});
// Update button text
$(this).text('Update...');
if($('.btn-default').length === 0) {
$(this).after($toggleDetails);
}
$toggleDetails.on('click', function(e) {
e.preventDefault();
$tilesContainer.toggleClass('tile-details-visible');
});
});
})();
function sortColors(colors) {
/*
* Sort colors
*
* Sort array of hex colors by hue
*
* Based on http://www.runtime-era.com/2011/11/grouping-html-hex-colors-by-hue-in.html
*/
for (var c = 0; c < colors.length; c++) {
/* Get the hex value without hash symbol. */
var hex = colors[c].hex.substring(1);
/* Get the RGB values to calculate the Hue. */
var r = parseInt(hex.substring(0,2),16)/255;
var g = parseInt(hex.substring(2,4),16)/255;
var b = parseInt(hex.substring(4,6),16)/255;
/* Getting the Max and Min values for Chroma. */
var max = Math.max.apply(Math, [r,g,b]);
var min = Math.min.apply(Math, [r,g,b]);
/* Variables for HSV value of hex color. */
var chr = max-min;
var hue = 0;
var val = max;
var sat = 0;
if (val > 0) {
/* Calculate Saturation only if Value isn't 0. */
sat = chr/val;
if (sat > 0) {
if (r == max) {
hue = 60*(((g-min)-(b-min))/chr);
if (hue < 0) {hue += 360;}
} else if (g == max) {
hue = 120+60*(((b-min)-(r-min))/chr);
} else if (b == max) {
hue = 240+60*(((r-min)-(g-min))/chr);
}
}
}
/* Modifies existing objects by adding HSV values. */
colors[c].hue = hue;
colors[c].sat = sat;
colors[c].val = val;
}
/* Sort by Hue. */
return colors.sort(function(a,b){return a.hue - b.hue;});
}
function hexToRgb(hex) {
/*
* Hex to RGB
*
* Convert hex to rgb
*
* http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
*/
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}