spectrum-rails 1.2.0 → 1.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,5 +1,5 @@
1
1
  module Spectrum
2
2
  module Rails
3
- VERSION = "1.2.0"
3
+ VERSION = "1.3.1"
4
4
  end
5
5
  end
@@ -1,4 +1,4 @@
1
- // Spectrum Colorpicker v1.2.0
1
+ // Spectrum Colorpicker v1.3.1
2
2
  // https://github.com/bgrins/spectrum
3
3
  // Author: Brian Grinstead
4
4
  // License: MIT
@@ -29,6 +29,7 @@
29
29
  maxSelectionSize: 7,
30
30
  cancelText: "cancel",
31
31
  chooseText: "choose",
32
+ clearText: "Clear Color Selection",
32
33
  preferredFormat: false,
33
34
  className: "",
34
35
  showAlpha: false,
@@ -86,7 +87,7 @@
86
87
  "</div>",
87
88
  "</div>",
88
89
  "</div>",
89
- "<div class='sp-clear sp-clear-display' title='Clear Color Selection'>",
90
+ "<div class='sp-clear sp-clear-display'>",
90
91
  "</div>",
91
92
  "<div class='sp-hue'>",
92
93
  "<div class='sp-slider'></div>",
@@ -170,8 +171,8 @@
170
171
  currentSaturation = 0,
171
172
  currentValue = 0,
172
173
  currentAlpha = 1,
173
- palette = opts.palette.slice(0),
174
- paletteArray = $.isArray(palette[0]) ? palette : [palette],
174
+ palette = [],
175
+ paletteArray = [],
175
176
  selectionPalette = opts.selectionPalette.slice(0),
176
177
  maxSelectionSize = opts.maxSelectionSize,
177
178
  draggingClass = "sp-dragging",
@@ -215,6 +216,11 @@
215
216
  opts.showPalette = true;
216
217
  }
217
218
 
219
+ if (opts.palette) {
220
+ palette = opts.palette.slice(0);
221
+ paletteArray = $.isArray(palette[0]) ? palette : [palette];
222
+ }
223
+
218
224
  container.toggleClass("sp-flat", flat);
219
225
  container.toggleClass("sp-input-disabled", !opts.showInput);
220
226
  container.toggleClass("sp-alpha-enabled", opts.showAlpha);
@@ -310,21 +316,19 @@
310
316
  hide("cancel");
311
317
  });
312
318
 
313
-
319
+ clearButton.attr("title", opts.clearText);
314
320
  clearButton.bind("click.spectrum", function (e) {
315
321
  e.stopPropagation();
316
322
  e.preventDefault();
317
-
318
323
  isEmpty = true;
319
-
320
324
  move();
325
+
321
326
  if(flat) {
322
327
  //for the flat style, this is a change event
323
328
  updateOriginalInput(true);
324
329
  }
325
330
  });
326
331
 
327
-
328
332
  chooseButton.text(opts.chooseText);
329
333
  chooseButton.bind("click.spectrum", function (e) {
330
334
  e.stopPropagation();
@@ -344,11 +348,14 @@
344
348
  }
345
349
 
346
350
  move();
347
- });
351
+ }, dragStart, dragStop);
348
352
 
349
353
  draggable(slider, function (dragX, dragY) {
350
354
  currentHue = parseFloat(dragY / slideHeight);
351
355
  isEmpty = false;
356
+ if (!opts.showAlpha) {
357
+ currentAlpha = 1;
358
+ }
352
359
  move();
353
360
  }, dragStart, dragStop);
354
361
 
@@ -377,6 +384,9 @@
377
384
  }
378
385
 
379
386
  isEmpty = false;
387
+ if (!opts.showAlpha) {
388
+ currentAlpha = 1;
389
+ }
380
390
 
381
391
  move();
382
392
 
@@ -407,8 +417,8 @@
407
417
  }
408
418
  else {
409
419
  set($(this).data("color"));
410
- updateOriginalInput(true);
411
420
  move();
421
+ updateOriginalInput(true);
412
422
  hide();
413
423
  }
414
424
 
@@ -496,10 +506,12 @@
496
506
  }
497
507
  container.addClass(draggingClass);
498
508
  shiftMovementDirection = null;
509
+ boundElement.trigger('dragstart.spectrum', [ get() ]);
499
510
  }
500
511
 
501
512
  function dragStop() {
502
513
  container.removeClass(draggingClass);
514
+ boundElement.trigger('dragstop.spectrum', [ get() ]);
503
515
  }
504
516
 
