Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tooltipFormat - Fixes #195 #197

Merged
merged 5 commits into from
Mar 7, 2014
Merged

tooltipFormat - Fixes #195 #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1c6ff80
implement tooltipFormat [needs docs]. Issue #195.
bgrins Mar 4, 2014
a035bdb
document tooltipFormat. Issue #195
bgrins Mar 4, 2014
24a62d1
add test for hsl tooltipFormat
bgrins Mar 4, 2014
f5ebb68
move tooltipFormat next to other palette options
bgrins Mar 4, 2014
92229e2
remove tooltipFormat but keep functionality pointing to preferredForm…
bgrins Mar 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
28 changes: 20 additions & 8 deletions docs/docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
35 changes: 24 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions spectrum.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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>');
Expand Down Expand Up @@ -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(""));
Expand All @@ -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));
}
}

Expand Down
41 changes: 41 additions & 0 deletions test/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down