Mouse Event

BrightspaceUILabs · Jul 17, 2024 · 4254623 · 4254623
1 parent 226f6a0
commit 4254623
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -70,27 +70,12 @@ <h2>Seek bar with max/min</h2>
 				document.addEventListener('hovering-move', (e) => {
 					document.getElementById('hoverValue').value = Math.round(e.target.hoverValue);
 				});
-
-				function getMinMaxValue() {
-					const seekBar = document.querySelector('d2l-seek-bar');
-					document.getElementById('maxInput').value = seekBar.max;
-					document.getElementById('minInput').value = seekBar.min;
-					document.getElementById('ratioInput').value = seekBar.ratio;
-				}
-
-				document.addEventListener('DOMContentLoaded', () => {
-					getMinMaxValue();
-				});
-
 			</script>
 			<d2l-seek-bar id="seekBar" value="0"></d2l-seek-bar><br>
 			<label>Hovering <input id="hoveringValue" readonly=""></label><br>
 			<label>Dragging <input id="dragValue" readonly=""></label><br>
 			<label>Immediate Value <input id="immediateValue" type="number" readonly=""></label><br>
 			<label>Hover Value <input id="hoverValue" type="number" readonly=""></label><br>
-			<label>Max <input id="maxInput" type="number"></label><br>
-			<label>Min <input id="minInput" type="number"></label><br>
-			<label>Ratio <input id="ratioInput" type="number"></label><br>
 		</d2l-demo-snippet>
 
 		<h2>Seek bar with full width</h2>

diff --git a/seekBar.js b/seekBar.js
@@ -159,6 +159,11 @@ class SeekBar extends InternalDynamicLocalizeMixin(RtlMixin(LitElement)) {
 			console.log('Mouse UP Event from window listener');
 			this._barUp();
 		});
+
+		window.addEventListener('mousemove', (e) => {
+			console.log('Mouse MOVE Event from window listener');
+			this._onTrack(e);
+		});
 	}
 
 	render() {
@@ -179,7 +184,6 @@ class SeekBar extends InternalDynamicLocalizeMixin(RtlMixin(LitElement)) {
 					.max="${this.max}"
 					.value="${this.immediateValue}"
 					@mousedown="${this._barDown}"
-
 					role="slider"
 					aria-label="${this.localize('seekBarProgress')}"
 					aria-orientation="${this.vertical ? 'vertical' : 'horizontal'}"
@@ -238,7 +242,7 @@ class SeekBar extends InternalDynamicLocalizeMixin(RtlMixin(LitElement)) {
 		event.preventDefault();
 		this.focus();
 
-		this.addEventListener('mousemove', this._onTrack);
+		//this.addEventListener('mousemove', this._onTrack);
 	}
 
 	_barUp() {
@@ -305,7 +309,7 @@ class SeekBar extends InternalDynamicLocalizeMixin(RtlMixin(LitElement)) {
 
 	_onHostMove(e) {
 		console.log('HOST Move');
-		if (this.hovering) {
+		if (this.hovering || this.dragging) {
 
 			const rect =  this.shadowRoot.getElementById('knobContainer').getBoundingClientRect();
 			const mousePosition = this.vertical ? rect.bottom - e.clientY : e.clientX - rect.left;
@@ -332,9 +336,11 @@ class SeekBar extends InternalDynamicLocalizeMixin(RtlMixin(LitElement)) {
 	}
 
 	_onTrack(event) {
-		this.dispatchEvent(new CustomEvent('position-change', { bubbles: true, composed: true }));
-		event.stopPropagation();
-		this._track(event);
+		if(this.dragging){
+			this.dispatchEvent(new CustomEvent('position-change', { bubbles: true, composed: true }));
+			event.stopPropagation();
+			this._track(event);	
+		}
 	}
 
 	_positionKnob(ratio) {