505
517
  function setFromTextInput() {
@@ -508,11 +520,13 @@
508
520
 
509
521
  if ((value === null || value === "") && allowEmpty) {
510
522
  set(null);
523
+ updateOriginalInput(true);
511
524
  }
512
525
  else {
513
526
  var tiny = tinycolor(value);
514
527
  if (tiny.ok) {
515
528
  set(tiny);
529
+ updateOriginalInput(true);
516
530
  }
517
531
  else {
518
532
  textInput.addClass("sp-validation-error");
@@ -551,9 +565,6 @@
551
565
  replacer.addClass("sp-active");
552
566
  container.removeClass("sp-hidden");
553
567
 
554
- if (opts.showPalette) {
555
- drawPalette();
556
- }
557
568
  reflow();
558
569
  updateUI();
559
570
 
@@ -600,16 +611,19 @@
600
611
 
601
612
  function set(color, ignoreFormatChange) {
602
613
  if (tinycolor.equals(color, get())) {
614
+ // Update UI just in case a validation error needs
615
+ // to be cleared.
616
+ updateUI();
603
617
  return;
604
618
  }
605
619
 
606
- var newColor;
620
+ var newColor, newHsv;
607
621
  if (!color && allowEmpty) {
608
622
  isEmpty = true;
609
623
  } else {
610
624
  isEmpty = false;
611
625
  newColor = tinycolor(color);
612
- var newHsv = newColor.toHsv();
626
+ newHsv = newColor.toHsv();
613
627
 
614
628
  currentHue = (newHsv.h % 360) / 360;
615
629
  currentSaturation = newHsv.s;
@@ -661,7 +675,7 @@
661
675
 
662
676
  // Get a format that alpha will be included in (hex and names ignore alpha)
663
677
  var format = currentPreferredFormat;
664
- if (currentAlpha < 1) {
678
+ if (currentAlpha < 1 && !(currentAlpha === 0 && format === "name")) {
665
679
  if (format === "hex" || format === "hex3" || format === "hex6" || format === "name") {
666
680
  format = "rgb";
667
681
  }
@@ -704,12 +718,15 @@
704
718
  alphaSliderInner.css("background", "-webkit-" + gradient);
705
719
  alphaSliderInner.css("background", "-moz-" + gradient);
706
720
  alphaSliderInner.css("background", "-ms-" + gradient);
707
- alphaSliderInner.css("background", gradient);
721
+ // Use current syntax gradient on unprefixed property.
722
+ alphaSliderInner.css("background",
723
+ "linear-gradient(to right, " + realAlpha + ", " + realHex + ")");
708
724
  }
709
725
  }
710
726
 
711
727
  displayColor = realColor.toString(format);
712
728
  }
729
+
713
730
  // Update the text entry input as it changes happen
714
731
  if (opts.showInput) {
715
732
  textInput.val(displayColor);
@@ -750,19 +767,19 @@
750
767
  Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
751
768
  );
752
769
  dragHelper.css({
753
- "top": dragY,
754
- "left": dragX
770
+ "top": dragY + "px",
771
+ "left": dragX + "px"
755
772
  });
756
773
 
757
774
  var alphaX = currentAlpha * alphaWidth;
758
775
  alphaSlideHelper.css({
759
- "left": alphaX - (alphaSlideHelperWidth / 2)
776
+ "left": (alphaX - (alphaSlideHelperWidth / 2)) + "px"
760
777
  });
761
778
 
762
779
  // Where to show the bar that displays your current selected hue
763
780
  var slideY = (currentHue) * slideHeight;
764
781
  slideHelper.css({
765
- "top": slideY - slideHelperHeight
782
+ "top": (slideY - slideHelperHeight) + "px"
766
783
  });
767
784
  }
768
785
  }
@@ -772,7 +789,7 @@
772
789
  displayColor = '',
773
790
  hasChanged = !tinycolor.equals(color, colorOnShow);
774
791
 
775
- if(color) {
792
+ if (color) {
776
793
  displayColor = color.toString(currentPreferredFormat);
777
794
  // Update the selection palette with the current color
778
795
  addColorToSelectionPalette(color);
@@ -806,6 +823,12 @@
806
823
  }
807
824
 
808
825
  updateHelperLocations();
826
+
827
+ if (opts.showPalette) {
828
+ drawPalette();
829
+ }
830
+
831
+ boundElement.trigger('reflow.spectrum');
809
832
  }
810
833
 
811
834
  function destroy() {
@@ -971,6 +994,7 @@
971
994
  onmove.apply(element, [dragX, dragY, e]);
972
995
  }
973
996
  }
997
+
974
998
  function start(e) {
975
999
  var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
976
1000
  var touches = e.originalEvent.touches;
@@ -993,6 +1017,7 @@
993
1017
  }
994
1018
  }
995
1019
  }
