Skip to content

Commit

Permalink
Update dist files and bump version
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdbassit
mdbassit committed Apr 12, 2024
1 parent 0a8336d commit ec2e67f
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 61 deletions.
167 changes: 110 additions & 57 deletions dist/coloris.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
}
break;
case 'parent':
container = document.querySelector(options.parent);
container = options.parent instanceof HTMLElement ? options.parent : document.querySelector(options.parent);
if (container) {
container.appendChild(picker);
settings.parent = options.parent;
Expand Down Expand Up @@ -105,7 +105,7 @@
break;
case 'rtl':
settings.rtl = !!options.rtl;
document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
Array.from(document.getElementsByClassName('clr-field')).forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
break;
case 'margin':
options.margin *= 1;
Expand All @@ -125,13 +125,30 @@
break;
case 'swatches':
if (Array.isArray(options.swatches)) {(function () {
var swatches = [];
var swatchesContainer = getEl('clr-swatches');
var swatches = document.createElement('div');

// Clear current swatches
swatchesContainer.textContent = '';

// Build new swatches
options.swatches.forEach(function (swatch, i) {
swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
var button = document.createElement('button');

button.setAttribute('type', "button");
button.setAttribute('id', "clr-swatch-" + i);
button.setAttribute('aria-labelledby', "clr-swatch-label clr-swatch-" + i);
button.style.color = swatch;
button.textContent = swatch;

swatches.appendChild(button);
});

getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
// Append new swatches if any
if (options.swatches.length) {
swatchesContainer.appendChild(swatches);
}

settings.swatches = options.swatches.slice();})();
}
break;
Expand Down Expand Up @@ -294,54 +311,61 @@

/**
* Bind the color picker to input fields that match the selector.
* @param {string} selector One or more selectors pointing to input fields.
* @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
*/
function bindFields(selector) {
// Show the color picker on click on the input fields that match the selector
addListener(document, 'click', selector, function (event) {
// Skip if inline mode is in use
if (settings.inline) {
return;
}
if (selector instanceof HTMLElement) {
selector = [selector];
}

// Apply any per-instance options first
attachVirtualInstance(event.target);
if (Array.isArray(selector)) {
selector.forEach(function (field) {
addListener(field, 'click', openPicker);
addListener(field, 'input', updateColorPreview);
});
} else {
addListener(document, 'click', selector, openPicker);
addListener(document, 'input', selector, updateColorPreview);
}
}

currentEl = event.target;
oldColor = currentEl.value;
currentFormat = getColorFormatFromStr(oldColor);
picker.classList.add('clr-open');
/**
* Open the color picker.
* @param {object} event The event that opens the color picker.
*/
function openPicker(event) {
// Skip if inline mode is in use
if (settings.inline) {
return;
}

updatePickerPosition();
setColorFromStr(oldColor);
// Apply any per-instance options first
attachVirtualInstance(event.target);

if (settings.focusInput || settings.selectInput) {
colorValue.focus({ preventScroll: true });
colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
}
currentEl = event.target;
oldColor = currentEl.value;
currentFormat = getColorFormatFromStr(oldColor);
picker.classList.add('clr-open');

if (settings.selectInput) {
colorValue.select();
}
updatePickerPosition();
setColorFromStr(oldColor);

// Always focus the first element when using keyboard navigation
if (keyboardNav || settings.swatchesOnly) {
getFocusableElements().shift().focus();
}
if (settings.focusInput || settings.selectInput) {
colorValue.focus({ preventScroll: true });
colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
}

// Trigger an "open" event
currentEl.dispatchEvent(new Event('open', { bubbles: true }));
});
if (settings.selectInput) {
colorValue.select();
}

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

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

/**
Expand Down Expand Up @@ -423,27 +447,52 @@

/**
* Wrap the linked input fields in a div that adds a color preview.
* @param {string} selector One or more selectors pointing to input fields.
* @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
*/
function wrapFields(selector) {
document.querySelectorAll(selector).forEach(function (field) {
var parentNode = field.parentNode;
if (selector instanceof HTMLElement) {
wrapColorField(selector);
} else if (Array.isArray(selector)) {
selector.forEach(wrapColorField);
} else {
document.querySelectorAll(selector).forEach(wrapColorField);
}
}

if (!parentNode.classList.contains('clr-field')) {
var wrapper = document.createElement('div');
var classes = 'clr-field';
/**
* Wrap an input field in a div that adds a color preview.
* @param {object} field The input field.
*/
function wrapColorField(field) {
var parentNode = field.parentNode;

if (settings.rtl || field.classList.contains('clr-rtl')) {
classes += ' clr-rtl';
}
if (!parentNode.classList.contains('clr-field')) {
var wrapper = document.createElement('div');
var classes = 'clr-field';

wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
parentNode.insertBefore(wrapper, field);
wrapper.setAttribute('class', classes);
wrapper.style.color = field.value;
wrapper.appendChild(field);
if (settings.rtl || field.classList.contains('clr-rtl')) {
classes += ' clr-rtl';
}
});

wrapper.innerHTML = '<button type="button" aria-labelledby="clr-open-label"></button>';
parentNode.insertBefore(wrapper, field);
wrapper.className = classes;
wrapper.style.color = field.value;
wrapper.appendChild(field);
}
}

/**
* Update the color preview of an input field
* @param {object} event The "input" event that triggers the color change.
*/
function updateColorPreview(event) {
var parent = event.target.parentNode;

// Only update the preview if the field has been previously wrapped
if (parent.classList.contains('clr-field')) {
parent.style.color = event.target.value;
}
}

/**
Expand Down Expand Up @@ -983,6 +1032,10 @@
addListener(document, 'mousemove', moveMarker);
});

addListener(colorArea, 'contextmenu', function (event) {
event.preventDefault();
});

addListener(colorArea, 'touchstart', function (event) {
document.addEventListener('touchmove', moveMarker, { passive: false });
});
Expand Down
Loading

0 comments on commit ec2e67f

Please sign in to comment.