Skip to content

Commit ec2e67f

Browse files
mdbassitmdbassit
committed
Update dist files and bump version
1 parent 0a8336d commit ec2e67f

File tree

4 files changed

+114
-61
lines changed

4 files changed

+114
-61
lines changed

‎dist/coloris.js

+110-57
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
}
7474
break;
7575
case 'parent':
76-
container = document.querySelector(options.parent);
76+
container = options.parent instanceof HTMLElement ? options.parent : document.querySelector(options.parent);
7777
if (container) {
7878
container.appendChild(picker);
7979
settings.parent = options.parent;
@@ -105,7 +105,7 @@
105105
break;
106106
case 'rtl':
107107
settings.rtl = !!options.rtl;
108-
document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
108+
Array.from(document.getElementsByClassName('clr-field')).forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
109109
break;
110110
case 'margin':
111111
options.margin *= 1;
@@ -125,13 +125,30 @@
125125
break;
126126
case 'swatches':
127127
if (Array.isArray(options.swatches)) {(function () {
128-
var swatches = [];
128+
var swatchesContainer = getEl('clr-swatches');
129+
var swatches = document.createElement('div');
129130

131+
// Clear current swatches
132+
swatchesContainer.textContent = '';
133+
134+
// Build new swatches
130135
options.swatches.forEach(function (swatch, i) {
131-
swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
136+
var button = document.createElement('button');
137+
138+
button.setAttribute('type', "button");
139+
button.setAttribute('id', "clr-swatch-" + i);
140+
button.setAttribute('aria-labelledby', "clr-swatch-label clr-swatch-" + i);
141+
button.style.color = swatch;
142+
button.textContent = swatch;
143+
144+
swatches.appendChild(button);
132145
});
133146

134-
getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
147+
// Append new swatches if any
148+
if (options.swatches.length) {
149+
swatchesContainer.appendChild(swatches);
150+
}
151+
135152
settings.swatches = options.swatches.slice();})();
136153
}
137154
break;
@@ -294,54 +311,61 @@
294311

295312
/**
296313
* Bind the color picker to input fields that match the selector.
297-
* @param {string} selector One or more selectors pointing to input fields.
314+
* @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
298315
*/
299316
function bindFields(selector) {
300-
// Show the color picker on click on the input fields that match the selector
301-
addListener(document, 'click', selector, function (event) {
302-
// Skip if inline mode is in use
303-
if (settings.inline) {
304-
return;
305-
}
317+
if (selector instanceof HTMLElement) {
318+
selector = [selector];
319+
}
306320

307-
// Apply any per-instance options first
308-
attachVirtualInstance(event.target);
321+
if (Array.isArray(selector)) {
322+
selector.forEach(function (field) {
323+
addListener(field, 'click', openPicker);
324+
addListener(field, 'input', updateColorPreview);
325+
});
326+
} else {
327+
addListener(document, 'click', selector, openPicker);
328+
addListener(document, 'input', selector, updateColorPreview);
329+
}
330+
}
309331

310-
currentEl = event.target;
311-
oldColor = currentEl.value;
312-
currentFormat = getColorFormatFromStr(oldColor);
313-
picker.classList.add('clr-open');
332+
/**
333+
* Open the color picker.
334+
* @param {object} event The event that opens the color picker.
335+
*/
336+
function openPicker(event) {
337+
// Skip if inline mode is in use
338+
if (settings.inline) {
339+
return;
340+
}
314341

315-
updatePickerPosition();
316-
setColorFromStr(oldColor);
342+
// Apply any per-instance options first
343+
attachVirtualInstance(event.target);
317344

318-
if (settings.focusInput || settings.selectInput) {
319-
colorValue.focus({ preventScroll: true });
320-
colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
321-
}
345+
currentEl = event.target;
346+
oldColor = currentEl.value;
347+
currentFormat = getColorFormatFromStr(oldColor);
348+
picker.classList.add('clr-open');
322349

323-
if (settings.selectInput) {
324-
colorValue.select();
325-
}
350+
updatePickerPosition();
351+
setColorFromStr(oldColor);
326352

327-
// Always focus the first element when using keyboard navigation
328-
if (keyboardNav || settings.swatchesOnly) {
329-
getFocusableElements().shift().focus();
330-
}
353+
if (settings.focusInput || settings.selectInput) {
354+
colorValue.focus({ preventScroll: true });
355+
colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
356+
}
331357

332-
// Trigger an "open" event
333-
currentEl.dispatchEvent(new Event('open', { bubbles: true }));
334-
});
358+
if (settings.selectInput) {
359+
colorValue.select();
360+
}
335361

336-
// Update the color preview of the input fields that match the selector
337-
addListener(document, 'input', selector, function (event) {
338-
var parent = event.target.parentNode;
362+
// Always focus the first element when using keyboard navigation
363+
if (keyboardNav || settings.swatchesOnly) {
364+
getFocusableElements().shift().focus();
365+
}
339366

340-
// Only update the preview if the field has been previously wrapped
341-
if (parent.classList.contains('clr-field')) {
342-
parent.style.color = event.target.value;
343-
}
344-
});
367+
// Trigger an "open" event
368+
currentEl.dispatchEvent(new Event('open', { bubbles: true }));
345369
}
346370

347371
/**
@@ -423,27 +447,52 @@
423447

424448
/**
425449
* Wrap the linked input fields in a div that adds a color preview.
426-
* @param {string} selector One or more selectors pointing to input fields.
450+
* @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
427451
*/
428452
function wrapFields(selector) {
429-
document.querySelectorAll(selector).forEach(function (field) {
430-
var parentNode = field.parentNode;
453+
if (selector instanceof HTMLElement) {
454+
wrapColorField(selector);
455+
} else if (Array.isArray(selector)) {
456+
selector.forEach(wrapColorField);
457+
} else {
458+
document.querySelectorAll(selector).forEach(wrapColorField);
459+
}
460+
}
431461

432-
if (!parentNode.classList.contains('clr-field')) {
433-
var wrapper = document.createElement('div');
434-
var classes = 'clr-field';
462+
/**
463+
* Wrap an input field in a div that adds a color preview.
464+
* @param {object} field The input field.
465+
*/
466+
function wrapColorField(field) {
467+
var parentNode = field.parentNode;
435468

436-
if (settings.rtl || field.classList.contains('clr-rtl')) {
437-
classes += ' clr-rtl';
438-
}
469+
if (!parentNode.classList.contains('clr-field')) {
470+
var wrapper = document.createElement('div');
471+
var classes = 'clr-field';
439472

440-
wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
441-
parentNode.insertBefore(wrapper, field);
442-
wrapper.setAttribute('class', classes);
443-
wrapper.style.color = field.value;
444-
wrapper.appendChild(field);
473+
if (settings.rtl || field.classList.contains('clr-rtl')) {
474+
classes += ' clr-rtl';
445475
}
446-
});
476+
477+
wrapper.innerHTML = '<button type="button" aria-labelledby="clr-open-label"></button>';
478+
parentNode.insertBefore(wrapper, field);
479+
wrapper.className = classes;
480+
wrapper.style.color = field.value;
481+
wrapper.appendChild(field);
482+
}
483+
}
484+
485+
/**
486+
* Update the color preview of an input field
487+
* @param {object} event The "input" event that triggers the color change.
488+
*/
489+
function updateColorPreview(event) {
490+
var parent = event.target.parentNode;
491+
492+
// Only update the preview if the field has been previously wrapped
493+
if (parent.classList.contains('clr-field')) {
494+
parent.style.color = event.target.value;
495+
}
447496
}
448497

449498
/**
@@ -983,6 +1032,10 @@
9831032
addListener(document, 'mousemove', moveMarker);
9841033
});
9851034

1035+
addListener(colorArea, 'contextmenu', function (event) {
1036+
event.preventDefault();
1037+
});
1038+
9861039
addListener(colorArea, 'touchstart', function (event) {
9871040
document.addEventListener('touchmove', moveMarker, { passive: false });
9881041
});

0 commit comments

Comments
 (0)