mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-20 15:00:35 +03:00
improve readme and exports
This commit is contained in:
@@ -64,7 +64,7 @@ Embedd OverlayScrollbars manually in your HTML:
|
|||||||
|
|
||||||
## Initialization
|
## Initialization
|
||||||
|
|
||||||
> __Note__ During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
|
> __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
|
||||||
|
|
||||||
You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process.
|
You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process.
|
||||||
|
|
||||||
@@ -75,7 +75,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
|
|||||||
|
|
||||||
<details><summary><h6>Initialization with an Object</h6></summary>
|
<details><summary><h6>Initialization with an Object</h6></summary>
|
||||||
|
|
||||||
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
|
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
|
||||||
|
|
||||||
The only required field is the `target` field. This is the field to which the plugin is applied to.
|
The only required field is the `target` field. This is the field to which the plugin is applied to.
|
||||||
If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
|
If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
|
||||||
@@ -200,7 +200,7 @@ An array of tuples. The first value in the tuple is an `selector` and the second
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `[number, number] \| number \| null` | `[0, 33]` |
|
| `[number, number] \| number \| null` | `[0, 33]` |
|
||||||
|
|
||||||
> __Note__ If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
|
> __Note__: If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
|
||||||
|
|
||||||
Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
|
Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
|
||||||
|
|
||||||
@@ -210,7 +210,7 @@ Debounces the `MutationObserver` which tracks changes to the content. If a **tup
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string[] \| null` | `null` |
|
| `string[] \| null` | `null` |
|
||||||
|
|
||||||
> __Note__ There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
|
> __Note__: There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
|
||||||
|
|
||||||
An array of additional attributes that the `MutationObserver` should observe for the content.
|
An array of additional attributes that the `MutationObserver` should observe for the content.
|
||||||
|
|
||||||
@@ -228,7 +228,7 @@ A function which receives a [`MutationRecord`](https://developer.mozilla.org/en-
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'scroll'` |
|
| `string` | `'scroll'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
> __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
||||||
|
|
||||||
The overflow behavior for the horizontal (x) axis.
|
The overflow behavior for the horizontal (x) axis.
|
||||||
|
|
||||||
@@ -238,7 +238,7 @@ The overflow behavior for the horizontal (x) axis.
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'scroll'` |
|
| `string` | `'scroll'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
> __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
||||||
|
|
||||||
The overflow behavior for the vertical (y) axis.
|
The overflow behavior for the vertical (y) axis.
|
||||||
|
|
||||||
@@ -256,7 +256,7 @@ Applies the specified theme (classname) to the scrollbars.
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'auto'` |
|
| `string` | `'auto'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
|
> __Note__: Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
|
||||||
|
|
||||||
The base visibility of the scrollbars.
|
The base visibility of the scrollbars.
|
||||||
|
|
||||||
@@ -266,7 +266,7 @@ The base visibility of the scrollbars.
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'never'` |
|
| `string` | `'never'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
|
> __Note__: Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
|
||||||
|
|
||||||
The possibility to hide visible scrollbars automatically after a certain user action.
|
The possibility to hide visible scrollbars automatically after a certain user action.
|
||||||
|
|
||||||
@@ -317,7 +317,7 @@ OverlayScrollbars(document.querySelector('#myElement'), {}, {
|
|||||||
|
|
||||||
<details><summary><h6>Events in depth</h6></summary>
|
<details><summary><h6>Events in depth</h6></summary>
|
||||||
|
|
||||||
> __Note__ Every event receives the `instance` from which it was fired as the first argument. Always.
|
> __Note__: Every event receives the `instance` from which it was fired as the first argument. Always.
|
||||||
|
|
||||||
### `initialized`
|
### `initialized`
|
||||||
|
|
||||||
@@ -334,7 +334,7 @@ Is fired after all generated elements, observers and events were appended to the
|
|||||||
| `instance` | The instance which fired the event. |
|
| `instance` | The instance which fired the event. |
|
||||||
| `onUpdatedArgs` | An `object` which describes the update in detail. |
|
| `onUpdatedArgs` | An `object` which describes the update in detail. |
|
||||||
|
|
||||||
> __Note__ If an update was triggered but nothing changed, the event won't be fired.
|
> __Note__: If an update was triggered but nothing changed, the event won't be fired.
|
||||||
|
|
||||||
Is fired after the instace was updated.
|
Is fired after the instace was updated.
|
||||||
|
|
||||||
@@ -351,7 +351,7 @@ Is fired after all generated elements, observers and events were removed from th
|
|||||||
|
|
||||||
## Instance Methods
|
## Instance Methods
|
||||||
|
|
||||||
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
interface OverlayScrollbars {
|
interface OverlayScrollbars {
|
||||||
@@ -376,7 +376,7 @@ interface OverlayScrollbars {
|
|||||||
|
|
||||||
## Static Methods
|
## Static Methods
|
||||||
|
|
||||||
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
interface OverlayScrollbarsStatic {
|
interface OverlayScrollbarsStatic {
|
||||||
@@ -393,6 +393,36 @@ interface OverlayScrollbarsStatic {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:
|
||||||
|
|
||||||
|
- **ScrollbarsHidingPlugin**: Is needed for old browsers which aren't supporting nativ scrollbar styling features. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=scrollbar%20styling) (note that even though `iOS Safari >= 14` is marked as unsupported you only need this plugin for `iOS < 7.1`).
|
||||||
|
- **SizeObserverPlugin**: Is needed for old browsers which aren't supporting the `ResizeObserver` api. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=ResizeObserver)
|
||||||
|
- **ClickScrollPlugin**: If you want to use the option `scrollbars: { clickScroll: true }`.
|
||||||
|
|
||||||
|
#### Consuming Plugins
|
||||||
|
|
||||||
|
You can consume plugins like:
|
||||||
|
```ts
|
||||||
|
import {
|
||||||
|
OverlayScrollbars,
|
||||||
|
ScrollbarsHidingPlugin,
|
||||||
|
SizeObserverPlugin,
|
||||||
|
ClickScrollPlugin
|
||||||
|
} from 'overlayscrollbars';
|
||||||
|
|
||||||
|
// single plugin
|
||||||
|
OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
|
||||||
|
|
||||||
|
// multiple plugins
|
||||||
|
OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Writing Plugins
|
||||||
|
|
||||||
|
You can write and publish your own Plugins. This section is a work in progress.
|
||||||
|
|
||||||
## Sponsors
|
## Sponsors
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ Embedd OverlayScrollbars manually in your HTML:
|
|||||||
|
|
||||||
## Initialization
|
## Initialization
|
||||||
|
|
||||||
> __Note__ During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
|
> __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
|
||||||
|
|
||||||
You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process.
|
You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process.
|
||||||
|
|
||||||
@@ -75,7 +75,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
|
|||||||
|
|
||||||
<details><summary><h6>Initialization with an Object</h6></summary>
|
<details><summary><h6>Initialization with an Object</h6></summary>
|
||||||
|
|
||||||
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
|
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
|
||||||
|
|
||||||
The only required field is the `target` field. This is the field to which the plugin is applied to.
|
The only required field is the `target` field. This is the field to which the plugin is applied to.
|
||||||
If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
|
If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
|
||||||
@@ -200,7 +200,7 @@ An array of tuples. The first value in the tuple is an `selector` and the second
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `[number, number] \| number \| null` | `[0, 33]` |
|
| `[number, number] \| number \| null` | `[0, 33]` |
|
||||||
|
|
||||||
> __Note__ If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
|
> __Note__: If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
|
||||||
|
|
||||||
Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
|
Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
|
||||||
|
|
||||||
@@ -210,7 +210,7 @@ Debounces the `MutationObserver` which tracks changes to the content. If a **tup
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string[] \| null` | `null` |
|
| `string[] \| null` | `null` |
|
||||||
|
|
||||||
> __Note__ There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
|
> __Note__: There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
|
||||||
|
|
||||||
An array of additional attributes that the `MutationObserver` should observe for the content.
|
An array of additional attributes that the `MutationObserver` should observe for the content.
|
||||||
|
|
||||||
@@ -228,7 +228,7 @@ A function which receives a [`MutationRecord`](https://developer.mozilla.org/en-
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'scroll'` |
|
| `string` | `'scroll'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
> __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
||||||
|
|
||||||
The overflow behavior for the horizontal (x) axis.
|
The overflow behavior for the horizontal (x) axis.
|
||||||
|
|
||||||
@@ -238,7 +238,7 @@ The overflow behavior for the horizontal (x) axis.
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'scroll'` |
|
| `string` | `'scroll'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
> __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
|
||||||
|
|
||||||
The overflow behavior for the vertical (y) axis.
|
The overflow behavior for the vertical (y) axis.
|
||||||
|
|
||||||
@@ -256,7 +256,7 @@ Applies the specified theme (classname) to the scrollbars.
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'auto'` |
|
| `string` | `'auto'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
|
> __Note__: Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
|
||||||
|
|
||||||
The base visibility of the scrollbars.
|
The base visibility of the scrollbars.
|
||||||
|
|
||||||
@@ -266,7 +266,7 @@ The base visibility of the scrollbars.
|
|||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| `string` | `'never'` |
|
| `string` | `'never'` |
|
||||||
|
|
||||||
> __Note__ Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
|
> __Note__: Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
|
||||||
|
|
||||||
The possibility to hide visible scrollbars automatically after a certain user action.
|
The possibility to hide visible scrollbars automatically after a certain user action.
|
||||||
|
|
||||||
@@ -317,7 +317,7 @@ OverlayScrollbars(document.querySelector('#myElement'), {}, {
|
|||||||
|
|
||||||
<details><summary><h6>Events in depth</h6></summary>
|
<details><summary><h6>Events in depth</h6></summary>
|
||||||
|
|
||||||
> __Note__ Every event receives the `instance` from which it was fired as the first argument. Always.
|
> __Note__: Every event receives the `instance` from which it was fired as the first argument. Always.
|
||||||
|
|
||||||
### `initialized`
|
### `initialized`
|
||||||
|
|
||||||
@@ -334,7 +334,7 @@ Is fired after all generated elements, observers and events were appended to the
|
|||||||
| `instance` | The instance which fired the event. |
|
| `instance` | The instance which fired the event. |
|
||||||
| `onUpdatedArgs` | An `object` which describes the update in detail. |
|
| `onUpdatedArgs` | An `object` which describes the update in detail. |
|
||||||
|
|
||||||
> __Note__ If an update was triggered but nothing changed, the event won't be fired.
|
> __Note__: If an update was triggered but nothing changed, the event won't be fired.
|
||||||
|
|
||||||
Is fired after the instace was updated.
|
Is fired after the instace was updated.
|
||||||
|
|
||||||
@@ -351,7 +351,7 @@ Is fired after all generated elements, observers and events were removed from th
|
|||||||
|
|
||||||
## Instance Methods
|
## Instance Methods
|
||||||
|
|
||||||
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
interface OverlayScrollbars {
|
interface OverlayScrollbars {
|
||||||
@@ -376,7 +376,7 @@ interface OverlayScrollbars {
|
|||||||
|
|
||||||
## Static Methods
|
## Static Methods
|
||||||
|
|
||||||
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
interface OverlayScrollbarsStatic {
|
interface OverlayScrollbarsStatic {
|
||||||
@@ -393,6 +393,36 @@ interface OverlayScrollbarsStatic {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:
|
||||||
|
|
||||||
|
- **ScrollbarsHidingPlugin**: Is needed for old browsers which aren't supporting nativ scrollbar styling features. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=scrollbar%20styling) (note that even though `iOS Safari >= 14` is marked as unsupported you only need this plugin for `iOS < 7.1`).
|
||||||
|
- **SizeObserverPlugin**: Is needed for old browsers which aren't supporting the `ResizeObserver` api. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=ResizeObserver)
|
||||||
|
- **ClickScrollPlugin**: If you want to use the option `scrollbars: { clickScroll: true }`.
|
||||||
|
|
||||||
|
#### Consuming Plugins
|
||||||
|
|
||||||
|
You can consume plugins like:
|
||||||
|
```ts
|
||||||
|
import {
|
||||||
|
OverlayScrollbars,
|
||||||
|
ScrollbarsHidingPlugin,
|
||||||
|
SizeObserverPlugin,
|
||||||
|
ClickScrollPlugin
|
||||||
|
} from 'overlayscrollbars';
|
||||||
|
|
||||||
|
// single plugin
|
||||||
|
OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
|
||||||
|
|
||||||
|
// multiple plugins
|
||||||
|
OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Writing Plugins
|
||||||
|
|
||||||
|
You can write and publish your own Plugins. This section is a work in progress.
|
||||||
|
|
||||||
## Sponsors
|
## Sponsors
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import 'index.scss';
|
import 'index.scss';
|
||||||
|
|
||||||
export { OverlayScrollbars } from 'overlayscrollbars';
|
export { OverlayScrollbars } from 'overlayscrollbars';
|
||||||
export { scrollbarsHidingPlugin, sizeObserverPlugin } from 'plugins';
|
export { ScrollbarsHidingPlugin, SizeObserverPlugin, ClickScrollPlugin } from 'plugins';
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
Options,
|
Options,
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export type ClickScrollPluginInstance = {
|
|||||||
|
|
||||||
export const clickScrollPluginName = '__osClickScrollPlugin';
|
export const clickScrollPluginName = '__osClickScrollPlugin';
|
||||||
|
|
||||||
export const clickScrollPlugin: Plugin<ClickScrollPluginInstance> = /* @__PURE__ */ (() => ({
|
export const ClickScrollPlugin: Plugin<ClickScrollPluginInstance> = /* @__PURE__ */ (() => ({
|
||||||
[clickScrollPluginName]: {
|
[clickScrollPluginName]: {
|
||||||
_: (
|
_: (
|
||||||
moveHandleRelative,
|
moveHandleRelative,
|
||||||
|
|||||||
+1
-1
@@ -61,7 +61,7 @@ export type OptionsValidationPluginInstance = {
|
|||||||
|
|
||||||
export const optionsValidationPluginName = '__osOptionsValidationPlugin';
|
export const optionsValidationPluginName = '__osOptionsValidationPlugin';
|
||||||
|
|
||||||
export const optionsValidationPlugin: Plugin<OptionsValidationPluginInstance> =
|
export const OptionsValidationPlugin: Plugin<OptionsValidationPluginInstance> =
|
||||||
/* @__PURE__ */ (() => ({
|
/* @__PURE__ */ (() => ({
|
||||||
[optionsValidationPluginName]: {
|
[optionsValidationPluginName]: {
|
||||||
_: (options: DeepPartial<Options>, doWriteErrors?: boolean) => {
|
_: (options: DeepPartial<Options>, doWriteErrors?: boolean) => {
|
||||||
|
|||||||
+1
-1
@@ -79,7 +79,7 @@ const diffBiggerThanOne = (valOne: number, valTwo: number): boolean => {
|
|||||||
|
|
||||||
export const scrollbarsHidingPluginName = '__osScrollbarsHidingPlugin';
|
export const scrollbarsHidingPluginName = '__osScrollbarsHidingPlugin';
|
||||||
|
|
||||||
export const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance> =
|
export const ScrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance> =
|
||||||
/* @__PURE__ */ (() => ({
|
/* @__PURE__ */ (() => ({
|
||||||
[scrollbarsHidingPluginName]: {
|
[scrollbarsHidingPluginName]: {
|
||||||
_createUniqueViewportArrangeElement: (env: InternalEnvironment) => {
|
_createUniqueViewportArrangeElement: (env: InternalEnvironment) => {
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const scrollAmount = 3333333;
|
|||||||
const scrollEventName = 'scroll';
|
const scrollEventName = 'scroll';
|
||||||
export const sizeObserverPluginName = '__osSizeObserverPlugin';
|
export const sizeObserverPluginName = '__osSizeObserverPlugin';
|
||||||
|
|
||||||
export const sizeObserverPlugin: Plugin<SizeObserverPluginInstance> = /* @__PURE__ */ (() => ({
|
export const SizeObserverPlugin: Plugin<SizeObserverPluginInstance> = /* @__PURE__ */ (() => ({
|
||||||
[sizeObserverPluginName]: {
|
[sizeObserverPluginName]: {
|
||||||
_: (listenerElement, onSizeChangedCallback, observeAppearChange) => {
|
_: (listenerElement, onSizeChangedCallback, observeAppearChange) => {
|
||||||
const observerElementChildren = createDOM(
|
const observerElementChildren = createDOM(
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { DeepPartial } from 'typings';
|
|||||||
import { defaultOptions, Options } from 'options';
|
import { defaultOptions, Options } from 'options';
|
||||||
import { Initialization } from 'initialization';
|
import { Initialization } from 'initialization';
|
||||||
import { getEnvironment } from 'environment';
|
import { getEnvironment } from 'environment';
|
||||||
import { scrollbarsHidingPlugin, scrollbarsHidingPluginName } from 'plugins';
|
import { ScrollbarsHidingPlugin, scrollbarsHidingPluginName } from 'plugins';
|
||||||
|
|
||||||
const defaultInitialization = {
|
const defaultInitialization = {
|
||||||
elements: {
|
elements: {
|
||||||
@@ -145,7 +145,7 @@ describe('environment', () => {
|
|||||||
test('with scrollbarsHidingPlugin registered before environment was created', async () => {
|
test('with scrollbarsHidingPlugin registered before environment was created', async () => {
|
||||||
const { getPlugins } = await import('plugins');
|
const { getPlugins } = await import('plugins');
|
||||||
(getPlugins as jest.Mock).mockImplementation(() => ({
|
(getPlugins as jest.Mock).mockImplementation(() => ({
|
||||||
[scrollbarsHidingPluginName]: scrollbarsHidingPlugin[scrollbarsHidingPluginName],
|
[scrollbarsHidingPluginName]: ScrollbarsHidingPlugin[scrollbarsHidingPluginName],
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { _addListener } = getEnv();
|
const { _addListener } = getEnv();
|
||||||
@@ -165,7 +165,7 @@ describe('environment', () => {
|
|||||||
|
|
||||||
const { getPlugins } = await import('plugins');
|
const { getPlugins } = await import('plugins');
|
||||||
(getPlugins as jest.Mock).mockImplementation(() => ({
|
(getPlugins as jest.Mock).mockImplementation(() => ({
|
||||||
[scrollbarsHidingPluginName]: scrollbarsHidingPlugin[scrollbarsHidingPluginName],
|
[scrollbarsHidingPluginName]: ScrollbarsHidingPlugin[scrollbarsHidingPluginName],
|
||||||
}));
|
}));
|
||||||
|
|
||||||
window.dispatchEvent(new Event('resize'));
|
window.dispatchEvent(new Event('resize'));
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { createSizeObserver as originalCreateSizeObserver } from 'observers';
|
import { createSizeObserver as originalCreateSizeObserver } from 'observers';
|
||||||
import { sizeObserverPlugin, sizeObserverPluginName } from 'plugins';
|
import { SizeObserverPlugin, sizeObserverPluginName } from 'plugins';
|
||||||
|
|
||||||
let createSizeObserver = originalCreateSizeObserver;
|
let createSizeObserver = originalCreateSizeObserver;
|
||||||
|
|
||||||
@@ -59,7 +59,7 @@ describe('createSizeObserver', () => {
|
|||||||
describe('with sizeObserverPlugin', () => {
|
describe('with sizeObserverPlugin', () => {
|
||||||
const mockSizeObserverPlugin = jest.fn((...a) => [
|
const mockSizeObserverPlugin = jest.fn((...a) => [
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
sizeObserverPlugin[sizeObserverPluginName]._(...a),
|
SizeObserverPlugin[sizeObserverPluginName]._(...a),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { DeepPartial } from 'typings';
|
import { DeepPartial } from 'typings';
|
||||||
import { defaultOptions, Options } from 'options';
|
import { defaultOptions, Options } from 'options';
|
||||||
import { assignDeep } from 'support';
|
import { assignDeep } from 'support';
|
||||||
import { optionsValidationPlugin } from 'plugins';
|
import { OptionsValidationPlugin } from 'plugins';
|
||||||
import { OverlayScrollbars as originalOverlayScrollbars } from '../../src/overlayscrollbars';
|
import { OverlayScrollbars as originalOverlayScrollbars } from '../../src/overlayscrollbars';
|
||||||
|
|
||||||
const bodyElm = document.body;
|
const bodyElm = document.body;
|
||||||
@@ -242,7 +242,7 @@ describe('overlayscrollbars', () => {
|
|||||||
describe(`${withValidationPlugin ? 'with' : 'without'} optionsValidationPlugin`, () => {
|
describe(`${withValidationPlugin ? 'with' : 'without'} optionsValidationPlugin`, () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
if (withValidationPlugin) {
|
if (withValidationPlugin) {
|
||||||
OverlayScrollbars.plugin(optionsValidationPlugin);
|
OverlayScrollbars.plugin(OptionsValidationPlugin);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+3
-3
@@ -1,12 +1,12 @@
|
|||||||
import { defaultOptions } from 'options';
|
import { defaultOptions } from 'options';
|
||||||
import {
|
import {
|
||||||
optionsValidationPlugin,
|
OptionsValidationPlugin,
|
||||||
optionsValidationPluginName,
|
optionsValidationPluginName,
|
||||||
} from 'plugins/optionsValidationPlugin';
|
} from 'plugins/optionsValidationPlugin';
|
||||||
|
|
||||||
const getValidationFn = () => {
|
const getValidationFn = () => {
|
||||||
const name = Object.keys(optionsValidationPlugin)[0];
|
const name = Object.keys(OptionsValidationPlugin)[0];
|
||||||
const instance = optionsValidationPlugin[name];
|
const instance = OptionsValidationPlugin[name];
|
||||||
const validationFn = instance._;
|
const validationFn = instance._;
|
||||||
|
|
||||||
expect(name).toBe(optionsValidationPluginName);
|
expect(name).toBe(optionsValidationPluginName);
|
||||||
|
|||||||
+2
-2
@@ -10,7 +10,7 @@ import {
|
|||||||
createStructureSetupElements,
|
createStructureSetupElements,
|
||||||
StructureSetupElementsObj,
|
StructureSetupElementsObj,
|
||||||
} from 'setups/structureSetup/structureSetup.elements';
|
} from 'setups/structureSetup/structureSetup.elements';
|
||||||
import { addPlugin, scrollbarsHidingPlugin } from 'plugins';
|
import { addPlugin, ScrollbarsHidingPlugin } from 'plugins';
|
||||||
import type {
|
import type {
|
||||||
Initialization,
|
Initialization,
|
||||||
InitializationTarget,
|
InitializationTarget,
|
||||||
@@ -21,7 +21,7 @@ jest.mock('environment', () => ({
|
|||||||
getEnvironment: jest.fn(),
|
getEnvironment: jest.fn(),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
addPlugin(scrollbarsHidingPlugin);
|
addPlugin(ScrollbarsHidingPlugin);
|
||||||
|
|
||||||
interface StructureSetupElementsProxy {
|
interface StructureSetupElementsProxy {
|
||||||
input: InitializationTarget;
|
input: InitializationTarget;
|
||||||
|
|||||||
@@ -11,11 +11,11 @@ import {
|
|||||||
waitForOrFailTest,
|
waitForOrFailTest,
|
||||||
} from '@~local/browser-testing';
|
} from '@~local/browser-testing';
|
||||||
import { hasDimensions, offsetSize, WH, style } from 'support';
|
import { hasDimensions, offsetSize, WH, style } from 'support';
|
||||||
import { addPlugin, sizeObserverPlugin } from 'plugins';
|
import { addPlugin, SizeObserverPlugin } from 'plugins';
|
||||||
import { createSizeObserver } from 'observers';
|
import { createSizeObserver } from 'observers';
|
||||||
|
|
||||||
if (!window.ResizeObserver) {
|
if (!window.ResizeObserver) {
|
||||||
addPlugin(sizeObserverPlugin);
|
addPlugin(SizeObserverPlugin);
|
||||||
}
|
}
|
||||||
|
|
||||||
let sizeIterations = 0;
|
let sizeIterations = 0;
|
||||||
|
|||||||
+2
-2
@@ -12,10 +12,10 @@ import {
|
|||||||
} from '@~local/browser-testing';
|
} from '@~local/browser-testing';
|
||||||
import { offsetSize } from 'support';
|
import { offsetSize } from 'support';
|
||||||
import { createTrinsicObserver } from 'observers';
|
import { createTrinsicObserver } from 'observers';
|
||||||
import { addPlugin, sizeObserverPlugin } from 'plugins';
|
import { addPlugin, SizeObserverPlugin } from 'plugins';
|
||||||
|
|
||||||
if (!window.ResizeObserver) {
|
if (!window.ResizeObserver) {
|
||||||
addPlugin(sizeObserverPlugin);
|
addPlugin(SizeObserverPlugin);
|
||||||
}
|
}
|
||||||
|
|
||||||
let heightIntrinsic: boolean | undefined;
|
let heightIntrinsic: boolean | undefined;
|
||||||
|
|||||||
+3
-3
@@ -4,13 +4,13 @@ import should from 'should';
|
|||||||
import { timeout, setTestResult, waitForOrFailTest, resize } from '@~local/browser-testing';
|
import { timeout, setTestResult, waitForOrFailTest, resize } from '@~local/browser-testing';
|
||||||
import { OverlayScrollbars } from 'overlayscrollbars';
|
import { OverlayScrollbars } from 'overlayscrollbars';
|
||||||
import { addClass, each, isArray, removeAttr, style } from 'support';
|
import { addClass, each, isArray, removeAttr, style } from 'support';
|
||||||
import { addPlugin, scrollbarsHidingPlugin, sizeObserverPlugin } from 'plugins';
|
import { addPlugin, ScrollbarsHidingPlugin, SizeObserverPlugin } from 'plugins';
|
||||||
|
|
||||||
if (!window.ResizeObserver) {
|
if (!window.ResizeObserver) {
|
||||||
addPlugin(sizeObserverPlugin);
|
addPlugin(SizeObserverPlugin);
|
||||||
}
|
}
|
||||||
if (!OverlayScrollbars.env().scrollbarsHiding) {
|
if (!OverlayScrollbars.env().scrollbarsHiding) {
|
||||||
addPlugin(scrollbarsHidingPlugin);
|
addPlugin(ScrollbarsHidingPlugin);
|
||||||
}
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|||||||
+4
-4
@@ -32,15 +32,15 @@ import {
|
|||||||
} from 'support';
|
} from 'support';
|
||||||
import { Options } from 'options';
|
import { Options } from 'options';
|
||||||
import { DeepPartial } from 'typings';
|
import { DeepPartial } from 'typings';
|
||||||
import { addPlugin, scrollbarsHidingPlugin, sizeObserverPlugin, clickScrollPlugin } from 'plugins';
|
import { addPlugin, ScrollbarsHidingPlugin, SizeObserverPlugin, ClickScrollPlugin } from 'plugins';
|
||||||
|
|
||||||
addPlugin(clickScrollPlugin);
|
addPlugin(ClickScrollPlugin);
|
||||||
|
|
||||||
if (!window.ResizeObserver) {
|
if (!window.ResizeObserver) {
|
||||||
addPlugin(sizeObserverPlugin);
|
addPlugin(SizeObserverPlugin);
|
||||||
}
|
}
|
||||||
if (!OverlayScrollbars.env().scrollbarsHiding) {
|
if (!OverlayScrollbars.env().scrollbarsHiding) {
|
||||||
addPlugin(scrollbarsHidingPlugin);
|
addPlugin(ScrollbarsHidingPlugin);
|
||||||
}
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|||||||
Reference in New Issue
Block a user