Update dist files and bump version

mdbassit · Feb 13, 2023 · 50d13ea · 50d13ea
1 parent f2374c2
commit 50d13ea
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 12 deletions.
diff --git a/dist/coloris.css b/dist/coloris.css
@@ -7,6 +7,7 @@
   border-radius: 10px;
   background-color: #fff;
   justify-content: flex-end;
+  direction: ltr;
   box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -326,6 +327,11 @@ input.clr-color:focus {
 
 .clr-field input {
   margin: 0;
+  direction: ltr;
+}
+
+.clr-field.clr-rtl input {
+  text-align: right;
 }
 
 .clr-field button {
@@ -345,6 +351,11 @@ input.clr-color:focus {
   pointer-events: none;
 }
 
+.clr-field.clr-rtl button {
+  right: auto;
+  left: 0;
+}
+
 .clr-field button:after {
   content: '';
   display: block;

diff --git a/dist/coloris.js b/dist/coloris.js
@@ -16,6 +16,7 @@
     parent: 'body',
     theme: 'default',
     themeMode: 'light',
+    rtl: false,
     wrap: true,
     margin: 2,
     format: 'hex',
@@ -32,6 +33,7 @@
     clearLabel: 'Clear',
     closeButton: false,
     closeLabel: 'Close',
+    onChange: function onChange() {return undefined;},
     a11y: {
       open: 'Open color picker',
       close: 'Close color picker',
@@ -100,6 +102,10 @@
             updatePickerPosition();
           }
           break;
+        case 'rtl':
+          settings.rtl = !!options.rtl;
+          document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+          break;
         case 'margin':
           options.margin *= 1;
           settings.margin = !isNaN(options.margin) ? options.margin : settings.margin;
@@ -206,6 +212,7 @@
             colorValue.setAttribute('aria-label', settings.a11y.input);
             colorArea.setAttribute('aria-label', settings.a11y.instruction);
           }
+          break;
         default:
           settings[key] = options[key];}
 
@@ -247,7 +254,7 @@
   function attachVirtualInstance(element) {
     if (hasInstance) {
       // These options can only be set globally, not per instance
-      var unsupportedOptions = ['el', 'wrap', 'inline', 'defaultColor', 'a11y'];var _loop = function _loop(
+      var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop = function _loop(
 
       selector) {
         var options = instances[selector];
@@ -395,13 +402,15 @@
       picker.classList.toggle('clr-top', reposition.top);
       picker.style.left = left + "px";
       picker.style.top = top + "px";
+      offset.x += picker.offsetLeft;
+      offset.y += picker.offsetTop;
     }
 
     colorAreaDims = {
       width: colorArea.offsetWidth,
       height: colorArea.offsetHeight,
-      x: picker.offsetLeft + colorArea.offsetLeft + offset.x,
-      y: picker.offsetTop + colorArea.offsetTop + offset.y };
+      x: colorArea.offsetLeft + offset.x,
+      y: colorArea.offsetTop + offset.y };
 
   }
 
@@ -415,10 +424,15 @@
 
       if (!parentNode.classList.contains('clr-field')) {
         var wrapper = document.createElement('div');
+        var classes = 'clr-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.setAttribute('class', 'clr-field');
+        wrapper.setAttribute('class', classes);
         wrapper.style.color = field.value;
         wrapper.appendChild(field);
       }
@@ -523,6 +537,10 @@
       currentEl.dispatchEvent(new Event('input', { bubbles: true }));
     }
 
+    if (settings.onChange) {
+      settings.onChange.call(window, color);
+    }
+
     document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color } }));
   }
 
@@ -900,15 +918,15 @@
     picker.setAttribute('id', 'clr-picker');
     picker.className = 'clr-picker';
     picker.innerHTML =
-    "<input id=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+    "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
     settings.a11y.instruction + "\">") +
     '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
     '</div>' +
-    '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+    '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
     settings.a11y.hueSlider + "\">") +
     '<div id="clr-hue-marker"></div>' +
     '</div>' +
-    '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+    '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
     settings.a11y.alphaSlider + "\">") +
     '<div id="clr-alpha-marker"></div>' +
     '<span></span>' +