mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-22 01:30:35 +03:00
improve project structure
This commit is contained in:
+7
-3
@@ -1,5 +1,9 @@
|
|||||||
import { rAF, cAF, isEmptyArray, indexOf, createCache, runEach, push } from 'support';
|
import { rAF, cAF, isEmptyArray, indexOf, createCache, runEach, push } from 'support';
|
||||||
import { getEnvironment } from 'environment';
|
//import { getEnvironment } from 'environment';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This code isn't used in the final build, just created it have it in case this feature is needed.
|
||||||
|
*/
|
||||||
|
|
||||||
export interface AutoUpdateLoop {
|
export interface AutoUpdateLoop {
|
||||||
_add(fn: (delta: number) => any): () => void;
|
_add(fn: (delta: number) => any): () => void;
|
||||||
@@ -56,7 +60,7 @@ const createAutoUpdateLoop = (): AutoUpdateLoop => {
|
|||||||
push(loopFunctions, fn);
|
push(loopFunctions, fn);
|
||||||
|
|
||||||
if (!loopIsRunning && !isEmptyArray(loopFunctions)) {
|
if (!loopIsRunning && !isEmptyArray(loopFunctions)) {
|
||||||
getEnvironment()._autoUpdateLoop = loopIsRunning = true;
|
//getEnvironment()._autoUpdateLoop = loopIsRunning = true;
|
||||||
|
|
||||||
updateTimeCache(true);
|
updateTimeCache(true);
|
||||||
loop();
|
loop();
|
||||||
@@ -66,7 +70,7 @@ const createAutoUpdateLoop = (): AutoUpdateLoop => {
|
|||||||
loopFunctions.splice(indexOf(loopFunctions, fn), 1);
|
loopFunctions.splice(indexOf(loopFunctions, fn), 1);
|
||||||
|
|
||||||
if (isEmptyArray(loopFunctions) && loopIsRunning) {
|
if (isEmptyArray(loopFunctions) && loopIsRunning) {
|
||||||
getEnvironment()._autoUpdateLoop = loopIsRunning = false;
|
//getEnvironment()._autoUpdateLoop = loopIsRunning = false;
|
||||||
|
|
||||||
cAF!(loopId!);
|
cAF!(loopId!);
|
||||||
loopId = undefined;
|
loopId = undefined;
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from 'autoUpdateLoop/autoUpdateLoop';
|
|
||||||
+4
-6
@@ -23,7 +23,7 @@ import {
|
|||||||
classNameEnvironmentFlexboxGlueMax,
|
classNameEnvironmentFlexboxGlueMax,
|
||||||
classNameViewportScrollbarStyling,
|
classNameViewportScrollbarStyling,
|
||||||
} from 'classnames';
|
} from 'classnames';
|
||||||
import { OverlayScrollbarsOptions, defaultOptions } from 'options';
|
import { OSOptions, defaultOptions } from 'options';
|
||||||
|
|
||||||
export interface InitializationStrategy {
|
export interface InitializationStrategy {
|
||||||
_padding: boolean;
|
_padding: boolean;
|
||||||
@@ -32,7 +32,6 @@ export interface InitializationStrategy {
|
|||||||
|
|
||||||
export type OnEnvironmentChanged = (env: Environment) => void;
|
export type OnEnvironmentChanged = (env: Environment) => void;
|
||||||
export interface Environment {
|
export interface Environment {
|
||||||
_autoUpdateLoop: boolean;
|
|
||||||
_nativeScrollbarSize: XY;
|
_nativeScrollbarSize: XY;
|
||||||
_nativeScrollbarIsOverlaid: XY<boolean>;
|
_nativeScrollbarIsOverlaid: XY<boolean>;
|
||||||
_nativeScrollbarStyling: boolean;
|
_nativeScrollbarStyling: boolean;
|
||||||
@@ -43,10 +42,10 @@ export interface Environment {
|
|||||||
_removeListener(listener: OnEnvironmentChanged): void;
|
_removeListener(listener: OnEnvironmentChanged): void;
|
||||||
_getInitializationStrategy(): InitializationStrategy;
|
_getInitializationStrategy(): InitializationStrategy;
|
||||||
_setInitializationStrategy(newInitializationStrategy: Partial<InitializationStrategy>): void;
|
_setInitializationStrategy(newInitializationStrategy: Partial<InitializationStrategy>): void;
|
||||||
_getDefaultOptions(): OverlayScrollbarsOptions;
|
_getDefaultOptions(): OSOptions;
|
||||||
_setDefaultOptions(newDefaultOptions: PartialOptions<OverlayScrollbarsOptions>): void;
|
_setDefaultOptions(newDefaultOptions: PartialOptions<OSOptions>): void;
|
||||||
_defaultInitializationStrategy: InitializationStrategy;
|
_defaultInitializationStrategy: InitializationStrategy;
|
||||||
_defaultDefaultOptions: OverlayScrollbarsOptions;
|
_defaultDefaultOptions: OSOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
let environmentInstance: Environment;
|
let environmentInstance: Environment;
|
||||||
@@ -153,7 +152,6 @@ const createEnvironment = (): Environment => {
|
|||||||
let defaultDefaultOptions = defaultOptions;
|
let defaultDefaultOptions = defaultOptions;
|
||||||
|
|
||||||
const env: Environment = {
|
const env: Environment = {
|
||||||
_autoUpdateLoop: false,
|
|
||||||
_nativeScrollbarSize: nativeScrollbarSize,
|
_nativeScrollbarSize: nativeScrollbarSize,
|
||||||
_nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
|
_nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
|
||||||
_nativeScrollbarStyling: nativeScrollbarStyling,
|
_nativeScrollbarStyling: nativeScrollbarStyling,
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
import { Environment } from 'environment/environment';
|
|
||||||
|
|
||||||
export * from 'environment/environment';
|
|
||||||
export type OSEnvironment = Omit<Environment, 'addListener' | 'removeListener'>;
|
|
||||||
@@ -1,3 +1,54 @@
|
|||||||
import { OverlayScrollbars } from 'overlayscrollbars/overlayscrollbars';
|
import { OSTarget, OSTargetObject } from 'typings';
|
||||||
|
import { PartialOptions, validateOptions, assignDeep, isEmptyObject } from 'support';
|
||||||
|
import { createStructureSetup, StructureSetup } from 'setups/structureSetup';
|
||||||
|
import { createLifecycleHub } from 'lifecycles/lifecycleHub';
|
||||||
|
import { OSOptions, optionsTemplate } from 'options';
|
||||||
|
import { getEnvironment } from 'environment';
|
||||||
|
|
||||||
|
export interface OverlayScrollbarsStatic {
|
||||||
|
(target: OSTarget | OSTargetObject, options?: PartialOptions<OSOptions>, extensions?: any): OverlayScrollbars;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OverlayScrollbars {
|
||||||
|
options(): OSOptions;
|
||||||
|
options(newOptions?: PartialOptions<OSOptions>): OSOptions;
|
||||||
|
|
||||||
|
update(force?: boolean): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const OverlayScrollbars: OverlayScrollbarsStatic = (
|
||||||
|
target: OSTarget | OSTargetObject,
|
||||||
|
options?: PartialOptions<OSOptions>,
|
||||||
|
extensions?: any
|
||||||
|
): OverlayScrollbars => {
|
||||||
|
const { _getDefaultOptions } = getEnvironment();
|
||||||
|
const currentOptions: OSOptions = assignDeep(
|
||||||
|
{},
|
||||||
|
_getDefaultOptions(),
|
||||||
|
validateOptions(options || ({} as PartialOptions<OSOptions>), optionsTemplate, null, true)._validated
|
||||||
|
);
|
||||||
|
const structureSetup: StructureSetup = createStructureSetup(target);
|
||||||
|
const lifecycleHub = createLifecycleHub(currentOptions, structureSetup);
|
||||||
|
const instance: OverlayScrollbars = {
|
||||||
|
options(newOptions?: PartialOptions<OSOptions>) {
|
||||||
|
if (newOptions) {
|
||||||
|
const { _validated: _changedOptions } = validateOptions(newOptions, optionsTemplate, currentOptions, true);
|
||||||
|
|
||||||
|
if (!isEmptyObject(_changedOptions)) {
|
||||||
|
assignDeep(currentOptions, _changedOptions);
|
||||||
|
lifecycleHub._update(_changedOptions);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return currentOptions;
|
||||||
|
},
|
||||||
|
update(force?: boolean) {
|
||||||
|
lifecycleHub._update(null, force);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
instance.update(true);
|
||||||
|
|
||||||
|
return instance;
|
||||||
|
};
|
||||||
|
|
||||||
export default OverlayScrollbars;
|
export default OverlayScrollbars;
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
|
import { OverlayScrollbars } from './';
|
||||||
|
|
||||||
const targets: Set<Element> = new Set();
|
const targets: Set<Element> = new Set();
|
||||||
const targetInstanceMap: WeakMap<Element, any> = new WeakMap();
|
const targetInstanceMap: WeakMap<Element, OverlayScrollbars> = new WeakMap();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds the given OverlayScrollbars instance to the given element.
|
* Adds the given OverlayScrollbars instance to the given element.
|
||||||
* @param target The element which is the target of the OverlayScrollbars instance.
|
* @param target The element which is the target of the OverlayScrollbars instance.
|
||||||
* @param osInstance The OverlayScrollbars instance.
|
* @param osInstance The OverlayScrollbars instance.
|
||||||
*/
|
*/
|
||||||
export const addInstance = (target: Element, osInstance: any): void => {
|
export const addInstance = (target: Element, osInstance: OverlayScrollbars): void => {
|
||||||
targetInstanceMap.set(target, osInstance);
|
targetInstanceMap.set(target, osInstance);
|
||||||
targets.add(target);
|
targets.add(target);
|
||||||
};
|
};
|
||||||
@@ -24,25 +26,25 @@ export const removeInstance = (target: Element): void => {
|
|||||||
* Gets the OverlayScrollbars from the given element or undefined if it doesn't have one.
|
* Gets the OverlayScrollbars from the given element or undefined if it doesn't have one.
|
||||||
* @param target The element of which its OverlayScrollbars instance shall be get.
|
* @param target The element of which its OverlayScrollbars instance shall be get.
|
||||||
*/
|
*/
|
||||||
export const getInstance = (target: Element): any => targetInstanceMap.get(target);
|
export const getInstance = (target: Element): OverlayScrollbars | undefined => targetInstanceMap.get(target);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets a Map which represents all active OverayScrollbars instances.
|
* Gets a Map which represents all active OverayScrollbars instances.
|
||||||
* The Key is the ekement and the value is the instance.
|
* The Key is the ekement and the value is the instance.
|
||||||
*/
|
*/
|
||||||
export const allInstances = (): ReadonlyMap<Element, any> => {
|
export const allInstances = (): ReadonlyMap<Element, OverlayScrollbars> => {
|
||||||
const validTargetInstanceMap: Map<Element, any> = new Map();
|
const validTargetInstanceMap: Map<Element, OverlayScrollbars> = new Map();
|
||||||
|
|
||||||
targets.forEach((target: Element) => {
|
targets.forEach((target: Element) => {
|
||||||
/* istanbul ignore else */
|
/* istanbul ignore else */
|
||||||
if (targetInstanceMap.has(target)) {
|
if (targetInstanceMap.has(target)) {
|
||||||
validTargetInstanceMap.set(target, targetInstanceMap.get(target));
|
validTargetInstanceMap.set(target, targetInstanceMap.get(target)!);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
targets.clear();
|
targets.clear();
|
||||||
|
|
||||||
validTargetInstanceMap.forEach((instance: any, validTarget: Element) => {
|
validTargetInstanceMap.forEach((instance: OverlayScrollbars, validTarget: Element) => {
|
||||||
targets.add(validTarget);
|
targets.add(validTarget);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { XY, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
|
import { XY, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
|
||||||
import { OverlayScrollbarsOptions } from 'options';
|
import { OSOptions } from 'options';
|
||||||
import { getEnvironment } from 'environment';
|
import { getEnvironment } from 'environment';
|
||||||
import { StructureSetup } from 'setups/structureSetup';
|
import { StructureSetup } from 'setups/structureSetup';
|
||||||
import { createTrinsicLifecycle } from 'lifecycles/trinsicLifecycle';
|
import { createTrinsicLifecycle } from 'lifecycles/trinsicLifecycle';
|
||||||
@@ -41,12 +41,12 @@ export type Lifecycle = (
|
|||||||
) => Partial<LifecycleAdaptiveUpdateHints> | void;
|
) => Partial<LifecycleAdaptiveUpdateHints> | void;
|
||||||
|
|
||||||
export interface LifecycleHubInstance {
|
export interface LifecycleHubInstance {
|
||||||
_update(changedOptions?: PartialOptions<OverlayScrollbarsOptions> | null, force?: boolean): void;
|
_update(changedOptions?: PartialOptions<OSOptions> | null, force?: boolean): void;
|
||||||
_destroy(): void;
|
_destroy(): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LifecycleHub {
|
export interface LifecycleHub {
|
||||||
_options: OverlayScrollbarsOptions;
|
_options: OSOptions;
|
||||||
_structureSetup: StructureSetup;
|
_structureSetup: StructureSetup;
|
||||||
// whether the "viewport arrange" strategy must be used (true if no native scrollbar hiding and scrollbars are overlaid)
|
// whether the "viewport arrange" strategy must be used (true if no native scrollbar hiding and scrollbars are overlaid)
|
||||||
_doViewportArrange: boolean;
|
_doViewportArrange: boolean;
|
||||||
@@ -108,7 +108,7 @@ const heightIntrinsicCacheValuesFallback: CacheValues<boolean> = {
|
|||||||
_changed: false,
|
_changed: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const createLifecycleHub = (options: OverlayScrollbarsOptions, structureSetup: StructureSetup): LifecycleHubInstance => {
|
export const createLifecycleHub = (options: OSOptions, structureSetup: StructureSetup): LifecycleHubInstance => {
|
||||||
let paddingInfo = paddingInfoFallback;
|
let paddingInfo = paddingInfoFallback;
|
||||||
let viewportPaddingStyle = viewportPaddingStyleFallback;
|
let viewportPaddingStyle = viewportPaddingStyleFallback;
|
||||||
let viewportOverflowScroll = viewportOverflowScrollFallback;
|
let viewportOverflowScroll = viewportOverflowScrollFallback;
|
||||||
@@ -144,11 +144,7 @@ export const createLifecycleHub = (options: OverlayScrollbarsOptions, structureS
|
|||||||
push(lifecycles, createPaddingLifecycle(instance));
|
push(lifecycles, createPaddingLifecycle(instance));
|
||||||
push(lifecycles, createOverflowLifecycle(instance));
|
push(lifecycles, createOverflowLifecycle(instance));
|
||||||
|
|
||||||
const updateLifecycles = (
|
const updateLifecycles = (updateHints?: Partial<LifecycleUpdateHints> | null, changedOptions?: Partial<OSOptions> | null, force?: boolean) => {
|
||||||
updateHints?: Partial<LifecycleUpdateHints> | null,
|
|
||||||
changedOptions?: Partial<OverlayScrollbarsOptions> | null,
|
|
||||||
force?: boolean
|
|
||||||
) => {
|
|
||||||
let {
|
let {
|
||||||
_directionIsRTL,
|
_directionIsRTL,
|
||||||
_heightIntrinsic,
|
_heightIntrinsic,
|
||||||
@@ -232,7 +228,7 @@ export const createLifecycleHub = (options: OverlayScrollbarsOptions, structureS
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const trinsicObserver = _content && createTrinsicObserver(_host, onTrinsicChanged);
|
const trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
|
||||||
const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling });
|
const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling });
|
||||||
const hostMutationObserver = createDOMObserver(_host, onHostMutation, {
|
const hostMutationObserver = createDOMObserver(_host, onHostMutation, {
|
||||||
_styleChangingAttributes: attrs,
|
_styleChangingAttributes: attrs,
|
||||||
@@ -260,7 +256,7 @@ export const createLifecycleHub = (options: OverlayScrollbarsOptions, structureS
|
|||||||
*/
|
*/
|
||||||
});
|
});
|
||||||
|
|
||||||
const update = (changedOptions?: Partial<OverlayScrollbarsOptions> | null, force?: boolean) => {
|
const update = (changedOptions?: Partial<OSOptions> | null, force?: boolean) => {
|
||||||
updateLifecycles(null, changedOptions, force);
|
updateLifecycles(null, changedOptions, force);
|
||||||
};
|
};
|
||||||
const envUpdateListener = update.bind(null, null, true);
|
const envUpdateListener = update.bind(null, null, true);
|
||||||
|
|||||||
+100
-3
@@ -5,7 +5,105 @@ import {
|
|||||||
OptionsWithOptionsTemplateValue,
|
OptionsWithOptionsTemplateValue,
|
||||||
OptionsWithOptionsTemplate,
|
OptionsWithOptionsTemplate,
|
||||||
} from 'support/options';
|
} from 'support/options';
|
||||||
import { ResizeBehavior, OverflowBehavior, VisibilityBehavior, AutoHideBehavior, OverlayScrollbarsOptions } from 'options';
|
|
||||||
|
export type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
|
||||||
|
|
||||||
|
export type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
|
||||||
|
|
||||||
|
export type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
|
||||||
|
|
||||||
|
export type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
|
||||||
|
|
||||||
|
export type ScrollBehavior = 'always' | 'ifneeded' | 'never';
|
||||||
|
|
||||||
|
export type BasicEventCallback = (this: any) => void;
|
||||||
|
|
||||||
|
export type ScrollEventCallback = (this: any, args?: UIEvent) => void;
|
||||||
|
|
||||||
|
export type OverflowChangedCallback = (this: any, args?: OverflowChangedArgs) => void;
|
||||||
|
|
||||||
|
export type OverflowAmountChangedCallback = (this: any, args?: OverflowAmountChangedArgs) => void;
|
||||||
|
|
||||||
|
export type DirectionChangedCallback = (this: any, args?: DirectionChangedArgs) => void;
|
||||||
|
|
||||||
|
export type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
|
||||||
|
|
||||||
|
export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
|
||||||
|
|
||||||
|
export interface OSOptions {
|
||||||
|
resize: ResizeBehavior;
|
||||||
|
paddingAbsolute: boolean;
|
||||||
|
updating: {
|
||||||
|
elementEvents: ReadonlyArray<[string, string]> | null;
|
||||||
|
contentMutationDebounce: number;
|
||||||
|
hostMutationDebounce: number;
|
||||||
|
resizeDebounce: number;
|
||||||
|
};
|
||||||
|
overflow: {
|
||||||
|
x: OverflowBehavior;
|
||||||
|
y: OverflowBehavior;
|
||||||
|
};
|
||||||
|
scrollbars: {
|
||||||
|
visibility: VisibilityBehavior;
|
||||||
|
autoHide: AutoHideBehavior;
|
||||||
|
autoHideDelay: number;
|
||||||
|
dragScroll: boolean;
|
||||||
|
clickScroll: boolean;
|
||||||
|
touch: boolean;
|
||||||
|
};
|
||||||
|
textarea: {
|
||||||
|
dynWidth: boolean;
|
||||||
|
dynHeight: boolean;
|
||||||
|
inheritedAttrs: string | ReadonlyArray<string> | null;
|
||||||
|
};
|
||||||
|
nativeScrollbarsOverlaid: {
|
||||||
|
show: boolean;
|
||||||
|
initialize: boolean;
|
||||||
|
};
|
||||||
|
/*
|
||||||
|
callbacks?: {
|
||||||
|
onInitialized?: BasicEventCallback | null;
|
||||||
|
onInitializationWithdrawn?: BasicEventCallback | null;
|
||||||
|
onDestroyed?: BasicEventCallback | null;
|
||||||
|
onScrollStart?: ScrollEventCallback | null;
|
||||||
|
onScroll?: ScrollEventCallback | null;
|
||||||
|
onScrollStop?: ScrollEventCallback | null;
|
||||||
|
onOverflowChanged?: OverflowChangedCallback | null;
|
||||||
|
onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
|
||||||
|
onDirectionChanged?: DirectionChangedCallback | null;
|
||||||
|
onContentSizeChanged?: SizeChangedCallback | null;
|
||||||
|
onHostSizeChanged?: SizeChangedCallback | null;
|
||||||
|
onUpdated?: UpdatedCallback | null;
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OverflowChangedArgs {
|
||||||
|
x: boolean;
|
||||||
|
y: boolean;
|
||||||
|
xScrollable: boolean;
|
||||||
|
yScrollable: boolean;
|
||||||
|
clipped: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OverflowAmountChangedArgs {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DirectionChangedArgs {
|
||||||
|
isRTL: number;
|
||||||
|
dir: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SizeChangedArgs {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdatedArgs {
|
||||||
|
forced: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
const numberAllowedValues: OptionsTemplateValue<number> = oTypes.number;
|
const numberAllowedValues: OptionsTemplateValue<number> = oTypes.number;
|
||||||
const stringArrayNullAllowedValues: OptionsTemplateValue<string | ReadonlyArray<string> | null> = [oTypes.string, oTypes.array, oTypes.null];
|
const stringArrayNullAllowedValues: OptionsTemplateValue<string | ReadonlyArray<string> | null> = [oTypes.string, oTypes.array, oTypes.null];
|
||||||
@@ -32,8 +130,7 @@ const scrollbarsAutoHideAllowedValues: OptionsTemplateValue<AutoHideBehavior> =
|
|||||||
* Property "a" has a default value of 'default' and it can be a string or null
|
* Property "a" has a default value of 'default' and it can be a string or null
|
||||||
* Property "b" has a default value of 250 and it can be number
|
* Property "b" has a default value of 250 and it can be number
|
||||||
*/
|
*/
|
||||||
|
const defaultOptionsWithTemplate: OptionsWithOptionsTemplate<OSOptions> = {
|
||||||
const defaultOptionsWithTemplate: OptionsWithOptionsTemplate<OverlayScrollbarsOptions> = {
|
|
||||||
resize: ['none', resizeAllowedValues], // none || both || horizontal || vertical || n || b || h || v
|
resize: ['none', resizeAllowedValues], // none || both || horizontal || vertical || n || b || h || v
|
||||||
paddingAbsolute: booleanFalseTemplate, // true || false
|
paddingAbsolute: booleanFalseTemplate, // true || false
|
||||||
updating: {
|
updating: {
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
export * from 'options/options';
|
|
||||||
|
|
||||||
export type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
|
|
||||||
|
|
||||||
export type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
|
|
||||||
|
|
||||||
export type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
|
|
||||||
|
|
||||||
export type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
|
|
||||||
|
|
||||||
export type ScrollBehavior = 'always' | 'ifneeded' | 'never';
|
|
||||||
|
|
||||||
export type BasicEventCallback = (this: any) => void;
|
|
||||||
|
|
||||||
export type ScrollEventCallback = (this: any, args?: UIEvent) => void;
|
|
||||||
|
|
||||||
export type OverflowChangedCallback = (this: any, args?: OverflowChangedArgs) => void;
|
|
||||||
|
|
||||||
export type OverflowAmountChangedCallback = (this: any, args?: OverflowAmountChangedArgs) => void;
|
|
||||||
|
|
||||||
export type DirectionChangedCallback = (this: any, args?: DirectionChangedArgs) => void;
|
|
||||||
|
|
||||||
export type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
|
|
||||||
|
|
||||||
export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
|
|
||||||
|
|
||||||
export interface OverlayScrollbarsOptions {
|
|
||||||
resize: ResizeBehavior;
|
|
||||||
paddingAbsolute: boolean;
|
|
||||||
updating: {
|
|
||||||
elementEvents: ReadonlyArray<[string, string]> | null;
|
|
||||||
contentMutationDebounce: number;
|
|
||||||
hostMutationDebounce: number;
|
|
||||||
resizeDebounce: number;
|
|
||||||
};
|
|
||||||
overflow: {
|
|
||||||
x: OverflowBehavior;
|
|
||||||
y: OverflowBehavior;
|
|
||||||
};
|
|
||||||
scrollbars: {
|
|
||||||
visibility: VisibilityBehavior;
|
|
||||||
autoHide: AutoHideBehavior;
|
|
||||||
autoHideDelay: number;
|
|
||||||
dragScroll: boolean;
|
|
||||||
clickScroll: boolean;
|
|
||||||
touch: boolean;
|
|
||||||
};
|
|
||||||
textarea: {
|
|
||||||
dynWidth: boolean;
|
|
||||||
dynHeight: boolean;
|
|
||||||
inheritedAttrs: string | ReadonlyArray<string> | null;
|
|
||||||
};
|
|
||||||
nativeScrollbarsOverlaid: {
|
|
||||||
show: boolean;
|
|
||||||
initialize: boolean;
|
|
||||||
};
|
|
||||||
/*
|
|
||||||
callbacks?: {
|
|
||||||
onInitialized?: BasicEventCallback | null;
|
|
||||||
onInitializationWithdrawn?: BasicEventCallback | null;
|
|
||||||
onDestroyed?: BasicEventCallback | null;
|
|
||||||
onScrollStart?: ScrollEventCallback | null;
|
|
||||||
onScroll?: ScrollEventCallback | null;
|
|
||||||
onScrollStop?: ScrollEventCallback | null;
|
|
||||||
onOverflowChanged?: OverflowChangedCallback | null;
|
|
||||||
onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
|
|
||||||
onDirectionChanged?: DirectionChangedCallback | null;
|
|
||||||
onContentSizeChanged?: SizeChangedCallback | null;
|
|
||||||
onHostSizeChanged?: SizeChangedCallback | null;
|
|
||||||
onUpdated?: UpdatedCallback | null;
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface OverflowChangedArgs {
|
|
||||||
x: boolean;
|
|
||||||
y: boolean;
|
|
||||||
xScrollable: boolean;
|
|
||||||
yScrollable: boolean;
|
|
||||||
clipped: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface OverflowAmountChangedArgs {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DirectionChangedArgs {
|
|
||||||
isRTL: number;
|
|
||||||
dir: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SizeChangedArgs {
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UpdatedArgs {
|
|
||||||
forced: boolean;
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import { OSTarget, OSTargetObject } from 'typings';
|
|
||||||
|
|
||||||
import { PartialOptions, validateOptions, assignDeep, isEmptyObject } from 'support';
|
|
||||||
import { createStructureSetup, StructureSetup } from 'setups/structureSetup';
|
|
||||||
import { createLifecycleHub } from 'lifecycles/lifecycleHub';
|
|
||||||
import { OverlayScrollbarsOptions, optionsTemplate } from 'options';
|
|
||||||
import { getEnvironment } from 'environment';
|
|
||||||
|
|
||||||
const OverlayScrollbars = (target: OSTarget | OSTargetObject, options?: PartialOptions<OverlayScrollbarsOptions>, extensions?: any): any => {
|
|
||||||
const { _getDefaultOptions } = getEnvironment();
|
|
||||||
const currentOptions: OverlayScrollbarsOptions = assignDeep(
|
|
||||||
{},
|
|
||||||
_getDefaultOptions(),
|
|
||||||
validateOptions(options || ({} as PartialOptions<OverlayScrollbarsOptions>), optionsTemplate, null, true)._validated
|
|
||||||
);
|
|
||||||
const structureSetup: StructureSetup = createStructureSetup(target);
|
|
||||||
const lifecycleHub = createLifecycleHub(currentOptions, structureSetup);
|
|
||||||
const instance = {
|
|
||||||
options(newOptions?: PartialOptions<OverlayScrollbarsOptions>) {
|
|
||||||
if (newOptions) {
|
|
||||||
const { _validated: _changedOptions } = validateOptions(newOptions, optionsTemplate, currentOptions, true);
|
|
||||||
|
|
||||||
if (!isEmptyObject(_changedOptions)) {
|
|
||||||
assignDeep(currentOptions, _changedOptions);
|
|
||||||
lifecycleHub._update(_changedOptions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return currentOptions;
|
|
||||||
},
|
|
||||||
update(force?: boolean) {
|
|
||||||
lifecycleHub._update(null, force);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
instance.update(true);
|
|
||||||
|
|
||||||
return instance;
|
|
||||||
};
|
|
||||||
|
|
||||||
export { OverlayScrollbars };
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export * from 'overlayscrollbars';
|
|
||||||
|
|
||||||
export type TargetElement = HTMLElement | HTMLTextAreaElement;
|
|
||||||
+1
-1
@@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl
|
|||||||
import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
|
import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
|
||||||
|
|
||||||
const targetElm = document.querySelector('#target') as HTMLElement;
|
const targetElm = document.querySelector('#target') as HTMLElement;
|
||||||
window.os = OverlayScrollbars({ target: targetElm, content: null });
|
window.os = OverlayScrollbars({ target: targetElm, content: false });
|
||||||
|
|
||||||
export const resize = (element: HTMLElement) => {
|
export const resize = (element: HTMLElement) => {
|
||||||
const strMouseTouchDownEvent = 'mousedown touchstart';
|
const strMouseTouchDownEvent = 'mousedown touchstart';
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { XY, PartialOptions } from 'support';
|
import { XY, PartialOptions } from 'support';
|
||||||
import { OverlayScrollbarsOptions } from 'options';
|
import { OSOptions } from 'options';
|
||||||
export interface InitializationStrategy {
|
export interface InitializationStrategy {
|
||||||
_padding: boolean;
|
_padding: boolean;
|
||||||
_content: boolean;
|
_content: boolean;
|
||||||
@@ -20,9 +20,9 @@ export interface Environment {
|
|||||||
_removeListener(listener: OnEnvironmentChanged): void;
|
_removeListener(listener: OnEnvironmentChanged): void;
|
||||||
_getInitializationStrategy(): InitializationStrategy;
|
_getInitializationStrategy(): InitializationStrategy;
|
||||||
_setInitializationStrategy(newInitializationStrategy: Partial<InitializationStrategy>): void;
|
_setInitializationStrategy(newInitializationStrategy: Partial<InitializationStrategy>): void;
|
||||||
_getDefaultOptions(): OverlayScrollbarsOptions;
|
_getDefaultOptions(): OSOptions;
|
||||||
_setDefaultOptions(newDefaultOptions: PartialOptions<OverlayScrollbarsOptions>): void;
|
_setDefaultOptions(newDefaultOptions: PartialOptions<OSOptions>): void;
|
||||||
_defaultInitializationStrategy: InitializationStrategy;
|
_defaultInitializationStrategy: InitializationStrategy;
|
||||||
_defaultDefaultOptions: OverlayScrollbarsOptions;
|
_defaultDefaultOptions: OSOptions;
|
||||||
}
|
}
|
||||||
export declare const getEnvironment: () => Environment;
|
export declare const getEnvironment: () => Environment;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { XY, TRBL, CacheValues, PartialOptions } from 'support';
|
import { XY, TRBL, CacheValues, PartialOptions } from 'support';
|
||||||
import { OverlayScrollbarsOptions } from 'options';
|
import { OSOptions } from 'options';
|
||||||
import { StructureSetup } from 'setups/structureSetup';
|
import { StructureSetup } from 'setups/structureSetup';
|
||||||
import { StyleObject } from 'typings';
|
import { StyleObject } from 'typings';
|
||||||
export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
|
export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
|
||||||
@@ -23,11 +23,11 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
|
|||||||
}
|
}
|
||||||
export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
|
export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
|
||||||
export interface LifecycleHubInstance {
|
export interface LifecycleHubInstance {
|
||||||
_update(changedOptions?: PartialOptions<OverlayScrollbarsOptions> | null, force?: boolean): void;
|
_update(changedOptions?: PartialOptions<OSOptions> | null, force?: boolean): void;
|
||||||
_destroy(): void;
|
_destroy(): void;
|
||||||
}
|
}
|
||||||
export interface LifecycleHub {
|
export interface LifecycleHub {
|
||||||
_options: OverlayScrollbarsOptions;
|
_options: OSOptions;
|
||||||
_structureSetup: StructureSetup;
|
_structureSetup: StructureSetup;
|
||||||
_doViewportArrange: boolean;
|
_doViewportArrange: boolean;
|
||||||
_getPaddingInfo(): PaddingInfo;
|
_getPaddingInfo(): PaddingInfo;
|
||||||
@@ -37,4 +37,4 @@ export interface LifecycleHub {
|
|||||||
_getViewportOverflowScroll(): XY<boolean>;
|
_getViewportOverflowScroll(): XY<boolean>;
|
||||||
_setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
|
_setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
|
||||||
}
|
}
|
||||||
export declare const createLifecycleHub: (options: OverlayScrollbarsOptions, structureSetup: StructureSetup) => LifecycleHubInstance;
|
export declare const createLifecycleHub: (options: OSOptions, structureSetup: StructureSetup) => LifecycleHubInstance;
|
||||||
|
|||||||
+2
-2
@@ -1,2 +1,2 @@
|
|||||||
import { OverlayScrollbarsOptions } from 'options';
|
import { OSOptions } from 'options';
|
||||||
export declare const optionsTemplate: import("../support/options").OptionsTemplate<OverlayScrollbarsOptions>, defaultOptions: OverlayScrollbarsOptions;
|
export declare const optionsTemplate: import("../support/options").OptionsTemplate<OSOptions>, defaultOptions: OSOptions;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { OSTarget, OSTargetObject } from 'typings';
|
import { OSTarget, OSTargetObject } from 'typings';
|
||||||
import { PartialOptions } from 'support';
|
import { PartialOptions } from 'support';
|
||||||
import { OverlayScrollbarsOptions } from 'options';
|
import { OSOptions } from 'options';
|
||||||
declare const OverlayScrollbars: (target: OSTarget | OSTargetObject, options?: PartialOptions<OverlayScrollbarsOptions> | undefined, extensions?: any) => any;
|
declare const OverlayScrollbars: (target: OSTarget | OSTargetObject, options?: PartialOptions<OSOptions> | undefined, extensions?: any) => any;
|
||||||
export { OverlayScrollbars };
|
export { OverlayScrollbars };
|
||||||
|
|||||||
Reference in New Issue
Block a user