From b4fcd91e8f767bca40a0cf6e31bd5892a4ad5a53 Mon Sep 17 00:00:00 2001 From: Shubham-Rasal Date: Thu, 9 Feb 2023 21:23:23 +0530 Subject: [PATCH 1/5] feature: added dragable element Signed-off-by: Shubham-Rasal --- res/css/views/elements/_Slider.pcss | 14 ++++++ src/components/views/elements/Slider.tsx | 56 ++++++++++++++++++++++++ 2 files changed, 70 insertions(+) diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss index d7d7dd7168e..6ab30bac068 100644 --- a/res/css/views/elements/_Slider.pcss +++ b/res/css/views/elements/_Slider.pcss @@ -61,6 +61,17 @@ limitations under the License. z-index: 10; } +.mx_Slider_selectionDotInner { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + /* background-color: white; */ + background-color: $accent; + z-index: 10; + pointer-events: all; +} + .mx_Slider_selectionText { color: $muted-fg-color; font-size: $font-14px; @@ -68,6 +79,9 @@ limitations under the License. text-align: center; top: 30px; width: 100%; + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ } .mx_Slider_selection > hr { diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index f6535679bec..371462742bd 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -35,6 +35,12 @@ interface IProps { } export default class Slider extends React.Component { + // state to keep track of the current index and percent + state = { + index: this.props.values.indexOf(this.props.value), + percent: this.offset(this.props.values, this.props.value), + }; + // offset is a terrible inverse approximation. // if the values represents some function f(x) = y where x is the // index of the array and y = values[x] then offset(f, y) = x @@ -83,11 +89,57 @@ export default class Slider extends React.Component { let selection = null; + const onDrag = (e: React.DragEvent) => { + // console.log(e.target.parentNode.parentNode) + + const target = e.target as HTMLElement; + if (!target.parentNode) return null; + const parent = target.parentNode as HTMLElement; + if (!parent.parentNode) return null; + const slider = parent.parentNode as HTMLElement; + const rect = slider.getBoundingClientRect(); + + const x = e.clientX - rect.left; //x position within the element. + const width = rect.width; + const percent = x / width; + const value = Math.round(percent * (this.props.values.length - 1)); + this.setState({ index: value, percent: percent * 100 }); + + //put the inner dot to the correct position + const innerDot = target.parentNode as any; + if (!innerDot) return null; + innerDot.style.left = `${this.state.percent}%`; + }; + + const onDragEnd = (e: any) => { + const innerDot = e.target.parentNode; + const target = e.target as HTMLElement; + if (!target.parentNode) return null; + const parent = target.parentNode as HTMLElement; + if (!parent.parentNode) return null; + const slider = parent.parentNode as HTMLElement; + const rect = slider.getBoundingClientRect(); + const x = e.clientX - rect.left; //x position within the element. + const width = rect.width; + + const percent = x / width; + const value = Math.round(percent * (this.props.values.length - 1)); + const offset = this.offset(this.props.values, this.props.values[value]); + innerDot.style.left = `${offset}%`; + this.props.onSelectionChange(this.props.values[value]); + }; + if (!this.props.disabled) { const offset = this.offset(this.props.values, this.props.value); selection = (
+
{this.props.value}
@@ -95,6 +147,10 @@ export default class Slider extends React.Component { ); } + //todo: + //make a new element for dragging + //immplement drag + return (
From fe3d62ba8354fbe5505733d042b4c6bea662d9eb Mon Sep 17 00:00:00 2001 From: Shubham-Rasal Date: Thu, 9 Feb 2023 22:44:13 +0530 Subject: [PATCH 2/5] fixed out of bounds error --- src/components/views/elements/Slider.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index 371462742bd..e4380d85f98 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -108,7 +108,10 @@ export default class Slider extends React.Component { //put the inner dot to the correct position const innerDot = target.parentNode as any; if (!innerDot) return null; - innerDot.style.left = `${this.state.percent}%`; + // innerDot.style.left = `${this.state.percent}%`; + const offset = this.offset(this.props.values, this.props.values[value]); + innerDot.style.left = `calc(-1.195em + " + ${offset} + "%)`; + }; const onDragEnd = (e: any) => { @@ -120,12 +123,14 @@ export default class Slider extends React.Component { const slider = parent.parentNode as HTMLElement; const rect = slider.getBoundingClientRect(); const x = e.clientX - rect.left; //x position within the element. + // console.log(x); + if(x < -10 || x > rect.width + 10) return null; const width = rect.width; const percent = x / width; const value = Math.round(percent * (this.props.values.length - 1)); const offset = this.offset(this.props.values, this.props.values[value]); - innerDot.style.left = `${offset}%`; + innerDot.style.left = `calc(-1.195em + " + ${offset} + "%)`; this.props.onSelectionChange(this.props.values[value]); }; From 554c91ad2fbfb9f7fb834153d8388508ec3e25a9 Mon Sep 17 00:00:00 2001 From: Shubham Rasal <95695273+Shubham-Rasal@users.noreply.github.com> Date: Fri, 10 Feb 2023 15:24:01 +0530 Subject: [PATCH 3/5] Update src/components/views/elements/Slider.tsx removed comments Co-authored-by: Germain --- src/components/views/elements/Slider.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index e4380d85f98..266e3e728d5 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -152,10 +152,6 @@ export default class Slider extends React.Component { ); } - //todo: - //make a new element for dragging - //immplement drag - return (
From f3b8f4a3764b63173ba25547193a7a548e30f389 Mon Sep 17 00:00:00 2001 From: Shubham Rasal <95695273+Shubham-Rasal@users.noreply.github.com> Date: Fri, 10 Feb 2023 15:24:24 +0530 Subject: [PATCH 4/5] Update src/components/views/elements/Slider.tsx removed console.log comment Co-authored-by: Germain --- src/components/views/elements/Slider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index 266e3e728d5..ec9c6a33e7a 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -90,7 +90,6 @@ export default class Slider extends React.Component { let selection = null; const onDrag = (e: React.DragEvent) => { - // console.log(e.target.parentNode.parentNode) const target = e.target as HTMLElement; if (!target.parentNode) return null; From 8b016fcbf4da37efa68e644913cc41680eb1052c Mon Sep 17 00:00:00 2001 From: Shubham Rasal <95695273+Shubham-Rasal@users.noreply.github.com> Date: Fri, 10 Feb 2023 16:08:38 +0530 Subject: [PATCH 5/5] Update src/components/views/elements/Slider.tsx Co-authored-by: Germain --- src/components/views/elements/Slider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index ec9c6a33e7a..e74b2624ddd 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -107,7 +107,6 @@ export default class Slider extends React.Component { //put the inner dot to the correct position const innerDot = target.parentNode as any; if (!innerDot) return null; - // innerDot.style.left = `${this.state.percent}%`; const offset = this.offset(this.props.values, this.props.values[value]); innerDot.style.left = `calc(-1.195em + " + ${offset} + "%)`;