fomantic-ui
Version:
Fomantic empowers designers and developers by creating a shared vocabulary for UI.
526 lines (424 loc) • 13.8 kB
TypeScript
declare namespace FomanticUI {
interface Flyout {
settings: FlyoutSettings;
/**
* Attaches flyout action to given selector.
* Default event if none specified is toggle.
*/
(behavior: 'attach events', selector: JQuery, event: Function): JQuery;
/**
* Shows the flyout.
*/
(behavior: 'show'): JQuery;
/**
* Hides the flyout.
*/
(behavior: 'hide'): JQuery;
/**
* Toggles the flyout.
*/
(behavior: 'toggle'): JQuery;
/**
* Hides all other displayed flyouts.
*/
(behavior: 'hide others'): JQuery;
/**
* Returns whether the flyout is visible.
*/
(behavior: 'is visible'): boolean;
/**
* Returns whether the flyout is hidden.
*/
(behavior: 'is hidden'): boolean;
/**
* Returns direction of current flyout.
*/
(behavior: 'get direction'): string;
/**
* Returns current flyout's settings.
*/
(behavior: 'get settings'): FlyoutSettings;
(behavior: 'destroy'): JQuery;
<K extends keyof FlyoutSettings>(behavior: 'setting', name: K, value?: undefined, ): Partial<Pick<FlyoutSettings, keyof FlyoutSettings>>;
<K extends keyof FlyoutSettings>(behavior: 'setting', name: K, value: FlyoutSettings[K]): JQuery;
(behavior: 'setting', value: Partial<Pick<FlyoutSettings, keyof FlyoutSettings>>): JQuery;
(settings?: Partial<Pick<FlyoutSettings, keyof FlyoutSettings>>): JQuery;
}
/**
* @see {@link https://fomantic-ui.com/modules/flyout.html#/settings}
*/
interface FlyoutSettings {
// region Accordion Settings
/**
* Selector or jquery object specifying the area to dim.
* @default 'body'
*/
context: string | JQuery;
/**
* Opening another flyout will dismiss the one displayed.
* Set to 'true' to allow multiple flyout at the same time.
* @default false
*/
exclusive: boolean;
/**
* Setting to 'false' will not allow you to close the flyout by clicking on the dimmer.
* @default true
*/
closable: boolean;
/**
* Whether to dim 'context' contents when flyout is visible.
* @default true
*/
dimPage: boolean;
/**
* If dimmer should blur background.
* @default false
*/
blurring: boolean;
/**
* When 'true', the first form input inside the flyout will receive focus when shown.
* Set this to 'false' to prevent this behavior.
* @default true
*/
autofocus: boolean;
/**
* When 'false', the last focused element, before the flyout was shown, will not get refocused again when the flyout hides.
* This could prevent unwanted scrolling behaviors after closing a flyout.
* @default true
*/
keyboardShortcuts: boolean;
/**
* Whether to automatically bind keyboard shortcuts.
* This will close the flyout when the 'ESC-key' is pressed.
* @default true
*/
restoreFocus: boolean;
/**
* Whether to lock page scroll when flyout is visible.
* @default false
*/
scrollLock: boolean;
/**
* Whether to return to original scroll position when flyout is hidden.
* @default false
*/
returnScroll: boolean;
/**
* When flyout is initialized without the proper HTML, using this option will defer creation of DOM to use 'requestAnimationFrame'.
* @default false
*/
delaySetup: boolean;
/**
* When 'true', immediately shows the flyout at instantiation time.
* @default false
*/
autoShow: boolean;
// endregion
// region Config Template Settings
/**
* Content of the flyout header.
* @default ''
*/
title: boolean;
/**
* Content of the flyout content.
* @default ''
*/
content: boolean;
/**
* Can hold a string to be added to the flyout class to control its appearance.
* @default ''
*/
class: boolean;
/**
* Can hold a string to be added to the title class to control its appearance.
* @default ''
*/
classTitle: boolean;
/**
* Can hold a string to be added to the content class to control its appearance.
* @default ''
*/
classContent: boolean;
/**
* Can hold a string to be added to the actions class to control its appearance.
* @default ''
*/
classActions: boolean;
/**
* Can hold a string to be added to the actions class to control its appearance.
* @default false
*/
closeIcon: boolean;
/**
* An array of objects. Each object defines an action with properties `text`, `class`, `icon` and `click`.
* @default false
*/
actions: false | object[];
/**
* Whether HTML included in given title, content or actions should be preserved.
* Set to `false` in case you work with untrusted 3rd party content.
* @default true
*/
preserveHTML: boolean;
// endregion
// region Callbacks
/**
* Is called when a flyout is either shown or hidden.
*/
onChange(this: JQuery): void;
/**
* Is called when a flyout starts to show.
*/
onShow(this: JQuery): void;
/**
* Is called after a flyout starts to hide.
*/
onHide(this: JQuery): void;
/**
* Is called after a flyout has finished showing animating.
*/
onVisible(this: JQuery): void;
/**
* Is called after a flyout has finished hiding animation.
*/
onHidden(this: JQuery): void;
/**
* Is called after a positive, approve or ok button is pressed.
* If the function returns 'false', the flyout will not hide.
*/
onApprove(this: JQuery): void;
/**
* Is called after a negative, deny or cancel button is pressed.
* If the function 'returns' false, the flyout will not hide.
*/
onDeny(this: JQuery): void;
// endregion
// region DOM Settings
/**
* DOM Selectors used internally.
* Selectors used to find parts of a module.
*/
selector: Flyout.SelectorSettings;
/**
* Class names used to determine element state.
*/
className: Flyout.ClassNameSettings;
/**
*
*/
regExp: Flyout.RegExpSettings;
// endregion
// region Config Template Settings
// endregion
// region Debug Settings
/**
* Name used in log statements
* @default 'Flyout'
*/
name: string;
/**
* Event namespace. Makes sure module teardown does not effect other events attached to an element.
* @default 'flyout'
*/
namespace: string;
/**
* Silences all console output including error messages, regardless of other debug settings.
* @default false
*/
silent: boolean;
/**
* Debug output to console
* @default false
*/
debug: boolean;
/**
* Show console.table output with performance metrics
* @default true
*/
performance: boolean;
/**
* Debug output includes all internal behaviors
* @default false
*/
verbose: boolean;
error: Flyout.ErrorSettings;
// endregion
}
namespace Flyout {
type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
type RegExpSettings = Partial<Pick<Settings.RegExps, keyof Settings.RegExps>>;
type ErrorSettings = Partial<Pick<Settings.Errors, keyof Settings.Errors>>;
namespace Settings {
interface Selectors {
/**
* @default '.fixed'
*/
fixed: string;
/**
* @default 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed'
*/
omitted: string;
/**
* @default '.pusher'
*/
pusher: string;
/**
* @default '.ui.flyout'
*/
flyout: string;
/**
* @default '.ui.header'
*/
header: string;
/**
* @default '.content'
*/
content: string;
/**
* @default '.actions'
*/
actions: string;
/**
* @default '.close'
*/
close: string;
/**
* @default '.actions .positive, .actions .approve, .actions .ok'
*/
approve: string;
/**
* @default '.actions .negative, .actions .deny, .actions .cancel'
*/
deny: string;
}
interface ClassNames {
/**
* @default 'ui flyout'
*/
flyout: string;
/**
* @default 'close icon'
*/
close: string;
/**
* @default 'ui header'
*/
header: string;
/**
* @default 'content'
*/
content: string;
/**
* @default 'actions'
*/
actions: string;
/**
* @default 'active'
*/
active: string;
/**
* @default 'animating'
*/
animating: string;
/**
* @default 'dimmed'
*/
dimmed: string;
/**
* @default 'ios'
*/
ios: string;
/**
* @default 'pushable'
*/
pushable: string;
/**
* @default 'pushed'
*/
pushed: string;
/**
* @default 'right'
*/
right: string;
/**
* @default 'top'
*/
top: string;
/**
* @default 'left'
*/
left: string;
/**
* @default 'bottom'
*/
bottom: string;
/**
* @default 'visible'
*/
visible: string;
/**
* @default 'overlay'
*/
overlay: string;
/**
* @default 'fullscreen'
*/
fullscreen: string;
/**
* @default 'ui flyout'
*/
template: string;
/**
* @default 'ui button'
*/
button: string;
/**
* @default 'positive'
*/
ok: string;
/**
* @default 'negative'
*/
cancel: string;
/**
* @default 'ui fluid input'
*/
prompt: string;
}
interface RegExps {
/**
* @default /(iPad|iPhone|iPod)/g
*/
ios: RegExp;
/**
* @default /(CriOS)/g
*/
mobileChrome: RegExp;
/**
* @default /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
*/
mobile: RegExp;
}
interface Errors {
/**
* @default 'The method you called is not defined.'
*/
method: string;
/**
* @default 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element'
*/
pusher: string;
/**
* @default 'Had to move flyout. For optimal performance make sure flyout and pusher are direct children of your body tag'
*/
movedFlyout: string;
/**
* @default 'There were no elements that matched the specified selector'
*/
notFound: string;
}
}
}
}