diff --git a/types/semantic-ui-visibility/global.d.ts b/types/semantic-ui-visibility/global.d.ts new file mode 100644 index 0000000000..fa735676c5 --- /dev/null +++ b/types/semantic-ui-visibility/global.d.ts @@ -0,0 +1,366 @@ +interface JQuery { + visibility: SemanticUI.Visibility; +} + +declare namespace SemanticUI { + interface Visibility { + settings: VisibilitySettings; + + /** + * Disable callbacks temporarily. This is useful if you need to adjust scroll position and do not want to trigger callbacks during the position change. + */ + (behavior: 'disable callbacks'): JQuery; + /** + * Re-enable callbacks + */ + (behavior: 'enable callbacks'): JQuery; + /** + * Returns whether element is on screen + */ + (behavior: 'is on screen'): boolean; + /** + * Returns whether element is off screen + */ + (behavior: 'is off screen'): boolean; + /** + * Returns number of pixels passed in current element from top of element + */ + (behavior: 'get pixels passed'): number; + /** + * Returns element calculations as object + */ + (behavior: 'get element calculations'): Visibility.ElementCalculations; + /** + * Returns screen calculations as object + */ + (behavior: 'get screen calculations'): Visibility.ScreenCalculations; + /** + * Returns screen size as object + */ + (behavior: 'get screen size'): Visibility.ScreenSize; + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): VisibilitySettings[K]; + (behavior: 'setting', name: K, value: VisibilitySettings[K]): JQuery; + (behavior: 'setting', value: VisibilitySettings.Param): JQuery; + (settings?: VisibilitySettings.Param): JQuery; + } + + /** + * @see {@link http://semantic-ui.com/behaviors/visibility.html#/settings} + */ + interface VisibilitySettings extends Pick { } + + namespace VisibilitySettings { + type Param = VisibilitySettings | object; + + interface _Impl { + // region Functionality + + /** + * When set to false a callback will occur each time an element passes the threshold for a condition. + * + * @default true + */ + once: boolean; + /** + * When set to true a callback will occur anytime an element passes a condition not just immediately after the threshold is met. + * + * @default false + */ + continuous: boolean; + /** + * Set to image to load images when on screen. Set to fixed to add class name fixed when passed. + * + * @default false + */ + type: false | 'image' | 'fixed'; + /** + * Whether visibility conditions should be checked immediately on init + * + * @default true + */ + initialCheck: boolean; + /** + * The scroll context visibility should use. + * + * @default 'window' + */ + context: string | JQuery; + /** + * Whether visibility conditions should be checked on window load. This ensures that after images load content positions will be updated correctly. + * + * @default true + */ + refreshOnLoad: boolean; + /** + * Whether visibility conditions should be checked on window resize. Useful when content resizes causes continuous changes in position + * + * @default true + */ + refreshOnResize: boolean; + /** + * Whether visibility conditions should be checked on calls to refresh. + * These calls can be triggered from either resize, load or manually calling $('.foo').visibility('refresh') + * + * @default true + */ + checkOnRefresh: boolean; + /** + * Specify a z-index when using type: 'fixed'. + * + * @default 1 + * @since 2.2 + */ + zIndex: number; + /** + * Value that context scrollTop should be adjusted in pixels. Useful for making content appear below content fixed to the page. + * + * @default 0 + */ + offset: number; + /** + * Whether element calculations should include its margin + * + * @default false + */ + includeMargin: boolean; + /** + * When set to an integer, scroll position will be debounced using this ms value. false will debounce with requestAnimationFrame. + * + * @default false + */ + throttle: false | number; + /** + * Whether to automatically refresh content when changes are made to the element's DOM subtree + * + * @default true + */ + observeChanges: boolean; + /** + * When using type: image allows you to specify transition when showing a loaded image + * + * @default false + */ + transition: false | string; + /** + * When using type: image allows you to specify transition duration + * + * @default 1000 + */ + duration: number; + + // endregion + + // region Visibility Callbacks + + /** + * Element's top edge has passed bottom of screen + */ + onTopVisible(this: JQuery): void; + /** + * Element's top edge has passed top of the screen + */ + onTopPassed(this: JQuery): void; + /** + * Element's bottom edge has passed bottom of screen + */ + onBottomVisible(this: JQuery): void; + /** + * Any part of an element is visible on screen + */ + onPassing(this: JQuery): void; + /** + * Element's bottom edge has passed top of screen + */ + onBottomPassed(this: JQuery): void; + /** + * Element's top edge has not passed bottom of screen + */ + onTopVisibleReverse(this: JQuery): void; + /** + * Element's top edge has not passed top of the screen + */ + onTopPassedReverse(this: JQuery): void; + /** + * Element's bottom edge has not passed bottom of screen + */ + onBottomVisibleReverse(this: JQuery): void; + /** + * Element's top has not passed top of screen but bottom has + */ + onPassingReverse(this: JQuery): void; + /** + * Element's bottom edge has not passed top of screen + */ + onBottomPassedReverse(this: JQuery): void; + onOnScreen(this: JQuery): void; + onOffScreen(this: JQuery): void; + + // endregion + + // region Image Callbacks + + /** + * Occurs after an image has completed loading + * + * @since 2.2 + */ + onLoad(this: JQuery): void; + /** + * Occurs after all img initialized at the same time have loaded. + * + * @since 2.2 + */ + onAllLoaded(this: JQuery): void; + + // endregion + + // region Fixed Callbacks + + /** + * Occurs after element has been assigned position fixed + * + * @since 2.2 + */ + onFixed(this: JQuery): void; + /** + * Occurs after element has been removed from fixed position + * + * @since 2.2 + */ + onUnfixed(this: JQuery): void; + + // endregion + + // region Utility Callbacks + + /** + * Occurs each time an elements calculations are updated + */ + onUpdate(this: JQuery, calculations: Visibility.ElementCalculations): void; + /** + * Occurs whenever element's visibility is refreshed + */ + onRefresh(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * Class names used to attach style to state + */ + className: Visibility.ClassNameSettings; + + // endregion + + // region Debug Settings + + error: Visibility.ErrorSettings; + + // endregion + + // region Component Settings + + // region DOM Settings + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + /** + * Debug output to console + */ + debug: boolean; + /** + * Show console.table output with performance metrics + */ + performance: boolean; + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + // endregion + + // endregion + } + } + + namespace Visibility { + interface ElementPosition { + fits: boolean; + offset: JQueryCoordinates; + width: number; + height: number; + } + + interface ElementCalculations extends ElementPosition { + margin?: { + top: number; + bottom: number; + }; + top: number; + bottom: number; + + topVisible: boolean; + topPassed: boolean; + bottomVisible: boolean; + bottomPassed: boolean; + pixelsPassed: number; + percentagePassed: number; + + onScreen: boolean; + passing: boolean; + offScreen: boolean; + } + + interface ScreenCalculations { + top: number; + bottom: number; + } + + interface ScreenSize { + height: number; + } + + interface ClassNameSettings extends Pick { } + + namespace ClassNameSettings { + type Param = ClassNameSettings | object; + + interface _Impl { + /** + * @default 'fixed' + */ + fixed: string; + } + } + + interface ErrorSettings extends Pick { } + + namespace ErrorSettings { + type Param = ErrorSettings | object; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + } + } + } +} diff --git a/types/semantic-ui-visibility/index.d.ts b/types/semantic-ui-visibility/index.d.ts new file mode 100644 index 0000000000..14873ba2ea --- /dev/null +++ b/types/semantic-ui-visibility/index.d.ts @@ -0,0 +1,11 @@ +// Type definitions for semantic-ui-visibility 2.2 +// Project: http://www.semantic-ui.com +// Definitions by: Leonard Thieu +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 + +/// +/// + +declare const visibility: SemanticUI.Visibility; +export = visibility; diff --git a/types/semantic-ui-visibility/semantic-ui-visibility-tests.ts b/types/semantic-ui-visibility/semantic-ui-visibility-tests.ts new file mode 100644 index 0000000000..960eeb5215 --- /dev/null +++ b/types/semantic-ui-visibility/semantic-ui-visibility-tests.ts @@ -0,0 +1,161 @@ +function test_visibility_static() { + $.fn.visibility.settings.error.method = 'method'; + $.fn.visibility.settings.namespace = 'namespace'; + $.fn.visibility.settings.name = 'name'; + $.fn.visibility.settings.silent = false; + $.fn.visibility.settings.debug = true; + $.fn.visibility.settings.performance = true; + $.fn.visibility.settings.verbose = true; +} + +function test_visibility() { + const selector = '.ui.visibility'; + $(selector).visibility('disable callbacks') === $(); + $(selector).visibility('enable callbacks') === $(); + $(selector).visibility('is on screen') === false; + $(selector).visibility('is off screen') === true; + $(selector).visibility('get pixels passed') === 20; + $(selector).visibility('get element calculations') === { + fits: false, + offset: { + top: 955.96875, + left: 292 + }, + width: 466, + height: 1665.890625, + top: 955.96875, + bottom: 2621.859375, + topPassed: true, + bottomPassed: false, + topVisible: true, + bottomVisible: false, + pixelsPassed: 742.03125, + percentagePassed: 0.44542615155182, + onScreen: true, + passing: true, + offScreen: false + }; + $(selector).visibility('get screen calculations') === { + bottom: 2658, + top: 1698 + }; + $(selector).visibility('get screen size') === { + height: 960 + }; + $(selector).visibility('destroy') === $(); + $(selector).visibility('setting', 'debug', undefined) === false; + $(selector).visibility('setting', 'debug') === false; + $(selector).visibility('setting', 'debug', true) === $(); + $(selector).visibility('setting', { + namespace: 'namespace', + name: 'name', + silent: false, + debug: true, + performance: true, + verbose: true + }) === $(); + $(selector).visibility({ + once: false, + continuous: true, + type: 'image', + initialCheck: false, + context: $(), + refreshOnLoad: true, + refreshOnResize: false, + checkOnRefresh: true, + zIndex: 2, + offset: 3, + includeMargin: false, + throttle: 10, + observeChanges: true, + transition: 'fade', + duration: 5, + onTopVisible() { + this === $(); + }, + onTopPassed() { + this === $(); + }, + onBottomVisible() { + this === $(); + }, + onPassing() { + this === $(); + }, + onBottomPassed() { + this === $(); + }, + onTopVisibleReverse() { + this === $(); + }, + onTopPassedReverse() { + this === $(); + }, + onBottomVisibleReverse() { + this === $(); + }, + onPassingReverse() { + this === $(); + }, + onBottomPassedReverse() { + this === $(); + }, + onOnScreen() { + this === $(); + }, + onOffScreen() { + this === $(); + }, + onLoad() { + this === $(); + }, + onAllLoaded() { + this === $(); + }, + onFixed() { + this === $(); + }, + onUnfixed() { + this === $(); + }, + onUpdate(calculations) { + this === $(); + calculations === { + fits: false, + offset: { + top: 955.96875, + left: 292 + }, + width: 466, + height: 1665.890625, + top: 955.96875, + bottom: 2621.859375, + topPassed: true, + bottomPassed: false, + topVisible: true, + bottomVisible: false, + pixelsPassed: 742.03125, + percentagePassed: 0.44542615155182, + onScreen: true, + passing: true, + offScreen: false + }; + }, + onRefresh() { + this === $(); + }, + className: { + fixed: 'fixed', + }, + error: { + method: 'method' + } + }) === $(); + $(selector).visibility() === $(); +} + +import visibility = require('semantic-ui-visibility'); + +function test_module() { + $.fn.visibility = visibility; +} diff --git a/types/semantic-ui-visibility/tsconfig.json b/types/semantic-ui-visibility/tsconfig.json new file mode 100644 index 0000000000..dcf5313a0a --- /dev/null +++ b/types/semantic-ui-visibility/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "global.d.ts", + "semantic-ui-visibility-tests.ts" + ] +} diff --git a/types/semantic-ui-visibility/tslint.json b/types/semantic-ui-visibility/tslint.json new file mode 100644 index 0000000000..758e484744 --- /dev/null +++ b/types/semantic-ui-visibility/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "no-empty-interface": false, + "unified-signatures": false + } +}