mirror of
https://github.com/viliusle/miniPaint.git
synced 2026-02-06 16:16:44 +00:00
Merge pull request #203 from Giwayume/feature/color-dialog
Color picker dialog
This commit is contained in:
Vilius
GitHub
commit
612590da3b
@ -42,6 +42,38 @@
|
||||
border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
|
||||
}
|
||||
|
||||
/****************\
|
||||
| UI Color Input |
|
||||
\****************/
|
||||
|
||||
.ui_color_input {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui_color_input input[type="color"] {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: .2rem solid var(--input-background-color);
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.ui_color_input .alpha_overlay {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9bRdGKiBlERDJUJwuiIo5ahSJUCLVCqw4mL/2DJg1Jiouj4Fpw8Gex6uDirKuDqyAI/oA4OTopukiJ9yWFFjFeeLyP8+45vHcfEKyVmGa1jQOabpvJeExMZ1bFjld0YxgBCOiTmWXMSVICvvV1T51Ud1Ge5d/3Z/WoWYsBAZF4lhmmTbxBPL1pG5z3iQVWkFXic+Ixky5I/Mh1xeM3znmXgzxTMFPJeWKBWMy3sNLCrGBqxFPEEVXTKT+Y9ljlvMVZK1VY4578heGsvrLMdVpDiGMRS5AgQkEFRZRgI0q7ToqFJJ3HfPyDrl8il0KuIhg5FlCGBtn1g//B79lauckJLykcA9pfHOdjBOjYBepVx/k+dpz6CRB6Bq70pr9cA2Y+Sa82tcgR0LsNXFw3NWUPuNwBBp4M2ZRdKUQrmMsB72f0TRmg/xboWvPm1jjH6QOQolklboCDQ2A0T9nrPu/ubJ3bvz2N+f0AL+pyjMZuudYAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfkCx4BHwaj7CMVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAC5JREFUOMtjfPfuHQNuICgoiEeWiYECMKp5ZGhm/P//Px7p9+/fjwbYqGZKNAMAANAI7r7rfkQAAAAASUVORK5CYII=');
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/**************************\
|
||||
| UI Color Picker Gradient |
|
||||
\**************************/
|
||||
@ -244,11 +276,16 @@ button img{
|
||||
}
|
||||
.ui_input_group > input,
|
||||
.ui_input_group > .ui_number_input,
|
||||
.ui_input_group > .ui_range {
|
||||
.ui_input_group > .ui_range,
|
||||
.ui_input_group > .ui_color_sample {
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.ui_input_group > .ui_color_sample {
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
.ui_input_group > :first-child {
|
||||
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
|
||||
}
|
||||
@ -572,6 +609,30 @@ button img{
|
||||
.ui_swatches .swatch_group.rows_3 {
|
||||
max-height: calc(6.9rem - 2px);
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_1 .swatch {
|
||||
width: 100%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_2 .swatch {
|
||||
width: 50%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_3 .swatch {
|
||||
width: 33.33%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_4 .swatch {
|
||||
width: 25%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_5 .swatch {
|
||||
width: 20%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_6 .swatch {
|
||||
width: 16.66%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_7 .swatch {
|
||||
width: 14.29%;
|
||||
}
|
||||
.ui_swatches .swatch_group.cols_8 .swatch {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.ui_swatches .swatch {
|
||||
background: white;
|
||||
|
||||
@ -473,7 +473,7 @@ body .sp-preview{
|
||||
clear:both;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.block.details input{
|
||||
.block.details input[type="number"]{
|
||||
width: 70px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
@ -638,3 +638,27 @@ canvas{
|
||||
width: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== dialogs ======================================================= */
|
||||
|
||||
#dialog_color_picker_group {
|
||||
width: 60%;
|
||||
}
|
||||
#dialog_color_channel_group {
|
||||
width: 40%;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
#dialog_color_picker .ui_flex_group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#dialog_color_picker_group {
|
||||
width: 100%;
|
||||
}
|
||||
#dialog_color_channel_group {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
#popup{
|
||||
#popup {
|
||||
position:fixed;
|
||||
display:none;
|
||||
top: 15vh;
|
||||
@ -12,12 +12,11 @@
|
||||
max-width: 500px;
|
||||
max-height: calc(80vh);
|
||||
margin:0px auto 0px auto;
|
||||
padding:10px;
|
||||
padding: 4rem 0 5rem 0;
|
||||
box-shadow: 0 0 0 4000px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.5);
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
overflow-y: scroll;
|
||||
overflow: hidden;
|
||||
}
|
||||
#popup.wide{
|
||||
max-width: 840px;
|
||||
@ -26,27 +25,52 @@
|
||||
color: var(--link-color);
|
||||
}
|
||||
#popup h2{
|
||||
margin: -10px -10px 5px -10px;
|
||||
padding: 6px 10px;
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
padding: 0 1rem;
|
||||
font-size: 1.8rem;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: var(--header-background-color);
|
||||
z-index: 0;
|
||||
/*cursor:move;*/
|
||||
}
|
||||
#popup #dialog_content {
|
||||
overflow-y: auto;
|
||||
max-height: calc(80vh - 9rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
#popup .buttons{
|
||||
text-align:center;
|
||||
margin-top:20px;
|
||||
margin-bottom:5px;
|
||||
position: absolute;
|
||||
background-color: var(--block-background-color);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5rem;
|
||||
line-height: 4rem;
|
||||
margin: 0;
|
||||
padding: .5rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--header-background-color);
|
||||
}
|
||||
#popup .close{
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
min-width: 0;
|
||||
padding: 5px;
|
||||
line-height: 0.5;
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
z-index: 1;
|
||||
}
|
||||
#popup td, #popup th{
|
||||
height: 25px;
|
||||
|
||||
@ -11,6 +11,11 @@
|
||||
max-width: 6.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.label_width_medium {
|
||||
width: 100%;
|
||||
max-width: 10.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Font color utility */
|
||||
.text_red { color: var(--text-color-red); }
|
||||
|
||||
@ -18,6 +18,9 @@ config.layer = null;
|
||||
config.need_render = false;
|
||||
config.need_render_changed_params = false; // Set specifically when param change in layer details triggered render
|
||||
config.mouse = {};
|
||||
config.swatches = {
|
||||
default: [] // Only default used right now, object format for swatch swapping in future.
|
||||
};
|
||||
|
||||
//requires styles in reset.css
|
||||
config.themes = [
|
||||
|
||||
171
src/js/core/components/color-input.js
Normal file
171
src/js/core/components/color-input.js
Normal file
@ -0,0 +1,171 @@
|
||||
import Helper_class from './../../libs/helpers.js';
|
||||
import Dialog_class from './../../libs/popup.js';
|
||||
import GUI_colors_class from './../gui/gui-colors.js';
|
||||
|
||||
const Helper = new Helper_class();
|
||||
let POP;
|
||||
|
||||
/**
|
||||
* This input opens a custom color picker dialog that is more tightly integrated with the application (swatch selection, etc).
|
||||
* It can also handle alpha values, whereas native color input can't.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
|
||||
const template = `
|
||||
<div class="ui_color_input">
|
||||
<input type="color">
|
||||
<div class="alpha_overlay"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const on_click_color_input = (event) => {
|
||||
event.preventDefault();
|
||||
const $el = $(event.target.closest('.ui_color_input'));
|
||||
const { value } = $el.data();
|
||||
if (!POP) {
|
||||
POP = new Dialog_class();
|
||||
}
|
||||
let colorsDialog = new GUI_colors_class();
|
||||
var settings = {
|
||||
title: 'Color Picker',
|
||||
on_finish() {
|
||||
set_value($el, colorsDialog.COLOR + (colorsDialog.ALPHA < 255 ? colorsDialog.ALPHA.toString(16).padStart(2, '0') : ''));
|
||||
$el.trigger('input');
|
||||
$el.trigger('change');
|
||||
colorsDialog = null;
|
||||
},
|
||||
params: [
|
||||
{
|
||||
function() {
|
||||
var html = '<div id="dialog_color_picker"></div>';
|
||||
return html;
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
let colorValue;
|
||||
let alpha = 255;
|
||||
if (/^\#[0-9A-F]{8}$/gi.test(value)) {
|
||||
// Hex with alpha
|
||||
colorValue = value.slice(0, 7);
|
||||
alpha = parseInt(value.slice(7, 9), 16);
|
||||
} else if (/^\#[0-9A-F]{6}$/gi.test(value)) {
|
||||
// Hex without alpha
|
||||
colorValue = value;
|
||||
} else {
|
||||
colorValue = '#000000';
|
||||
}
|
||||
POP.show(settings);
|
||||
colorsDialog.render_main_colors('dialog');
|
||||
colorsDialog.set_color({ hex: colorValue, a: alpha });
|
||||
};
|
||||
|
||||
const set_value = ($el, value) => {
|
||||
const trimmedValue = (value + '').trim();
|
||||
let colorValue;
|
||||
let opacity = 0;
|
||||
if (/^\#[0-9A-F]{8}$/gi.test(trimmedValue)) {
|
||||
// Hex with alpha
|
||||
colorValue = trimmedValue.slice(0, 7);
|
||||
opacity = 1 - (parseInt(value.slice(7, 9), 16) * (1 / 255));
|
||||
} else if (/^\#[0-9A-F]{6}$/gi.test(trimmedValue)) {
|
||||
// Hex without alpha
|
||||
colorValue = trimmedValue;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
const { input, overlay } = $el.data();
|
||||
overlay.style.opacity = opacity;
|
||||
input.value = colorValue;
|
||||
$el.data('value', trimmedValue);
|
||||
};
|
||||
|
||||
const set_disabled = ($el, disabled) => {
|
||||
const { input } = $el.data();
|
||||
if (disabled) {
|
||||
input.setAttribute('disabled', 'disabled');
|
||||
} else {
|
||||
input.removeAttribute('disabled');
|
||||
}
|
||||
$el.data('disabled', disabled);
|
||||
};
|
||||
|
||||
$.fn.uiColorInput = function(behavior, ...args) {
|
||||
let returnValues = [];
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
let el = this[i];
|
||||
|
||||
// Constructor
|
||||
if (Object.prototype.toString.call(behavior) !== '[object String]') {
|
||||
const definition = behavior || {};
|
||||
|
||||
const classList = el.className;
|
||||
const id = definition.id != null ? definition.id : el.getAttribute('id');
|
||||
const disabled = definition.disabled != null ? definition.disabled : el.hasAttribute('disabled') ? true : false;
|
||||
const value = definition.value != null ? definition.value : el.value || 0;
|
||||
const ariaLabeledBy = el.getAttribute('aria-labelledby');
|
||||
|
||||
let $el;
|
||||
if (el.parentNode) {
|
||||
$(el).after(template);
|
||||
const oldEl = el;
|
||||
el = el.nextElementSibling;
|
||||
$(oldEl).remove();
|
||||
} else {
|
||||
const orphanedParent = document.createElement('div');
|
||||
orphanedParent.innerHTML = template;
|
||||
el = orphanedParent.firstElementChild;
|
||||
}
|
||||
this[i] = el;
|
||||
$el = $(el);
|
||||
|
||||
const input = $el.find('input[type="color"]')[0];
|
||||
const overlay = $el.find('.alpha_overlay')[0];
|
||||
|
||||
if (classList) {
|
||||
el.classList.add(classList);
|
||||
}
|
||||
if (id) {
|
||||
el.setAttribute('id', id);
|
||||
}
|
||||
if (ariaLabeledBy) {
|
||||
input.setAttribute('aria-labelledby', ariaLabeledBy);
|
||||
}
|
||||
|
||||
$el.data({
|
||||
id,
|
||||
input,
|
||||
overlay,
|
||||
value
|
||||
});
|
||||
|
||||
$(input)
|
||||
.on('click', on_click_color_input)
|
||||
|
||||
set_value($el, value);
|
||||
set_disabled($el, disabled);
|
||||
}
|
||||
// Behaviors
|
||||
else if (behavior === 'set_value') {
|
||||
const newValue = args[0];
|
||||
const $el = $(el);
|
||||
if ($el.data('value') !== newValue) {
|
||||
set_value($(el), newValue);
|
||||
}
|
||||
}
|
||||
else if (behavior === 'get_value') {
|
||||
returnValues.push($(el).data('value'));
|
||||
}
|
||||
else if (behavior === 'get_id') {
|
||||
returnValues.push($(el).data('id'));
|
||||
}
|
||||
}
|
||||
if (returnValues.length > 0) {
|
||||
return returnValues.length === 1 ? returnValues[0] : returnValues;
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
@ -60,6 +60,7 @@ var Helper = new Helper_class();
|
||||
};
|
||||
|
||||
const on_mouse_down_secondary_pick = (event) => {
|
||||
event.preventDefault();
|
||||
const $el = $(event.target.closest('.ui_color_picker_gradient'));
|
||||
const { secondaryPick, secondaryPickHandle, hsv } = $el.data();
|
||||
const clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
|
||||
@ -140,6 +141,7 @@ var Helper = new Helper_class();
|
||||
|
||||
const id = definition.id != null ? definition.id : el.getAttribute('id');
|
||||
const label = definition.label != null ? definition.label : el.getAttribute('aria-label');
|
||||
const hsv = definition.hsv || { h: 0, s: 0, v: 0 };
|
||||
|
||||
$(el).after(template);
|
||||
const oldEl = el;
|
||||
@ -178,9 +180,11 @@ var Helper = new Helper_class();
|
||||
primaryRange: $primaryRange[0],
|
||||
secondaryPick,
|
||||
secondaryPickHandle: $el.find('.secondary_pick .handle')[0],
|
||||
hsv: { h: 0, s: 0, v: 0 }
|
||||
hsv
|
||||
});
|
||||
|
||||
set_hsv($el, hsv);
|
||||
|
||||
$(secondaryPick).on('keydown', on_key_down_secondary_pick);
|
||||
$(secondaryPick).on('mousedown touchstart', on_mouse_down_secondary_pick);
|
||||
$(secondaryPick).on('touchmove', on_touch_move_secondary_pick);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
|
||||
import './color-input.js';
|
||||
import './color-picker-gradient.js';
|
||||
import './number-input.js';
|
||||
import './range.js';
|
||||
|
||||
@ -1,233 +1,234 @@
|
||||
|
||||
(function ($) {
|
||||
|
||||
const template = `
|
||||
<div class="ui_range" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
|
||||
<div class="padded_track"></div>
|
||||
<div class="bar">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const template = `
|
||||
<div class="ui_range" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
|
||||
<div class="padded_track"></div>
|
||||
<div class="bar">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const on_keydown_range = (event) => {
|
||||
const $el = $(event.target.closest('.ui_range'));
|
||||
const key = event.key;
|
||||
const { value, step, min, max } = $el.data();
|
||||
if (['Left', 'ArrowLeft', 'Down', 'ArrowDown'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value - step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Right', 'ArrowRight', 'Up', 'ArrowUp'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value + step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['PageUp'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value + (step * 10));
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['PageDown'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value - (step * 10));
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Home'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, min);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['End'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, max);
|
||||
$el.trigger('input');
|
||||
}
|
||||
};
|
||||
const on_keydown_range = (event) => {
|
||||
const $el = $(event.target.closest('.ui_range'));
|
||||
const key = event.key;
|
||||
const { value, step, min, max } = $el.data();
|
||||
if (['Left', 'ArrowLeft', 'Down', 'ArrowDown'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value - step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Right', 'ArrowRight', 'Up', 'ArrowUp'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value + step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['PageUp'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value + (step * 10));
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['PageDown'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, value - (step * 10));
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Home'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, min);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['End'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_value($el, max);
|
||||
$el.trigger('input');
|
||||
}
|
||||
};
|
||||
|
||||
const on_wheel_range = (event) => {
|
||||
const $el = $(event.target.closest('.ui_range'));
|
||||
if (document.activeElement === $el[0]) {
|
||||
const { value, step } = $el.data();
|
||||
if (event.originalEvent.deltaY < 0) {
|
||||
event.preventDefault();
|
||||
set_value($el, value + step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (event.originalEvent.deltaY > 0) {
|
||||
event.preventDefault();
|
||||
set_value($el, value - step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
}
|
||||
};
|
||||
const on_wheel_range = (event) => {
|
||||
const $el = $(event.target.closest('.ui_range'));
|
||||
if (document.activeElement === $el[0]) {
|
||||
const { value, step } = $el.data();
|
||||
if (event.originalEvent.deltaY < 0) {
|
||||
event.preventDefault();
|
||||
set_value($el, value + step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (event.originalEvent.deltaY > 0) {
|
||||
event.preventDefault();
|
||||
set_value($el, value - step);
|
||||
$el.trigger('input');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const on_mouse_down_range = (event) => {
|
||||
const target = event.touches && event.touches.length > 0 ? event.touches[0].target : event.target;
|
||||
const $el = $(target.closest('.ui_range'));
|
||||
const { handle, paddedTrack, value, min, max, vertical } = $el.data();
|
||||
const mouseDownClientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
|
||||
const mouseDownClientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
|
||||
const mouseDownPaddedTrackRect = paddedTrack.getBoundingClientRect();
|
||||
let mouseDownValue = value;
|
||||
if (target !== handle) {
|
||||
let range, valueInRange;
|
||||
if (vertical) {
|
||||
range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
|
||||
valueInRange = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
|
||||
} else {
|
||||
range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
|
||||
valueInRange = mouseDownClientX - mouseDownPaddedTrackRect.left;
|
||||
}
|
||||
const ratio = Math.max(0, Math.min(1, valueInRange / range));
|
||||
mouseDownValue = (max - min) * ratio;
|
||||
set_value($el, mouseDownValue);
|
||||
$el.trigger('input');
|
||||
}
|
||||
$el.data({
|
||||
mouseDownValue,
|
||||
mouseDownClientX,
|
||||
mouseDownClientY,
|
||||
mouseDownPaddedTrackRect,
|
||||
mouseMoveWindowHandler: generate_on_mouse_move_window($el),
|
||||
mouseUpWindowHandler: generate_on_mouse_up_window($el)
|
||||
});
|
||||
$el.addClass('active');
|
||||
const $window = $(window);
|
||||
$window.on('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
|
||||
$window.on('mouseup touchend', $el.data('mouseUpWindowHandler'));
|
||||
$el[0].focus();
|
||||
};
|
||||
const on_mouse_down_range = (event) => {
|
||||
event.preventDefault();
|
||||
const target = event.touches && event.touches.length > 0 ? event.touches[0].target : event.target;
|
||||
const $el = $(target.closest('.ui_range'));
|
||||
const { handle, paddedTrack, value, min, max, vertical } = $el.data();
|
||||
const mouseDownClientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
|
||||
const mouseDownClientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
|
||||
const mouseDownPaddedTrackRect = paddedTrack.getBoundingClientRect();
|
||||
let mouseDownValue = value;
|
||||
if (target !== handle) {
|
||||
let range, valueInRange;
|
||||
if (vertical) {
|
||||
range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
|
||||
valueInRange = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
|
||||
} else {
|
||||
range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
|
||||
valueInRange = mouseDownClientX - mouseDownPaddedTrackRect.left;
|
||||
}
|
||||
const ratio = Math.max(0, Math.min(1, valueInRange / range));
|
||||
mouseDownValue = (max - min) * ratio;
|
||||
set_value($el, mouseDownValue);
|
||||
$el.trigger('input');
|
||||
}
|
||||
$el.data({
|
||||
mouseDownValue,
|
||||
mouseDownClientX,
|
||||
mouseDownClientY,
|
||||
mouseDownPaddedTrackRect,
|
||||
mouseMoveWindowHandler: generate_on_mouse_move_window($el),
|
||||
mouseUpWindowHandler: generate_on_mouse_up_window($el)
|
||||
});
|
||||
$el.addClass('active');
|
||||
const $window = $(window);
|
||||
$window.on('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
|
||||
$window.on('mouseup touchend', $el.data('mouseUpWindowHandler'));
|
||||
$el[0].focus();
|
||||
};
|
||||
|
||||
const on_touch_move_range = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
const on_touch_move_range = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const generate_on_mouse_move_window = ($el) => {
|
||||
return (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const { mouseDownValue, min, max, vertical, mouseDownClientX, mouseDownClientY, mouseDownPaddedTrackRect } = $el.data();
|
||||
let range, offset, startValue;
|
||||
if (vertical) {
|
||||
const clientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
|
||||
range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
|
||||
const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
|
||||
startValue = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
|
||||
offset = clientY - mouseDownClientY + (mouseDownValueInPixelRange - startValue);
|
||||
} else {
|
||||
const clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
|
||||
range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
|
||||
const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
|
||||
startValue = mouseDownClientX - mouseDownPaddedTrackRect.left;
|
||||
offset = clientX - mouseDownClientX + (mouseDownValueInPixelRange - startValue);
|
||||
}
|
||||
const ratio = Math.max(0, Math.min(1, (startValue + offset) / range));
|
||||
const value = (max - min) * ratio;
|
||||
set_value($el, value);
|
||||
$el.trigger('input');
|
||||
};
|
||||
};
|
||||
const generate_on_mouse_move_window = ($el) => {
|
||||
return (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const { mouseDownValue, min, max, vertical, mouseDownClientX, mouseDownClientY, mouseDownPaddedTrackRect } = $el.data();
|
||||
let range, offset, startValue;
|
||||
if (vertical) {
|
||||
const clientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
|
||||
range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
|
||||
const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
|
||||
startValue = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
|
||||
offset = clientY - mouseDownClientY + (mouseDownValueInPixelRange - startValue);
|
||||
} else {
|
||||
const clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
|
||||
range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
|
||||
const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
|
||||
startValue = mouseDownClientX - mouseDownPaddedTrackRect.left;
|
||||
offset = clientX - mouseDownClientX + (mouseDownValueInPixelRange - startValue);
|
||||
}
|
||||
const ratio = Math.max(0, Math.min(1, (startValue + offset) / range));
|
||||
const value = (max - min) * ratio;
|
||||
set_value($el, value);
|
||||
$el.trigger('input');
|
||||
};
|
||||
};
|
||||
|
||||
const generate_on_mouse_up_window = ($el) => {
|
||||
return (event) => {
|
||||
const $window = $(window);
|
||||
$el.removeClass('active');
|
||||
$window.off('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
|
||||
$window.off('mouseup touchend', $el.data('mouseUpWindowHandler'));
|
||||
};
|
||||
};
|
||||
const generate_on_mouse_up_window = ($el) => {
|
||||
return (event) => {
|
||||
const $window = $(window);
|
||||
$el.removeClass('active');
|
||||
$window.off('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
|
||||
$window.off('mouseup touchend', $el.data('mouseUpWindowHandler'));
|
||||
};
|
||||
};
|
||||
|
||||
const set_value = ($el, value) => {
|
||||
const { bar, min, max, step, vertical } = $el.data();
|
||||
value = step * Math.round(value / step);
|
||||
value = Math.max(min, Math.min(max, value));
|
||||
$el.data('value', value);
|
||||
$el.attr('aria-valuemin', min);
|
||||
$el.attr('aria-valuemax', max);
|
||||
$el.attr('aria-valuenow', value);
|
||||
if (vertical) {
|
||||
bar.style.height = (((value - min) / (max - min)) * 100) + '%';
|
||||
} else {
|
||||
bar.style.width = (((value - min) / (max - min)) * 100) + '%';
|
||||
}
|
||||
};
|
||||
const set_value = ($el, value) => {
|
||||
const { bar, min, max, step, vertical } = $el.data();
|
||||
value = step * Math.round(value / step);
|
||||
value = Math.max(min, Math.min(max, value));
|
||||
$el.data('value', value);
|
||||
$el.attr('aria-valuemin', min);
|
||||
$el.attr('aria-valuemax', max);
|
||||
$el.attr('aria-valuenow', value);
|
||||
if (vertical) {
|
||||
bar.style.height = (((value - min) / (max - min)) * 100) + '%';
|
||||
} else {
|
||||
bar.style.width = (((value - min) / (max - min)) * 100) + '%';
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.uiRange = function(behavior, ...args) {
|
||||
let returnValues = [];
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
let el = this[i];
|
||||
let returnValues = [];
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
let el = this[i];
|
||||
|
||||
// Constructor
|
||||
if (Object.prototype.toString.call(behavior) !== '[object String]') {
|
||||
const definition = behavior || {};
|
||||
// Constructor
|
||||
if (Object.prototype.toString.call(behavior) !== '[object String]') {
|
||||
const definition = behavior || {};
|
||||
|
||||
const classList = el.className;
|
||||
const id = definition.id != null ? definition.id : el.getAttribute('id');
|
||||
const value = definition.value != null ? definition.value : parseFloat(el.value) || 0;
|
||||
const min = definition.min != null ? definition.min : parseFloat(el.getAttribute('min')) || 0;
|
||||
const max = definition.max != null ? definition.max : parseFloat(el.getAttribute('max')) || 0;
|
||||
const step = definition.step != null ? definition.step : el.hasAttribute('step') ? parseFloat(el.getAttribute('step')) : 1;
|
||||
const vertical = !!definition.vertical;
|
||||
const classList = el.className;
|
||||
const id = definition.id != null ? definition.id : el.getAttribute('id');
|
||||
const value = definition.value != null ? definition.value : parseFloat(el.value) || 0;
|
||||
const min = definition.min != null ? definition.min : parseFloat(el.getAttribute('min')) || 0;
|
||||
const max = definition.max != null ? definition.max : parseFloat(el.getAttribute('max')) || 0;
|
||||
const step = definition.step != null ? definition.step : el.hasAttribute('step') ? parseFloat(el.getAttribute('step')) : 1;
|
||||
const vertical = !!definition.vertical;
|
||||
|
||||
$(el).after(template);
|
||||
const oldEl = el;
|
||||
el = el.nextElementSibling;
|
||||
$(oldEl).remove();
|
||||
this[i] = el;
|
||||
const $el = $(el);
|
||||
$(el).after(template);
|
||||
const oldEl = el;
|
||||
el = el.nextElementSibling;
|
||||
$(oldEl).remove();
|
||||
this[i] = el;
|
||||
const $el = $(el);
|
||||
|
||||
if (classList) {
|
||||
el.classList.add(classList);
|
||||
}
|
||||
if (vertical) {
|
||||
el.classList.add('vertical');
|
||||
}
|
||||
if (id) {
|
||||
el.setAttribute('id', id);
|
||||
}
|
||||
if (classList) {
|
||||
el.classList.add(classList);
|
||||
}
|
||||
if (vertical) {
|
||||
el.classList.add('vertical');
|
||||
}
|
||||
if (id) {
|
||||
el.setAttribute('id', id);
|
||||
}
|
||||
|
||||
$el.data({
|
||||
paddedTrack: $('.padded_track', el).get(0),
|
||||
bar: $('.bar', el).get(0),
|
||||
handle: $('.handle', el).get(0),
|
||||
vertical,
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
step
|
||||
});
|
||||
$el.data({
|
||||
paddedTrack: $('.padded_track', el).get(0),
|
||||
bar: $('.bar', el).get(0),
|
||||
handle: $('.handle', el).get(0),
|
||||
vertical,
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
step
|
||||
});
|
||||
|
||||
set_value($el, value);
|
||||
set_value($el, value);
|
||||
|
||||
$el
|
||||
.on('mousedown touchstart', on_mouse_down_range)
|
||||
.on('touchmove', on_touch_move_range)
|
||||
.on('keydown', on_keydown_range)
|
||||
.on('wheel', on_wheel_range);
|
||||
}
|
||||
// Behaviors
|
||||
else if (behavior === 'set_background') {
|
||||
const backgroundStyle = args[0];
|
||||
$(el).data('paddedTrack').style.background = backgroundStyle;
|
||||
}
|
||||
else if (behavior === 'set_value') {
|
||||
const newValue = parseFloat(args[0]);
|
||||
const $el = $(el);
|
||||
if ($el.data('value') !== newValue) {
|
||||
set_value($(el), newValue);
|
||||
}
|
||||
}
|
||||
else if (behavior === 'get_value') {
|
||||
returnValues.push($(el).data('value'));
|
||||
}
|
||||
}
|
||||
if (returnValues.length > 0) {
|
||||
return returnValues.length === 1 ? returnValues[0] : returnValues;
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
$el
|
||||
.on('mousedown touchstart', on_mouse_down_range)
|
||||
.on('touchmove', on_touch_move_range)
|
||||
.on('keydown', on_keydown_range)
|
||||
.on('wheel', on_wheel_range);
|
||||
}
|
||||
// Behaviors
|
||||
else if (behavior === 'set_background') {
|
||||
const backgroundStyle = args[0];
|
||||
$(el).data('paddedTrack').style.background = backgroundStyle;
|
||||
}
|
||||
else if (behavior === 'set_value') {
|
||||
const newValue = parseFloat(args[0]);
|
||||
const $el = $(el);
|
||||
if ($el.data('value') !== newValue) {
|
||||
set_value($(el), newValue);
|
||||
}
|
||||
}
|
||||
else if (behavior === 'get_value') {
|
||||
returnValues.push($(el).data('value'));
|
||||
}
|
||||
}
|
||||
if (returnValues.length > 0) {
|
||||
return returnValues.length === 1 ? returnValues[0] : returnValues;
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@ -1,135 +1,170 @@
|
||||
(function ($) {
|
||||
|
||||
const template = `
|
||||
<div class="ui_swatches">
|
||||
const template = `
|
||||
<div class="ui_swatches">
|
||||
<div class="swatch_group" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const on_key_down_swatches = (event) => {
|
||||
const $el = $(event.target.closest('.ui_swatches'));
|
||||
const key = event.key;
|
||||
const { rows, count, selectedIndex } = $el.data();
|
||||
if (['Left', 'ArrowLeft'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex - 1);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Right', 'ArrowRight'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex + 1);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Up', 'ArrowUp'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex - Math.floor(count / rows));
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Down', 'ArrowDown'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex + Math.floor(count / rows));
|
||||
$el.trigger('input');
|
||||
}
|
||||
};
|
||||
const on_key_down_swatches = (event) => {
|
||||
const $el = $(event.target.closest('.ui_swatches'));
|
||||
const key = event.key;
|
||||
const { rows, count, selectedIndex } = $el.data();
|
||||
if (['Left', 'ArrowLeft'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex - 1);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Right', 'ArrowRight'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex + 1);
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Up', 'ArrowUp'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex - Math.floor(count / rows));
|
||||
$el.trigger('input');
|
||||
}
|
||||
else if (['Down', 'ArrowDown'].includes(key)) {
|
||||
event.preventDefault();
|
||||
set_selected_index($el, selectedIndex + Math.floor(count / rows));
|
||||
$el.trigger('input');
|
||||
}
|
||||
};
|
||||
|
||||
const on_click_swatches = (event) => {
|
||||
const target = event.target;
|
||||
const $el = $(target.closest('.ui_swatches'));
|
||||
if (target.classList.contains('swatch')) {
|
||||
const { swatches } = $el.data();
|
||||
set_selected_index($el, swatches.indexOf(target));
|
||||
$el.trigger('input');
|
||||
}
|
||||
};
|
||||
const on_click_swatches = (event) => {
|
||||
const target = event.target;
|
||||
const $el = $(target.closest('.ui_swatches'));
|
||||
if (target.classList.contains('swatch')) {
|
||||
const { swatches } = $el.data();
|
||||
set_selected_index($el, swatches.indexOf(target));
|
||||
$el.trigger('input');
|
||||
}
|
||||
};
|
||||
|
||||
const set_selected_index = ($el, index) => {
|
||||
const { swatches } = $el.data();
|
||||
if (swatches[index]) {
|
||||
$el.find('.active').removeClass('active');
|
||||
$el.data('selectedIndex', index);
|
||||
$(swatches[index]).addClass('active');
|
||||
}
|
||||
};
|
||||
const set_selected_index = ($el, index) => {
|
||||
const { readonly, swatches } = $el.data();
|
||||
if (swatches[index]) {
|
||||
$el.data('selectedIndex', index);
|
||||
if (!readonly) {
|
||||
$el.find('.active').removeClass('active');
|
||||
$(swatches[index]).addClass('active');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const set_selected_hex = ($el, hex) => {
|
||||
const { selectedIndex, swatches } = $el.data();
|
||||
if (/^\#[0-9A-F]{6}$/gi.test(hex)) {
|
||||
const swatch = swatches[selectedIndex];
|
||||
$(swatch)
|
||||
.data('hex', hex)
|
||||
.css('background-color', hex);
|
||||
}
|
||||
};
|
||||
const set_selected_hex = ($el, hex) => {
|
||||
const { selectedIndex, swatches } = $el.data();
|
||||
if (/^\#[0-9A-F]{6}$/gi.test(hex)) {
|
||||
const swatch = swatches[selectedIndex];
|
||||
$(swatch)
|
||||
.data('hex', hex)
|
||||
.css('background-color', hex);
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.uiSwatches = function(behavior, ...args) {
|
||||
let returnValues = [];
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
let el = this[i];
|
||||
const set_all_hex = ($el, hexArray) => {
|
||||
hexArray = hexArray || [];
|
||||
const { swatches } = $el.data();
|
||||
for (let i = 0; i < swatches.length; i++) {
|
||||
if (hexArray[i]) {
|
||||
const hex = hexArray[i];
|
||||
if (/^\#[0-9A-F]{6}$/gi.test(hex)) {
|
||||
$(swatches[i])
|
||||
.data('hex', hex)
|
||||
.css('background-color', hex);
|
||||
}
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Constructor
|
||||
if (Object.prototype.toString.call(behavior) !== '[object String]') {
|
||||
const definition = behavior || {};
|
||||
$.fn.uiSwatches = function(behavior, ...args) {
|
||||
let returnValues = [];
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
let el = this[i];
|
||||
|
||||
const id = definition.id != null ? definition.id : el.getAttribute('id');
|
||||
const rows = definition.rows || 1;
|
||||
const count = definition.count || 10;
|
||||
const selectedIndex = definition.selectedIndex != null ? definition.selectedIndex : 0;
|
||||
// Constructor
|
||||
if (Object.prototype.toString.call(behavior) !== '[object String]') {
|
||||
const definition = behavior || {};
|
||||
|
||||
$(el).after(template);
|
||||
const oldEl = el;
|
||||
el = el.nextElementSibling;
|
||||
$(oldEl).remove();
|
||||
this[i] = el;
|
||||
const id = definition.id != null ? definition.id : el.getAttribute('id');
|
||||
const cols = definition.cols;
|
||||
const rows = definition.rows || 1;
|
||||
const count = definition.count || 10;
|
||||
const readonly = definition.readonly || false;
|
||||
const selectedIndex = definition.selectedIndex != null ? definition.selectedIndex : 0;
|
||||
|
||||
const $el = $(el);
|
||||
$(el).after(template);
|
||||
const oldEl = el;
|
||||
el = el.nextElementSibling;
|
||||
$(oldEl).remove();
|
||||
this[i] = el;
|
||||
|
||||
const swatchGroup = $el.find('.swatch_group')[0];
|
||||
const $el = $(el);
|
||||
|
||||
if (id) {
|
||||
el.setAttribute('id', id);
|
||||
}
|
||||
swatchGroup.classList.add('rows_' + rows);
|
||||
const swatchGroup = $el.find('.swatch_group')[0];
|
||||
|
||||
const swatches = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const swatch = document.createElement('div');
|
||||
swatch.classList.add('swatch');
|
||||
$(swatch).data('hex', '#ffffff');
|
||||
swatches.push(swatch);
|
||||
swatchGroup.appendChild(swatch);
|
||||
if (i === selectedIndex) {
|
||||
swatch.classList.add('active');
|
||||
}
|
||||
}
|
||||
if (id) {
|
||||
el.setAttribute('id', id);
|
||||
}
|
||||
if (cols) {
|
||||
swatchGroup.classList.add('cols_' + cols);
|
||||
}
|
||||
swatchGroup.classList.add('rows_' + rows);
|
||||
|
||||
$el.data({
|
||||
selectedIndex,
|
||||
swatchGroup,
|
||||
swatches,
|
||||
count,
|
||||
rows
|
||||
});
|
||||
const swatches = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const swatch = document.createElement('div');
|
||||
swatch.classList.add('swatch');
|
||||
$(swatch).data('hex', '#ffffff');
|
||||
swatches.push(swatch);
|
||||
swatchGroup.appendChild(swatch);
|
||||
if (i === selectedIndex && !readonly) {
|
||||
swatch.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
$el
|
||||
.on('click', on_click_swatches)
|
||||
.on('keydown', on_key_down_swatches);
|
||||
}
|
||||
// Behaviors
|
||||
else if (behavior === 'set_selected_hex') {
|
||||
const newValue = args[0] + '';
|
||||
set_selected_hex($(el), newValue);
|
||||
}
|
||||
else if (behavior === 'get_selected_hex') {
|
||||
const { selectedIndex, swatches } = $(el).data();
|
||||
returnValues.push($(swatches[selectedIndex]).data('hex'));
|
||||
}
|
||||
}
|
||||
if (returnValues.length > 0) {
|
||||
return returnValues.length === 1 ? returnValues[0] : returnValues;
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
$el.data({
|
||||
selectedIndex,
|
||||
swatchGroup,
|
||||
swatches,
|
||||
count,
|
||||
cols,
|
||||
rows,
|
||||
readonly
|
||||
});
|
||||
|
||||
$el
|
||||
.on('click', on_click_swatches)
|
||||
.on('keydown', on_key_down_swatches);
|
||||
}
|
||||
// Behaviors
|
||||
else if (behavior === 'set_selected_hex') {
|
||||
const newValue = args[0] + '';
|
||||
set_selected_hex($(el), newValue);
|
||||
}
|
||||
else if (behavior === 'get_selected_hex') {
|
||||
const { selectedIndex, swatches } = $(el).data();
|
||||
returnValues.push($(swatches[selectedIndex]).data('hex'));
|
||||
}
|
||||
else if (behavior === 'set_all_hex') {
|
||||
set_all_hex($(el), args[0]);
|
||||
}
|
||||
else if (behavior === 'get_all_hex') {
|
||||
const { swatches } = $(el).data();
|
||||
for (let swatch of swatches) {
|
||||
returnValues.push($(swatch).data('hex'));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (returnValues.length > 0) {
|
||||
return returnValues.length === 1 ? returnValues[0] : returnValues;
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@ -6,9 +6,9 @@
|
||||
import config from './../../config.js';
|
||||
import Helper_class from './../../libs/helpers.js';
|
||||
|
||||
var Helper = new Helper_class();
|
||||
const Helper = new Helper_class();
|
||||
|
||||
var template = `
|
||||
const sidebarTemplate = `
|
||||
<div class="ui_flex_group justify_content_space_between stacked">
|
||||
<div id="selected_color_sample" class="ui_color_sample" title="Current Color Preview"></div>
|
||||
<div class="ui_button_group">
|
||||
@ -95,6 +95,74 @@ var template = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
const dialogTemplate = `
|
||||
<div class="ui_flex_group">
|
||||
<div id="dialog_color_picker_group" class="ui_flex_group column">
|
||||
<input id="dialog_color_picker_gradient" type="color" aria-label="Color Selection">
|
||||
<div class="block_section">
|
||||
<div class="ui_input_grid stacked">
|
||||
<div class="ui_input_group">
|
||||
<label class="label_width_medium">Current</label>
|
||||
<div id="dialog_selected_color_sample" class="ui_color_sample"></div>
|
||||
</div>
|
||||
<div class="ui_input_group">
|
||||
<label class="label_width_medium">Previous</label>
|
||||
<div id="dialog_previous_color_sample" class="ui_color_sample"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialog_color_channel_group">
|
||||
<div class="ui_input_group stacked">
|
||||
<label id="dialog_color_hex_label" title="Hex" class="label_width_small">Hex</label>
|
||||
<input id="dialog_color_hex" aria-labelledby="dialog_color_hex_label" value="#000000" maxlength="7" type="text" />
|
||||
</div>
|
||||
<div class="ui_input_grid stacked">
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_rgb_r_label" title="Red" class="label_width_character text_red"><strong>R<span class="sr_only">ed</span></strong></label>
|
||||
<input id="dialog_rgb_r_range" aria-labelledby="dialog_rgb_r_label" type="range" min="0" max="255" class="color_picker" />
|
||||
<input id="dialog_rgb_r" min="0" aria-labelledby="dialog_rgb_r_label" max="255" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_rgb_g_label" title="Green" class="label_width_character text_green"><strong>G<span class="sr_only">reen</span></strong></label>
|
||||
<input id="dialog_rgb_g_range" aria-labelledby="dialog_rgb_g_label" type="range" min="0" max="255" class="color_picker" />
|
||||
<input id="dialog_rgb_g" min="0" aria-labelledby="dialog_rgb_g_label" max="255" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_rgb_b_label" title="Blue" class="label_width_character text_blue"><strong>B<span class="sr_only">lue</span></strong></label>
|
||||
<input id="dialog_rgb_b_range" aria-labelledby="dialog_rgb_b_label" type="range" min="0" max="255" class="color_picker" />
|
||||
<input id="dialog_rgb_b" min="0" aria-labelledby="dialog_rgb_b_label" max="255" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_rgb_a_label" title="Alpha" class="label_width_character text_muted"><strong>A<span class="sr_only">lpha</span></strong></label>
|
||||
<input id="dialog_rgb_a_range" aria-labelledby="dialog_rgb_a_label" type="range" min="0" max="255" class="color_picker" />
|
||||
<input id="dialog_rgb_a" min="0" aria-labelledby="dialog_rgb_a_label" max="255" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui_input_grid stacked">
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_hsl_h_label" title="Hue" class="label_width_character"><strong>H<span class="sr_only">ue</span></strong></label>
|
||||
<input id="dialog_hsl_h_range" aria-labelledby="dialog_hsl_h_label" type="range" min="0" max="360" class="color_picker" />
|
||||
<input id="dialog_hsl_h" min="0" aria-labelledby="dialog_hsl_h_label" max="360" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_hsl_s_label" title="Saturation" class="label_width_character"><strong>S<span class="sr_only">aturation</span></strong></label>
|
||||
<input id="dialog_hsl_s_range" aria-labelledby="dialog_hsl_s_label" type="range" min="0" max="100" class="color_picker" />
|
||||
<input id="dialog_hsl_s" min="0" aria-labelledby="dialog_hsl_s_label"max="100" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
<div class="ui_input_group">
|
||||
<label id="dialog_hsl_l_label" title="Luminosity" class="label_width_character"><strong>L<span class="sr_only">uminosity</span></strong></label>
|
||||
<input id="dialog_hsl_l_range" aria-labelledby="dialog_hsl_l_label" type="range" min="0" max="100" class="color_picker" />
|
||||
<input id="dialog_hsl_l" min="0" aria-labelledby="dialog_hsl_l_label"max="100" type="number" class="input_cw_3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_section">
|
||||
<div id="dialog_color_swatches"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
/**
|
||||
* GUI class responsible for rendering colors block on right sidebar
|
||||
*/
|
||||
@ -102,77 +170,86 @@ class GUI_colors_class {
|
||||
|
||||
constructor() {
|
||||
this.el = null;
|
||||
this.COLOR = '#000000';
|
||||
this.ALPHA = 255;
|
||||
this.colorNotSet = true;
|
||||
this.uiType = null;
|
||||
this.butons = null;
|
||||
this.sections = null;
|
||||
this.inputs = null;
|
||||
this.Helper = new Helper_class();
|
||||
}
|
||||
|
||||
render_main_colors() {
|
||||
var saved_color = this.Helper.getCookie('color');
|
||||
if(saved_color != null)
|
||||
config.COLOR = saved_color;
|
||||
|
||||
this.el = document.getElementById('toggle_colors');
|
||||
this.el.innerHTML = template;
|
||||
render_main_colors(uiType) {
|
||||
this.uiType = uiType || 'sidebar';
|
||||
if (this.uiType === 'dialog') {
|
||||
this.el = document.getElementById('dialog_color_picker');
|
||||
this.el.innerHTML = dialogTemplate;
|
||||
} else {
|
||||
var saved_color = this.Helper.getCookie('color');
|
||||
if (saved_color != null) config.COLOR = saved_color;
|
||||
this.el = document.getElementById('toggle_colors');
|
||||
this.el.innerHTML = sidebarTemplate;
|
||||
}
|
||||
this.init_components();
|
||||
this.render_range_gradients = Helper.throttle(this.render_range_gradients, 50);
|
||||
this.render_ui_deferred = Helper.throttle(this.render_ui_deferred, 50);
|
||||
}
|
||||
|
||||
init_components() {
|
||||
// Store button references
|
||||
this.buttons = {
|
||||
toggleColorSwatches: $('#toggle_color_swatches_section_button'),
|
||||
toggleColorPicker: $('#toggle_color_picker_section_button'),
|
||||
toggleColorChannels: $('#toggle_color_channels_section_button')
|
||||
toggleColorSwatches: $('#toggle_color_swatches_section_button', this.el),
|
||||
toggleColorPicker: $('#toggle_color_picker_section_button', this.el),
|
||||
toggleColorChannels: $('#toggle_color_channels_section_button', this.el)
|
||||
};
|
||||
|
||||
// Store UI section references
|
||||
this.sections = {
|
||||
swatches: $('#color_section_swatches'),
|
||||
swatches: $('#color_section_swatches', this.el),
|
||||
swatchesPlaceholder: document.createComment('Placeholder comment for color swatches'),
|
||||
picker: $('#color_section_picker'),
|
||||
picker: $('#color_section_picker', this.el),
|
||||
pickerPlaceholder: document.createComment('Placeholder comment for color picker'),
|
||||
channels: $('#color_section_channels'),
|
||||
channels: $('#color_section_channels', this.el),
|
||||
channelsPlaceholder: document.createComment('Placeholder comment for color channels')
|
||||
};
|
||||
|
||||
// Store references to all inputs in DOM
|
||||
const idPrefix = this.uiType === 'dialog' ? 'dialog_' : '';
|
||||
this.inputs = {
|
||||
sample: $('#selected_color_sample'),
|
||||
swatches: $('#color_swatches'),
|
||||
pickerGradient: $('#color_picker_gradient'),
|
||||
hex: $('#color_hex'),
|
||||
sample: $(`#${idPrefix}selected_color_sample`, this.el),
|
||||
swatches: $(`#${idPrefix}color_swatches`, this.el),
|
||||
pickerGradient: $(`#${idPrefix}color_picker_gradient`, this.el),
|
||||
hex: $(`#${idPrefix}color_hex`, this.el),
|
||||
rgb: {
|
||||
r: {
|
||||
range: $('#rgb_r_range'),
|
||||
number: $('#rgb_r')
|
||||
range: $(`#${idPrefix}rgb_r_range`, this.el),
|
||||
number: $(`#${idPrefix}rgb_r`, this.el)
|
||||
},
|
||||
g: {
|
||||
range: $('#rgb_g_range'),
|
||||
number: $('#rgb_g')
|
||||
range: $(`#${idPrefix}rgb_g_range`, this.el),
|
||||
number: $(`#${idPrefix}rgb_g`, this.el)
|
||||
},
|
||||
b: {
|
||||
range: $('#rgb_b_range'),
|
||||
number: $('#rgb_b')
|
||||
range: $(`#${idPrefix}rgb_b_range`, this.el),
|
||||
number: $(`#${idPrefix}rgb_b`, this.el)
|
||||
},
|
||||
a: {
|
||||
range: $('#rgb_a_range'),
|
||||
number: $('#rgb_a')
|
||||
range: $(`#${idPrefix}rgb_a_range`, this.el),
|
||||
number: $(`#${idPrefix}rgb_a`, this.el)
|
||||
}
|
||||
},
|
||||
hsl: {
|
||||
h: {
|
||||
range: $('#hsl_h_range'),
|
||||
number: $('#hsl_h')
|
||||
range: $(`#${idPrefix}hsl_h_range`, this.el),
|
||||
number: $(`#${idPrefix}hsl_h`, this.el)
|
||||
},
|
||||
s: {
|
||||
range: $('#hsl_s_range'),
|
||||
number: $('#hsl_s')
|
||||
range: $(`#${idPrefix}hsl_s_range`, this.el),
|
||||
number: $(`#${idPrefix}hsl_s`, this.el)
|
||||
},
|
||||
l: {
|
||||
range: $('#hsl_l_range'),
|
||||
number: $('#hsl_l')
|
||||
range: $(`#${idPrefix}hsl_l_range`, this.el),
|
||||
number: $(`#${idPrefix}hsl_l`, this.el)
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -239,12 +316,15 @@ class GUI_colors_class {
|
||||
|
||||
// Initialize color swatches
|
||||
this.inputs.swatches
|
||||
.uiSwatches({ rows: 3, count: 21 })
|
||||
.uiSwatches({ rows: 3, cols: 7, count: 21, readonly: this.uiType === 'dialog' })
|
||||
.on('input', () => {
|
||||
this.set_color({
|
||||
hex: this.inputs.swatches.uiSwatches('get_selected_hex')
|
||||
});
|
||||
});
|
||||
if (this.uiType === 'dialog') {
|
||||
this.inputs.swatches.uiSwatches('set_all_hex', config.swatches.default);
|
||||
}
|
||||
|
||||
// Initialize color picker gradient
|
||||
this.inputs.pickerGradient
|
||||
@ -260,7 +340,8 @@ class GUI_colors_class {
|
||||
|
||||
// Initialize hex entry
|
||||
this.inputs.hex
|
||||
.on('input', () => {
|
||||
.on('input', (event) => {
|
||||
console.log(event);
|
||||
const value = this.inputs.hex.val();
|
||||
const trimmedValue = value.trim();
|
||||
if (value !== trimmedValue) {
|
||||
@ -272,7 +353,7 @@ class GUI_colors_class {
|
||||
.on('blur', () => {
|
||||
const value = this.inputs.hex.val();
|
||||
if (!/^\#[0-9A-F]{6}$/gi.test(value)) {
|
||||
this.inputs.hex.val(config.COLOR);
|
||||
this.inputs.hex.val(this.uiType === 'dialog' ? this.COLOR : config.COLOR);
|
||||
this.inputs.hex[0].setCustomValidity('');
|
||||
}
|
||||
});
|
||||
@ -296,7 +377,7 @@ class GUI_colors_class {
|
||||
}
|
||||
|
||||
// Update all inputs from config.COLOR
|
||||
this.render_config_color();
|
||||
this.render_selected_color();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -322,7 +403,7 @@ class GUI_colors_class {
|
||||
}
|
||||
// Set new color by rgb
|
||||
else if ('r' in definition || 'b' in definition || 'g' in definition) {
|
||||
const previousRgb = Helper.hexToRgb(config.COLOR);
|
||||
const previousRgb = Helper.hexToRgb(this.uiType === 'dialog' ? this.COLOR : config.COLOR);
|
||||
newColor = Helper.rgbToHex(
|
||||
'r' in definition ? Math.min(255, Math.max(0, parseInt(definition.r, 10) || 0)) : previousRgb.r,
|
||||
'g' in definition ? Math.min(255, Math.max(0, parseInt(definition.g, 10) || 0)) : previousRgb.g,
|
||||
@ -331,7 +412,7 @@ class GUI_colors_class {
|
||||
}
|
||||
// Set new color by hsv
|
||||
else if ('v' in definition) {
|
||||
const previousRgb = Helper.hexToRgb(config.COLOR);
|
||||
const previousRgb = Helper.hexToRgb(this.uiType === 'dialog' ? this.COLOR : config.COLOR);
|
||||
const previousHsv = Helper.rgbToHsv(previousRgb.r, previousRgb.g, previousRgb.b);
|
||||
hsv = {
|
||||
h: 'h' in definition ? Math.min(360, Math.max(0, parseInt(definition.h, 10) || 0)) / 360 : previousHsv.h,
|
||||
@ -355,18 +436,29 @@ class GUI_colors_class {
|
||||
}
|
||||
// Re-render UI if changes made
|
||||
if (newColor != null || newAlpha != null) {
|
||||
config.COLOR = newColor != null ? newColor : config.COLOR;
|
||||
config.ALPHA = newAlpha != null ? newAlpha : config.ALPHA;
|
||||
if (this.uiType === 'dialog') {
|
||||
this.COLOR = newColor != null ? newColor : this.COLOR;
|
||||
this.ALPHA = newAlpha != null ? newAlpha : this.ALPHA;
|
||||
if (this.colorNotSet) {
|
||||
this.colorNotSet = false;
|
||||
$('#dialog_previous_color_sample', this.el)[0].style.background = this.COLOR;
|
||||
}
|
||||
} else {
|
||||
config.COLOR = newColor != null ? newColor : config.COLOR;
|
||||
config.ALPHA = newAlpha != null ? newAlpha : config.ALPHA;
|
||||
}
|
||||
if (hsl && !hsv) {
|
||||
hsv = Helper.hslToHsv(hsl.h, hsl.s, hsl.l);
|
||||
}
|
||||
if (hsv && !hsl) {
|
||||
hsl = Helper.hsvToHsl(hsv.h, hsv.s, hsv.v);
|
||||
}
|
||||
this.render_config_color({ hsl, hsv });
|
||||
this.render_selected_color({ hsl, hsv });
|
||||
}
|
||||
|
||||
this.Helper.setCookie('color', config.COLOR);
|
||||
if (this.uiType === 'sidebar') {
|
||||
this.Helper.setCookie('color', config.COLOR);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -375,25 +467,29 @@ class GUI_colors_class {
|
||||
* hsl - override for hsl values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
|
||||
* hsv - override for hsv values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
|
||||
*/
|
||||
render_config_color(options) {
|
||||
render_selected_color(options) {
|
||||
options = options || {};
|
||||
const COLOR = this.uiType === 'dialog' ? this.COLOR : config.COLOR;
|
||||
const ALPHA = this.uiType === 'dialog' ? this.ALPHA : config.ALPHA;
|
||||
|
||||
this.inputs.sample.css('background', config.COLOR);
|
||||
this.inputs.sample.css('background', COLOR);
|
||||
|
||||
this.inputs.swatches.uiSwatches('set_selected_hex', config.COLOR);
|
||||
if (this.uiType !== 'dialog') {
|
||||
this.inputs.swatches.uiSwatches('set_selected_hex', COLOR);
|
||||
}
|
||||
|
||||
const hexInput = this.inputs.hex[0];
|
||||
hexInput.value = config.COLOR;
|
||||
hexInput.value = COLOR;
|
||||
hexInput.setCustomValidity('');
|
||||
|
||||
const rgb = Helper.hexToRgb(config.COLOR);
|
||||
const rgb = Helper.hexToRgb(COLOR);
|
||||
delete rgb.a;
|
||||
for (let rgbKey in rgb) {
|
||||
this.inputs.rgb[rgbKey].range.uiRange('set_value', rgb[rgbKey]);
|
||||
this.inputs.rgb[rgbKey].number.uiNumberInput('set_value', rgb[rgbKey]);
|
||||
}
|
||||
this.inputs.rgb.a.range.uiRange('set_value', config.ALPHA);
|
||||
this.inputs.rgb.a.number.uiNumberInput('set_value', config.ALPHA);
|
||||
this.inputs.rgb.a.range.uiRange('set_value', ALPHA);
|
||||
this.inputs.rgb.a.number.uiNumberInput('set_value', ALPHA);
|
||||
|
||||
const hsv = options.hsv || Helper.rgbToHsv(rgb.r, rgb.g, rgb.b);
|
||||
|
||||
@ -404,7 +500,7 @@ class GUI_colors_class {
|
||||
this.inputs.hsl[hslKey].number.uiNumberInput('set_value', hslValue);
|
||||
}
|
||||
|
||||
this.render_range_gradients({ hsl, hsv });
|
||||
this.render_ui_deferred({ hsl, hsv });
|
||||
}
|
||||
|
||||
/**
|
||||
@ -414,11 +510,12 @@ class GUI_colors_class {
|
||||
* hsl - override for hsl values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
|
||||
* hsv - override for hsv values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
|
||||
*/
|
||||
render_range_gradients(options) {
|
||||
render_ui_deferred(options) {
|
||||
options = options || {};
|
||||
const COLOR = this.uiType === 'dialog' ? this.COLOR : config.COLOR;
|
||||
|
||||
// RGB
|
||||
const rgb = Helper.hexToRgb(config.COLOR);
|
||||
const rgb = Helper.hexToRgb(COLOR);
|
||||
delete rgb.a;
|
||||
for (let rgbKey in rgb) {
|
||||
const rangeMin = JSON.parse(JSON.stringify(rgb));
|
||||
@ -431,7 +528,7 @@ class GUI_colors_class {
|
||||
}
|
||||
// A
|
||||
this.inputs.rgb.a.range.uiRange('set_background',
|
||||
`linear-gradient(to right, transparent, ${ config.COLOR })`
|
||||
`linear-gradient(to right, transparent, ${ COLOR })`
|
||||
);
|
||||
// HSV
|
||||
const hsv = options.hsv || Helper.rgbToHsv(rgb.r, rgb.g, rgb.b);
|
||||
@ -470,6 +567,11 @@ class GUI_colors_class {
|
||||
this.inputs.hsl.l.range.uiRange('set_background',
|
||||
`linear-gradient(to right, #000000 0%, ${ Helper.hslToHex(rangeMid.h, rangeMid.s, rangeMid.l) } 50%, #ffffff 100%)`
|
||||
);
|
||||
|
||||
// Store swatch values
|
||||
if (this.uiType === 'sidebar') {
|
||||
config.swatches.default = this.inputs.swatches.uiSwatches('get_all_hex');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -293,14 +293,21 @@ class GUI_details_class {
|
||||
render_color(events) {
|
||||
var layer = config.layer;
|
||||
|
||||
let $colorInput;
|
||||
if (events) {
|
||||
$colorInput = $(document.getElementById('detail_color')).uiColorInput();
|
||||
} else {
|
||||
$colorInput = $(document.getElementById('detail_color'));
|
||||
}
|
||||
|
||||
if (layer != undefined) {
|
||||
document.getElementById('detail_color').value = layer.color;
|
||||
$colorInput.uiColorInput('set_value', layer.color);
|
||||
}
|
||||
|
||||
if (events) {
|
||||
//events
|
||||
document.getElementById('detail_color').addEventListener('change', function (e) {
|
||||
var value = this.value;
|
||||
$colorInput.on('change', function (e) {
|
||||
const value = $colorInput.uiColorInput('get_value');
|
||||
config.layer.color = value;
|
||||
config.need_render = true;
|
||||
config.need_render_changed_params = true;
|
||||
|
||||
@ -346,27 +346,28 @@ class GUI_tools_class {
|
||||
elementTitle.innerHTML = title + ': ';
|
||||
elementTitle.for = k;
|
||||
|
||||
var elementInput = document.createElement('input');
|
||||
elementInput.type = 'color';
|
||||
elementInput.id = k;
|
||||
elementInput.value = item;
|
||||
|
||||
elementInput.addEventListener('keyup', (event) => {
|
||||
this.action_data().attributes[event.target.id] = event.target.value;
|
||||
});
|
||||
elementInput.addEventListener('change', (event) => {
|
||||
const actionData = this.action_data();
|
||||
actionData.attributes[event.target.id] = event.target.value;
|
||||
if (actionData.on_update != undefined) {
|
||||
//send event
|
||||
var moduleKey = actionData.name;
|
||||
var functionName = actionData.on_update;
|
||||
this.tools_modules[moduleKey][functionName]({ key: event.target.id, value: event.target.value });
|
||||
}
|
||||
});
|
||||
var colorInput = document.createElement('input');
|
||||
colorInput.type = 'color';
|
||||
const $colorInput = $(colorInput)
|
||||
.uiColorInput({
|
||||
id: k,
|
||||
value: item
|
||||
})
|
||||
.on('change', () => {
|
||||
let value = $colorInput.uiColorInput('get_value');
|
||||
const id = $colorInput.uiColorInput('get_id');
|
||||
const actionData = this.action_data();
|
||||
actionData.attributes[id] = value;
|
||||
if (actionData.on_update != undefined) {
|
||||
//send event
|
||||
var moduleKey = actionData.name;
|
||||
var functionName = actionData.on_update;
|
||||
this.tools_modules[moduleKey][functionName]({ key: id, value: value });
|
||||
}
|
||||
});
|
||||
|
||||
itemDom.appendChild(elementTitle);
|
||||
itemDom.appendChild(elementInput);
|
||||
itemDom.appendChild($colorInput[0]);
|
||||
}
|
||||
else {
|
||||
alertify.error('Error: unsupported attribute type:' + typeof item + ', ' + k);
|
||||
|
||||
@ -40,7 +40,10 @@ class Pick_color_class extends Base_tools_class {
|
||||
_this.dragMove(event);
|
||||
});
|
||||
document.addEventListener('mouseup', function (event) {
|
||||
_this.copy_color_to_ckipboard();
|
||||
var _this = this;
|
||||
if (config.TOOL.name != _this.name)
|
||||
return;
|
||||
_this.copy_color_to_clipboard();
|
||||
});
|
||||
|
||||
// collect touch events
|
||||
@ -99,7 +102,7 @@ class Pick_color_class extends Base_tools_class {
|
||||
this.Base_gui.GUI_colors.set_color(newColorDefinition);
|
||||
}
|
||||
|
||||
copy_color_to_ckipboard() {
|
||||
copy_color_to_clipboard() {
|
||||
navigator.clipboard.writeText(config.COLOR);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user