mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-11 20:40:20 +00:00
[semantic-ui-visibility] Add type definitions. (#16994)
This commit is contained in:
Leonard Thieu
committed by
Mohamed Hegazy
Mohamed Hegazy
parent
e366674da8
commit
8109b32f88
+366
@@ -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;
|
||||
<K extends keyof VisibilitySettings>(behavior: 'setting', name: K, value?: undefined): VisibilitySettings[K];
|
||||
<K extends keyof VisibilitySettings>(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<VisibilitySettings._Impl, keyof VisibilitySettings._Impl> { }
|
||||
|
||||
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<ClassNameSettings._Impl, keyof ClassNameSettings._Impl> { }
|
||||
|
||||
namespace ClassNameSettings {
|
||||
type Param = ClassNameSettings | object;
|
||||
|
||||
interface _Impl {
|
||||
/**
|
||||
* @default 'fixed'
|
||||
*/
|
||||
fixed: string;
|
||||
}
|
||||
}
|
||||
|
||||
interface ErrorSettings extends Pick<ErrorSettings._Impl, keyof ErrorSettings._Impl> { }
|
||||
|
||||
namespace ErrorSettings {
|
||||
type Param = ErrorSettings | object;
|
||||
|
||||
interface _Impl {
|
||||
/**
|
||||
* @default 'The method you called is not defined.'
|
||||
*/
|
||||
method: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
// Type definitions for semantic-ui-visibility 2.2
|
||||
// Project: http://www.semantic-ui.com
|
||||
// Definitions by: Leonard Thieu <https://github.com/leonard-thieu>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.2
|
||||
|
||||
/// <reference types="jquery" />
|
||||
/// <reference path="global.d.ts" />
|
||||
|
||||
declare const visibility: SemanticUI.Visibility;
|
||||
export = visibility;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"no-empty-interface": false,
|
||||
"unified-signatures": false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user