docs.js 13 KB

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