Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

tooltipFormat - Fixes #195 #197

Merged
merged 5 commits into from

1 participant

This page is out of date. Refresh to see the latest.
View
2  docs/docs.css
@@ -60,7 +60,7 @@ box-shadow: 0 0 10px #ccc; border-radius: 0 0 5px 5px;
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
-
+input[type="text"] { height: auto; }
.label {
padding: 1px 4px 2px;
font-size: 10.998px;
View
28 docs/docs.js
@@ -345,26 +345,38 @@ $("#showSelectionPaletteStorage2").spectrum({
$("#preferredHex").spectrum({
preferredFormat: "hex",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
-$("#preferredHex6").spectrum({
- preferredFormat: "hex6",
- showInput: true
+$("#preferredHex3").spectrum({
+ preferredFormat: "hex3",
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredHsl").spectrum({
preferredFormat: "hsl",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredRgb").spectrum({
preferredFormat: "rgb",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredName").spectrum({
preferredFormat: "name",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredNone").spectrum({
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#triggerSet").spectrum({
View
35 index.html
@@ -537,39 +537,52 @@ <h3 id="options-className">className</h3>
<h3 id="options-preferredFormat">Preferred Format</h3>
<div class='option-content'>
<div class='description'>
- <p>You can set the format that is displayed</p>
+ <p>You can set the format that is displayed in the text box.</p>
+ <p>This will also change the format that is displayed in the titles from the palette swatches.</p>
</div>
<pre class='prettyprint'>
$("#preferredHex").spectrum({
preferredFormat: "hex",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
-$("#preferredHex6").spectrum({
- preferredFormat: "hex6",
- showInput: true
+$("#preferredHex3").spectrum({
+ preferredFormat: "hex3",
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredHsl").spectrum({
preferredFormat: "hsl",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredRgb").spectrum({
preferredFormat: "rgb",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredName").spectrum({
preferredFormat: "name",
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
$("#preferredNone").spectrum({
- showInput: true
+ showInput: true,
+ showPalette: true,
+ palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
});
</pre>
<div class='example'>
<div class='alert alert-info'>Hex</div>
<input type='text' name='preferredHex' id='preferredHex' value='orangered' />
- <div class='alert alert-info'>Hex (6 Characters Always)</div>
- <input type='text' name='preferredHex6' id='preferredHex6' value='orangered' />
+ <div class='alert alert-info'>Hex (3 Characters If Possible)</div>
+ <input type='text' name='preferredHex3' id='preferredHex3' value='orangered' />
<div class='alert alert-info'>Hsl</div>
<input type='text' name='preferredHsl' id='preferredHsl' value='orangered' />
<div class='alert alert-info'>Rgb</div>
View
11 spectrum.js
@@ -109,7 +109,7 @@
].join("");
})();
- function paletteTemplate (p, color, className) {
+ function paletteTemplate (p, color, className, tooltipFormat) {
var html = [];
for (var i = 0; i < p.length; i++) {
var current = p[i];
@@ -118,8 +118,9 @@
var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
+ var formattedString = tiny.toString(tooltipFormat || "rgb");
var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
- html.push('<span title="' + tiny.toRgbString() + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
+ html.push('<span title="' + formattedString + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
} else {
var cls = 'sp-clear-display';
html.push('<span title="No Color Selected" data-color="" style="background-color:transparent;" class="' + cls + '"></span>');
@@ -482,13 +483,13 @@
var currentColor = get();
var html = $.map(paletteArray, function (palette, i) {
- return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i);
+ return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i, opts.preferredFormat);
});
updateSelectionPaletteFromStorage();
if (selectionPalette) {
- html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection"));
+ html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection", opts.preferredFormat));
}
paletteContainer.html(html.join(""));
@@ -498,7 +499,7 @@
if (opts.showInitial) {
var initial = colorOnShow;
var current = get();
- initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial"));
+ initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial", opts.preferredFormat));
}
}
View
41 test/tests.js
@@ -296,6 +296,47 @@ test ("Show Input works as expected", function() {
el.spectrum("destroy");
});
+
+test ("Tooltip is formatted based on preferred format", function() {
+ var el = $("<input />").spectrum({
+ showInput: true,
+ color: "rgba(255, 255, 255, .5)",
+ showPalette: true,
+ palette: [["red", "rgba(255, 255, 255, .5)", "rgb(0, 0, 255)"]]
+ });
+
+ function getTitlesString() {
+ return el.spectrum("container").find(".sp-thumb-el").map(function() {
+ return this.getAttribute("title");
+ }).toArray().join(" ");
+ }
+
+ equal (getTitlesString(), "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", "Titles use rgb format by default");
+
+ el.spectrum("option", "preferredFormat", "hex");
+ equal (getTitlesString(), "#ff0000 #ffffff #0000ff", "Titles are updated to hex");
+
+ el.spectrum("option", "preferredFormat", "hex6");
+ equal (getTitlesString(), "#ff0000 #ffffff #0000ff", "Titles are updated to hex6");
+
+ el.spectrum("option", "preferredFormat", "hex3");
+ equal (getTitlesString(), "#f00 #fff #00f", "Titles are updated to hex3");
+
+ el.spectrum("option", "preferredFormat", "name");
+ equal (getTitlesString(), "red white blue", "Titles are updated to name");
+
+ el.spectrum("option", "preferredFormat", "hsv");
+ equal (getTitlesString(), "hsv(0, 100%, 100%) hsva(0, 0%, 100%, 0.5) hsv(240, 100%, 100%)", "Titles are updated to hsv");
+
+ el.spectrum("option", "preferredFormat", "hsl");
+ equal (getTitlesString(), "hsl(0, 100%, 50%) hsla(0, 0%, 100%, 0.5) hsl(240, 100%, 50%)", "Titles are updated to hsl");
+
+ el.spectrum("option", "preferredFormat", "rgb");
+ equal (getTitlesString(), "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", "Titles are updated to rgb");
+
+ el.spectrum("destroy");
+});
+
module("Methods");
test( "Methods work as described", function() {
Something went wrong with that request. Please try again.