@spectrum-web-components/slider - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.9.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.9.1...@spectrum-web-components/slider@0.9.2) (2021-03-22)
+
+### Bug Fixes
+
+-   remove right click value setting ([a44968d](https://github.com/adobe/spectrum-web-components/commit/a44968d09120ad9b54915438fb5a134f306fdab2))
+
 ## [0.9.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.9.0...@spectrum-web-components/slider@0.9.1) (2021-03-05)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -70,13 +70,2 @@ {
           "default": "false"
-        },
-        {
-          "name": "autofocus",
-          "description": "When this control is rendered, focus it automatically",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "tabIndex",
-          "description": "The tab index to apply to this control. See general documentation about\nthe tabindex HTML property",
-          "type": "number"
         }
@@ -167,21 +156,4 @@ ],
         {
-          "name": "autofocus",
-          "attribute": "autofocus",
-          "description": "When this control is rendered, focus it automatically",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "tabIndex",
-          "attribute": "tabIndex",
-          "description": "The tab index to apply to this control. See general documentation about\nthe tabindex HTML property",
-          "type": "number"
-        },
-        {
           "name": "focusElement",
           "type": "HTMLElement"
-        },
-        {
-          "name": "shadowRoot",
-          "type": "ShadowRoot"
         }
@@ -188,0 +160,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.9.1",
+    "version": "0.9.2",
     "description": "",
@@ -56,7 +56,7 @@ "main": "./src/index.js",
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.1",
-        "@spectrum-web-components/shared": "^0.11.1",
+        "@spectrum-web-components/base": "^0.4.2",
+        "@spectrum-web-components/shared": "^0.12.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "b7f12041404bffdd65b1472f22b6f3eacbf7157c"
+    "gitHead": "ca6cd53b42caa5c52255f2af313d1689cf67157f"
 }

README.md

@@ -9,2 +9,3 @@ ## Description
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/slider?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/slider)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/U7LQv7LsAVBwJayJXG3B/src/index.ts)
 
@@ -11,0 +12,0 @@ ```

src/Slider.d.ts

@@ -28,4 +28,2 @@ import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
     private labelEl;
-    private supportsPointerEvent;
-    private currentMouseEvent?;
     private boundingClientRect?;
@@ -42,10 +40,5 @@ get focusElement(): HTMLElement;
     private renderTrack;
-    private onPointerDown;
-    private onMouseDown;
-    private _trackMouseEvent;
-    private onPointerUp;
-    private onMouseUp;
-    private onPointerMove;
-    private onMouseMove;
-    private onPointerCancel;
+    private handlePointerdown;
+    private handlePointerup;
+    private handlePointermove;
     /**
@@ -55,4 +48,3 @@ * Move the handle under the cursor and begin start a pointer capture when the track
      */
-    private onTrackPointerDown;
-    private onTrackMouseDown;
+    private handleTrackPointerdown;
     /**
@@ -59,0 +51,0 @@ * Keep the slider value property in sync with the input element's value

src/Slider.js

@@ -14,2 +14,3 @@ /*
 import { html, property, query, styleMap, ifDefined, } from '@spectrum-web-components/base';
+import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
 import sliderStyles from './slider.css.js';
@@ -35,18 +36,2 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
         this.handleHighlight = false;
-        this.supportsPointerEvent = 'setPointerCapture' in this;
-        this.onMouseUp = (event) => {
-            // Retain focus on input element after mouse up to enable keyboard interactions
-            this.labelEl.click();
-            this.currentMouseEvent = event;
-            document.removeEventListener('mousemove', this.onMouseMove);
-            document.removeEventListener('mouseup', this.onMouseUp);
-            requestAnimationFrame(() => {
-                this.handleHighlight = false;
-                this.dragging = false;
-                this.dispatchChangeEvent();
-            });
-        };
-        this.onMouseMove = (event) => {
-            this.currentMouseEvent = event;
-        };
     }
@@ -203,7 +188,6 @@ static get styles() {
                 style=${this.handleStyle}
-                @pointermove=${this.onPointerMove}
-                @pointerdown=${this.onPointerDown}
-                @mousedown=${this.onMouseDown}
-                @pointerup=${this.onPointerUp}
-                @pointercancel=${this.onPointerCancel}
+                @manage=${streamingListener({ type: 'pointerdown', fn: this.handlePointerdown }, { type: 'pointermove', fn: this.handlePointermove }, {
+            type: ['pointerup', 'pointercancel'],
+            fn: this.handlePointerup,
+        })}
                 role="presentation"
@@ -233,6 +217,3 @@ >
         return html `
