Remove 'picker.value' Property

taufik-nurrohman · Jul 7, 2021 · 67dc260 · 67dc260
1 parent 10e6027
commit 67dc260
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 16 deletions.
diff --git a/.github/source/index.html.pug b/.github/source/index.html.pug
@@ -284,8 +284,6 @@ block content
       | }, false);
     h3 picker.state
     p Return the modified color picker states.
-    h3 picker.value
-    p Return the initial color value.
     h3 picker.visible
     p Check if color picker pane is visible.
     pre: code if (picker.visible) { &hellip; }

diff --git a/.github/source/index.js.mjs b/.github/source/index.js.mjs
@@ -1,4 +1,4 @@
-import {B, D, R, W, getDatum, getParent, getState, getText, letElement, setChildLast, setDatum, setElement, setState, setStyle, setText} from '@taufik-nurrohman/document';
+import {B, D, R, W, getDatum, getParent, getState, getText, letClass, letElement, setChildLast, setClass, setDatum, setElement, setState, setStyle, setText} from '@taufik-nurrohman/document';
 import {offEvent, offEventDefault, offEvents, onEvent, onEvents} from '@taufik-nurrohman/event';
 import {fromStates} from '@taufik-nurrohman/from';
 import {hook} from '@taufik-nurrohman/hook';
@@ -120,7 +120,6 @@ function CP(source, state = {}) {
     }
 
     $.source = source;
-    $.value = getValue();
     $.visible = false;
 
     // Store current instance to `CP.instances`
@@ -396,6 +395,7 @@ function CP(source, state = {}) {
                 return $; // Already ejected
             }
             delete source[name];
+            letClass(source, className + '-source');
             offEvents(EVENTS_DOWN, source, doClick);
             return doExit(), fire('pop', theColor);
         };
@@ -411,6 +411,8 @@ function CP(source, state = {}) {
             return doSetColor(), $;
         };
 
+        setClass(source, className + '-source');
+
     } doApply(1);
 
     function doClick(e) {

diff --git a/README.md b/README.md
@@ -56,9 +56,13 @@ This project exists thanks to all the people who contribute.
 Release Notes
 -------------
 
+### 2.3.1
+
+ - Removed `picker.value` property. Initial color data can be stored manually before initialization.
+
 ### 2.3.0
 
-Starting from this version, you need to have a form element to store the color data. It doesn&rsquo;t have to be visible. You can use `<input type="hidden">` if you want. We no longer support storing color data via `data-color` attribute and element content.
+Starting from this version, you need to have a form element to store the color data. We no longer support storing color data via `data-color` attribute and element content.
 
  - Added `picker._set()` method.
  - Added `picker.value` property to store the initial color data.

diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta content="#000" name="theme-color">
     <meta content="width=device-width" name="viewport">
     <meta content="A simple color picker application written in pure JavaScript, for modern browsers." name="description">
-    <title>Color Picker 2.3.0</title>
+    <title>Color Picker 2.3.1</title>
     <link href="index.min.css" rel="stylesheet">
     <style>
       * {
@@ -70,7 +70,7 @@
   <body>
     <p>Do you like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p>
     <header>
-      <h1>Color Picker 2.3.0</h1>
+      <h1>Color Picker 2.3.1</h1>
       <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.</p>
       <hr>
     </header>
@@ -273,8 +273,6 @@ <h3>picker.source</h3>
 }, false);</code></pre>
       <h3>picker.state</h3>
       <p>Return the modified color picker states.</p>
-      <h3>picker.value</h3>
-      <p>Return the initial color value.</p>
       <h3>picker.visible</h3>
       <p>Check if color picker pane is visible.</p>
       <pre><code>if (picker.visible) { &hellip; }</code></pre>

diff --git a/index.js b/index.js
@@ -146,6 +146,9 @@
     var letAttribute = function letAttribute(node, attribute) {
         return node.removeAttribute(attribute), node;
     };
+    var letClass = function letClass(node, value) {
+        return node.classList.remove(value), node;
+    };
     var letElement = function letElement(node) {
         var parent = getParent(node);
         return node.remove(), parent;
@@ -171,6 +174,9 @@
     var setChildLast = function setChildLast(parent, node) {
         return parent.append(node), node;
     };
+    var setClass = function setClass(node, value) {
+        return node.classList.add(value), node;
+    };
     var setElement = function setElement(node, content, attributes) {
         node = isString(node) ? D.createElement(node) : node;
         if (isObject(content)) {
@@ -416,7 +422,6 @@
             return [0, 0, 0, 1]; // Default to black
         }
         $.source = source;
-        $.value = getValue();
         $.visible = false; // Store current instance to `CP.instances`
         CP.instances[source.id || source.name || toObjectCount(CP.instances)] = $; // Mark current DOM as active color picker to prevent duplicate instance
         source[name] = 1;
@@ -663,6 +668,7 @@
                     return $; // Already ejected
                 }
                 delete source[name];
+                letClass(source, className + '-source');
                 offEvents(EVENTS_DOWN, source, doClick);
                 return doExit(), fire('pop', theColor);
             };
@@ -674,6 +680,7 @@
                 theData = RGB2HSV([r, g, b, a]);
                 return doSetColor(), $;
             };
+            setClass(source, className + '-source');
         }
         doApply(1);
 
@@ -720,6 +727,6 @@
         'color': COLOR_TYPE,
         'parent': null
     };
-    CP.version = '2.3.0';
+    CP.version = '2.3.1';
     return CP;
 });