Add Transition Effect Example

taufik-nurrohman · taufik-nurrohman · commit 311c63a34f6a · 2020-09-26T20:41:21.000+07:00
diff --git a/README.md b/README.md
@@ -46,6 +46,12 @@ This project exists thanks to all the people who contribute.
 Release Notes
 -------------
 
+### 2.1.3
+
+ - Added transition effect example.
+ - Removed opacity value rounding internally.
+ - Updated to pass the Firefox extension validator (#57)
+
 ### 2.1.2
 
  - Updated the donation target.
diff --git a/color-picker.transition.html b/color-picker.transition.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta content="width=device-width" name="viewport">
+    <title>Color Picker</title>
+    <link href="color-picker.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <p><input type="text"></p>
+    <script src="color-picker.min.js"></script>
+    <script>
+
+    var picker = new CP(document.querySelector('input'));
+
+    picker.on('change', function(r, g, b, a) {
+        this.source.value = this.color(r, g, b, a);
+    });
+
+    picker.self.style.opacity = 0;
+    picker.self.style.transition = 'opacity .5s ease';
+
+    picker.self.addEventListener('transitionend', function() {
+        var opacity = +(this.style.opacity || 0);
+        0 === opacity && picker.exit(); // Hide color picker pane on transition end
+    });
+
+    picker.on('focus', function() {
+        this.enter();
+        this.self.style.opacity = 1;
+    });
+
+    picker.on('blur', function() {
+        // this.exit();
+        this.self.style.opacity = 0;
+    });
+
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -66,7 +66,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 v2.1.2</h1>
+      <h1>Color Picker v2.1.3</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>
@@ -141,6 +141,7 @@ <h2>Examples</h2>
         <li><a href="color-picker.events.html" target="_blank">Show and Hide Color Picker with Double Click</a></li>
         <li><a href="color-picker.close.html" target="_blank">Add Close Button to the Color Picker</a></li>
         <li><a href="color-picker.static.html" target="_blank">Static Color Picker</a></li>
+        <li><a href="color-picker.transition.html" target="_blank">Transition Effects</a></li>
         <li><a href="color-picker.replace.html" target="_blank">Replace Text Input with Hidden Input</a></li>
         <li><a href="color-picker.pop.html" target="_blank">Destroy Color Picker</a></li>
         <li><a href="color-picker.fit.html" target="_blank">Auto-Positioned to the Reachable Area in the Document</a></li>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@taufik-nurrohman/color-picker",
   "description": "A simple color picker application written in pure JavaScript, for modern browsers.",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "main": "color-picker.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@taufik-nurrohman/color-picker",`
`3`	`3`	`"description": "A simple color picker application written in pure JavaScript, for modern browsers.",`
`4`		`- "version": "2.1.2",`
	`4`	`+ "version": "2.1.3",`
`5`	`5`	`"main": "color-picker.js",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"test": "echo \"Error: no test specified\" && exit 1",`