@advanced-rest-client/arc-scroll-target-mixin
Advanced tools
@advanced-rest-client/arc-scroll-target-mixin - npm Package Compare versions
Comparing version 1.0.2 to 1.1.0
@@ -1,339 +0,3 @@ | ||
| /** | ||
| * This mixin is a port of [IronScrollTargetBehavior](https://github.com/PolymerElements/iron-acroll-target-behavior) | ||
| * that works with LitElements. | ||
| * | ||
| * `ArcScrollTargetMixin` allows an element to respond to scroll | ||
| * events from a designated scroll target. | ||
| * | ||
| * Elements that consume this mixin can override the `_scrollHandler` | ||
| * method to add logic on the scroll event. | ||
| * | ||
| * | ||
| * ## Usage | ||
| * | ||
| * ```javascript | ||
| * import { LitElement } from 'lit-element'; | ||
| * import { ArcScrollTargetMixin } from '@advanced-rest-client/arc-scroll-target-mixin/arc-scroll-target-mixin.js'; | ||
| * | ||
| * class ArcOverlayImpl extends ArcScrollTargetMixin(LitElement) { | ||
| * _scrollHandler(e) { | ||
| * ... | ||
| * } | ||
| * } | ||
| * ``` | ||
| * | ||
| * @demo demo/scrolling-region.html Scrolling Region | ||
| * @demo demo/index.html Document Element | ||
| * @param {Class} superClass | ||
| * @return {Class} | ||
| */ | ||
| export const ArcScrollTargetMixin = (superClass) => class extends superClass { | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * Specifies the element that will handle the scroll event | ||
| * on the behalf of the current element. This is typically a reference to an | ||
| *element, but there are a few more posibilities: | ||
| * | ||
| * ### Elements id | ||
| * | ||
| *```html | ||
| * <div id="scrollable-element" style="overflow: auto;"> | ||
| * <x-element scroll-target="scrollable-element"> | ||
| * <!-- Content--> | ||
| * </x-element> | ||
| * </div> | ||
| *``` | ||
| * In this case, the `scrollTarget` will point to the outer div element. | ||
| * | ||
| * ### Document scrolling | ||
| * | ||
| * For document scrolling, you can use the reserved word `document`: | ||
| * | ||
| *```html | ||
| * <x-element scroll-target="document"> | ||
| * <!-- Content --> | ||
| * </x-element> | ||
| *``` | ||
| * | ||
| * ### Elements reference | ||
| * | ||
| *```js | ||
| * appHeader.scrollTarget = document.querySelector('#scrollable-element'); | ||
| *``` | ||
| * | ||
| * @type {HTMLElement} | ||
| * @default document | ||
| */ | ||
| scrollTarget: { type: HTMLElement }, | ||
| /** | ||
| * The `scroll-target` attribute is deprecated as it is inconsistent | ||
| * with web platform attributes. | ||
| * @type {HTMLElement} | ||
| * @deprecated Use `scrolltarget` attribute instead | ||
| */ | ||
| _legacyTarget: { type: HTMLElement, attribute: 'scroll-target' } | ||
| }; | ||
| } | ||
| // left for compatibility. Will be removed. | ||
| get scrollTarget() { | ||
| return this._scrollTarget; | ||
| } | ||
| set scrollTarget(value) { | ||
| if (value === this._scrollTarget) { | ||
| return; | ||
| } | ||
| this._scrollTarget = value; | ||
| this._scrollTargetChanged(value); | ||
| } | ||
| get _legacyTarget() { | ||
| return this._scrollTarget; | ||
| } | ||
| set _legacyTarget(value) { | ||
| this.scrollTarget = value; | ||
| } | ||
| get isAttached() { | ||
| return this._isAttached; | ||
| } | ||
| set isAttached(value) { | ||
| this._isAttached = value; | ||
| this._scrollTargetChanged(this._scrollTarget); | ||
| } | ||
| /** | ||
| * The default scroll target. Consumers of this behavior may want to customize | ||
| * the default scroll target. | ||
| * | ||
| * @type {Element} | ||
| */ | ||
| get _defaultScrollTarget() { | ||
| return this._doc; | ||
| } | ||
| /** | ||
| * Shortcut for the document element | ||
| * | ||
| * @type {Element} | ||
| */ | ||
| get _doc() { | ||
| return this.ownerDocument.documentElement; | ||
| } | ||
| /** | ||
| * Gets the number of pixels that the content of an element is scrolled | ||
| * upward. | ||
| * | ||
| * @type {number} | ||
| */ | ||
| get _scrollTop() { | ||
| if (this._isValidScrollTarget()) { | ||
| return this.scrollTarget === this._doc ? window.pageYOffset : | ||
| this.scrollTarget.scrollTop; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * Gets the number of pixels that the content of an element is scrolled to the | ||
| * left. | ||
| * | ||
| * @type {number} | ||
| */ | ||
| get _scrollLeft() { | ||
| if (this._isValidScrollTarget()) { | ||
| return this.scrollTarget === this._doc ? window.pageXOffset : | ||
| this.scrollTarget.scrollLeft; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * Sets the number of pixels that the content of an element is scrolled | ||
| * upward. | ||
| * | ||
| * @type {Number} | ||
| * @param {Number} top | ||
| */ | ||
| set _scrollTop(top) { | ||
| if (this.scrollTarget === this._doc) { | ||
| window.scrollTo(window.pageXOffset, top); | ||
| } else if (this._isValidScrollTarget()) { | ||
| this.scrollTarget.scrollTop = top; | ||
| } | ||
| } | ||
| /** | ||
| * Sets the number of pixels that the content of an element is scrolled to the | ||
| * left. | ||
| * | ||
| * @type {Number} | ||
| * @param {Number} left | ||
| */ | ||
| set _scrollLeft(left) { | ||
| if (this.scrollTarget === this._doc) { | ||
| window.scrollTo(left, window.pageYOffset); | ||
| } else if (this._isValidScrollTarget()) { | ||
| this.scrollTarget.scrollLeft = left; | ||
| } | ||
| } | ||
| constructor() { | ||
| super(); | ||
| this.scrollTarget = this._defaultScrollTarget; | ||
| /** | ||
| * True if the event listener should be installed. | ||
| */ | ||
| this._shouldHaveListener = true; | ||
| } | ||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| this.isAttached = true; | ||
| setTimeout(() => { | ||
| if (!this._oldScrollTarget && this.scrollTarget) { | ||
| this._scrollTargetChanged(this._scrollTarget); | ||
| } | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); | ||
| this.isAttached = false; | ||
| } | ||
| /** | ||
| * Runs on every scroll event. Consumer of this behavior may override this | ||
| * method. | ||
| * | ||
| * @protected | ||
| */ | ||
| _scrollHandler() {} | ||
| _scrollTargetChanged(scrollTarget) { | ||
| if (this._oldScrollTarget) { | ||
| this._toggleScrollListener(false, this._oldScrollTarget); | ||
| this._oldScrollTarget = null; | ||
| } | ||
| if (!this.isAttached) { | ||
| return; | ||
| } | ||
| // Support element id references | ||
| if (scrollTarget === 'document') { | ||
| this.scrollTarget = this._doc; | ||
| } else if (typeof scrollTarget === 'string') { | ||
| if (!this.shadowRoot) { | ||
| // shadowRoot is not yet ready. In connectedCallback it checks | ||
| // whether this happended and calls this again to reinitialize. | ||
| return; | ||
| } | ||
| const rootNode = this.getRootNode && this.getRootNode(); | ||
| let target; | ||
| if (rootNode) { | ||
| target = rootNode.querySelector('#' + scrollTarget); | ||
| } | ||
| if (!target) { | ||
| this.ownerDocument.querySelector('#' + scrollTarget); | ||
| } | ||
| this.scrollTarget = target; | ||
| } else if (this._isValidScrollTarget()) { | ||
| this._oldScrollTarget = scrollTarget; | ||
| this._toggleScrollListener(this._shouldHaveListener, scrollTarget); | ||
| } | ||
| } | ||
| /** | ||
| * Scrolls the content to a particular place. | ||
| * | ||
| * @method scroll | ||
| * @param {number|!{left: number, top: number}} leftOrOptions The left position or scroll options | ||
| * @param {number=} top The top position | ||
| * @return {void} | ||
| */ | ||
| scroll(leftOrOptions, top) { | ||
| let left; | ||
| if (typeof leftOrOptions === 'object') { | ||
| left = leftOrOptions.left; | ||
| top = leftOrOptions.top; | ||
| } else { | ||
| left = leftOrOptions; | ||
| } | ||
| left = left || 0; | ||
| top = top || 0; | ||
| if (this.scrollTarget === this._doc) { | ||
| window.scrollTo(left, top); | ||
| } else if (this._isValidScrollTarget()) { | ||
| this.scrollTarget.scrollLeft = left; | ||
| this.scrollTarget.scrollTop = top; | ||
| } | ||
| } | ||
| /** | ||
| * Gets the width of the scroll target. | ||
| * | ||
| * @type {number} | ||
| */ | ||
| get _scrollTargetWidth() { | ||
| if (this._isValidScrollTarget()) { | ||
| return this.scrollTarget === this._doc ? window.innerWidth : | ||
| this.scrollTarget.offsetWidth; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * Gets the height of the scroll target. | ||
| * | ||
| * @type {number} | ||
| */ | ||
| get _scrollTargetHeight() { | ||
| if (this._isValidScrollTarget()) { | ||
| return this.scrollTarget === this._doc ? window.innerHeight : | ||
| this.scrollTarget.offsetHeight; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * Returns true if the scroll target is a valid HTMLElement. | ||
| * | ||
| * @return {boolean} | ||
| */ | ||
| _isValidScrollTarget() { | ||
| return this.scrollTarget instanceof HTMLElement; | ||
| } | ||
| _toggleScrollListener(yes, scrollTarget) { | ||
| if (!scrollTarget) { | ||
| return; | ||
| } | ||
| const eventTarget = scrollTarget === this._doc ? window : scrollTarget; | ||
| if (yes) { | ||
| if (!this._boundScrollHandler) { | ||
| this._boundScrollHandler = this._scrollHandler.bind(this); | ||
| eventTarget.addEventListener('scroll', this._boundScrollHandler); | ||
| } | ||
| } else { | ||
| if (this._boundScrollHandler) { | ||
| eventTarget.removeEventListener('scroll', this._boundScrollHandler); | ||
| this._boundScrollHandler = null; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Enables or disables the scroll event listener. | ||
| * | ||
| * @param {boolean} yes True to add the event, False to remove it. | ||
| */ | ||
| toggleScrollListener(yes) { | ||
| this._shouldHaveListener = yes; | ||
| this._toggleScrollListener(yes, this.scrollTarget); | ||
| } | ||
| }; | ||
| export { ArcScrollTargetMixin } from './src/ArcScrollTargetMixin.js'; |
100
package.json
| { | ||
| "name": "@advanced-rest-client/arc-scroll-target-mixin", | ||
| "description": "arc-scroll-target-mixin is a port of iron-scroll-target-behavior that works with LitElement", | ||
| "version": "1.0.2", | ||
| "version": "1.1.0", | ||
| "license": "Apache-2.0", | ||
| "main": "arc-scroll-target-mixin.js", | ||
| "main": "index.js", | ||
| "module": "index.js", | ||
| "keywords": [ | ||
@@ -15,8 +16,6 @@ "api-components", | ||
| "authors": [ | ||
| "Pawel Psztyc", | ||
| "The Advanced REST client authors <arc@mulesoft.com>" | ||
| "Pawel Psztyc" | ||
| ], | ||
| "contributors": [ | ||
| "Pawel Psztyc", | ||
| "The Advanced REST client authors <arc@mulesoft.com>" | ||
| "Your name can be here!" | ||
| ], | ||
@@ -31,44 +30,65 @@ "repository": { | ||
| }, | ||
| "dependencies": {}, | ||
| "dependencies": { | ||
| "@open-wc/dedupe-mixin": "^1.3.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@advanced-rest-client/arc-demo-helper": "^1.0.3", | ||
| "@advanced-rest-client/eslint-config": "^1.0.5", | ||
| "@advanced-rest-client/testing-karma-sl": "^1.0.2", | ||
| "@commitlint/cli": "^8.1.0", | ||
| "@commitlint/config-conventional": "^7.0.0", | ||
| "@open-wc/eslint-config": "^0.4.1", | ||
| "@open-wc/prettier-config": "^0.1.0", | ||
| "@open-wc/testing": "^0.11.1", | ||
| "@open-wc/testing-karma": "^2.0.6", | ||
| "@polymer/gen-typescript-declarations": "^1.6.1", | ||
| "@polymer/iron-test-helpers": "^3.0.1", | ||
| "husky": "^1.0.0", | ||
| "lint-staged": "^8.0.0", | ||
| "lit-element": "^2.2.0", | ||
| "lit-html": "^1.1.1", | ||
| "owc-dev-server": "^1.0.0", | ||
| "sinon": "^7.3.2", | ||
| "webpack-merge": "^4.1.5" | ||
| "@advanced-rest-client/arc-demo-helper": "^2.2.6", | ||
| "@open-wc/eslint-config": "^4.2.0", | ||
| "@open-wc/testing": "^2.5.32", | ||
| "@web/dev-server": "^0.1.8", | ||
| "@web/test-runner": "^0.12.16", | ||
| "@web/test-runner-playwright": "^0.8.4", | ||
| "eslint": "^7.21.0", | ||
| "eslint-config-prettier": "^8.1.0", | ||
| "husky": "^4.3.8", | ||
| "lint-staged": "^10.5.4", | ||
| "lit-element": "^2.4.0", | ||
| "lit-html": "^1.3.0", | ||
| "sinon": "^9.2.4", | ||
| "typescript": "^4.2.3", | ||
| "typescript-lit-html-plugin": "^0.9.0" | ||
| }, | ||
| "scripts": { | ||
| "test": "karma start --coverage", | ||
| "update-types": "gen-typescript-declarations --deleteExisting --outDir .", | ||
| "start": "owc-dev-server --app-index demo/index.html --open --watch", | ||
| "lint:eslint": "eslint --ext .js,.html .", | ||
| "format:eslint": "eslint --ext .js,.html . --fix", | ||
| "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)", | ||
| "format:prettier": "prettier \"**/*.js\" --write", | ||
| "lint": "npm run lint:eslint && npm run lint:prettier", | ||
| "format": "npm run format:eslint && npm run format:prettier", | ||
| "test:watch": "karma start --auto-watch=true --single-run=false", | ||
| "test:legacy": "karma start --legacy --coverage", | ||
| "test:legacy:watch": "karma start --legacy --auto-watch=true --single-run=false", | ||
| "test:sl": "karma start karma.sl.config.js --legacy --coverage" | ||
| "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch --root-dir .", | ||
| "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", | ||
| "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore", | ||
| "lint:types": "tsc", | ||
| "lint": "npm run lint:eslint", | ||
| "format": "npm run format:eslint", | ||
| "test": "web-test-runner test/**/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit", | ||
| "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch --playwright --browsers chromium" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": [ | ||
| "@open-wc/eslint-config", | ||
| "eslint-config-prettier" | ||
| ], | ||
| "overrides": [ | ||
| { | ||
| "files": [ | ||
| "demo/**/*.js", | ||
| "test/**/*.js", | ||
| "**/demo/**/*.html" | ||
| ], | ||
| "rules": { | ||
| "no-console": "off", | ||
| "no-unused-expressions": "off", | ||
| "no-plusplus": "off", | ||
| "no-param-reassing": "off", | ||
| "class-methods-use-this": "off", | ||
| "import/no-extraneous-dependencies": "off" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": [ | ||
| "eslint --fix", | ||
| "git add" | ||
| "eslint --fix" | ||
| ] | ||
| } | ||
| } |
@@ -0,7 +1,7 @@ | ||
| # ArcScrollTargetMixin | ||
| [](https://www.npmjs.com/package/@advanced-rest-client/arc-scroll-target-mixin) | ||
| [](https://travis-ci.org/advanced-rest-client/arc-scroll-target-mixin) | ||
| [](https://github.com/advanced-rest-client/arc-scroll-target-mixin/actions/workflows/deployment.yml) | ||
| [](https://www.webcomponents.org/element/advanced-rest-client/arc-scroll-target-mixin) | ||
| This mixin is a port of [iron-overlay-behavior](https://github.com/PolymerElements/iron-overlay-behavior) | ||
@@ -17,3 +17,3 @@ that works with LitElement. | ||
| ```bash | ||
| ```sh | ||
| npm i @advanced-rest-client/arc-scroll-target-mixin | ||
@@ -20,0 +20,0 @@ ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by19.78%
18871
- Dev dependency count
- decreased by-16.67%
15
- Number of package files
- increased by80%
9
- Lines of code
- increased by40.76%
442
Worsened metrics
- Dependency count
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@open-wc/dedupe-mixin@^1.3.0
+ Added@open-wc/dedupe-mixin@1.4.0(transitive)