From ae80344d24ea84655d141256a189fc617892dcf3 Mon Sep 17 00:00:00 2001
From: janschoenherr <jan@yootheme.com>
Date: Thu, 30 Aug 2018 15:03:03 +0200
Subject: [PATCH] use clamp function to calculate left, top and bright values

---
 package-lock.json                    |  6 ++++++
 package.json                         |  1 +
 src/components/common/Saturation.vue | 21 ++++-----------------
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7bbcb56..d860aba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1861,6 +1861,12 @@
       "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
       "dev": true
     },
+    "clamp": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=",
+      "dev": true
+    },
     "clap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
diff --git a/package.json b/package.json
index 1604f7e..49af08f 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.4.1",
+    "clamp": "^1.0.1",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.28.11",
     "eslint": "^3.19.0",
diff --git a/src/components/common/Saturation.vue b/src/components/common/Saturation.vue
index 3fc4c34..a8b81f0 100644
--- a/src/components/common/Saturation.vue
+++ b/src/components/common/Saturation.vue
@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import clamp from 'clamp'
 import throttle from 'lodash.throttle'
 
 export default {
@@ -53,24 +54,10 @@ export default {
       var yOffset = container.getBoundingClientRect().top + window.pageYOffset
       var pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0)
       var pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0)
-      var left = pageX - xOffset
-      var top = pageY - yOffset
-
-      if (left < 0) {
-        left = 0
-      } else if (left > containerWidth) {
-        left = containerWidth
-      } else if (top < 0) {
-        top = 0
-      } else if (top > containerHeight) {
-        top = containerHeight
-      }
-
+      var left = clamp(pageX - xOffset, 0, containerWidth)
+      var top = clamp(pageY - yOffset, 0, containerHeight)
       var saturation = left / containerWidth
-      var bright = -(top / containerHeight) + 1
-
-      bright = bright > 0 ? bright : 0
-      bright = bright > 1 ? 1 : bright
+      var bright = clamp(-(top / containerHeight) + 1, 0, 1)
 
       this.throttle(this.onChange, {
         h: this.colors.hsv.h,