-            <div
-                @pointerdown=${this.onTrackPointerDown}
-                @mousedown=${this.onTrackMouseDown}
-            >
+            <div @pointerdown=${this.handleTrackPointerdown}>
                 <div id="controls">
@@ -246,4 +227,5 @@ ${this.renderTrackLeft()} ${this.renderRamp()}
     }
-    onPointerDown(event) {
-        if (this.disabled) {
+    handlePointerdown(event) {
+        if (this.disabled || event.button !== 0) {
+            event.preventDefault();
             return;
@@ -256,25 +238,3 @@ }
     }
-    onMouseDown(event) {
-        if (this.supportsPointerEvent) {
-            return;
-        }
-        if (this.disabled) {
-            return;
-        }
-        this.boundingClientRect = this.getBoundingClientRect();
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseup', this.onMouseUp);
-        this.labelEl.click();
-        this.dragging = true;
-        this.currentMouseEvent = event;
-        this._trackMouseEvent();
-    }
-    _trackMouseEvent() {
-        if (!this.currentMouseEvent || !this.dragging) {
-            return;
-        }
-        this.value = this.calculateHandlePosition(this.currentMouseEvent);
-        requestAnimationFrame(() => this._trackMouseEvent());
-    }
-    onPointerUp(event) {
+    handlePointerup(event) {
         // Retain focus on input element after mouse up to enable keyboard interactions
@@ -287,3 +247,3 @@ this.labelEl.click();
     }
-    onPointerMove(event) {
+    handlePointermove(event) {
         if (!this.dragging) {
@@ -294,6 +254,2 @@ return;
     }
-    onPointerCancel(event) {
-        this.dragging = false;
-        this.handle.releasePointerCapture(event.pointerId);
-    }
     /**
@@ -303,4 +259,6 @@ * Move the handle under the cursor and begin start a pointer capture when the track
      */
-    onTrackPointerDown(event) {
-        if (event.target === this.handle || this.disabled) {
+    handleTrackPointerdown(event) {
+        if (event.target === this.handle ||
+            this.disabled ||
+            event.button !== 0) {
             return;
@@ -320,16 +278,2 @@ }
     }
-    onTrackMouseDown(event) {
-        if (this.supportsPointerEvent) {
-            return;
-        }
-        if (event.target === this.handle || this.disabled) {
-            return;
-        }
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseup', this.onMouseUp);
-        this.boundingClientRect = this.getBoundingClientRect();
-        this.dragging = true;
-        this.currentMouseEvent = event;
-        this._trackMouseEvent();
-    }
     /**
@@ -336,0 +280,0 @@ * Keep the slider value property in sync with the input element's value

src/Slider.ts

@@ -23,2 +23,3 @@ /*
 } from '@spectrum-web-components/base';
+import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
 
@@ -134,4 +135,2 @@ import sliderStyles from './slider.css.js';
 
-    private supportsPointerEvent = 'setPointerCapture' in this;
-    private currentMouseEvent?: MouseEvent;
     private boundingClientRect?: DOMRect;
@@ -259,7 +258,10 @@
                 style=${this.handleStyle}
-                @pointermove=${this.onPointerMove}
-                @pointerdown=${this.onPointerDown}
-                @mousedown=${this.onMouseDown}
-                @pointerup=${this.onPointerUp}
-                @pointercancel=${this.onPointerCancel}
+                @manage=${streamingListener(
+                    { type: 'pointerdown', fn: this.handlePointerdown },
+                    { type: 'pointermove', fn: this.handlePointermove },
+                    {
+                        type: ['pointerup', 'pointercancel'],
+                        fn: this.handlePointerup,
+                    }
+                )}
                 role="presentation"
@@ -290,6 +292,3 @@ >
         return html`
-            <div
-                @pointerdown=${this.onTrackPointerDown}
-                @mousedown=${this.onTrackMouseDown}
-            >
+            <div @pointerdown=${this.handleTrackPointerdown}>
                 <div id="controls">
@@ -304,4 +303,5 @@ ${this.renderTrackLeft()} ${this.renderRamp()}
 
-    private onPointerDown(event: PointerEvent): void {
-        if (this.disabled) {
+    private handlePointerdown(event: PointerEvent): void {
+        if (this.disabled || event.button !== 0) {
+            event.preventDefault();
             return;
@@ -315,27 +315,3 @@ }
 
-    private onMouseDown(event: MouseEvent): void {
-        if (this.supportsPointerEvent) {
-            return;
-        }
-        if (this.disabled) {
-            return;
-        }
-        this.boundingClientRect = this.getBoundingClientRect();
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseup', this.onMouseUp);
-        this.labelEl.click();
-        this.dragging = true;
-        this.currentMouseEvent = event;
-        this._trackMouseEvent();
-    }
-
-    private _trackMouseEvent(): void {
-        if (!this.currentMouseEvent || !this.dragging) {
-            return;
-        }
-        this.value = this.calculateHandlePosition(this.currentMouseEvent);
-        requestAnimationFrame(() => this._trackMouseEvent());
-    }
-
-    private onPointerUp(event: PointerEvent): void {
+    private handlePointerup(event: PointerEvent): void {
         // Retain focus on input element after mouse up to enable keyboard interactions
@@ -349,16 +325,3 @@ this.labelEl.click();
 
-    private onMouseUp = (event: MouseEvent): void => {
-        // Retain focus on input element after mouse up to enable keyboard interactions
-        this.labelEl.click();
-        this.currentMouseEvent = event;
-        document.removeEventListener('mousemove', this.onMouseMove);
-        document.removeEventListener('mouseup', this.onMouseUp);
-        requestAnimationFrame(() => {
-            this.handleHighlight = false;
-            this.dragging = false;
-            this.dispatchChangeEvent();
-        });
-    };
-
-    private onPointerMove(event: PointerEvent): void {
+    private handlePointermove(event: PointerEvent): void {
         if (!this.dragging) {
@@ -370,11 +333,2 @@ return;
 
-    private onMouseMove = (event: MouseEvent): void => {
-        this.currentMouseEvent = event;
-    };
-
-    private onPointerCancel(event: PointerEvent): void {
-        this.dragging = false;
-        this.handle.releasePointerCapture(event.pointerId);
-    }
-
     /**
@@ -384,7 +338,12 @@ * Move the handle under the cursor and begin start a pointer capture when the track
      */
-    private onTrackPointerDown(event: PointerEvent): void {
-        if (event.target === this.handle || this.disabled) {
+    private handleTrackPointerdown(event: PointerEvent): void {
+        if (
+            event.target === this.handle ||
+            this.disabled ||
+            event.button !== 0
+        ) {
             return;
         }
         this.boundingClientRect = this.getBoundingClientRect();
+
         this.dragging = true;
@@ -404,17 +363,2 @@ this.handle.setPointerCapture(event.pointerId);
 
-    private onTrackMouseDown(event: MouseEvent): void {
-        if (this.supportsPointerEvent) {
-            return;
-        }
-        if (event.target === this.handle || this.disabled) {
-            return;
-        }
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseup', this.onMouseUp);
-        this.boundingClientRect = this.getBoundingClientRect();
-        this.dragging = true;
-        this.currentMouseEvent = event;
-        this._trackMouseEvent();
-    }
-
     /**
@@ -421,0 +365,0 @@ * Keep the slider value property in sync with the input element's value

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

111

increased by0.91%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

239831

decreased by-3.25%

Lines of code

2518

decreased by-5.37%

Dependency changes

• + Added@spectrum-web-components/shared@0.12.11(transitive)

• - Removed@spectrum-web-components/shared@0.11.1(transitive)

• Updated@spectrum-web-components/base@^0.4.2

• Updated@spectrum-web-components/shared@^0.12.0