1.
2.
function updateBorders(color) {
3.
var hexColor = "transparent";
4.
if(color) {
5.
hexColor = color.toHexString();
6.
}
7.
$("#docs-content").css("border-color", hexColor);
8.
}
9.
10.
$(function() {
11.
12.
$("#full").spectrum({
13.
allowEmpty:true,
14.
color: "#ECC",
15.
showInput: true,
16.
containerClassName: "full-spectrum",
17.
showInitial: true,
18.
showPalette: true,
19.
showSelectionPalette: true,
20.
showAlpha: true,
21.
maxPaletteSize: 10,
22.
preferredFormat: "hex",
23.
localStorageKey: "spectrum.demo",
24.
move: function (color) {
25.
updateBorders(color);
26.
},
27.
show: function () {
28.
29.
},
30.
beforeShow: function () {
31.
32.
},
33.
hide: function (color) {
34.
updateBorders(color);
35.
},
36.
37.
palette: [
38.
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
39.
"rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
40.
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
41.
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
42.
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
43.
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
44.
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
45.
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
46.
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
47.
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
48.
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
49.
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
50.
/*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
51.
"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
52.
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
53.
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
54.
]
55.
});
56.
57.
$("#hideButtons").spectrum({
58.
showButtons: false,
59.
change: updateBorders
60.
});
61.
62.
63.
var isDisabled = true;
64.
$("#toggle-disabled").click(function() {
65.
if (isDisabled) {
66.
$("#disabled").spectrum("enable");
67.
}
68.
else {
69.
$("#disabled").spectrum("disable");
70.
}
71.
isDisabled = !isDisabled;
72.
return false;
73.
});
74.
75.
$("input:disabled").spectrum({
76.
77.
});
78.
$("#disabled").spectrum({
79.
disabled: true
80.
});
81.
82.
$("#pick1").spectrum({
83.
flat: true,
84.
change: function(color) {
85.
var hsv = color.toHsv();
86.
var rgb = color.toRgbString();
87.
var hex = color.toHexString();
88.
//console.log("callback",color.toHslString(), color.toHsl().h, color.toHsl().s, color.toHsl().l)
89.
$("#docs-content").css({
90.
'background-color': color.toRgbString()
91.
}).toggleClass("dark", hsv.v < .5);
92.
$("#switch-current-rgb").text(rgb);
93.
$("#switch-current-hex").text(hex);
94.
},
95.
show: function() {
96.
97.
},
98.
hide: function() {
99.
100.
},
101.
showInput: true,
102.
showPalette: true,
103.
palette: ['white', '#306', '#c5c88d', '#ac5c5c', '#344660']
104.
});
105.
106.
$("#collapsed").spectrum({
107.
color: "#dd3333",
108.
change: updateBorders,
109.
show: function() {
110.
111.
},
112.
hide: function() {
113.
114.
}
115.
});
116.
117.
$("#flat").spectrum({
118.
flat: true,
119.
showInput: true,
120.
move: updateBorders
121.
});
122.
123.
$("#flatClearable").spectrum({
124.
flat: true,
125.
move: updateBorders,
126.
change: updateBorders,
127.
allowEmpty:true,
128.
showInput: true
129.
});
130.
131.
$("#showInput").spectrum({
132.
color: "#dd33dd",
133.
showInput: true,
134.
change: updateBorders,
135.
show: function() {
136.
137.
},
138.
hide: function() {
139.
140.
}
141.
});
142.
143.
$("#showAlpha").spectrum({
144.
color: "rgba(255, 128, 0, .5)",
145.
showAlpha: true,
146.
change: updateBorders
147.
});
148.
149.
$("#showAlphaWithInput").spectrum({
150.
color: "rgba(255, 128, 0, .5)",
151.
showAlpha: true,
152.
showInput: true,
153.
showPalette: true,
154.
palette: [
155.
["rgba(255, 128, 0, .9)", "rgba(255, 128, 0, .5)"],
156.
["red", "green", "blue"],
157.
["hsla(25, 50, 75, .5)", "rgba(100, .5, .5, .8)"]
158.
],
159.
change: updateBorders
160.
});
161.
162.
$("#showAlphaWithInputAndEmpty").spectrum({
163.
color: "rgba(255, 128, 0, .5)",
164.
allowEmpty:true,
165.
showAlpha: true,
166.
showInput: true,
167.
showPalette: true,
168.
palette: [
169.
["rgba(255, 128, 0, .9)", "rgba(255, 128, 0, .5)"],
170.
["red", "green", "blue"],
171.
["hsla(25, 50, 75, .5)", "rgba(100, .5, .5, .8)"]
172.
],
173.
change: updateBorders
174.
});
175.
176.
$("#showInputWithClear").spectrum({
177.
allowEmpty:true,
178.
color: "",
179.
showInput: true,
180.
change: updateBorders,
181.
show: function() {
182.
183.
},
184.
hide: function() {
185.
186.
}
187.
});
188.
189.
$("#openWithLink").spectrum({
190.
color: "#dd3333",
191.
change: updateBorders,
192.
show: function() {
193.
194.
},
195.
hide: function() {
196.
197.
}
198.
});
199.
200.
$("#className").spectrum({
201.
className: 'awesome'
202.
});
203.
204.
$("#replacerClassName").spectrum({
205.
replacerClassName: 'awesome'
206.
});
207.
208.
$("#containerClassName").spectrum({
209.
containerClassName: 'awesome'
210.
});
211.
212.
$("#showPalette").spectrum({
213.
showPalette: true,
214.
palette: [
215.
['black', 'white', 'blanchedalmond'],
216.
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
217.
],
218.
hide: function(c) {
219.
var label = $("[data-label-for=" + this.id + "]");
220.
label.text("Hidden: " + c.toHexString());
221.
},
222.
change: function(c) {
223.
var label = $("[data-label-for=" + this.id + "]");
224.
label.text("Change called: " + c.toHexString());
225.
},
226.
move: function(c) {
227.
var label = $("[data-label-for=" + this.id + "]");
228.
label.text("Move called: " + c.toHexString());
229.
}
230.
});
231.
232.
var textPalette = ["rgb(255, 255, 255)", "rgb(204, 204, 204)", "rgb(192, 192, 192)", "rgb(153, 153, 153)", "rgb(102, 102, 102)", "rgb(51, 51, 51)", "rgb(0, 0, 0)", "rgb(255, 204, 204)", "rgb(255, 102, 102)", "rgb(255, 0, 0)", "rgb(204, 0, 0)", "rgb(153, 0, 0)", "rgb(102, 0, 0)", "rgb(51, 0, 0)", "rgb(255, 204, 153)", "rgb(255, 153, 102)", "rgb(255, 153, 0)", "rgb(255, 102, 0)", "rgb(204, 102, 0)", "rgb(153, 51, 0)", "rgb(102, 51, 0)", "rgb(255, 255, 153)", "rgb(255, 255, 102)", "rgb(255, 204, 102)", "rgb(255, 204, 51)", "rgb(204, 153, 51)", "rgb(153, 102, 51)", "rgb(102, 51, 51)", "rgb(255, 255, 204)", "rgb(255, 255, 51)", "rgb(255, 255, 0)", "rgb(255, 204, 0)", "rgb(153, 153, 0)", "rgb(102, 102, 0)", "rgb(51, 51, 0)", "rgb(153, 255, 153)", "rgb(102, 255, 153)", "rgb(51, 255, 51)", "rgb(51, 204, 0)", "rgb(0, 153, 0)", "rgb(0, 102, 0)", "rgb(0, 51, 0)", "rgb(153, 255, 255)", "rgb(51, 255, 255)", "rgb(102, 204, 204)", "rgb(0, 204, 204)", "rgb(51, 153, 153)", "rgb(51, 102, 102)", "rgb(0, 51, 51)", "rgb(204, 255, 255)", "rgb(102, 255, 255)", "rgb(51, 204, 255)", "rgb(51, 102, 255)", "rgb(51, 51, 255)", "rgb(0, 0, 153)", "rgb(0, 0, 102)", "rgb(204, 204, 255)", "rgb(153, 153, 255)", "rgb(102, 102, 204)", "rgb(102, 51, 255)", "rgb(102, 0, 204)", "rgb(51, 51, 153)", "rgb(51, 0, 153)", "rgb(255, 204, 255)", "rgb(255, 153, 255)", "rgb(204, 102, 204)", "rgb(204, 51, 204)", "rgb(153, 51, 153)", "rgb(102, 51, 102)", "rgb(51, 0, 51)"];
233.
234.
$("#showPaletteOnly").spectrum({
235.
color: 'blanchedalmond',
236.
showPaletteOnly: true,
237.
showPalette:true,
238.
palette: [
239.
['black', 'white', 'blanchedalmond',
240.
'rgb(255, 128, 0);', 'hsv 100 70 50'],
241.
['red', 'yellow', 'green', 'blue', 'violet']
242.
],
243.
change: function(c) {
244.
var label = $("[data-label-for=" + this.id + "]");
245.
label.text("Change called: " + c.toHexString());
246.
},
247.
move: function(c) {
248.
var label = $("[data-label-for=" + this.id + "]");
249.
label.text("Move called: " + c.toHexString());
250.
}
251.
});
252.
253.
$("#hideAfterPaletteSelect").spectrum({
254.
showPaletteOnly: true,
255.
showPalette:true,
256.
hideAfterPaletteSelect:true,
257.
color: 'blanchedalmond',
258.
palette: [
259.
['black', 'white', 'blanchedalmond',
260.
'rgb(255, 128, 0);', 'hsv 100 70 50'],
261.
['red', 'yellow', 'green', 'blue', 'violet']
262.
],
263.
change: function(c) {
264.
var label = $("[data-label-for=" + this.id + "]");
265.
label.text("Change called: " + c.toHexString());
266.
},
267.
move: function(c) {
268.
var label = $("[data-label-for=" + this.id + "]");
269.
label.text("Move called: " + c.toHexString());
270.
}
271.
});
272.
273.
$("#togglePaletteOnly").spectrum({
274.
color: 'blanchedalmond',
275.
showPaletteOnly: true,
276.
togglePaletteOnly: true,
277.
showPalette:true,
278.
palette: [
279.
["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
280.
["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
281.
["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
282.
["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
283.
["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
284.
["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
285.
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
286.
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
287.
]
288.
});
289.
290.
$("#clickoutFiresChange").spectrum({
291.
change: updateBorders
292.
});
293.
294.
$("#clickoutDoesntFireChange").spectrum({
295.
change: updateBorders,
296.
clickoutFiresChange: false
297.
});
298.
299.
$("#showInitial").spectrum({
300.
showInitial: true
301.
});
302.
303.
$("#showInputAndInitial").spectrum({
304.
showInitial: true,
305.
showInput: true
306.
});
307.
308.
$("#showInputInitialClear").spectrum({
309.
allowEmpty:true,
310.
showInitial: true,
311.
showInput: true
312.
});
313.
314.
$("#changeOnMove").spectrum({
315.
move: function(c) {
316.
var label = $("[data-label-for=" + this.id + "]");
317.
label.text("Move called: " + c.toHexString());
318.
}
319.
});
320.
$("#changeOnMoveNo").spectrum({
321.
showInput: true,
322.
change: function(c) {
323.
var label = $("[data-label-for=" + this.id + "]");
324.
label.text("Change called: " + c.toHexString());
325.
}
326.
});
327.
328.
function prettyTime() {
329.
var date = new Date();
330.
331.
return date.toLocaleTimeString();
332.
}
333.
334.
$("#eventshow").spectrum({
335.
show: function(c) {
336.
var label = $("#eventshowLabel");
337.
label.text("show called at " + prettyTime() + " (color is " + c.toHexString() + ")");
338.
}
339.
});
340.
341.
$("#eventhide").spectrum({
342.
hide: function(c) {
343.
var label = $("#eventhideLabel");
344.
label.text("hide called at " + prettyTime() + " (color is " + c.toHexString() + ")");
345.
}
346.
});
347.
348.
$("#eventdragstart").spectrum({
349.
showAlpha: true
350.
}).on("dragstart.spectrum", function(e, c) {
351.
var label = $("#eventdragstartLabel");
352.
label.text("dragstart called at " + prettyTime() + " (color is " + c.toHexString() + ")");
353.
});
354.
355.
$("#eventdragstop").spectrum({
356.
showAlpha: true
357.
}).on("dragstop.spectrum", function(e, c) {
358.
var label = $("#eventdragstopLabel");
359.
label.text("dragstop called at " + prettyTime() + " (color is " + c.toHexString() + ")");
360.
});
361.
362.
363.
$(".basic").spectrum({ change: updateBorders });
364.
$(".override").spectrum({
365.
color: "yellow",
366.
change: updateBorders
367.
});
368.
369.
$(".startEmpty").spectrum({
370.
allowEmpty:true,
371.
change: updateBorders});
372.
373.
$("#beforeShow").spectrum({
374.
beforeShow: function() {
375.
return false;
376.
}
377.
});
378.
379.
380.
$("#custom").spectrum({
381.
color: "#f00"
382.
});
383.
384.
$("#buttonText").spectrum({
385.
allowEmpty:true,
386.
chooseText: "Alright",
387.
cancelText: "No way"
388.
});
389.
390.
391.
$("#showSelectionPalette").spectrum({
392.
showPalette: true,
393.
showSelectionPalette: true, // true by default
394.
palette: [ ]
395.
});
396.
$("#showSelectionPaletteStorage").spectrum({
397.
showPalette: true,
398.
localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection
399.
showSelectionPalette: true,
400.
palette: [ ]
401.
});
402.
$("#showSelectionPaletteStorage2").spectrum({
403.
showPalette: true,
404.
localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection
405.
showSelectionPalette: true,
406.
palette: [ ]
407.
});
408.
409.
$("#selectionPalette").spectrum({
410.
showPalette: true,
411.
palette: [ ],
412.
showSelectionPalette: true, // true by default
413.
selectionPalette: ["red", "green", "blue"]
414.
});
415.
416.
$("#maxSelectionSize").spectrum({
417.
showPalette: true,
418.
palette: [ ],
419.
showSelectionPalette: true, // true by default
420.
selectionPalette: ["red", "green", "blue"],
421.
maxSelectionSize: 2
422.
});
423.
424.
$("#preferredHex").spectrum({
425.
preferredFormat: "hex",
426.
showInput: true,
427.
showPalette: true,
428.
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
429.
});
430.
$("#preferredHex3").spectrum({
431.
preferredFormat: "hex3",
432.
showInput: true,
433.
showPalette: true,
434.
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
435.
});
436.
$("#preferredHsl").spectrum({
437.
preferredFormat: "hsl",
438.
showInput: true,
439.
showPalette: true,
440.
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
441.
});
442.
$("#preferredRgb").spectrum({
443.
preferredFormat: "rgb",
444.
showInput: true,
445.
showPalette: true,
446.
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
447.
});
448.
$("#preferredName").spectrum({
449.
preferredFormat: "name",
450.
showInput: true,
451.
showPalette: true,
452.
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
453.
});
454.
$("#preferredNone").spectrum({
455.
showInput: true,
456.
showPalette: true,
457.
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
458.
});
459.
460.
$("#triggerSet").spectrum({
461.
change: updateBorders
462.
});
463.
464.
// Show the original input to demonstrate the value changing when calling `set`
465.
$("#triggerSet").show();
466.
467.
$("#btnEnterAColor").click(function() {
468.
$("#triggerSet").spectrum("set", $("#enterAColor").val());
469.
});
470.
471.
$("#toggle").spectrum();
472.
$("#btn-toggle").click(function() {
473.
$("#toggle").spectrum("toggle");
474.
return false;
475.
});
476.
477.
478.
$('#toc').toc({
479.
'selectors': 'h2,h3', //elements to use as headings
480.
'container': '#docs', //element to find all selectors in
481.
'smoothScrolling': true, //enable or disable smooth scrolling on click
482.
'prefix': 'toc', //prefix for anchor tags and class names
483.
'highlightOnScroll': true, //add class to heading that is currently in focus
484.
'highlightOffset': 100, //offset to trigger the next headline
485.
'anchorName': function(i, heading, prefix) { //custom function for anchor name
486.
return heading.id || prefix+i;
487.
}
488.
});
489.
490.
prettyPrint();
491.
492.
493.
});
494.