From f7cdd5a83bd3d801d6dd9490b2bfb5e8e05a74ae Mon Sep 17 00:00:00 2001 From: Berkin AKKAYA Date: Mon, 31 Aug 2020 16:41:02 +0300 Subject: [PATCH 1/5] Now width & height can be changed --- README.md | 2 ++ src/HsvPicker.svelte | 35 +++++++++++++++++------------------ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index fd0912c..b6cc6a5 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,8 @@ Svelte Color Picker currently has one type of colorpicker. | ------ | ------ | ------ | | on:colorChange | function | Given function gets called every time color changes | | startColor | string | Initializes color picker with the value (hexadecimal without alpha). | +| width | number | Changes the color picker's width `default: 240` | +| height | number | Changes the color picker's height `default: 265` | License ---- diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index 9e5e1dc..1baa192 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -2,6 +2,8 @@ import {onMount,createEventDispatcher} from 'svelte'; export let startColor ="#FF0000"; +export let width = 240; +export let height = 265; onMount(() => { document.addEventListener("mouseup", mouseUp); @@ -48,15 +50,10 @@ function setStartColor() { updateHuePicker(); } -function removeEventListenerFromElement(elementId, eventName, listenerCallback) { - let element = document.querySelector(elementId); - if (element) element.removeEventListener(eventName, listenerCallback); -} - function killMouseEvents() { - removeEventListenerFromElement("#alpha-event", "mousedown", alphaDown); - removeEventListenerFromElement("#colorsquare-event", "mousedown", csDown); - removeEventListenerFromElement("#hue-event", "mousedown", hueDown); + document.querySelector("#alpha-event").removeEventListener("mousedown",alphaDown); + document.querySelector("#colorsquare-event").removeEventListener("mousedown",csDown); + document.querySelector("#hue-event").removeEventListener("mousedown",hueDown); document.removeEventListener("mouseup",mouseUp); document.removeEventListener("mousemove",mouseMove); document.removeEventListener("touchstart",killMouseEvents); @@ -64,9 +61,9 @@ function killMouseEvents() { } function killTouchEvents() { - removeEventListenerFromElement("#alpha-event", "touchstart", alphaDownTouch); - removeEventListenerFromElement("#colorsquare-event", "touchstart", csDownTouch); - removeEventListenerFromElement("#hue-event", "touchstart", hueDownTouch); + document.querySelector("#alpha-event").removeEventListener("touchstart",alphaDownTouch); + document.querySelector("#colorsquare-event").removeEventListener("touchstart",csDownTouch); + document.querySelector("#hue-event").removeEventListener("touchstart",hueDownTouch); document.removeEventListener("touchend",mouseUp); document.removeEventListener("touchmove",touchMove); document.removeEventListener("touchstart",killMouseEvents); @@ -393,8 +390,6 @@ function rgbToHSV(r, g, b, update) { -
+
From 713c2533f8e3ac09be8d0dd47846f12877d0c0c3 Mon Sep 17 00:00:00 2001 From: Berkin AKKAYA Date: Mon, 31 Aug 2020 16:41:39 +0300 Subject: [PATCH 2/5] Add files via upload From 692d0f041c112a6379bc317647747ff51b5596d3 Mon Sep 17 00:00:00 2001 From: Berkin AKKAYA Date: Mon, 31 Aug 2020 16:43:05 +0300 Subject: [PATCH 3/5] Update HsvPicker.svelte --- src/HsvPicker.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index 1baa192..659eefa 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -51,9 +51,9 @@ function setStartColor() { } function killMouseEvents() { - document.querySelector("#alpha-event").removeEventListener("mousedown",alphaDown); - document.querySelector("#colorsquare-event").removeEventListener("mousedown",csDown); - document.querySelector("#hue-event").removeEventListener("mousedown",hueDown); + removeEventListenerFromElement("#alpha-event", "mousedown", alphaDown); + removeEventListenerFromElement("#colorsquare-event", "mousedown", csDown); + removeEventListenerFromElement("#hue-event", "mousedown", hueDown); document.removeEventListener("mouseup",mouseUp); document.removeEventListener("mousemove",mouseMove); document.removeEventListener("touchstart",killMouseEvents); @@ -61,9 +61,9 @@ function killMouseEvents() { } function killTouchEvents() { - document.querySelector("#alpha-event").removeEventListener("touchstart",alphaDownTouch); - document.querySelector("#colorsquare-event").removeEventListener("touchstart",csDownTouch); - document.querySelector("#hue-event").removeEventListener("touchstart",hueDownTouch); + removeEventListenerFromElement("#alpha-event", "touchstart", alphaDownTouch); + removeEventListenerFromElement("#colorsquare-event", "touchstart", csDownTouch); + removeEventListenerFromElement("#hue-event", "touchstart", hueDownTouch); document.removeEventListener("touchend",mouseUp); document.removeEventListener("touchmove",touchMove); document.removeEventListener("touchstart",killMouseEvents); From 1168375e3df50f3866ec6c542e5034797ff8005e Mon Sep 17 00:00:00 2001 From: Berkin AKKAYA Date: Mon, 31 Aug 2020 16:43:49 +0300 Subject: [PATCH 4/5] Update HsvPicker.svelte --- src/HsvPicker.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index 659eefa..5a9a48d 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -49,6 +49,11 @@ function setStartColor() { updateCsPicker(); updateHuePicker(); } + +function removeEventListenerFromElement(elementId, eventName, listenerCallback) { + let element = document.querySelector(elementId); + if (element) element.removeEventListener(eventName, listenerCallback); +} function killMouseEvents() { removeEventListenerFromElement("#alpha-event", "mousedown", alphaDown); From f802da73bf653907f4ebdfe7f77197291a0bc856 Mon Sep 17 00:00:00 2001 From: Berkin AKKAYA Date: Tue, 1 Sep 2020 17:06:36 +0300 Subject: [PATCH 5/5] Update HsvPicker.svelte --- src/HsvPicker.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index 5a9a48d..7f69fd6 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -49,10 +49,10 @@ function setStartColor() { updateCsPicker(); updateHuePicker(); } - -function removeEventListenerFromElement(elementId, eventName, listenerCallback) { - let element = document.querySelector(elementId); - if (element) element.removeEventListener(eventName, listenerCallback); + +function removeEventListenerFromElement(elementId, eventName, listenerCallback) { + let element = document.querySelector(elementId); + if (element) element.removeEventListener(eventName, listenerCallback); } function killMouseEvents() {