Merge pull request #406 from Budibase/colorpicker/keyboard-events-and-bugs

Key Events, Folder Tidyup, Bugs

packages/builder/src/components/userInterface/Colorpicker/actions/index.js

@@ -0,0 +1,2 @@
+export { default as drag } from "./drag.js"
+export { default as keyevents } from "./key-events.js"

packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js

@@ -0,0 +1,41 @@
+//events: Array<{trigger: fn}>
+export default function(node, events = []) {
+  const ev = Object.entries(events)
+  let fns = []
+
+  for (let [trigger, fn] of ev) {
+    let f = addEvent(trigger, fn)
+    fns = [...fns, f]
+  }
+
+  function _scaffold(trigger, fn) {
+    return () => {
+      let trig = parseInt(trigger)
+      if (trig) {
+        if (event.keyCode === trig) {
+          fn(event)
+        }
+      } else {
+        if (event.key === trigger) {
+          fn(event)
+        }
+      }
+    }
+  }
+
+  function addEvent(trigger, fn) {
+    let f = _scaffold(trigger, fn)
+    node.addEventListener("keydown", f)
+    return f
+  }
+
+  function removeEvents() {
+    fns.forEach(f => node.removeEventListener("keypress", f))
+  }
+
+  return {
+    destroy() {
+      removeEvents()
+    },
+  }
+}

packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle} from "../helpers.js"
   import { fade } from "svelte/transition"
 
   export let backgroundSize = "10px"

packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte

@@ -3,17 +3,18 @@
   import { fade } from "svelte/transition"
   import Swatch from "./Swatch.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle} from "../helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
     convertHsvaToFormat,
-  } from "./utils.js"
+  } from "../utils.js"
   import Slider from "./Slider.svelte"
   import Palette from "./Palette.svelte"
   import ButtonGroup from "./ButtonGroup.svelte"
   import Input from "./Input.svelte"
   import Portal from "./Portal.svelte"
+  import {keyevents} from "../actions"
 
   export let value = "#3ec1d3ff"
   export let open = false;
@@ -27,10 +28,10 @@
   let colorPicker = null
   let adder = null
 
-  let h = null
+  let h = 0
-  let s = null
+  let s = 0
-  let v = null
+  let v = 0
-  let a = null
+  let a = 0
 
   const dispatch = createEventDispatcher()
 
@@ -56,9 +57,9 @@
     }
   }
 
