Improvements to color picker on form hooks.
This commit is contained in:
mateuswetah
parent
28440c7fcc
commit
1b073a3aa1
|
|
@ -40,7 +40,7 @@ Popper Copyright (C) Federico Zivolo 2018
|
|||
Licenses: MIT
|
||||
Source: https://github.com/FezVrasta/popper.js
|
||||
|
||||
Spectrum Colorpicker v1.8.0 Copyright (c) Brian Grinstead
|
||||
Spectrum Colorpicker v1.8.1 Copyright (c) Brian Grinstead
|
||||
Licenses: MIT
|
||||
Source: https://github.com/bgrins/spectrum
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Spectrum Colorpicker v1.8.0
|
||||
// Spectrum Colorpicker v1.8.1
|
||||
// https://github.com/bgrins/spectrum
|
||||
// Author: Brian Grinstead
|
||||
// License: MIT
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
|
||||
var formattedString = tiny.toString(opts.preferredFormat || "rgb");
|
||||
var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
|
||||
html.push('<span title="' + formattedString + '" 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></span>');
|
||||
} else {
|
||||
var cls = 'sp-clear-display';
|
||||
html.push($('<div />')
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
|
||||
if (opts.palette) {
|
||||
palette = opts.palette.slice(0);
|
||||
paletteArray = $.isArray(palette[0]) ? palette : [palette];
|
||||
paletteArray = Array.isArray(palette[0]) ? palette : [palette];
|
||||
paletteLookup = {};
|
||||
for (var i = 0; i < paletteArray.length; i++) {
|
||||
for (var j = 0; j < paletteArray[i].length; j++) {
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
|
||||
updateSelectionPaletteFromStorage();
|
||||
|
||||
offsetElement.bind("click.spectrum touchstart.spectrum", function (e) {
|
||||
offsetElement.on("click.spectrum touchstart.spectrum", function (e) {
|
||||
if (!disabled) {
|
||||
toggle();
|
||||
}
|
||||
|
|
@ -321,17 +321,17 @@
|
|||
}
|
||||
|
||||
// Prevent clicks from bubbling up to document. This would cause it to be hidden.
|
||||
container.click(stopPropagation);
|
||||
container.on("click", stopPropagation);
|
||||
|
||||
// Handle user typed input
|
||||
textInput.change(setFromTextInput);
|
||||
textInput.bind("paste", function () {
|
||||
textInput.on("change", setFromTextInput);
|
||||
textInput.on("paste", function () {
|
||||
setTimeout(setFromTextInput, 1);
|
||||
});
|
||||
textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
|
||||
textInput.on("keydown", function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
|
||||
|
||||
cancelButton.text(opts.cancelText);
|
||||
cancelButton.bind("click.spectrum", function (e) {
|
||||
cancelButton.on("click.spectrum", function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
revert();
|
||||
|
|
@ -339,7 +339,7 @@
|
|||
});
|
||||
|
||||
clearButton.attr("title", opts.clearText);
|
||||
clearButton.bind("click.spectrum", function (e) {
|
||||
clearButton.on("click.spectrum", function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
isEmpty = true;
|
||||
|
|
@ -352,7 +352,7 @@
|
|||
});
|
||||
|
||||
chooseButton.text(opts.chooseText);
|
||||
chooseButton.bind("click.spectrum", function (e) {
|
||||
chooseButton.on("click.spectrum", function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -367,7 +367,7 @@
|
|||
});
|
||||
|
||||
toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
|
||||
toggleButton.bind("click.spectrum", function (e) {
|
||||
toggleButton.on("click.spectrum", function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -462,9 +462,14 @@
|
|||
else {
|
||||
set($(e.target).closest(".sp-thumb-el").data("color"));
|
||||
move();
|
||||
updateOriginalInput(true);
|
||||
|
||||
// If the picker is going to close immediately, a palette selection
|
||||
// is a change. Otherwise, it's a move only.
|
||||
if (opts.hideAfterPaletteSelect) {
|
||||
updateOriginalInput(true);
|
||||
hide();
|
||||
} else {
|
||||
updateOriginalInput();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -472,8 +477,8 @@
|
|||
}
|
||||
|
||||
var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
|
||||
paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick);
|
||||
initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick);
|
||||
paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
|
||||
initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { ignore: true }, paletteElementClick);
|
||||
}
|
||||
|
||||
function updateSelectionPaletteFromStorage() {
|
||||
|
|
@ -580,13 +585,15 @@
|
|||
|
||||
if ((value === null || value === "") && allowEmpty) {
|
||||
set(null);
|
||||
updateOriginalInput(true);
|
||||
move();
|
||||
updateOriginalInput();
|
||||
}
|
||||
else {
|
||||
var tiny = tinycolor(value);
|
||||
if (tiny.isValid()) {
|
||||
set(tiny);
|
||||
updateOriginalInput(true);
|
||||
move();
|
||||
updateOriginalInput();
|
||||
}
|
||||
else {
|
||||
textInput.addClass("sp-validation-error");
|
||||
|
|
@ -620,9 +627,9 @@
|
|||
hideAll();
|
||||
visible = true;
|
||||
|
||||
$(doc).bind("keydown.spectrum", onkeydown);
|
||||
$(doc).bind("click.spectrum", clickout);
|
||||
$(window).bind("resize.spectrum", resize);
|
||||
$(doc).on("keydown.spectrum", onkeydown);
|
||||
$(doc).on("click.spectrum", clickout);
|
||||
$(window).on("resize.spectrum", resize);
|
||||
replacer.addClass("sp-active");
|
||||
container.removeClass("sp-hidden");
|
||||
|
||||
|
|
@ -665,9 +672,9 @@
|
|||
if (!visible || flat) { return; }
|
||||
visible = false;
|
||||
|
||||
$(doc).unbind("keydown.spectrum", onkeydown);
|
||||
$(doc).unbind("click.spectrum", clickout);
|
||||
$(window).unbind("resize.spectrum", resize);
|
||||
$(doc).off("keydown.spectrum", onkeydown);
|
||||
$(doc).off("click.spectrum", clickout);
|
||||
$(window).off("resize.spectrum", resize);
|
||||
|
||||
replacer.removeClass("sp-active");
|
||||
container.addClass("sp-hidden");
|
||||
|
|
@ -678,6 +685,7 @@
|
|||
|
||||
function revert() {
|
||||
set(colorOnShow, true);
|
||||
updateOriginalInput(true);
|
||||
}
|
||||
|
||||
function set(color, ignoreFormatChange) {
|
||||
|
|
@ -719,7 +727,7 @@
|
|||
h: currentHue,
|
||||
s: currentSaturation,
|
||||
v: currentValue,
|
||||
a: Math.round(currentAlpha * 100) / 100
|
||||
a: Math.round(currentAlpha * 1000) / 1000
|
||||
}, { format: opts.format || currentPreferredFormat });
|
||||
}
|
||||
|
||||
|
|
@ -909,7 +917,7 @@
|
|||
|
||||
function destroy() {
|
||||
boundElement.show();
|
||||
offsetElement.unbind("click.spectrum touchstart.spectrum");
|
||||
offsetElement.off("click.spectrum touchstart.spectrum");
|
||||
container.remove();
|
||||
replacer.remove();
|
||||
spectrums[spect.id] = null;
|
||||
|
|
@ -988,17 +996,27 @@
|
|||
var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
|
||||
var viewHeight = docElem.clientHeight + $(doc).scrollTop();
|
||||
var offset = input.offset();
|
||||
offset.top += inputHeight;
|
||||
var offsetLeft = offset.left;
|
||||
var offsetTop = offset.top;
|
||||
|
||||
offset.left -=
|
||||
Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
|
||||
Math.abs(offset.left + dpWidth - viewWidth) : 0);
|
||||
offsetTop += inputHeight;
|
||||
|
||||
offset.top -=
|
||||
Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
|
||||
offsetLeft -=
|
||||
Math.min(offsetLeft, (offsetLeft + dpWidth > viewWidth && viewWidth > dpWidth) ?
|
||||
Math.abs(offsetLeft + dpWidth - viewWidth) : 0);
|
||||
|
||||
offsetTop -=
|
||||
Math.min(offsetTop, ((offsetTop + dpHeight > viewHeight && viewHeight > dpHeight) ?
|
||||
Math.abs(dpHeight + inputHeight - extraY) : extraY));
|
||||
|
||||
return offset;
|
||||
return {
|
||||
top: offsetTop,
|
||||
bottom: offset.bottom,
|
||||
left: offsetLeft,
|
||||
right: offset.right,
|
||||
width: offset.width,
|
||||
height: offset.height
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1091,7 +1109,7 @@
|
|||
maxWidth = $(element).width();
|
||||
offset = $(element).offset();
|
||||
|
||||
$(doc).bind(duringDragEvents);
|
||||
$(doc).on(duringDragEvents);
|
||||
$(doc.body).addClass("sp-dragging");
|
||||
|
||||
move(e);
|
||||
|
|
@ -1103,7 +1121,7 @@
|
|||
|
||||
function stop() {
|
||||
if (dragging) {
|
||||
$(doc).unbind(duringDragEvents);
|
||||
$(doc).off(duringDragEvents);
|
||||
$(doc.body).removeClass("sp-dragging");
|
||||
|
||||
// Wait a tick before notifying observers to allow the click event
|
||||
|
|
@ -1115,7 +1133,7 @@
|
|||
dragging = false;
|
||||
}
|
||||
|
||||
$(element).bind("touchstart mousedown", start);
|
||||
$(element).on("touchstart mousedown", start);
|
||||
}
|
||||
|
||||
function throttle(func, wait, debounce) {
|
||||
|
|
@ -1178,7 +1196,7 @@
|
|||
|
||||
// Initializing a new instance of spectrum
|
||||
return this.spectrum("destroy").each(function () {
|
||||
var options = $.extend({}, opts, $(this).data());
|
||||
var options = $.extend({}, $(this).data(), opts);
|
||||
var spect = spectrum(this, options);
|
||||
$(this).data(dataID, spect.id);
|
||||
});
|
||||
|
|
@ -1239,12 +1257,12 @@
|
|||
}
|
||||
|
||||
var rgb = inputToRGB(color);
|
||||
this._originalInput = color,
|
||||
this._r = rgb.r,
|
||||
this._g = rgb.g,
|
||||
this._b = rgb.b,
|
||||
this._a = rgb.a,
|
||||
this._roundA = mathRound(100*this._a) / 100,
|
||||
this._originalInput = color;
|
||||
this._r = rgb.r;
|
||||
this._g = rgb.g;
|
||||
this._b = rgb.b;
|
||||
this._a = rgb.a;
|
||||
this._roundA = mathRound(1000 * this._a) / 1000;
|
||||
this._format = opts.format || rgb.format;
|
||||
this._gradientType = opts.gradientType;
|
||||
|
||||
|
|
@ -1285,7 +1303,7 @@
|
|||
},
|
||||
setAlpha: function(value) {
|
||||
this._a = boundAlpha(value);
|
||||
this._roundA = mathRound(100*this._a) / 100;
|
||||
this._roundA = mathRound(1000 * this._a) / 1000;
|
||||
return this;
|
||||
},
|
||||
toHsv: function() {
|
||||
|
|
|
|||
|
|
@ -49,56 +49,6 @@ class TainacanInterfaceCollectionSettings {
|
|||
<hr>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label"><?php _e( 'Collection items list header colors', 'tainacan-interface' ); ?></label>
|
||||
<span class="help-wrapper">
|
||||
<a class="help-button has-text-secondary">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon tainacan-icon-help"/></i>
|
||||
</span>
|
||||
</a>
|
||||
<div class="help-tooltip">
|
||||
<div class="help-tooltip-header">
|
||||
<h5><?php _e( 'Collection items list header colorsr', 'tainacan-interface' ); ?></h5>
|
||||
</div>
|
||||
<div class="help-tooltip-body">
|
||||
<p><?php _e( 'Select which color will be used for the text and background of your collection items list header.', 'tainacan-interface' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-third field tainacan-collection--change-color-picker">
|
||||
<label class="label"><?php _e( 'Background', 'tainacan-interface' ); ?></label>
|
||||
<div class="control is-clearfix">
|
||||
<input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-two-thirds field tainacan-collection--change-text-color">
|
||||
<label class="label"><?php _e( 'Text', 'tainacan-interface' ); ?></label>
|
||||
<div class="control is-clearfix">
|
||||
<label for="white" id="color-white" class="color-text">
|
||||
<input
|
||||
type="radio"
|
||||
value="#fff"
|
||||
name="<?php echo $this->tainacan_text_color; ?>"
|
||||
id="white" checked>
|
||||
<?php _e( 'White', 'tainacan-interface' ); ?>
|
||||
</label>
|
||||
|
||||
<label for="black" id="color-black" class="color-text">
|
||||
<input
|
||||
type="radio"
|
||||
value="#000"
|
||||
name="<?php echo $this->tainacan_text_color; ?>"
|
||||
id="black">
|
||||
<?php _e( 'Black', 'tainacan-interface' ); ?>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field tainacan-metadata-section--change-section-layout">
|
||||
<label class="label"><?php _e( 'Metadata sections layout', 'tainacan-interface' ); ?></label>
|
||||
<span class="help-wrapper">
|
||||
|
|
@ -159,6 +109,56 @@ class TainacanInterfaceCollectionSettings {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label"><?php _e( 'Collection items list header colors', 'tainacan-interface' ); ?></label>
|
||||
<span class="help-wrapper">
|
||||
<a class="help-button has-text-secondary">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon tainacan-icon-help"/></i>
|
||||
</span>
|
||||
</a>
|
||||
<div class="help-tooltip">
|
||||
<div class="help-tooltip-header">
|
||||
<h5><?php _e( 'Collection items list header colorsr', 'tainacan-interface' ); ?></h5>
|
||||
</div>
|
||||
<div class="help-tooltip-body">
|
||||
<p><?php _e( 'Select which color will be used for the text and background of your collection items list header.', 'tainacan-interface' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-one-third-desktop is-full-tablet is-one-third-mobile field tainacan-collection--change-color-picker">
|
||||
<label class="label"><?php _e( 'Background', 'tainacan-interface' ); ?></label>
|
||||
<div class="control is-clearfix">
|
||||
<input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-two-thirds-desktop is-full-tablet is-two-thirds-mobile field tainacan-collection--change-text-color">
|
||||
<label class="label"><?php _e( 'Text', 'tainacan-interface' ); ?></label>
|
||||
<div class="control is-clearfix">
|
||||
<label for="white" id="color-white" class="color-text">
|
||||
<input
|
||||
type="radio"
|
||||
value="#fff"
|
||||
name="<?php echo $this->tainacan_text_color; ?>"
|
||||
id="white" checked>
|
||||
<?php _e( 'White', 'tainacan-interface' ); ?>
|
||||
</label>
|
||||
|
||||
<label for="black" id="color-black" class="color-text">
|
||||
<input
|
||||
type="radio"
|
||||
value="#000"
|
||||
name="<?php echo $this->tainacan_text_color; ?>"
|
||||
id="black">
|
||||
<?php _e( 'Black', 'tainacan-interface' ); ?>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue