diff --git a/types/extended-listbox/extended-listbox-tests.ts b/types/extended-listbox/extended-listbox-tests.ts index e3dcba4735..571a455300 100644 --- a/types/extended-listbox/extended-listbox-tests.ts +++ b/types/extended-listbox/extended-listbox-tests.ts @@ -1,39 +1,38 @@ -/// - -var $test = $("#test"); +const testElement: HTMLElement = document.getElementById("test"); // Create Listbox with defaults -var instance: ExtendedListboxInstance = $test.listbox(); +let instance: SingleSelectListBox = new SingleSelectListBox(testElement); +instance = new MultiSelectListBox(testElement); // Create with options -var options = {}; -options.multiple = true; -options.searchBar = false; -options.searchBarWatermark = "Search"; -options.searchBarButton = { icon: "fa fa-search", visible: true, onClick: function () { alert(); } }; -options.getItems = (): (string|ListboxItem)[] => { +let settings = {}; +settings.searchBar = false; +settings.searchBarWatermark = "Search"; +settings.searchBarButton = { icon: "fa fa-search", visible: true, onClick: function () { alert(); } }; +settings.getItems = (): (string|ListBoxItem)[] => { return ["Test1"]; }; -options.onItemsChanged = (event: ListboxEvent): void => { +settings.onItemsChanged = (event: ListBoxEvent): void => { console.log(event.eventName); console.log(event.args); console.log(event.target); }; -options.onFilterChanged = (event: ListboxEvent): void => { +settings.onFilterChanged = (event: ListBoxEvent): void => { console.log(event.args); }; -options.onValueChanged = (event: ListboxEvent): void => { +settings.onValueChanged = (event: ListBoxEvent): void => { console.log(event.args); }; -options.onItemDoubleClicked = (event: ListboxEvent): void => { +settings.onItemDoubleClicked = (event: ListBoxEvent): void => { console.log(event.args); }; -options.onItemEnterPressed = (event: ListboxEvent): void => { +settings.onItemEnterPressed = (event: ListBoxEvent): void => { console.log(event.args); }; -instance = $test.listbox(options); +instance = new SingleSelectListBox(testElement, settings); +instance = new MultiSelectListBox(testElement, settings); /////// NEW API /////// @@ -43,7 +42,7 @@ var id: string = instance.addItem("Test2"); // Add item -var item: ListboxItem = {}; +var item: ListBoxItem = {}; item.selected = true; item.disabled = false; item.childItems = [{ text: "Test4" }]; @@ -67,14 +66,14 @@ instance.removeItems([id, ids[0]]); // Get item -var i: ListboxItem = instance.getItem(id); +var i: ListBoxItem = instance.getItem(id); // Get items -var allItems: ListboxItem[] = instance.getItems(); +var allItems: ListBoxItem[] = instance.getItems(); // Get selected items -var allItems: ListboxItem[] = instance.getSelection(); +var allItems: ListBoxItem[] = instance.getSelection(); // Move item up @@ -106,30 +105,30 @@ instance.destroy(); // onValueChanged -instance.onValueChanged((event: ListboxEvent) => { +settings.onValueChanged = (event: ListBoxEvent) => { console.log(event.args); -}); +}; // onItemsChanged -instance.onItemsChanged((event: ListboxEvent) => { +settings.onItemsChanged = (event: ListBoxEvent) => { console.log(event.args); -}); +}; // onFilterChanged -instance.onFilterChanged((event: ListboxEvent) => { +settings.onFilterChanged = (event: ListBoxEvent) => { console.log(event.args); -}); +}; // onItemEnterPressed -instance.onItemEnterPressed((event: ListboxEvent) => { +settings.onItemEnterPressed = (event: ListBoxEvent) => { console.log(event.args); -}); +}; // onItemDoubleClicked -instance.onItemDoubleClicked((event: ListboxEvent) => { +settings.onItemDoubleClicked = (event: ListBoxEvent) => { console.log(event.args); -}); +}; diff --git a/types/extended-listbox/index.d.ts b/types/extended-listbox/index.d.ts index e5062510f9..5d6e7822d5 100644 --- a/types/extended-listbox/index.d.ts +++ b/types/extended-listbox/index.d.ts @@ -1,10 +1,9 @@ -// Type definitions for extended-listbox 3.0.x +// Type definitions for extended-listbox 4.0.x // Project: https://github.com/code-chris/extended-listbox // Definitions by: Christian Kotzbauer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.3 -interface ListboxItem { +interface ListBoxItem { /** display text */ text?: string; @@ -27,10 +26,10 @@ interface ListboxItem { parentGroupId?: string; /** list of childItems */ - childItems?: ListboxItem[]; + childItems?: (string | ListBoxItem)[]; } -interface ListboxSearchBarButtonOptions { +interface ListBoxSearchBarButtonOptions { /** determines if the button is visible */ visible?: boolean; @@ -41,7 +40,7 @@ interface ListboxSearchBarButtonOptions { onClick?: () => void; } -interface ListBoxOptions { +interface ListBoxSettings { /** determines if the searchBar is visible */ searchBar?: boolean; @@ -49,50 +48,44 @@ interface ListBoxOptions { searchBarWatermark?: string; /** settings for the searchBar button */ - searchBarButton?: ListboxSearchBarButtonOptions; - - /** determines if multiple items can be selected */ - multiple?: boolean; + searchBarButton?: ListBoxSearchBarButtonOptions; /** function which returns a array of items */ - getItems?: () => (string|ListboxItem)[]; + getItems?: () => (string | ListBoxItem)[]; /** callback for selection changes */ - onValueChanged?: (event: ListboxEvent) => void; + onValueChanged?: (event: ListBoxEvent) => void; /** callback for searchBar text changes */ - onFilterChanged?: (event: ListboxEvent) => void; + onFilterChanged?: (event: ListBoxEvent) => void; /** callback for item changes (item added, item removed, item order) */ - onItemsChanged?: (event: ListboxEvent) => void; + onItemsChanged?: (event: ListBoxEvent) => void; /** callback for enter keyPress event on an item */ - onItemEnterPressed?: (event: ListboxEvent) => void; + onItemEnterPressed?: (event: ListBoxEvent) => void; /** callback for doubleClick event on an item */ - onItemDoubleClicked?: (event: ListboxEvent) => void; + onItemDoubleClicked?: (event: ListBoxEvent) => void; } -interface ListboxEvent { +interface ListBoxEvent { /** unique event name */ eventName: string; /** target object for which event is triggered */ - target: JQuery; + target: Element; /** any object */ args: any; } -interface ExtendedListboxInstance { - /** DOM element of the listbox root */ - target: JQuery; - +interface BaseListBox { /** Adds a new item to the list */ - addItem(item: string|ListboxItem): string; + addItem(item: string | ListBoxItem): string; /** Adds new items to the list */ - addItems(item: (string|ListboxItem)[]): string[]; + addItems(items: (string | ListBoxItem)[]): string[]; /** Removes a item from the list */ removeItem(identifier: string): void; @@ -107,13 +100,10 @@ interface ExtendedListboxInstance { clearSelection(): void; /** Returns a item object for the given id or display text */ - getItem(identifier: string): ListboxItem; + getItem(identifier: string): ListBoxItem; /** Returns all item objects */ - getItems(): ListboxItem[]; - - /** Returns all ListboxItem's which are selected */ - getSelection(): ListboxItem[]; + getItems(): ListBoxItem[]; /** Decreases the index of the matching item by one */ moveItemUp(identifier: string): number; @@ -130,26 +120,22 @@ interface ExtendedListboxInstance { /** Enables or disables the whole list and all childs */ enable(state: boolean): void; - /** callback for selection changes */ - onValueChanged(callback: (event: ListboxEvent) => void): void; - - /** callback for item changes (item added, item removed, item order) */ - onItemsChanged(callback: (event: ListboxEvent) => void): void; - - /** callback for searchBar text changes */ - onFilterChanged(callback: (event: ListboxEvent) => void): void; - - /** callback for enter keyPress event on an item */ - onItemEnterPressed(callback: (event: ListboxEvent) => void): void; - - /** callback for doubleClick event on an item */ - onItemDoubleClicked(callback: (event: ListboxEvent) => void): void; + /** Returns all ListBoxItem's which are selected */ + getSelection(): ListBoxItem[]; } -interface JQuery { - /** constructs a new instance of Listbox on the given DOM item or returns existing */ - listbox(): ExtendedListboxInstance|ExtendedListboxInstance[]; - - /** constructs a new instance of Listbox on the given DOM item */ - listbox(options: ListBoxOptions): ExtendedListboxInstance|ExtendedListboxInstance[]; +interface SingleSelectListBox extends BaseListBox { } + +interface MultiSelectListBox extends BaseListBox { +} + +declare var SingleSelectListBox: { + prototype: SingleSelectListBox; + new(domElement: HTMLElement, options?: ListBoxSettings): SingleSelectListBox; +}; + +declare var MultiSelectListBox: { + prototype: MultiSelectListBox; + new(domElement: HTMLElement, options?: ListBoxSettings): MultiSelectListBox; +};