tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improvements to color picker on form hooks.

This commit is contained in:
mateuswetah 2022-05-11 14:31:29 -03:00
parent 28440c7fcc
commit 1b073a3aa1
3 changed files with 2383 additions and 2365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/README.txt
View File

@ -40,7 +40,7 @@ Popper Copyright (C) Federico Zivolo 2018
Licenses: MIT Licenses: MIT
Source: https://github.com/FezVrasta/popper.js 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 Licenses: MIT
Source: https://github.com/bgrins/spectrum Source: https://github.com/bgrins/spectrum

104
src/assets/js/spectrum.js
View File

@ -1,4 +1,4 @@
// Spectrum Colorpicker v1.8.0 // Spectrum Colorpicker v1.8.1
// https://github.com/bgrins/spectrum // https://github.com/bgrins/spectrum
// Author: Brian Grinstead // Author: Brian Grinstead
// License: MIT // License: MIT
@ -140,7 +140,7 @@
c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : ""; c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
var formattedString = tiny.toString(opts.preferredFormat || "rgb"); var formattedString = tiny.toString(opts.preferredFormat || "rgb");
var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter(); 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 { } else {
var cls = 'sp-clear-display'; var cls = 'sp-clear-display';
html.push($('<div />') html.push($('<div />')
@ -249,7 +249,7 @@
if (opts.palette) { if (opts.palette) {
palette = opts.palette.slice(0); palette = opts.palette.slice(0);
paletteArray = $.isArray(palette[0]) ? palette : [palette]; paletteArray = Array.isArray(palette[0]) ? palette : [palette];
paletteLookup = {}; paletteLookup = {};
for (var i = 0; i < paletteArray.length; i++) { for (var i = 0; i < paletteArray.length; i++) {
for (var j = 0; j < paletteArray[i].length; j++) { for (var j = 0; j < paletteArray[i].length; j++) {
@ -304,7 +304,7 @@
updateSelectionPaletteFromStorage(); updateSelectionPaletteFromStorage();
offsetElement.bind("click.spectrum touchstart.spectrum", function (e) { offsetElement.on("click.spectrum touchstart.spectrum", function (e) {
if (!disabled) { if (!disabled) {
toggle(); toggle();
} }
@ -321,17 +321,17 @@
} }
// Prevent clicks from bubbling up to document. This would cause it to be hidden. // 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 // Handle user typed input
textInput.change(setFromTextInput); textInput.on("change", setFromTextInput);
textInput.bind("paste", function () { textInput.on("paste", function () {
setTimeout(setFromTextInput, 1); 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.text(opts.cancelText);
cancelButton.bind("click.spectrum", function (e) { cancelButton.on("click.spectrum", function (e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
revert(); revert();
@ -339,7 +339,7 @@
}); });
clearButton.attr("title", opts.clearText); clearButton.attr("title", opts.clearText);
clearButton.bind("click.spectrum", function (e) { clearButton.on("click.spectrum", function (e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
isEmpty = true; isEmpty = true;
@ -352,7 +352,7 @@
}); });
chooseButton.text(opts.chooseText); chooseButton.text(opts.chooseText);
chooseButton.bind("click.spectrum", function (e) { chooseButton.on("click.spectrum", function (e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -367,7 +367,7 @@
}); });
toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText); toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
toggleButton.bind("click.spectrum", function (e) { toggleButton.on("click.spectrum", function (e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -462,9 +462,14 @@
else { else {
set($(e.target).closest(".sp-thumb-el").data("color")); set($(e.target).closest(".sp-thumb-el").data("color"));
move(); 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) { if (opts.hideAfterPaletteSelect) {
updateOriginalInput(true);
hide(); hide();
} else {
updateOriginalInput();
} }
} }
@ -472,8 +477,8 @@
} }
var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum"; var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick); paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick); initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { ignore: true }, paletteElementClick);
} }
function updateSelectionPaletteFromStorage() { function updateSelectionPaletteFromStorage() {
@ -580,13 +585,15 @@
if ((value === null || value === "") && allowEmpty) { if ((value === null || value === "") && allowEmpty) {
set(null); set(null);
updateOriginalInput(true); move();
updateOriginalInput();
} }
else { else {
var tiny = tinycolor(value); var tiny = tinycolor(value);
if (tiny.isValid()) { if (tiny.isValid()) {
set(tiny); set(tiny);
updateOriginalInput(true); move();
updateOriginalInput();
} }
else { else {
textInput.addClass("sp-validation-error"); textInput.addClass("sp-validation-error");
@ -620,9 +627,9 @@
hideAll(); hideAll();
visible = true; visible = true;
$(doc).bind("keydown.spectrum", onkeydown); $(doc).on("keydown.spectrum", onkeydown);
$(doc).bind("click.spectrum", clickout); $(doc).on("click.spectrum", clickout);
$(window).bind("resize.spectrum", resize); $(window).on("resize.spectrum", resize);
replacer.addClass("sp-active"); replacer.addClass("sp-active");
container.removeClass("sp-hidden"); container.removeClass("sp-hidden");
@ -665,9 +672,9 @@
if (!visible || flat) { return; } if (!visible || flat) { return; }
visible = false; visible = false;
$(doc).unbind("keydown.spectrum", onkeydown); $(doc).off("keydown.spectrum", onkeydown);
$(doc).unbind("click.spectrum", clickout); $(doc).off("click.spectrum", clickout);
$(window).unbind("resize.spectrum", resize); $(window).off("resize.spectrum", resize);
replacer.removeClass("sp-active"); replacer.removeClass("sp-active");
container.addClass("sp-hidden"); container.addClass("sp-hidden");
@ -678,6 +685,7 @@
function revert() { function revert() {
set(colorOnShow, true); set(colorOnShow, true);
updateOriginalInput(true);
} }
function set(color, ignoreFormatChange) { function set(color, ignoreFormatChange) {
@ -719,7 +727,7 @@
h: currentHue, h: currentHue,
s: currentSaturation, s: currentSaturation,
v: currentValue, v: currentValue,
a: Math.round(currentAlpha * 100) / 100 a: Math.round(currentAlpha * 1000) / 1000
}, { format: opts.format || currentPreferredFormat }); }, { format: opts.format || currentPreferredFormat });
} }
@ -909,7 +917,7 @@
function destroy() { function destroy() {
boundElement.show(); boundElement.show();
offsetElement.unbind("click.spectrum touchstart.spectrum"); offsetElement.off("click.spectrum touchstart.spectrum");
container.remove(); container.remove();
replacer.remove(); replacer.remove();
spectrums[spect.id] = null; spectrums[spect.id] = null;
@ -988,17 +996,27 @@
var viewWidth = docElem.clientWidth + $(doc).scrollLeft(); var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
var viewHeight = docElem.clientHeight + $(doc).scrollTop(); var viewHeight = docElem.clientHeight + $(doc).scrollTop();
var offset = input.offset(); var offset = input.offset();
offset.top += inputHeight; var offsetLeft = offset.left;
var offsetTop = offset.top;
offset.left -= offsetTop += inputHeight;
Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
Math.abs(offset.left + dpWidth - viewWidth) : 0);
offset.top -= offsetLeft -=
Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? 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)); 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(); maxWidth = $(element).width();
offset = $(element).offset(); offset = $(element).offset();
$(doc).bind(duringDragEvents); $(doc).on(duringDragEvents);
$(doc.body).addClass("sp-dragging"); $(doc.body).addClass("sp-dragging");
move(e); move(e);
@ -1103,7 +1121,7 @@
function stop() { function stop() {
if (dragging) { if (dragging) {
$(doc).unbind(duringDragEvents); $(doc).off(duringDragEvents);
$(doc.body).removeClass("sp-dragging"); $(doc.body).removeClass("sp-dragging");
// Wait a tick before notifying observers to allow the click event // Wait a tick before notifying observers to allow the click event
@ -1115,7 +1133,7 @@
dragging = false; dragging = false;
} }
$(element).bind("touchstart mousedown", start); $(element).on("touchstart mousedown", start);
} }
function throttle(func, wait, debounce) { function throttle(func, wait, debounce) {
@ -1178,7 +1196,7 @@
// Initializing a new instance of spectrum // Initializing a new instance of spectrum
return this.spectrum("destroy").each(function () { return this.spectrum("destroy").each(function () {
var options = $.extend({}, opts, $(this).data()); var options = $.extend({}, $(this).data(), opts);
var spect = spectrum(this, options); var spect = spectrum(this, options);
$(this).data(dataID, spect.id); $(this).data(dataID, spect.id);
}); });
@ -1239,12 +1257,12 @@
} }
var rgb = inputToRGB(color); var rgb = inputToRGB(color);
this._originalInput = color, this._originalInput = color;
this._r = rgb.r, this._r = rgb.r;
this._g = rgb.g, this._g = rgb.g;
this._b = rgb.b, this._b = rgb.b;
this._a = rgb.a, this._a = rgb.a;
this._roundA = mathRound(100*this._a) / 100, this._roundA = mathRound(1000 * this._a) / 1000;
this._format = opts.format || rgb.format; this._format = opts.format || rgb.format;
this._gradientType = opts.gradientType; this._gradientType = opts.gradientType;
@ -1285,7 +1303,7 @@
}, },
setAlpha: function(value) { setAlpha: function(value) {
this._a = boundAlpha(value); this._a = boundAlpha(value);
this._roundA = mathRound(100*this._a) / 100; this._roundA = mathRound(1000 * this._a) / 1000;
return this; return this;
}, },
toHsv: function() { toHsv: function() {

100
src/functions/class-tainacan-interface-collection-settings.php
View File

@ -49,56 +49,6 @@ class TainacanInterfaceCollectionSettings {
<hr> <hr>
</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">
<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"> <div class="field tainacan-metadata-section--change-section-layout">
<label class="label"><?php _e( 'Metadata sections layout', 'tainacan-interface' ); ?></label> <label class="label"><?php _e( 'Metadata sections layout', 'tainacan-interface' ); ?></label>
<span class="help-wrapper"> <span class="help-wrapper">
@ -159,6 +109,56 @@ class TainacanInterfaceCollectionSettings {
</div> </div>
</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 <?php
return ob_get_clean(); return ob_get_clean();
} }