|
1 |
| -// Spectrum Colorpicker v1.6.0 |
| 1 | +// Spectrum Colorpicker v1.7.0 |
2 | 2 | // https://github.com/bgrins/spectrum
|
3 | 3 | // Author: Brian Grinstead
|
4 | 4 | // License: MIT
|
|
33 | 33 | showInput: false,
|
34 | 34 | allowEmpty: false,
|
35 | 35 | showButtons: true,
|
36 |
| - clickoutFiresChange: false, |
| 36 | + clickoutFiresChange: true, |
37 | 37 | showInitial: false,
|
38 | 38 | showPalette: false,
|
39 | 39 | showPaletteOnly: false,
|
|
72 | 72 | style.cssText = 'background-color:rgba(0,0,0,.5)';
|
73 | 73 | return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
|
74 | 74 | })(),
|
75 |
| - inputTypeColorSupport = (function() { |
76 |
| - var colorInput = $("<input type='color' value='!' />")[0]; |
77 |
| - return colorInput.type === "color" && colorInput.value !== "!"; |
78 |
| - })(), |
79 | 75 | replaceInput = [
|
80 | 76 | "<div class='sp-replacer'>",
|
81 | 77 | "<div class='sp-preview'><div class='sp-preview-inner'></div></div>",
|
|
189 | 185 | callbacks = opts.callbacks,
|
190 | 186 | resize = throttle(reflow, 10),
|
191 | 187 | visible = false,
|
| 188 | + isDragging = false, |
192 | 189 | dragWidth = 0,
|
193 | 190 | dragHeight = 0,
|
194 | 191 | dragHelperHeight = 0,
|
|
230 | 227 | chooseButton = container.find(".sp-choose"),
|
231 | 228 | toggleButton = container.find(".sp-palette-toggle"),
|
232 | 229 | isInput = boundElement.is("input"),
|
233 |
| - isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color", |
| 230 | + isInputTypeColor = isInput && boundElement.attr("type") === "color" && inputTypeColorSupport(), |
234 | 231 | shouldReplace = isInput && !flat,
|
235 | 232 | replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className).addClass(opts.replacerClassName) : $([]),
|
236 | 233 | offsetElement = (shouldReplace) ? replacer : boundElement,
|
|
360 | 357 | e.stopPropagation();
|
361 | 358 | e.preventDefault();
|
362 | 359 |
|
| 360 | + if (IE && textInput.is(":focus")) { |
| 361 | + textInput.trigger('change'); |
| 362 | + } |
| 363 | + |
363 | 364 | if (isValid()) {
|
364 | 365 | updateOriginalInput(true);
|
365 | 366 | hide();
|
|
562 | 563 | if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {
|
563 | 564 | reflow();
|
564 | 565 | }
|
| 566 | + isDragging = true; |
565 | 567 | container.addClass(draggingClass);
|
566 | 568 | shiftMovementDirection = null;
|
567 | 569 | boundElement.trigger('dragstart.spectrum', [ get() ]);
|
568 | 570 | }
|
569 | 571 |
|
570 | 572 | function dragStop() {
|
| 573 | + isDragging = false; |
571 | 574 | container.removeClass(draggingClass);
|
572 | 575 | boundElement.trigger('dragstop.spectrum', [ get() ]);
|
573 | 576 | }
|
|
618 | 621 | hideAll();
|
619 | 622 | visible = true;
|
620 | 623 |
|
| 624 | + $(doc).bind("keydown.spectrum", onkeydown); |
621 | 625 | $(doc).bind("click.spectrum", clickout);
|
622 | 626 | $(window).bind("resize.spectrum", resize);
|
623 | 627 | replacer.addClass("sp-active");
|
|
633 | 637 | boundElement.trigger('show.spectrum', [ colorOnShow ]);
|
634 | 638 | }
|
635 | 639 |
|
| 640 | + function onkeydown(e) { |
| 641 | + // Close on ESC |
| 642 | + if (e.keyCode === 27) { |
| 643 | + hide(); |
| 644 | + } |
| 645 | + } |
| 646 | + |
636 | 647 | function clickout(e) {
|
637 | 648 | // Return on right click.
|
638 | 649 | if (e.button == 2) { return; }
|
639 | 650 |
|
| 651 | + // If a drag event was happening during the mouseup, don't hide |
| 652 | + // on click. |
| 653 | + if (isDragging) { return; } |
| 654 | + |
640 | 655 | if (clickoutFiresChange) {
|
641 | 656 | updateOriginalInput(true);
|
642 | 657 | }
|
|
651 | 666 | if (!visible || flat) { return; }
|
652 | 667 | visible = false;
|
653 | 668 |
|
| 669 | + $(doc).unbind("keydown.spectrum", onkeydown); |
654 | 670 | $(doc).unbind("click.spectrum", clickout);
|
655 | 671 | $(window).unbind("resize.spectrum", resize);
|
656 | 672 |
|
|
1043 | 1059 | return stop();
|
1044 | 1060 | }
|
1045 | 1061 |
|
1046 |
| - var touches = e.originalEvent && e.originalEvent.touches; |
1047 |
| - var pageX = touches ? touches[0].pageX : e.pageX; |
1048 |
| - var pageY = touches ? touches[0].pageY : e.pageY; |
| 1062 | + var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]; |
| 1063 | + var pageX = t0 && t0.pageX || e.pageX; |
| 1064 | + var pageY = t0 && t0.pageY || e.pageY; |
1049 | 1065 |
|
1050 | 1066 | var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
|
1051 | 1067 | var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
|
|
1072 | 1088 | $(doc).bind(duringDragEvents);
|
1073 | 1089 | $(doc.body).addClass("sp-dragging");
|
1074 | 1090 |
|
1075 |
| - if (!hasTouch) { |
1076 |
| - move(e); |
1077 |
| - } |
| 1091 | + move(e); |
1078 | 1092 |
|
1079 | 1093 | prevent(e);
|
1080 | 1094 | }
|
|
1085 | 1099 | if (dragging) {
|
1086 | 1100 | $(doc).unbind(duringDragEvents);
|
1087 | 1101 | $(doc.body).removeClass("sp-dragging");
|
1088 |
| - onstop.apply(element, arguments); |
| 1102 | + |
| 1103 | + // Wait a tick before notifying observers to allow the click event |
| 1104 | + // to fire in Chrome. |
| 1105 | + setTimeout(function() { |
| 1106 | + onstop.apply(element, arguments); |
| 1107 | + }, 0); |
1089 | 1108 | }
|
1090 | 1109 | dragging = false;
|
1091 | 1110 | }
|
|
1106 | 1125 | };
|
1107 | 1126 | }
|
1108 | 1127 |
|
| 1128 | + function inputTypeColorSupport() { |
| 1129 | + return $.fn.spectrum.inputTypeColorSupport(); |
| 1130 | + } |
| 1131 | + |
1109 | 1132 | /**
|
1110 | 1133 | * Define a jQuery plugin
|
1111 | 1134 | */
|
|
1159 | 1182 | $.fn.spectrum.loadOpts = {};
|
1160 | 1183 | $.fn.spectrum.draggable = draggable;
|
1161 | 1184 | $.fn.spectrum.defaults = defaultOpts;
|
| 1185 | + $.fn.spectrum.inputTypeColorSupport = function inputTypeColorSupport() { |
| 1186 | + if (typeof inputTypeColorSupport._cachedResult === "undefined") { |
| 1187 | + var colorInput = $("<input type='color' value='!' />")[0]; |
| 1188 | + inputTypeColorSupport._cachedResult = colorInput.type === "color" && colorInput.value !== "!"; |
| 1189 | + } |
| 1190 | + return inputTypeColorSupport._cachedResult; |
| 1191 | + }; |
1162 | 1192 |
|
1163 | 1193 | $.spectrum = { };
|
1164 | 1194 | $.spectrum.localization = { };
|
1165 | 1195 | $.spectrum.palettes = { };
|
1166 | 1196 |
|
1167 | 1197 | $.fn.spectrum.processNativeColorInputs = function () {
|
1168 |
| - if (!inputTypeColorSupport) { |
1169 |
| - $("input[type=color]").spectrum({ |
| 1198 | + var colorInputs = $("input[type=color]"); |
| 1199 | + if (colorInputs.length && !inputTypeColorSupport()) { |
| 1200 | + colorInputs.spectrum({ |
1170 | 1201 | preferredFormat: "hex6"
|
1171 | 1202 | });
|
1172 | 1203 | }
|
1173 | 1204 | };
|
1174 | 1205 |
|
1175 |
| - // TinyColor v1.1.1 |
| 1206 | + // TinyColor v1.1.2 |
1176 | 1207 | // https://github.com/bgrins/TinyColor
|
1177 | 1208 | // Brian Grinstead, MIT License
|
1178 | 1209 |
|
|
1187 | 1218 | mathMax = math.max,
|
1188 | 1219 | mathRandom = math.random;
|
1189 | 1220 |
|
1190 |
| - var tinycolor = function tinycolor (color, opts) { |
| 1221 | + var tinycolor = function(color, opts) { |
1191 | 1222 |
|
1192 | 1223 | color = (color) ? color : '';
|
1193 | 1224 | opts = opts || { };
|
|
2277 | 2308 | window.tinycolor = tinycolor;
|
2278 | 2309 | })();
|
2279 | 2310 |
|
2280 |
| - |
2281 | 2311 | $(function () {
|
2282 | 2312 | if ($.fn.spectrum.load) {
|
2283 | 2313 | $.fn.spectrum.processNativeColorInputs();
|
|
0 commit comments