source: other-projects/nz-flag-design/trunk/main-form/bgrins-spectrum/docs/docs.js@ 29741

Last change on this file since 29741 was 29741, checked in by davidb, 9 years ago

Support JS library for colour picker
  • Property svn:executable set to *
File size: 13.4 KB
Line 
1
2function 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
63var 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 change: updateBorders
219});
220
221var 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)"];
222
223$("#showPaletteOnly").spectrum({
224 color: 'blanchedalmond',
225 showPaletteOnly: true,
226 showPalette:true,
227 palette: [
228 ['black', 'white', 'blanchedalmond',
229 'rgb(255, 128, 0);', 'hsv 100 70 50'],
230 ['red', 'yellow', 'green', 'blue', 'violet']
231 ]
232});
233
234$("#hideAfterPaletteSelect").spectrum({
235 showPaletteOnly: true,
236 showPalette:true,
237 hideAfterPaletteSelect:true,
238 color: 'blanchedalmond',
239 palette: [
240 ['black', 'white', 'blanchedalmond',
241 'rgb(255, 128, 0);', 'hsv 100 70 50'],
242 ['red', 'yellow', 'green', 'blue', 'violet']
243 ]
244});
245
246$("#togglePaletteOnly").spectrum({
247 color: 'blanchedalmond',
248 showPaletteOnly: true,
249 togglePaletteOnly: true,
250 showPalette:true,
251 palette: [
252 ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
253 ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
254 ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
255 ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
256 ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
257 ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
258 ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
259 ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
260 ]
261});
262
263$("#clickoutFiresChange").spectrum({
264 clickoutFiresChange: true,
265 change: updateBorders
266});
267
268$("#clickoutDoesntFireChange").spectrum({
269 change: updateBorders
270});
271
272$("#showInitial").spectrum({
273 showInitial: true
274});
275
276$("#showInputAndInitial").spectrum({
277 showInitial: true,
278 showInput: true
279});
280
281$("#showInputInitialClear").spectrum({
282 allowEmpty:true,
283 showInitial: true,
284 showInput: true
285});
286
287$("#changeOnMove").spectrum({
288 move: function(c) {
289 var label = $("#changeOnMoveLabel");
290 label.text("Move called: " + c.toHexString());
291 }
292});
293$("#changeOnMoveNo").spectrum({
294 showInput: true,
295 change: function(c) {
296 var label = $("#changeOnMoveNoLabel");
297 label.text("Change called: " + c.toHexString());
298 }
299});
300
301function prettyTime() {
302 var date = new Date();
303
304 return date.toLocaleTimeString();
305}
306
307$("#eventshow").spectrum({
308 show: function(c) {
309 var label = $("#eventshowLabel");
310 label.text("show called at " + prettyTime() + " (color is " + c.toHexString() + ")");
311 }
312});
313
314$("#eventhide").spectrum({
315 hide: function(c) {
316 var label = $("#eventhideLabel");
317 label.text("hide called at " + prettyTime() + " (color is " + c.toHexString() + ")");
318 }
319});
320
321$("#eventdragstart").spectrum({
322 showAlpha: true
323}).on("dragstart.spectrum", function(e, c) {
324 var label = $("#eventdragstartLabel");
325 label.text("dragstart called at " + prettyTime() + " (color is " + c.toHexString() + ")");
326});
327
328$("#eventdragstop").spectrum({
329 showAlpha: true
330}).on("dragstop.spectrum", function(e, c) {
331 var label = $("#eventdragstopLabel");
332 label.text("dragstop called at " + prettyTime() + " (color is " + c.toHexString() + ")");
333});
334
335
336$(".basic").spectrum({ change: updateBorders });
337$(".override").spectrum({
338 color: "yellow",
339 change: updateBorders
340});
341
342$(".startEmpty").spectrum({
343 allowEmpty:true,
344 change: updateBorders});
345
346$("#beforeShow").spectrum({
347 beforeShow: function() {
348 return false;
349 }
350});
351
352
353$("#custom").spectrum({
354 color: "#f00"
355});
356
357$("#buttonText").spectrum({
358 allowEmpty:true,
359 chooseText: "Alright",
360 cancelText: "No way"
361});
362
363
364$("#showSelectionPalette").spectrum({
365 showPalette: true,
366 showSelectionPalette: true, // true by default
367 palette: [ ]
368});
369$("#showSelectionPaletteStorage").spectrum({
370 showPalette: true,
371 localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection
372 showSelectionPalette: true,
373 palette: [ ]
374});
375$("#showSelectionPaletteStorage2").spectrum({
376 showPalette: true,
377 localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection
378 showSelectionPalette: true,
379 palette: [ ]
380});
381
382$("#selectionPalette").spectrum({
383 showPalette: true,
384 palette: [ ],
385 showSelectionPalette: true, // true by default
386 selectionPalette: ["red", "green", "blue"]
387});
388
389$("#maxSelectionSize").spectrum({
390 showPalette: true,
391 palette: [ ],
392 showSelectionPalette: true, // true by default
393 selectionPalette: ["red", "green", "blue"],
394 maxSelectionSize: 2
395});
396
397$("#preferredHex").spectrum({
398 preferredFormat: "hex",
399 showInput: true,
400 showPalette: true,
401 palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
402});
403$("#preferredHex3").spectrum({
404 preferredFormat: "hex3",
405 showInput: true,
406 showPalette: true,
407 palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
408});
409$("#preferredHsl").spectrum({
410 preferredFormat: "hsl",
411 showInput: true,
412 showPalette: true,
413 palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
414});
415$("#preferredRgb").spectrum({
416 preferredFormat: "rgb",
417 showInput: true,
418 showPalette: true,
419 palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
420});
421$("#preferredName").spectrum({
422 preferredFormat: "name",
423 showInput: true,
424 showPalette: true,
425 palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
426});
427$("#preferredNone").spectrum({
428 showInput: true,
429 showPalette: true,
430 palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
431});
432
433$("#triggerSet").spectrum({
434 change: updateBorders
435});
436
437// Show the original input to demonstrate the value changing when calling `set`
438$("#triggerSet").show();
439
440$("#btnEnterAColor").click(function() {
441 $("#triggerSet").spectrum("set", $("#enterAColor").val());
442});
443
444$("#toggle").spectrum();
445$("#btn-toggle").click(function() {
446 $("#toggle").spectrum("toggle");
447 return false;
448});
449
450
451$('#toc').toc({
452 'selectors': 'h2,h3', //elements to use as headings
453 'container': '#docs', //element to find all selectors in
454 'smoothScrolling': true, //enable or disable smooth scrolling on click
455 'prefix': 'toc', //prefix for anchor tags and class names
456 'highlightOnScroll': true, //add class to heading that is currently in focus
457 'highlightOffset': 100, //offset to trigger the next headline
458 'anchorName': function(i, heading, prefix) { //custom function for anchor name
459 return heading.id || prefix+i;
460 }
461});
462
463prettyPrint();
464
465
466});
Note: See TracBrowser for help on using the repository browser.