Update dist files and bump version

mdbassit · Jan 14, 2023 · 83a2036 · 83a2036
1 parent c03607d
commit 83a2036
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 26 deletions.
diff --git a/dist/coloris.css b/dist/coloris.css
@@ -6,7 +6,7 @@
   z-index: 1000;
   border-radius: 10px;
   background-color: #fff;
-  justify-content: space-between;
+  justify-content: flex-end;
   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;
@@ -165,7 +165,11 @@
 
 .clr-segmented label {
   flex-grow: 1;
+  margin: 0;
   padding: 4px 0;
+  font-size: inherit;
+  font-weight: normal;
+  line-height: initial;
   text-align: center;
   cursor: pointer;
 }
@@ -201,6 +205,7 @@
   width: 20px;
   height: 20px;
   margin: 0 4px 6px 4px;
+  padding: 0;
   border: 0;
   border-radius: 50%;
   color: inherit;
@@ -227,7 +232,7 @@ input.clr-color {
   order: 1;
   width: calc(100% - 80px);
   height: 32px;
-  margin: 15px 20px 20px 0;
+  margin: 15px 20px 20px auto;
   padding: 0 10px;
   border: 1px solid #ddd;
   border-radius: 16px;
@@ -244,11 +249,12 @@ input.clr-color:focus {
   border: 1px solid #1e90ff;
 }
 
+.clr-close,
 .clr-clear {
   display: none;
   order: 2;
   height: 24px;
-  margin: 0 20px 20px auto;
+  margin: 0 20px 20px;
   padding: 0 20px;
   border: 0;
   border-radius: 12px;
@@ -260,15 +266,18 @@ input.clr-color:focus {
   cursor: pointer;
 }
 
+.clr-close {
+  display: block;
+  margin: 0 20px 20px auto;
+}
+
 .clr-preview {
   position: relative;
   width: 32px;
   height: 32px;
   margin: 15px 0 20px 20px;
-  border: 0;
   border-radius: 50%;
   overflow: hidden;
-  cursor: pointer;
 }
 
 .clr-preview:before,
@@ -289,6 +298,19 @@ input.clr-color:focus {
   box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
 }
 
+.clr-preview button {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  text-indent: -9999px;
+  cursor: pointer;
+}
+
 .clr-marker,
 .clr-hue div,
 .clr-alpha div,
@@ -302,13 +324,19 @@ input.clr-color:focus {
   color: transparent;
 }
 
+.clr-field input {
+  margin: 0;
+}
+
 .clr-field button {
   position: absolute;
   width: 30px;
   height: 100%;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
   border: 0;
   color: inherit;
   text-indent: -1000px;
@@ -486,6 +514,10 @@ input.clr-color:focus {
 }
 
 .clr-polaroid .clr-clear {
+  margin: 0 10px 15px 10px;
+}
+
+.clr-polaroid .clr-close {
   margin: 0 10px 15px auto;
 }
 

diff --git a/dist/coloris.js b/dist/coloris.js
@@ -8,7 +8,7 @@
   var ctx = document.createElement('canvas').getContext('2d');
   var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
   var container, picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton,
-  hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor;
+  closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor;
 
   // Default settings
   var settings = {
@@ -30,9 +30,12 @@
     defaultColor: '#000000',
     clearButton: false,
     clearLabel: 'Clear',
+    closeButton: false,
+    closeLabel: 'Close',
     a11y: {
       open: 'Open color picker',
       close: 'Close color picker',
+      clear: 'Clear the selected color',
       marker: 'Saturation: {s}. Brightness: {v}.',
       hueSlider: 'Hue slider',
       alphaSlider: 'Opacity slider',
@@ -163,6 +166,20 @@
           settings.clearLabel = options.clearLabel;
           clearButton.innerHTML = settings.clearLabel;
           break;
+        case 'closeButton':
+          settings.closeButton = !!options.closeButton;
+
+          if (settings.closeButton) {
+            picker.insertBefore(closeButton, colorPreview);
+          } else {
+            colorPreview.appendChild(closeButton);
+          }
+
+          break;
+        case 'closeLabel':
+          settings.closeLabel = options.closeLabel;
+          closeButton.innerHTML = settings.closeLabel;
+          break;
         case 'a11y':
           var labels = options.a11y;
           var update = false;
@@ -182,7 +199,8 @@
 
             openLabel.innerHTML = settings.a11y.open;
             swatchLabel.innerHTML = settings.a11y.swatch;
-            colorPreview.setAttribute('aria-label', settings.a11y.close);
+            closeButton.setAttribute('aria-label', settings.a11y.close);
+            clearButton.setAttribute('aria-label', settings.a11y.clear);
             hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);
             alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);
             colorValue.setAttribute('aria-label', settings.a11y.input);
@@ -568,13 +586,7 @@
       y += container.scrollTop;
     }
 
-    x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
-    y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
-
-    colorMarker.style.left = x + "px";
-    colorMarker.style.top = y + "px";
-
-    setColorAtPosition(x, y);
+    setMarkerPosition(x, y);
 
     // Prevent scrolling while dragging the marker
     event.preventDefault();
@@ -584,16 +596,34 @@
   /**
    * Move the color marker when the arrow keys are pressed.
    * @param {number} offsetX The horizontal amount to move.
-   * * @param {number} offsetY The vertical amount to move.
+   * @param {number} offsetY The vertical amount to move.
    */
   function moveMarkerOnKeydown(offsetX, offsetY) {
     var x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
     var y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
 
+    setMarkerPosition(x, y);
+  }
+
+  /**
+   * Set the color marker's position.
+   * @param {number} x Left position.
+   * @param {number} y Top position.
+   */
+  function setMarkerPosition(x, y) {
+    // Make sure the marker doesn't go out of bounds
+    x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
+    y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
+
+    // Set the position
     colorMarker.style.left = x + "px";
     colorMarker.style.top = y + "px";
 
+    // Update the color
     setColorAtPosition(x, y);
+
+    // Make sure the marker is focused
+    colorMarker.focus();
   }
 
   /**
@@ -895,9 +925,11 @@
     '<span></span>' +
     '</fieldset>' +
     '</div>' +
-    '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\">" +
-    settings.clearLabel + "</button>") + ("<button type=\"button\" id=\"clr-color-preview\" class=\"clr-preview\" aria-label=\"" +
-    settings.a11y.close + "\"></button>") + ("<span id=\"clr-open-label\" hidden>" +
+    '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
+    settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
+    '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
+    settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
+    '</div>' + ("<span id=\"clr-open-label\" hidden>" +
     settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
     settings.a11y.swatch + "</span>");
 
@@ -908,6 +940,7 @@
     colorArea = getEl('clr-color-area');
     colorMarker = getEl('clr-color-marker');
     clearButton = getEl('clr-clear');
+    closeButton = getEl('clr-close');
     colorPreview = getEl('clr-color-preview');
     colorValue = getEl('clr-color-value');
     hueSlider = getEl('clr-hue-slider');
@@ -952,7 +985,7 @@
       closePicker();
     });
 
-    addListener(colorPreview, 'click', function (event) {
+    addListener(closeButton, 'click', function (event) {
       pickColor();
       closePicker();
     });
@@ -986,9 +1019,13 @@
     });
 
     addListener(document, 'keydown', function (event) {
+      var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
       if (event.key === 'Escape') {
         closePicker(true);
-      } else if (event.key === 'Tab') {
+
+        // Display focus rings when using the keyboard
+      } else if (navKeys.includes(event.key)) {
         picker.classList.add('clr-keyboard-nav');
       }
     });
@@ -1011,7 +1048,7 @@
         ArrowRight: [1, 0] };
 
 
-      if (Object.keys(movements).indexOf(event.key) !== -1) {
+      if (Object.keys(movements).includes(event.key)) {
         moveMarkerOnKeydown.apply(void 0, movements[event.key]);
         event.preventDefault();
       }