Resolve #73

taufik-nurrohman · Mar 6, 2022 · 5e48f7e · 5e48f7e
1 parent c1179cd
commit 5e48f7e
Show file tree

Hide file tree

Showing 66 changed files with 606 additions and 532 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/.github/source/LICENSE.txt b/.github/source/LICENSE.txt
diff --git a/.github/source/_index.pug b/.github/source/_index.pug
diff --git a/.github/source/index.css.scss b/.github/source/index.css.scss
@@ -1,105 +1,66 @@
-$color: #000;
-$size: 12px;
+$name: 'color-picker';
 
-.color-picker {
-  &,
-  &::before,
-  &::after,
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+:root {
+  --color-#{$name}__controls: #000;
+  --fill-#{$name}__controls: 0 0;
+  --height-#{$name}__controls: 10em;
+  --shadow-#{$name}__dialog: 1px 3px 6px rgba(0, 0, 0, .5);
+  --size-#{$name}__controls: 12px;
+  --stroke-#{$name}__controls: #000;
+  --width-#{$name}__control--a: 1.5em;
+  --width-#{$name}__control--h: 1.5em;
+  --width-#{$name}__control--s\/v: 10em;
 }
 
-.color-picker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  box-shadow: 1px 3px 6px rgba(0, 0, 0, .5);
-  > div {
-    display: flex;
-    height: 10em;
-    border: 1px solid $color;
-    color: $color;
-    * {
-      border-color: inherit;
-      color: inherit;
-    }
-  }
-  i {
-    font: inherit;
-    font-size: $size; /* Measure the color picker control size by measuring the text size */
-  }
-  &\:a,
-  &\:h,
-  &\:sv {
-    background-size: 100% 100%;
-    position: relative;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
+.#{$name}__control {
+  &--a,
+  &--h,
+  &--s\/v {
     -moz-user-select: none;
     -ms-user-select: none;
-    user-select: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    background-size: 100% 100%;
+    position: relative;
+    user-select: none;
     div {
-      position: absolute;
-      top: 0;
-      right: 0;
       bottom: 0;
       left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
     }
   }
-  &\:a,
-  &\:h {
-    width: 1.5em;
+  &--a,
+  &--h {
     border-left: 1px solid;
     cursor: ns-resize;
     overflow: hidden;
-    i {
-      display: block;
-      height: .5em;
-      position: absolute;
-      top: -.25em;
-      right: 0;
-      left: 0;
-      z-index: 2;
-      &::before {
-        display: block;
-        content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border:.25em solid;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-      }
-    }
   }
-  &\:a {
+  &--a {
+    width: var(--width-#{$name}__control--a);
     div {
       z-index: 2;
       + div {
         background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%);
-        background-size: .5em .5em;
         background-position: 0 0, .25em .25em;
+        background-size: .5em .5em;
         z-index: 1;
       }
     }
   }
-  &\:h {
+  &--h {
+    width: var(--width-#{$name}__control--a);
     div {
       background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
     }
   }
-  &\:sv {
-    width: 10em;
+  &--s\/v {
     cursor: crosshair;
     overflow: hidden;
+    width: var(--width-#{$name}__control--s\/v);
     div {
       + div {
         background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
@@ -108,26 +69,86 @@ $size: 12px;
         }
       }
     }
-    i {
+  }
+}
+
+.#{$name}__controls {
+  background: var(--fill-#{$name}__controls);
+  border-radius: var(--arc-#{$name}__controls);
+  border: 1px solid;
+  border-color: var(--stroke-#{$name}__controls);
+  color: var(--color-#{$name}__controls);
+  display: flex;
+  height: var(--height-#{$name}__controls);
+  overflow: hidden;
+}
+
+.#{$name}__dialog {
+  box-shadow: var(--shadow-#{$name}__dialog);
+  &,
+  &::before,
+  &::after,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    font: inherit;
+  }
+}
+
+.#{$name}__dialog {
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+}
+
+.#{$name}__cursor {
+  border-color: inherit;
+  color: inherit;
+  font: inherit;
+  font-size: var(--size-#{$name}__controls); /* Measure the color picker control size by measuring the text size */
+  &--a,
+  &--h {
+    display: block;
+    height: .5em;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: -.25em;
+    z-index: 2;
+    &::before {
+      border:.25em solid;
+      border-bottom-color: transparent;
+      border-top-color: transparent;
+      bottom: 0;
+      content: "";
       display: block;
-      width: .75em;
-      height: .75em;
+      left: 0;
       position: absolute;
-      top: -.375em;
-      right: -.375em;
-      z-index: 2;
-      &::before {
-        display: block;
-        content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: 100%;
-        box-shadow: 0 0 2px #000;
-      }
+      right: 0;
+      top: 0;
     }
   }
-}
+  &--s\/v {
+    display: block;
+    height: .75em;
+    position: absolute;
+    right: -.375em;
+    top: -.375em;
+    width: .75em;
+    z-index: 2;
+    &::before {
+      border-radius: 100%;
+      border: 1px solid #fff;
+      bottom: 0;
+      box-shadow: 0 0 2px #000;
+      content: "";
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
diff --git a/.github/source/index.html.pug b/.github/source/index.html.pug
@@ -64,15 +64,15 @@ block style
     |   text-align: left;
     |   vertical-align: top;
     | }
-    | body > p:first-child {
+    | [role='alert'] {
     |   background: #ffa;
     |   border: 1px dashed;
     |   margin-top: 0;
     |   padding: .75em 1em;
     | }
 
 block content
-  p Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you!
+  p(role='alert') Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you!
   header
     h1= title
     p Color Picker is a simple JavaScript application that aims to provide custom color picker feature to the web with the most basic appearance and usability.

diff --git a/.github/source/index.js.mjs b/.github/source/index.js.mjs
@@ -125,7 +125,9 @@ function CP(source, state = {}) {
         return [0, 0, 0, 1]; // Default to black
     }
 
-    let className = state['class'],
+    let classNameB = state['class'],
+        classNameE = classNameB + '__',
+        classNameM = classNameB + '--',
         doEnter,
         doExit,
         doFit,
@@ -138,31 +140,43 @@ function CP(source, state = {}) {
         theData = RGB2HSV(theColor),
 
         self = setElement('div', {
-            'class': className
+            'class': classNameE + 'dialog',
+            'role': 'dialog'
         }),
 
-        C = setElement('div'),
+        C = setElement('div', {
+            'class': classNameE + 'controls'
+        }),
+        classNameControl = classNameE + 'control',
+        classNameCursor = classNameE + 'cursor',
+
         SV = setElement('div', {
-            'class': className + ':sv'
+            'class': classNameControl + ' ' + classNameControl + '--s/v'
         }),
         H = setElement('div', {
-            'class': className + ':h'
+            'class': classNameControl + ' ' + classNameControl + '--h'
         }),
         A = setElement('div', {
-            'class': className + ':a'
+            'class': classNameControl + ' ' + classNameControl + '--a'
         }),
 
         SVColor = setElement('div'),
         SVSaturation = setElement('div'),
         SVValue = setElement('div'),
-        SVCursor = setElement('i'),
+        SVCursor = setElement('i', {
+            'class': classNameCursor + ' ' + classNameCursor + '--s/v'
+        }),
 
         HColor = setElement('div'),
-        HCursor = setElement('i'),
+        HCursor = setElement('i', {
+            'class': classNameCursor + ' ' + classNameCursor + '--h'
+        }),
 
         AColor = setElement('div'),
         APattern = setElement('div'),
-        ACursor = setElement('i'),
+        ACursor = setElement('i', {
+            'class': classNameCursor + ' ' + classNameCursor + '--a'
+        }),
 
         SVStarting = 0,
         HStarting = 0,
@@ -392,7 +406,7 @@ function CP(source, state = {}) {
                 return $; // Already ejected
             }
             delete source[name];
-            letClass(source, className + '-source');
+            letClass(source, classNameE + 'source');
             offEvents(EVENTS_DOWN, source, doClick);
             return doExit(), fire('pop', theColor);
         };
@@ -408,7 +422,7 @@ function CP(source, state = {}) {
             return doSetColor(), $;
         };
 
-        setClass(source, className + '-source');
+        setClass(source, classNameE + 'source');
 
     } doApply(1);
 

diff --git a/.github/source/test.html.pug b/.github/source/test.html.pug
diff --git a/.github/source/test/disabled.html.pug b/.github/source/test/disabled.html.pug
diff --git a/.github/source/test/fit.html.pug b/.github/source/test/fit.html.pug
diff --git a/.github/source/test/hooks.html.pug b/.github/source/test/hooks.html.pug
diff --git a/.github/source/test/picker.html.pug b/.github/source/test/picker.html.pug
diff --git a/.github/source/test/pop.html.pug b/.github/source/test/pop.html.pug
diff --git a/.github/source/test/size.html.pug b/.github/source/test/size.html.pug
@@ -41,11 +41,11 @@ block content
     p By default, color picker size will follow the container&rsquo;s text size; the container that bounds to the color picker panel.
     pre: code
       | /* To change the color picker size */
-      | .color-picker {
+      | .color-picker__controls {
       |   font-size: 20px;
       | }
       |
-      | /* To change the color picker control&rsquo;s size */
-      | .color-picker i {
-      |   font-size: 15px;
+      | /* To change the color picker cursor&rsquo;s size */
+      | .color-picker__cursor {
+      |   font-size: 20px;
       | }
diff --git a/.github/source/tweak/alpha.html.pug b/.github/source/tweak/alpha.html.pug
@@ -7,7 +7,7 @@ block state
 
 block style
   style
-    | .color-picker.no-alpha .color-picker\:a {
+    | .color-picker__dialog--no-alpha .color-picker__control--a {
     |   display: none;
     | }
 
@@ -18,7 +18,7 @@ block script
     |         return;
     |     }
     |     picker.noAlpha = true;
-    |     picker.self.classList.add('no-alpha');
+    |     picker.self.classList.add(picker.state.class + '__dialog--no-alpha');
     |     picker.on('change', function(r, g, b) {
     |         this.source.value = this.color(r, g, b, 1);
     |     });

diff --git a/.github/source/tweak/button.html.pug b/.github/source/tweak/button.html.pug
diff --git a/.github/source/tweak/close.html.pug b/.github/source/tweak/close.html.pug
diff --git a/.github/source/tweak/color.hex.html.pug b/.github/source/tweak/color.hex.html.pug
diff --git a/.github/source/tweak/color.name.html.pug b/.github/source/tweak/color.name.html.pug
diff --git a/.github/source/tweak/color.rgba.html.pug b/.github/source/tweak/color.rgba.html.pug
diff --git a/.github/source/tweak/events.html.pug b/.github/source/tweak/events.html.pug
diff --git a/.github/source/tweak/input.html.pug b/.github/source/tweak/input.html.pug
@@ -8,7 +8,7 @@ block state
 block style
   style
     | /* HTML5 color input does not support alpha channel */
-    | .color-picker\:a {
+    | .color-picker__control--a {
     |   display: none;
     | }