using Pickr to support colour picker on older browsers

jakubfiala · Dec 15, 2020 · 0965f80 · 0965f80
1 parent 8c75eec
commit 0965f80
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -91,3 +91,47 @@ simButton.addEventListener('click', async e => {
 
   atrament.endStroke(prevPoint.x, prevPoint.y);
 });
+
+// Simple example, see optional options for more configuration.
+const pickr = Pickr.create({
+  el: '#color-picker',
+  theme: 'classic',
+  default: 'rgb(0,0,0)',
+  swatches: [
+      'rgb(244, 67, 54)',
+      'rgb(233, 30, 99)',
+      'rgb(156, 39, 176)',
+      'rgb(103, 58, 183)',
+      'rgb(63, 81, 181)',
+      'rgb(33, 150, 243)',
+      'rgb(3, 169, 244)',
+      'rgb(0, 188, 212)',
+      'rgb(0, 150, 136)',
+      'rgb(76, 175, 80)',
+      'rgb(139, 195, 74)',
+      'rgb(205, 220, 57)',
+      'rgb(255, 235, 59)',
+      'rgb(255, 193, 7)'
+  ],
+  components: {
+      // Main components
+      preview: true,
+      opacity: true,
+      hue: true,
+      // Input / output Options
+      interaction: {
+          hex: true,
+          rgb: true,
+          hsla: true,
+          hsva: true,
+          cmyk: true,
+          input: true,
+          clear: true,
+          save: true
+      }
+  },
+});
+
+pickr.on('save', color => {
+  atrament.color = color.toRGBA().toString();
+});
diff --git a/demo/index.html b/demo/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title>atrament.js ~ demo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->
+    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
     <script src="../dist/atrament.min.js"></script>
     <script defer src="demo.js"></script>
     <style>
@@ -50,6 +52,17 @@
       #clear {
         display: none;
       }
+
+      .pickr {
+        display: inline-block;
+        height: 1.75em;
+        overflow: hidden;
+        border: solid 2px;
+        border-radius: 5px;
+        margin-bottom: 0;
+        vertical-align: middle;
+        margin-left: 5px;
+      }
     </style>
   </head>
   <body>
@@ -96,12 +109,7 @@ <h1>atrament.js</h1>
         <option value="disabled" default>Disabled</option>
       </select><br />
       <label>Colour</label>
-      <input
-        type="color"
-        onchange="atrament.color = event.target.value;"
-        value="#000000"
-        autocomplete="off"
-      /><br />
+      <div id="color-picker"></div><br />
       <output><pre id="events"></pre></output>
     </form>
     <canvas id="sketcher"></canvas>