1020
+
996
1021
  function stop() {
997
1022
  if (dragging) {
998
1023
  $(doc).unbind(duringDragEvents);
@@ -1018,7 +1043,6 @@
1018
1043
  };
1019
1044
  }
1020
1045
 
1021
-
1022
1046
  function log(){/* jshint -W021 */if(window.console){if(Function.prototype.bind)log=Function.prototype.bind.call(console.log,console);else log=function(){Function.prototype.apply.call(console.log,console,arguments);};log.apply(this,arguments);}}
1023
1047
 
1024
1048
  /**
@@ -1035,7 +1059,6 @@
1035
1059
  this.each(function () {
1036
1060
  var spect = spectrums[$(this).data(dataID)];
1037
1061
  if (spect) {
1038
-
1039
1062
  var method = spect[opts];
1040
1063
  if (!method) {
1041
1064
  throw new Error( "Spectrum: no such method: '" + opts + "'" );
@@ -1065,7 +1088,8 @@
1065
1088
 
1066
1089
  // Initializing a new instance of spectrum
1067
1090
  return this.spectrum("destroy").each(function () {
1068
- var spect = spectrum(this, opts);
1091
+ var options = $.extend({}, opts, $(this).data());
1092
+ var spect = spectrum(this, options);
1069
1093
  $(this).data(dataID, spect.id);
1070
1094
  });
1071
1095
  };
@@ -1087,7 +1111,7 @@
1087
1111
  }
1088
1112
  };
1089
1113
 
1090
- // TinyColor v0.9.16
1114
+ // TinyColor v0.9.17
1091
1115
  // https://github.com/bgrins/TinyColor
1092
1116
  // 2013-08-10, Brian Grinstead, MIT License
1093
1117
 
@@ -1166,7 +1190,13 @@
1166
1190
  return rgbToHex(r, g, b, allow3Char);
1167
1191
  },
1168
1192
  toHexString: function(allow3Char) {
1169
- return '#' + rgbToHex(r, g, b, allow3Char);
1193
+ return '#' + this.toHex(allow3Char);
1194
+ },
1195
+ toHex8: function() {
1196
+ return rgbaToHex(r, g, b, a);
1197
+ },
1198
+ toHex8String: function() {
1199
+ return '#' + this.toHex8();
1170
1200
  },
1171
1201
  toRgb: function() {
1172
1202
  return { r: mathRound(r), g: mathRound(g), b: mathRound(b), a: a };
@@ -1192,19 +1222,16 @@
1192
1222
  return hexNames[rgbToHex(r, g, b, true)] || false;
1193
1223
  },
1194
1224
  toFilter: function(secondColor) {
1195
- var hex = rgbToHex(r, g, b);
1196
- var secondHex = hex;
1197
- var alphaHex = Math.round(parseFloat(a) * 255).toString(16);
1198
- var secondAlphaHex = alphaHex;
1225
+ var hex8String = '#' + rgbaToHex(r, g, b, a);
1226
+ var secondHex8String = hex8String;
1199
1227
  var gradientType = opts && opts.gradientType ? "GradientType = 1, " : "";
1200
1228
 
1201
1229
  if (secondColor) {
1202
1230
  var s = tinycolor(secondColor);
1203
- secondHex = s.toHex();
1204
- secondAlphaHex = Math.round(parseFloat(s.alpha) * 255).toString(16);
1231
+ secondHex8String = s.toHex8String();
1205
1232
  }
1206
1233
 
1207
- return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr=#" + pad2(alphaHex) + hex + ",endColorstr=#" + pad2(secondAlphaHex) + secondHex + ")";
1234
+ return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
1208
1235
  },
1209
1236
  toString: function(format) {
1210
1237
  var formatSet = !!format;
@@ -1226,6 +1253,9 @@
1226
1253
  if (format === "hex3") {
1227
1254
  formattedString = this.toHexString(true);
1228
1255
  }
1256
+ if (format === "hex8") {
1257
+ formattedString = this.toHex8String();
1258
+ }
1229
1259
  if (format === "name") {
1230
1260
  formattedString = this.toName();
1231
1261
  }
@@ -1272,6 +1302,7 @@
1272
1302
  // "red"
1273
1303
  // "#f00" or "f00"
1274
1304
  // "#ff0000" or "ff0000"
1305
+ // "#ff000000" or "ff000000"
1275
1306
  // "rgb 255 0 0" or "rgb (255, 0, 0)"
1276
1307
  // "rgb 1.0 0 0" or "rgb (1, 0, 0)"
1277
1308
  // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
@@ -1486,6 +1517,21 @@
1486
1517
 
1487
1518
  return hex.join("");
1488
1519
  }
1520
+ // `rgbaToHex`
1521
+ // Converts an RGBA color plus alpha transparency to hex
1522
+ // Assumes r, g, b and a are contained in the set [0, 255]
1523
+ // Returns an 8 character hex
1524
+ function rgbaToHex(r, g, b, a) {
1525
+
1526
+ var hex = [
1527
+ pad2(convertDecimalToHex(a)),
1528
+ pad2(mathRound(r).toString(16)),
1529
+ pad2(mathRound(g).toString(16)),
1530
+ pad2(mathRound(b).toString(16))
1531
+ ];
1532
+
1533
+ return hex.join("");
1534
+ }
1489
1535
 
1490
1536
  // `equals`
1491
1537
  // Can be called with any tinycolor input
@@ -1882,8 +1928,8 @@
1882
1928
  return mathMin(1, mathMax(0, val));
1883
1929
  }
1884
1930
 
1885
- // Parse an integer into hex
1886
- function parseHex(val) {
1931
+ // Parse a base-16 hex value into a base-10 integer
1932
+ function parseIntFromHex(val) {
1887
1933
  return parseInt(val, 16);
1888
1934
  }
1889
1935
 
@@ -1912,6 +1958,15 @@
1912
1958
  return n;
1913
1959
  }
1914
1960
 
1961
+ // Converts a decimal to a hex value
1962
+ function convertDecimalToHex(d) {
1963
+ return Math.round(parseFloat(d) * 255).toString(16);
1964
+ }
1965
+ // Converts a hex value to a decimal
1966
+ function convertHexToDecimal(h) {
1967
+ return (parseIntFromHex(h) / 255);
1968
+ }
1969
+
1915
1970
  var matchers = (function() {
1916
1971
 
1917
1972
  // <http://www.w3.org/TR/css3-values/#integers>
@@ -1936,7 +1991,8 @@
1936
1991
  hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
1937
1992
  hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
1938
1993
  hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
1939
- hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
1994
+ hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
1995
+ hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
1940
1996
  };
1941
1997
  })();
1942
1998
 
@@ -1975,19 +2031,28 @@
1975
2031
  if ((match = matchers.hsv.exec(color))) {
1976
2032
  return { h: match[1], s: match[2], v: match[3] };
1977
2033
  }
2034
+ if ((match = matchers.hex8.exec(color))) {
2035
+ return {
2036
+ a: convertHexToDecimal(match[1]),
2037
+ r: parseIntFromHex(match[2]),
2038
+ g: parseIntFromHex(match[3]),
2039
+ b: parseIntFromHex(match[4]),
2040
+ format: named ? "name" : "hex8"
2041
+ };
2042
+ }
1978
2043
  if ((match = matchers.hex6.exec(color))) {
1979
2044
  return {
1980
- r: parseHex(match[1]),
1981
- g: parseHex(match[2]),
1982
- b: parseHex(match[3]),
2045
+ r: parseIntFromHex(match[1]),
2046
+ g: parseIntFromHex(match[2]),
2047
+ b: parseIntFromHex(match[3]),
1983
2048
  format: named ? "name" : "hex"
1984
2049
  };
1985
2050
  }
1986
2051
  if ((match = matchers.hex3.exec(color))) {
1987
2052
  return {
1988
- r: parseHex(match[1] + '' + match[1]),
1989
- g: parseHex(match[2] + '' + match[2]),
1990
- b: parseHex(match[3] + '' + match[3]),
2053
+ r: parseIntFromHex(match[1] + '' + match[1]),
2054
+ g: parseIntFromHex(match[2] + '' + match[2]),
2055
+ b: parseIntFromHex(match[3] + '' + match[3]),
1991
2056
  format: named ? "name" : "hex"
1992
2057
  };
1993
2058
  }
@@ -1,5 +1,5 @@
1
1
  /***
2
- Spectrum Colorpicker v1.2.0
2
+ Spectrum Colorpicker v1.3.1
3
3
  https://github.com/bgrins/spectrum
4
4
  Author: Brian Grinstead
5
5
  License: MIT
@@ -20,6 +20,14 @@ License: MIT
20
20
  position: relative;
21
21
  }
22
22
 
23
+ /* Fix for * { box-sizing: border-box; } */
24
+ .sp-container,
25
+ .sp-container * {
26
+ -webkit-box-sizing: content-box;
27
+ -moz-box-sizing: content-box;
28
+ box-sizing: content-box;
29
+ }
30
+
23
31
  /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
24
32
  .sp-top {
25
33
  position:relative;
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: spectrum-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.2.0
4
+ version: 1.3.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-12-02 00:00:00.000000000 Z
12
+ date: 2014-02-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: railties