@rfkhusnutdinov/scrollbar-width-observer 1.0.3 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +4 -1
  2. package/dist/index.d.ts +20 -0
  3. package/dist/index.esm.js +110 -0
  4. package/dist/index.js +118 -0
  5. package/dist/index.min.js +1 -0
  6. package/package.json +22 -14
  7. package/src/index.ts +83 -0
  8. package/dist/js/index.esm.js +0 -122
  9. package/dist/js/index.js +0 -130
  10. package/dist/js/index.min.js +0 -1
  11. package/src/js/index.js +0 -82
package/README.md CHANGED
@@ -32,10 +32,13 @@ import ScrollbarWidthObserver from "@rfkhusnutdinov/scrollbar-width-observer";
32
32
  ## Usage
33
33
 
34
34
  ```javascript
35
- const observer = new ScrollbarWidthObserver({
35
+ const observer = ScrollbarWidthObserver.getInstance({
36
36
  cssVariableName: "--scrollbar-width", // optional, default is --scrollbar-width
37
37
  });
38
38
 
39
+ // Get scrollbar width value
40
+ const scrollbarWidthValue = observer.scrollbarWidth;
41
+
39
42
  // Listen for scrollbar width changes
40
43
  window.addEventListener("scrollbarwidthchange", (event) => {
41
44
  console.log("Scrollbar width changed to:", event.detail.scrollbarWidth);
package/dist/index.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ declare class ScrollbarWidthObserver {
2
+ private static instance;
3
+ private timer;
4
+ private debounceDelay;
5
+ private cssVariableName;
6
+ scrollbarWidth: number | null;
7
+ constructor({ cssVariableName }?: {
8
+ cssVariableName?: string | undefined;
9
+ });
10
+ private getSystemScrollbarWidth;
11
+ private setScrollbarWidthVariable;
12
+ private updateScrollbarWidth;
13
+ private onResize;
14
+ static getInstance({ cssVariableName }?: {
15
+ cssVariableName?: string | undefined;
16
+ }): ScrollbarWidthObserver;
17
+ disconnect(): void;
18
+ }
19
+
20
+ export { ScrollbarWidthObserver as default };
package/dist/index.esm.js ADDED
@@ -0,0 +1,110 @@
1
+ function _classCallCheck(a, n) {
2
+ if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
3
+ }
4
+ function _defineProperties(e, r) {
5
+ for (var t = 0; t < r.length; t++) {
6
+ var o = r[t];
7
+ o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
8
+ }
9
+ }
10
+ function _createClass(e, r, t) {
11
+ return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
12
+ writable: false
13
+ }), e;
14
+ }
15
+ function _toPrimitive(t, r) {
16
+ if ("object" != typeof t || !t) return t;
17
+ var e = t[Symbol.toPrimitive];
18
+ if (void 0 !== e) {
19
+ var i = e.call(t, r);
20
+ if ("object" != typeof i) return i;
21
+ throw new TypeError("@@toPrimitive must return a primitive value.");
22
+ }
23
+ return (String )(t);
24
+ }
25
+ function _toPropertyKey(t) {
26
+ var i = _toPrimitive(t, "string");
27
+ return "symbol" == typeof i ? i : i + "";
28
+ }
29
+
30
+ var ScrollbarWidthObserver = /*#__PURE__*/function () {
31
+ function ScrollbarWidthObserver() {
32
+ var _this = this;
33
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
34
+ _ref$cssVariableName = _ref.cssVariableName,
35
+ cssVariableName = _ref$cssVariableName === void 0 ? "--scrollbar-width" : _ref$cssVariableName;
36
+ _classCallCheck(this, ScrollbarWidthObserver);
37
+ this.timer = undefined;
38
+ this.debounceDelay = 50;
39
+ this.scrollbarWidth = null;
40
+ this.onResize = function () {
41
+ clearTimeout(_this.timer);
42
+ _this.timer = setTimeout(function () {
43
+ var newWidth = _this.getSystemScrollbarWidth();
44
+ if (newWidth === _this.scrollbarWidth) return;
45
+ _this.updateScrollbarWidth(newWidth);
46
+ }, _this.debounceDelay);
47
+ };
48
+ this.cssVariableName = cssVariableName;
49
+ this.scrollbarWidth = this.getSystemScrollbarWidth();
50
+ this.setScrollbarWidthVariable();
51
+ window.addEventListener("resize", this.onResize);
52
+ }
53
+ return _createClass(ScrollbarWidthObserver, [{
54
+ key: "getSystemScrollbarWidth",
55
+ value: function getSystemScrollbarWidth() {
56
+ var div = document.createElement("div");
57
+ div.style.width = "100px";
58
+ div.style.height = "100px";
59
+ div.style.overflow = "scroll";
60
+ div.style.position = "absolute";
61
+ div.style.top = "-9999px";
62
+ document.body.appendChild(div);
63
+ var width = div.offsetWidth - div.clientWidth;
64
+ document.body.removeChild(div);
65
+ return width;
66
+ }
67
+ }, {
68
+ key: "setScrollbarWidthVariable",
69
+ value: function setScrollbarWidthVariable() {
70
+ document.body.style.setProperty(this.cssVariableName, "".concat(this.scrollbarWidth, "px"));
71
+ }
72
+ }, {
73
+ key: "updateScrollbarWidth",
74
+ value: function updateScrollbarWidth(newWidth) {
75
+ this.scrollbarWidth = newWidth;
76
+ this.setScrollbarWidthVariable();
77
+ window.dispatchEvent(new CustomEvent("scrollbarwidthchange", {
78
+ detail: {
79
+ scrollbarWidth: newWidth
80
+ }
81
+ }));
82
+ }
83
+ }, {
84
+ key: "disconnect",
85
+ value: function disconnect() {
86
+ if (!ScrollbarWidthObserver.instance) return;
87
+ clearTimeout(this.timer);
88
+ window.removeEventListener("resize", this.onResize);
89
+ document.body.style.removeProperty(this.cssVariableName);
90
+ this.scrollbarWidth = null;
91
+ ScrollbarWidthObserver.instance = null;
92
+ }
93
+ }], [{
94
+ key: "getInstance",
95
+ value: function getInstance() {
96
+ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
97
+ _ref2$cssVariableName = _ref2.cssVariableName,
98
+ cssVariableName = _ref2$cssVariableName === void 0 ? "--scrollbar-width" : _ref2$cssVariableName;
99
+ if (!ScrollbarWidthObserver.instance) {
100
+ ScrollbarWidthObserver.instance = new ScrollbarWidthObserver({
101
+ cssVariableName: cssVariableName
102
+ });
103
+ }
104
+ return ScrollbarWidthObserver.instance;
105
+ }
106
+ }]);
107
+ }();
108
+ ScrollbarWidthObserver.instance = null;
109
+
110
+ export { ScrollbarWidthObserver as default };
package/dist/index.js ADDED
@@ -0,0 +1,118 @@
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3
+ typeof define === 'function' && define.amd ? define(factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MyLibrary = factory());
5
+ })(this, (function () { 'use strict';
6
+
7
+ function _classCallCheck(a, n) {
8
+ if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
9
+ }
10
+ function _defineProperties(e, r) {
11
+ for (var t = 0; t < r.length; t++) {
12
+ var o = r[t];
13
+ o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
14
+ }
15
+ }
16
+ function _createClass(e, r, t) {
17
+ return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
18
+ writable: false
19
+ }), e;
20
+ }
21
+ function _toPrimitive(t, r) {
22
+ if ("object" != typeof t || !t) return t;
23
+ var e = t[Symbol.toPrimitive];
24
+ if (void 0 !== e) {
25
+ var i = e.call(t, r);
26
+ if ("object" != typeof i) return i;
27
+ throw new TypeError("@@toPrimitive must return a primitive value.");
28
+ }
29
+ return (String )(t);
30
+ }
31
+ function _toPropertyKey(t) {
32
+ var i = _toPrimitive(t, "string");
33
+ return "symbol" == typeof i ? i : i + "";
34
+ }
35
+
36
+ var ScrollbarWidthObserver = /*#__PURE__*/function () {
37
+ function ScrollbarWidthObserver() {
38
+ var _this = this;
39
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
40
+ _ref$cssVariableName = _ref.cssVariableName,
41
+ cssVariableName = _ref$cssVariableName === void 0 ? "--scrollbar-width" : _ref$cssVariableName;
42
+ _classCallCheck(this, ScrollbarWidthObserver);
43
+ this.timer = undefined;
44
+ this.debounceDelay = 50;
45
+ this.scrollbarWidth = null;
46
+ this.onResize = function () {
47
+ clearTimeout(_this.timer);
48
+ _this.timer = setTimeout(function () {
49
+ var newWidth = _this.getSystemScrollbarWidth();
50
+ if (newWidth === _this.scrollbarWidth) return;
51
+ _this.updateScrollbarWidth(newWidth);
52
+ }, _this.debounceDelay);
53
+ };
54
+ this.cssVariableName = cssVariableName;
55
+ this.scrollbarWidth = this.getSystemScrollbarWidth();
56
+ this.setScrollbarWidthVariable();
57
+ window.addEventListener("resize", this.onResize);
58
+ }
59
+ return _createClass(ScrollbarWidthObserver, [{
60
+ key: "getSystemScrollbarWidth",
61
+ value: function getSystemScrollbarWidth() {
62
+ var div = document.createElement("div");
63
+ div.style.width = "100px";
64
+ div.style.height = "100px";
65
+ div.style.overflow = "scroll";
66
+ div.style.position = "absolute";
67
+ div.style.top = "-9999px";
68
+ document.body.appendChild(div);
69
+ var width = div.offsetWidth - div.clientWidth;
70
+ document.body.removeChild(div);
71
+ return width;
72
+ }
73
+ }, {
74
+ key: "setScrollbarWidthVariable",
75
+ value: function setScrollbarWidthVariable() {
76
+ document.body.style.setProperty(this.cssVariableName, "".concat(this.scrollbarWidth, "px"));
77
+ }
78
+ }, {
79
+ key: "updateScrollbarWidth",
80
+ value: function updateScrollbarWidth(newWidth) {
81
+ this.scrollbarWidth = newWidth;
82
+ this.setScrollbarWidthVariable();
83
+ window.dispatchEvent(new CustomEvent("scrollbarwidthchange", {
84
+ detail: {
85
+ scrollbarWidth: newWidth
86
+ }
87
+ }));
88
+ }
89
+ }, {
90
+ key: "disconnect",
91
+ value: function disconnect() {
92
+ if (!ScrollbarWidthObserver.instance) return;
93
+ clearTimeout(this.timer);
94
+ window.removeEventListener("resize", this.onResize);
95
+ document.body.style.removeProperty(this.cssVariableName);
96
+ this.scrollbarWidth = null;
97
+ ScrollbarWidthObserver.instance = null;
98
+ }
99
+ }], [{
100
+ key: "getInstance",
101
+ value: function getInstance() {
102
+ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
103
+ _ref2$cssVariableName = _ref2.cssVariableName,
104
+ cssVariableName = _ref2$cssVariableName === void 0 ? "--scrollbar-width" : _ref2$cssVariableName;
105
+ if (!ScrollbarWidthObserver.instance) {
106
+ ScrollbarWidthObserver.instance = new ScrollbarWidthObserver({
107
+ cssVariableName: cssVariableName
108
+ });
109
+ }
110
+ return ScrollbarWidthObserver.instance;
111
+ }
112
+ }]);
113
+ }();
114
+ ScrollbarWidthObserver.instance = null;
115
+
116
+ return ScrollbarWidthObserver;
117
+
118
+ }));
package/dist/index.min.js ADDED
@@ -0,0 +1 @@
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).MyLibrary=t()}(this,function(){"use strict";function e(e,i){for(var r=0;r<i.length;r++){var n=i[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t(n.key),n)}}function t(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var i=function(){function t(){var e=this,i=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).cssVariableName,r=void 0===i?"--scrollbar-width":i;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.timer=void 0,this.debounceDelay=50,this.scrollbarWidth=null,this.onResize=function(){clearTimeout(e.timer),e.timer=setTimeout(function(){var t=e.getSystemScrollbarWidth();t!==e.scrollbarWidth&&e.updateScrollbarWidth(t)},e.debounceDelay)},this.cssVariableName=r,this.scrollbarWidth=this.getSystemScrollbarWidth(),this.setScrollbarWidthVariable(),window.addEventListener("resize",this.onResize)}return i=t,n=[{key:"getInstance",value:function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).cssVariableName,i=void 0===e?"--scrollbar-width":e;return t.instance||(t.instance=new t({cssVariableName:i})),t.instance}}],(r=[{key:"getSystemScrollbarWidth",value:function(){var e=document.createElement("div");e.style.width="100px",e.style.height="100px",e.style.overflow="scroll",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t}},{key:"setScrollbarWidthVariable",value:function(){document.body.style.setProperty(this.cssVariableName,"".concat(this.scrollbarWidth,"px"))}},{key:"updateScrollbarWidth",value:function(e){this.scrollbarWidth=e,this.setScrollbarWidthVariable(),window.dispatchEvent(new CustomEvent("scrollbarwidthchange",{detail:{scrollbarWidth:e}}))}},{key:"disconnect",value:function(){t.instance&&(clearTimeout(this.timer),window.removeEventListener("resize",this.onResize),document.body.style.removeProperty(this.cssVariableName),this.scrollbarWidth=null,t.instance=null)}}])&&e(i.prototype,r),n&&e(i,n),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,r,n}();return i.instance=null,i});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rfkhusnutdinov/scrollbar-width-observer",
3
- "version": "1.0.3",
3
+ "version": "2.0.0",
4
4
  "description": "JavaScript plugin to monitor scrollbar width and update a CSS variable.",
5
5
  "author": "Rinat Khusnutdinov <rfkhusnutdinov@yandex.ru>",
6
6
  "homepage": "https://github.com/rfkhusnutdinov/scrollbar-width-observer#readme",
@@ -24,9 +24,10 @@
24
24
  "dist",
25
25
  "src"
26
26
  ],
27
- "main": "dust/js/index.js",
28
- "module": "dist/js/index.esm.js",
29
- "jsdelivr": "dist/js/index.min.js",
27
+ "main": "dist/index.js",
28
+ "module": "dist/index.esm.js",
29
+ "jsdelivr": "dist/index.min.js",
30
+ "types": "dist/index.d.ts",
30
31
  "license": "MIT",
31
32
  "babel": {
32
33
  "presets": [
@@ -42,10 +43,9 @@
42
43
  "lint:scripts": "eslint src/**/*.{js,mjs} --fix || true",
43
44
  "lint:styles": "stylelint --fix ./src/**/*.{scss,css}",
44
45
  "lint": "npm run lint:scripts && npm run lint:styles",
45
- "build:styles": "node scripts/build-styles.mjs --prod",
46
- "build:scripts": "node scripts/build-scripts.mjs --prod",
47
- "build": "npm run build:styles && npm run build:scripts",
48
- "watch": "node scripts/watch-files.mjs"
46
+ "clean": "rimraf dist",
47
+ "build": "npm run clean && cross-env NODE_ENV=production rollup -c && rollup -c rollup.dts.config.mjs",
48
+ "dev": "npm run clean && cross-env NODE_ENV=development rollup -c -w"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@babel/preset-env": "^7.26.7",
@@ -54,23 +54,31 @@
54
54
  "@rollup/plugin-commonjs": "^28.0.2",
55
55
  "@rollup/plugin-node-resolve": "^16.0.0",
56
56
  "@rollup/plugin-terser": "^0.4.4",
57
+ "@rollup/plugin-typescript": "^12.3.0",
57
58
  "autoprefixer": "^10.4.20",
58
- "chokidar": "^4.0.3",
59
- "cssnano": "^7.0.6",
59
+ "cross-env": "^10.1.0",
60
60
  "eslint": "^9.19.0",
61
61
  "globals": "^15.14.0",
62
62
  "postcss": "^8.5.1",
63
63
  "prettier": "^3.4.2",
64
+ "rimraf": "^6.1.2",
64
65
  "rollup": "^4.34.0",
66
+ "rollup-plugin-dts": "^6.3.0",
67
+ "rollup-plugin-postcss": "^4.0.2",
65
68
  "sass": "^1.83.4",
66
69
  "stylelint": "^16.14.1",
67
70
  "stylelint-config-recess-order": "^6.0.0",
68
- "stylelint-config-standard-scss": "^14.0.0"
71
+ "stylelint-config-standard-scss": "^14.0.0",
72
+ "tslib": "^2.8.1",
73
+ "typescript": "^5.9.3"
69
74
  },
70
75
  "exports": {
71
76
  ".": {
72
- "import": "./dist/js/index.esm.js",
73
- "require": "./dust/js/index.js"
74
- }
77
+ "import": "./dist/index.esm.js",
78
+ "default": "./dist/index.esm.js",
79
+ "require": "./dist/index.js",
80
+ "types": "./dist/index.d.ts"
81
+ },
82
+ "./package.json": "./package.json"
75
83
  }
76
84
  }
package/src/index.ts ADDED
@@ -0,0 +1,83 @@
1
+ class ScrollbarWidthObserver {
2
+ private static instance: ScrollbarWidthObserver | null = null;
3
+
4
+ private timer: ReturnType<typeof setTimeout> | undefined = undefined;
5
+ private debounceDelay = 50;
6
+ private cssVariableName: string;
7
+
8
+ public scrollbarWidth: number | null = null;
9
+
10
+ constructor({ cssVariableName = "--scrollbar-width" } = {}) {
11
+ this.cssVariableName = cssVariableName;
12
+
13
+ this.scrollbarWidth = this.getSystemScrollbarWidth();
14
+
15
+ this.setScrollbarWidthVariable();
16
+ window.addEventListener("resize", this.onResize);
17
+ }
18
+
19
+ private getSystemScrollbarWidth(): number {
20
+ const div = document.createElement("div");
21
+
22
+ div.style.width = "100px";
23
+ div.style.height = "100px";
24
+ div.style.overflow = "scroll";
25
+ div.style.position = "absolute";
26
+ div.style.top = "-9999px";
27
+
28
+ document.body.appendChild(div);
29
+
30
+ const width = div.offsetWidth - div.clientWidth;
31
+
32
+ document.body.removeChild(div);
33
+
34
+ return width;
35
+ }
36
+
37
+ private setScrollbarWidthVariable(): void {
38
+ document.body.style.setProperty(this.cssVariableName, `${this.scrollbarWidth}px`);
39
+ }
40
+
41
+ private updateScrollbarWidth(newWidth: number): void {
42
+ this.scrollbarWidth = newWidth;
43
+ this.setScrollbarWidthVariable();
44
+
45
+ window.dispatchEvent(
46
+ new CustomEvent("scrollbarwidthchange", {
47
+ detail: { scrollbarWidth: newWidth },
48
+ }),
49
+ );
50
+ }
51
+
52
+ private onResize: () => void = () => {
53
+ clearTimeout(this.timer);
54
+
55
+ this.timer = setTimeout(() => {
56
+ const newWidth = this.getSystemScrollbarWidth();
57
+ if (newWidth === this.scrollbarWidth) return;
58
+
59
+ this.updateScrollbarWidth(newWidth);
60
+ }, this.debounceDelay);
61
+ };
62
+
63
+ public static getInstance({ cssVariableName = "--scrollbar-width" } = {}): ScrollbarWidthObserver {
64
+ if (!ScrollbarWidthObserver.instance) {
65
+ ScrollbarWidthObserver.instance = new ScrollbarWidthObserver({ cssVariableName });
66
+ }
67
+ return ScrollbarWidthObserver.instance;
68
+ }
69
+
70
+ public disconnect(): void {
71
+ if (!ScrollbarWidthObserver.instance) return;
72
+
73
+ clearTimeout(this.timer);
74
+ window.removeEventListener("resize", this.onResize);
75
+
76
+ document.body.style.removeProperty(this.cssVariableName);
77
+
78
+ this.scrollbarWidth = null;
79
+ ScrollbarWidthObserver.instance = null;
80
+ }
81
+ }
82
+
83
+ export default ScrollbarWidthObserver;
package/dist/js/index.esm.js DELETED
@@ -1,122 +0,0 @@
1
- function _assertClassBrand(e, t, n) {
2
- if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
3
- throw new TypeError("Private element is not present on this object");
4
- }
5
- function _checkPrivateRedeclaration(e, t) {
6
- if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
7
- }
8
- function _classCallCheck(a, n) {
9
- if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
10
- }
11
- function _classPrivateFieldGet2(s, a) {
12
- return s.get(_assertClassBrand(s, a));
13
- }
14
- function _classPrivateFieldInitSpec(e, t, a) {
15
- _checkPrivateRedeclaration(e, t), t.set(e, a);
16
- }
17
- function _classPrivateFieldSet2(s, a, r) {
18
- return s.set(_assertClassBrand(s, a), r), r;
19
- }
20
- function _classPrivateMethodInitSpec(e, a) {
21
- _checkPrivateRedeclaration(e, a), a.add(e);
22
- }
23
- function _defineProperties(e, r) {
24
- for (var t = 0; t < r.length; t++) {
25
- var o = r[t];
26
- o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
27
- }
28
- }
29
- function _createClass(e, r, t) {
30
- return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
31
- writable: false
32
- }), e;
33
- }
34
- function _toPrimitive(t, r) {
35
- if ("object" != typeof t || !t) return t;
36
- var e = t[Symbol.toPrimitive];
37
- if (void 0 !== e) {
38
- var i = e.call(t, r);
39
- if ("object" != typeof i) return i;
40
- throw new TypeError("@@toPrimitive must return a primitive value.");
41
- }
42
- return (String )(t);
43
- }
44
- function _toPropertyKey(t) {
45
- var i = _toPrimitive(t, "string");
46
- return "symbol" == typeof i ? i : i + "";
47
- }
48
-
49
- var _timer = /*#__PURE__*/new WeakMap();
50
- var _debounceDelay = /*#__PURE__*/new WeakMap();
51
- var _cssVariableName = /*#__PURE__*/new WeakMap();
52
- var _onResize = /*#__PURE__*/new WeakMap();
53
- var _ScrollbarWidthObserver_brand = /*#__PURE__*/new WeakSet();
54
- var ScrollbarWidthObserver = /*#__PURE__*/function () {
55
- function ScrollbarWidthObserver() {
56
- var _this = this;
57
- var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
58
- _ref$cssVariableName = _ref.cssVariableName,
59
- cssVariableName = _ref$cssVariableName === void 0 ? "--scrollbar-width" : _ref$cssVariableName;
60
- _classCallCheck(this, ScrollbarWidthObserver);
61
- _classPrivateMethodInitSpec(this, _ScrollbarWidthObserver_brand);
62
- _classPrivateFieldInitSpec(this, _timer, null);
63
- _classPrivateFieldInitSpec(this, _debounceDelay, 50);
64
- _classPrivateFieldInitSpec(this, _cssVariableName, void 0);
65
- _classPrivateFieldInitSpec(this, _onResize, function () {
66
- clearTimeout(_classPrivateFieldGet2(_timer, _this));
67
- _classPrivateFieldSet2(_timer, _this, setTimeout(function () {
68
- var newWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _getSystemScrollbarWidth).call(_this);
69
- if (newWidth === _this.scrollbarWidth) return;
70
- _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _updateScrollbarWidth).call(_this, newWidth);
71
- }, _classPrivateFieldGet2(_debounceDelay, _this)));
72
- });
73
- if (_instance._) {
74
- return _instance._;
75
- }
76
- _classPrivateFieldSet2(_cssVariableName, this, cssVariableName);
77
- this.scrollbarWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, this, _getSystemScrollbarWidth).call(this);
78
- _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
79
- window.addEventListener("resize", _classPrivateFieldGet2(_onResize, this));
80
- _instance._ = this;
81
- }
82
- return _createClass(ScrollbarWidthObserver, [{
83
- key: "disconnect",
84
- value: function disconnect() {
85
- if (!_instance._) return;
86
- clearTimeout(_classPrivateFieldGet2(_timer, this));
87
- window.removeEventListener("resize", _classPrivateFieldGet2(_onResize, this));
88
- document.body.style.removeProperty(_classPrivateFieldGet2(_cssVariableName, this));
89
- this.scrollbarWidth = null;
90
- _instance._ = null;
91
- }
92
- }]);
93
- }();
94
- function _updateScrollbarWidth(width) {
95
- this.scrollbarWidth = width;
96
- _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
97
- window.dispatchEvent(new CustomEvent("scrollbarwidthchange", {
98
- detail: {
99
- scrollbarWidth: width
100
- }
101
- }));
102
- }
103
- function _getSystemScrollbarWidth() {
104
- var div = document.createElement("div");
105
- div.style.width = "100px";
106
- div.style.height = "100px";
107
- div.style.overflow = "scroll";
108
- div.style.position = "absolute";
109
- div.style.top = "-9999px";
110
- document.body.appendChild(div);
111
- var width = div.offsetWidth - div.clientWidth;
112
- document.body.removeChild(div);
113
- return width;
114
- }
115
- function _setScrollbarWidthVariable() {
116
- document.body.style.setProperty(_classPrivateFieldGet2(_cssVariableName, this), "".concat(this.scrollbarWidth, "px"));
117
- }
118
- var _instance = {
119
- _: void 0
120
- };
121
-
122
- export { ScrollbarWidthObserver as default };
package/dist/js/index.js DELETED
@@ -1,130 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3
- typeof define === 'function' && define.amd ? define(factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ScrollbarWidthObserver = factory());
5
- })(this, (function () { 'use strict';
6
-
7
- function _assertClassBrand(e, t, n) {
8
- if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
9
- throw new TypeError("Private element is not present on this object");
10
- }
11
- function _checkPrivateRedeclaration(e, t) {
12
- if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
13
- }
14
- function _classCallCheck(a, n) {
15
- if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
16
- }
17
- function _classPrivateFieldGet2(s, a) {
18
- return s.get(_assertClassBrand(s, a));
19
- }
20
- function _classPrivateFieldInitSpec(e, t, a) {
21
- _checkPrivateRedeclaration(e, t), t.set(e, a);
22
- }
23
- function _classPrivateFieldSet2(s, a, r) {
24
- return s.set(_assertClassBrand(s, a), r), r;
25
- }
26
- function _classPrivateMethodInitSpec(e, a) {
27
- _checkPrivateRedeclaration(e, a), a.add(e);
28
- }
29
- function _defineProperties(e, r) {
30
- for (var t = 0; t < r.length; t++) {
31
- var o = r[t];
32
- o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
33
- }
34
- }
35
- function _createClass(e, r, t) {
36
- return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
37
- writable: false
38
- }), e;
39
- }
40
- function _toPrimitive(t, r) {
41
- if ("object" != typeof t || !t) return t;
42
- var e = t[Symbol.toPrimitive];
43
- if (void 0 !== e) {
44
- var i = e.call(t, r);
45
- if ("object" != typeof i) return i;
46
- throw new TypeError("@@toPrimitive must return a primitive value.");
47
- }
48
- return (String )(t);
49
- }
50
- function _toPropertyKey(t) {
51
- var i = _toPrimitive(t, "string");
52
- return "symbol" == typeof i ? i : i + "";
53
- }
54
-
55
- var _timer = /*#__PURE__*/new WeakMap();
56
- var _debounceDelay = /*#__PURE__*/new WeakMap();
57
- var _cssVariableName = /*#__PURE__*/new WeakMap();
58
- var _onResize = /*#__PURE__*/new WeakMap();
59
- var _ScrollbarWidthObserver_brand = /*#__PURE__*/new WeakSet();
60
- var ScrollbarWidthObserver = /*#__PURE__*/function () {
61
- function ScrollbarWidthObserver() {
62
- var _this = this;
63
- var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
64
- _ref$cssVariableName = _ref.cssVariableName,
65
- cssVariableName = _ref$cssVariableName === void 0 ? "--scrollbar-width" : _ref$cssVariableName;
66
- _classCallCheck(this, ScrollbarWidthObserver);
67
- _classPrivateMethodInitSpec(this, _ScrollbarWidthObserver_brand);
68
- _classPrivateFieldInitSpec(this, _timer, null);
69
- _classPrivateFieldInitSpec(this, _debounceDelay, 50);
70
- _classPrivateFieldInitSpec(this, _cssVariableName, void 0);
71
- _classPrivateFieldInitSpec(this, _onResize, function () {
72
- clearTimeout(_classPrivateFieldGet2(_timer, _this));
73
- _classPrivateFieldSet2(_timer, _this, setTimeout(function () {
74
- var newWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _getSystemScrollbarWidth).call(_this);
75
- if (newWidth === _this.scrollbarWidth) return;
76
- _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _updateScrollbarWidth).call(_this, newWidth);
77
- }, _classPrivateFieldGet2(_debounceDelay, _this)));
78
- });
79
- if (_instance._) {
80
- return _instance._;
81
- }
82
- _classPrivateFieldSet2(_cssVariableName, this, cssVariableName);
83
- this.scrollbarWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, this, _getSystemScrollbarWidth).call(this);
84
- _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
85
- window.addEventListener("resize", _classPrivateFieldGet2(_onResize, this));
86
- _instance._ = this;
87
- }
88
- return _createClass(ScrollbarWidthObserver, [{
89
- key: "disconnect",
90
- value: function disconnect() {
91
- if (!_instance._) return;
92
- clearTimeout(_classPrivateFieldGet2(_timer, this));
93
- window.removeEventListener("resize", _classPrivateFieldGet2(_onResize, this));
94
- document.body.style.removeProperty(_classPrivateFieldGet2(_cssVariableName, this));
95
- this.scrollbarWidth = null;
96
- _instance._ = null;
97
- }
98
- }]);
99
- }();
100
- function _updateScrollbarWidth(width) {
101
- this.scrollbarWidth = width;
102
- _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
103
- window.dispatchEvent(new CustomEvent("scrollbarwidthchange", {
104
- detail: {
105
- scrollbarWidth: width
106
- }
107
- }));
108
- }
109
- function _getSystemScrollbarWidth() {
110
- var div = document.createElement("div");
111
- div.style.width = "100px";
112
- div.style.height = "100px";
113
- div.style.overflow = "scroll";
114
- div.style.position = "absolute";
115
- div.style.top = "-9999px";
116
- document.body.appendChild(div);
117
- var width = div.offsetWidth - div.clientWidth;
118
- document.body.removeChild(div);
119
- return width;
120
- }
121
- function _setScrollbarWidthVariable() {
122
- document.body.style.setProperty(_classPrivateFieldGet2(_cssVariableName, this), "".concat(this.scrollbarWidth, "px"));
123
- }
124
- var _instance = {
125
- _: void 0
126
- };
127
-
128
- return ScrollbarWidthObserver;
129
-
130
- }));
package/dist/js/index.min.js DELETED
@@ -1 +0,0 @@
1
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ScrollbarWidthObserver=e()}(this,function(){"use strict";function t(t,e,i){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:i;throw new TypeError("Private element is not present on this object")}function e(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function i(e,i){return e.get(t(e,i))}function n(t,i,n){e(t,i),i.set(t,n)}function o(e,i,n){return e.set(t(e,i),n),n}function r(t,e,i){return e&&function(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,l(n.key),n)}}(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t,"string");return"symbol"==typeof e?e:e+""}var s=new WeakMap,a=new WeakMap,c=new WeakMap,u=new WeakMap,h=new WeakSet,d=function(){return r(function r(){var l,d,b=this,m=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).cssVariableName,w=void 0===m?"--scrollbar-width":m;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,r),e(l=this,d=h),d.add(l),n(this,s,null),n(this,a,50),n(this,c,void 0),n(this,u,function(){clearTimeout(i(s,b)),o(s,b,setTimeout(function(){var e=t(h,b,p).call(b);e!==b.scrollbarWidth&&t(h,b,f).call(b,e)},i(a,b)))}),y._)return y._;o(c,this,w),this.scrollbarWidth=t(h,this,p).call(this),t(h,this,v).call(this),window.addEventListener("resize",i(u,this)),y._=this},[{key:"disconnect",value:function(){y._&&(clearTimeout(i(s,this)),window.removeEventListener("resize",i(u,this)),document.body.style.removeProperty(i(c,this)),this.scrollbarWidth=null,y._=null)}}])}();function f(e){this.scrollbarWidth=e,t(h,this,v).call(this),window.dispatchEvent(new CustomEvent("scrollbarwidthchange",{detail:{scrollbarWidth:e}}))}function p(){var t=document.createElement("div");t.style.width="100px",t.style.height="100px",t.style.overflow="scroll",t.style.position="absolute",t.style.top="-9999px",document.body.appendChild(t);var e=t.offsetWidth-t.clientWidth;return document.body.removeChild(t),e}function v(){document.body.style.setProperty(i(c,this),"".concat(this.scrollbarWidth,"px"))}var y={_:void 0};return d});
package/src/js/index.js DELETED
@@ -1,82 +0,0 @@
1
- class ScrollbarWidthObserver {
2
- static #instance;
3
- #timer = null;
4
- #debounceDelay = 50;
5
- #cssVariableName;
6
-
7
- constructor({ cssVariableName = "--scrollbar-width" } = {}) {
8
- if (ScrollbarWidthObserver.#instance) {
9
- return ScrollbarWidthObserver.#instance;
10
- }
11
-
12
- this.#cssVariableName = cssVariableName;
13
-
14
- this.scrollbarWidth = this.#getSystemScrollbarWidth();
15
-
16
- this.#setScrollbarWidthVariable();
17
- window.addEventListener("resize", this.#onResize);
18
-
19
- ScrollbarWidthObserver.#instance = this;
20
- }
21
-
22
- #onResize = () => {
23
- clearTimeout(this.#timer);
24
-
25
- this.#timer = setTimeout(() => {
26
- const newWidth = this.#getSystemScrollbarWidth();
27
- if (newWidth === this.scrollbarWidth) return;
28
-
29
- this.#updateScrollbarWidth(newWidth);
30
- }, this.#debounceDelay);
31
- };
32
-
33
- #updateScrollbarWidth(width) {
34
- this.scrollbarWidth = width;
35
- this.#setScrollbarWidthVariable();
36
-
37
- window.dispatchEvent(
38
- new CustomEvent("scrollbarwidthchange", {
39
- detail: { scrollbarWidth: width },
40
- }),
41
- );
42
- }
43
-
44
- #getSystemScrollbarWidth() {
45
- const div = document.createElement("div");
46
-
47
- div.style.width = "100px";
48
- div.style.height = "100px";
49
- div.style.overflow = "scroll";
50
- div.style.position = "absolute";
51
- div.style.top = "-9999px";
52
-
53
- document.body.appendChild(div);
54
-
55
- const width = div.offsetWidth - div.clientWidth;
56
-
57
- document.body.removeChild(div);
58
-
59
- return width;
60
- }
61
-
62
- #setScrollbarWidthVariable() {
63
- document.body.style.setProperty(
64
- this.#cssVariableName,
65
- `${this.scrollbarWidth}px`,
66
- );
67
- }
68
-
69
- disconnect() {
70
- if (!ScrollbarWidthObserver.#instance) return;
71
-
72
- clearTimeout(this.#timer);
73
- window.removeEventListener("resize", this.#onResize);
74
-
75
- document.body.style.removeProperty(this.#cssVariableName);
76
-
77
- this.scrollbarWidth = null;
78
- ScrollbarWidthObserver.#instance = null;
79
- }
80
- }
81
-
82
- export default ScrollbarWidthObserver;