-  function handleEscape(e) {
+  function handleEscape() {
-    if(open && e.key === "Escape") {
+    if(open) {
-      open = false
+      open = false;
     }
   }
 
@@ -162,15 +163,14 @@
     
 </script>
 
-
 <Portal>
   <div
     class="colorpicker-container"
+    use:keyevents={{"Escape": handleEscape}}
     transition:fade
     bind:this={colorPicker}
     {style}
     tabindex="0"
-    on:keydown={handleEscape}
     bind:clientHeight={pickerHeight}
     bind:clientWidth={pickerWidth}>
 
@@ -215,11 +215,13 @@
           {/if}
           {#if swatches.length !== 12}
             <div
+              tabindex="0"
+              use:keyevents={{"Enter": addSwatch}}
               bind:this={adder}
               transition:fade
               class="adder"
-              on:click={addSwatch}
+              class:shrink
-              class:shrink>
+              on:click={addSwatch}>
               <span>&plus;</span>
             </div>
           {/if}
@@ -246,6 +248,7 @@
     display: flex;
     font-size: 11px;
     font-weight: 400;
+    transition: top 0.1s, left 0.1s;
     flex-direction: column;
     margin: 5px 0px;
     height: auto;
@@ -297,7 +300,7 @@
     flex: 1;
     height: 20px;
     display: flex;
-    transition: flex 0.5s;
+    transition: flex 0.3s;
     justify-content: center;
     align-items: center;
     background: #f1f3f4;
@@ -307,6 +310,8 @@
     margin-left: 5px;
     margin-top: 3px;
     font-weight: 500;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .shrink {

packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte

@@ -1,11 +1,11 @@
 <script>
   import Colorpicker from "./Colorpicker.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, beforeUpdate } from "svelte"
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
 
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle, debounce} from "../helpers.js"
   import { fade } from "svelte/transition"
-  import { getColorFormat } from "./utils.js"
+  import { getColorFormat } from "../utils.js"
 
   export let value = "#3ec1d3ff"
   export let swatches = []
@@ -50,8 +50,8 @@
     dispatch("change", color.detail)
   }
 
-  $: if(open && colorPreview) {
+  function calculateDimensions() {
-    const {
+   const {
       top: spaceAbove,
       width,
       bottom,
@@ -72,11 +72,15 @@
       y = bottom
     }
 
-    x = (left + previewCenter) - (pickerWidth / 2)
+    x = (left + previewCenter) - (220 / 2)
 
     dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) } 
   }
 
+  $: if(open && colorPreview) {
+    calculateDimensions()
+  }
+
   $: previewStyle = buildStyle({ width, height, background: value })
   $: errorPreviewStyle = buildStyle({ width, height })
   $: pickerStyle = buildStyle({
@@ -86,6 +90,8 @@
   
 </script>
 
+<svelte:window on:resize={debounce(calculateDimensions, 200)} />
+
 <div class="color-preview-container">
   {#if !errorMsg}
     <CheckedBackground borderRadius="3px" backgroundSize="8px">

packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte

@@ -1,9 +1,14 @@
 <script>
+  import {createEventDispatcher} from "svelte"
+  import {keyevents} from "../actions"
+
   export let text = ""
   export let selected = false
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<div class="flatbutton" class:selected on:click>{text}</div>
+<div class="flatbutton" tabindex="0" use:keyevents={{"Enter": () => dispatch("click")}}  class:selected on:click>{text}</div>
 
 <style>
   .flatbutton {
@@ -19,11 +24,14 @@
     justify-content: center;
     align-items: center;
     background: #f1f3f4;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .selected {
     color: #ffffff;
     background-color: #003cb0;
     border: none;
+    outline: none;
   }
 </style>

packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte"
-  import dragable from "./drag.js"
+  import {drag, keyevents} from "../actions"
 
   export let value = 1
   export let type = "hue"
@@ -9,6 +9,10 @@
 
   let slider
   let sliderWidth = 0
+  let upperLimit = type === "hue" ? 360 : 1
+  let incrementFactor = type === "hue" ? 1 : 0.01
+
+  const isWithinLimit = value => value >= 0 && value <= upperLimit
 
   function onSliderChange(mouseX, isDrag = false) {
     const { left, width } = slider.getBoundingClientRect()
@@ -17,12 +21,29 @@
     let percentageClick = (clickPosition / sliderWidth).toFixed(2)
 
     if (percentageClick >= 0 && percentageClick <= 1) {
-      let value = type === "hue" ? 360 * percentageClick : percentageClick
       
+      let value = type === "hue" ? 360 * percentageClick : percentageClick
       dispatch("change", { color: value, isDrag })
     }
   }
   
+  function handleLeftKey() {
+    let v = value - incrementFactor
+    if(isWithinLimit(v)) {
+      value = v
+      dispatch("change", { color: value })
+    }
+  }
+
+  function handleRightKey() {
+    let v = value + incrementFactor
+    if(isWithinLimit(v)) {
+      value = v
+      dispatch("change", { color: value })
+
+    }
+  }
+  
   $: thumbPosition =
     type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
@@ -30,14 +51,16 @@
 </script>
 
 <div
+  tabindex="0"
   bind:this={slider}
+  use:keyevents={{37: handleLeftKey, 39: handleRightKey}}
   bind:clientWidth={sliderWidth}
   on:click={event => onSliderChange(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
   class:alpha={type === 'alpha'}>
   <div
-    use:dragable
+    use:drag
     on:drag={e => onSliderChange(e.detail, true)}
     on:dragend
     class="slider-thumb"
@@ -54,6 +77,8 @@
     margin: 10px 0px;
     border: 1px solid #e8e8ef;
     cursor: pointer;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .hue {

packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import { fade } from "svelte/transition"
   import CheckedBackground from "./CheckedBackground.svelte"
+  import {keyevents} from "../actions"
 
   export let hovered = false
   export let color = "#fff"
@@ -12,6 +13,8 @@
 <div class="space">
   <CheckedBackground borderRadius="6px">
     <div
+      tabindex="0"
+      use:keyevents={{"Enter": () => dispatch("click")}}
       in:fade
       class="swatch"
       style={`background: ${color};`}
@@ -38,6 +41,8 @@
     border: 1px solid #dedada;
     height: 20px;
     width: 20px;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .space {

packages/builder/src/components/userInterface/Colorpicker/helpers.js

@@ -1,4 +1,4 @@
-export const buildStyle = styles => {
+export function buildStyle(styles) {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -12,3 +12,9 @@ export const buildStyle = styles => {
 export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
+
+export const debounce = (fn, milliseconds) => {
+  return () => {
+    setTimeout(fn, milliseconds)
+  }
+}

packages/builder/src/components/userInterface/Colorpicker/index.js

@@ -1,2 +1,2 @@
-import Colorpreview from "./Colorpreview.svelte"
+import Colorpreview from "./components/Colorpreview.svelte"
 export default Colorpreview

packages/builder/src/components/userInterface/Colorpicker/utils.js

@@ -144,13 +144,15 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
 
 export const hsvaToHexa = (hsva, asString = false) => {
   const [r, g, b, a] = hsvaToRgba(hsva)
+  const padSingle = hex => (hex.length === 1 ? `0${hex}` : hex)
 
-  const hexa = [r, g, b]
+  let hexa = [r, g, b].map(v => {
-    .map(v => {
+    let hex = Math.round(v).toString(16)
-      let hex = Math.round(v).toString(16)
+    return padSingle(hex)
-      return hex.length === 1 ? `0${hex}` : hex
+  })
-    })
+
-    .concat(Math.round(a * 255).toString(16))
+  let alpha = padSingle(Math.round(a * 255).toString(16))
+  hexa = [...hexa, alpha]
   return asString ? `#${hexa.join("")}` : hexa
 }