diff --git a/extended-listbox/extended-listbox-tests.ts b/extended-listbox/extended-listbox-tests.ts index cc4eba3fe..8016ccee7 100644 --- a/extended-listbox/extended-listbox-tests.ts +++ b/extended-listbox/extended-listbox-tests.ts @@ -4,33 +4,43 @@ var $test = $("#test"); // Create Listbox with defaults -var rootElement: any = $test.listbox(); +var instance: ExtendedListboxInstance = $test.listbox(); // Create with options var options = {}; options.multiple = true; -options.onItemsChanged = (items: ListboxItem[]): void => { - console.log(items); -}; +options.searchBar = false; +options.searchBarWatermark = "Search"; +options.searchBarButton = { icon: "fa fa-search", visible: true, onClick: function () { alert(); } }; options.getItems = function (): any[] { return ["Test1"]; }; -options.searchBar = false; -options.searchBarWatermark = "Search"; -options.onFilterChanged = (filter): void => { - console.log(filter); +options.onItemsChanged = (event: ListboxEvent): void => { + console.log(event.eventName); + console.log(event.args); + console.log(event.target); }; -options.onValueChanged = function (value: any): void { - console.log(value); +options.onFilterChanged = (event: ListboxEvent): void => { + console.log(event.args); +}; +options.onValueChanged = function (event: ListboxEvent): void { + console.log(event.args); +}; +options.onItemDoubleClicked = function (event: ListboxEvent): void { + console.log(event.args); +}; +options.onItemEnterPressed = function (event: ListboxEvent): void { + console.log(event.args); }; -options.searchBarButton = { icon: "fa fa-search", visible: true, onClick: function () { alert(); } }; -rootElement = $test.listbox(options); +instance = $test.listbox(options); +/////// NEW API /////// + // Add string item -rootElement.listbox("addItem", "Test2"); +var id = instance.addItem("Test2"); // Add item @@ -42,36 +52,128 @@ item.groupHeader = false; item.id = "ouetioreit"; item.index = 0; item.text = "Test3"; -var id: string = rootElement.listbox("addItem", item); +id = instance.addItem(item); // Remove item -rootElement.listbox("removeItem", id); +instance.removeItem(id); // Get item -var i: ListboxItem = rootElement.listbox("getItem", id); +var i: ListboxItem = instance.getItem(id); // Get items -var allItems: ListboxItem[] = rootElement.listbox("getItems"); +var allItems: ListboxItem[] = instance.getItems(); + +// Get selected items +var allItems: ListboxItem[] = instance.getSelection(); // Move item up -var newIndex: number = rootElement.listbox("moveItemUp", i.id); +var newIndex: number = instance.moveItemUp(i.id); // Move item down -newIndex = rootElement.listbox("moveItemDown", i.id); +newIndex = instance.moveItemDown(i.id); + + +// Move item to top +var newIndex: number = instance.moveItemToTop(i.id); + + +// Move item to bottom +newIndex = instance.moveItemToBottom(i.id); // Clear selection -newIndex = rootElement.listbox("clearSelection"); +instance.clearSelection(); // Enable -newIndex = rootElement.listbox("enable", false); +instance.enable(false); // Destroy -newIndex = rootElement.listbox("destroy"); +instance.destroy(); + + +// onValueChanged +instance.onValueChanged((event: ListboxEvent) => { + console.log(event.args); +}); + + +// onItemsChanged +instance.onItemsChanged((event: ListboxEvent) => { + console.log(event.args); +}); + + +// onFilterChanged +instance.onFilterChanged((event: ListboxEvent) => { + console.log(event.args); +}); + + +// onItemEnterPressed +instance.onItemEnterPressed((event: ListboxEvent) => { + console.log(event.args); +}); + + +// onItemDoubleClicked +instance.onItemDoubleClicked((event: ListboxEvent) => { + console.log(event.args); +}); + + + +/////// LEGACY API /////// + +// Add string item +instance.target.listbox("addItem", "Test2"); + + +// Add item +var item: ListboxItem = {}; +item.selected = true; +item.disabled = false; +item.childItems = ["Test4"]; +item.groupHeader = false; +item.id = "ouetioreit"; +item.index = 0; +item.text = "Test3"; +var id: string = instance.target.listbox("addItem", item); + + +// Remove item +instance.target.listbox("removeItem", id); + + +// Get item +var i: ListboxItem = instance.target.listbox("getItem", id); + + +// Get items +var allItems: ListboxItem[] = instance.target.listbox("getItems"); + + +// Move item up +var newIndex: number = instance.target.listbox("moveItemUp", i.id); + + +// Move item down +newIndex = instance.target.listbox("moveItemDown", i.id); + + +// Clear selection +instance.target.listbox("clearSelection"); + + +// Enable +instance.target.listbox("enable", false); + + +// Destroy +instance.target.listbox("destroy"); diff --git a/extended-listbox/extended-listbox.d.ts b/extended-listbox/extended-listbox.d.ts index d3f8341f0..6b3c0b573 100644 --- a/extended-listbox/extended-listbox.d.ts +++ b/extended-listbox/extended-listbox.d.ts @@ -1,4 +1,4 @@ -// Type definitions for extended-listbox 1.0.6 +// Type definitions for extended-listbox 1.1.x // Project: https://github.com/code-chris/extended-listbox // Definitions by: Christian Kotzbauer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -59,27 +59,125 @@ interface ListBoxOptions { getItems?: () => any; /** callback for selection changes */ - onValueChanged?: (value: ListboxItem|ListboxItem[]) => void; + onValueChanged?: (event: ListboxEvent) => void; /** callback for searchBar text changes */ - onFilterChanged?: (value: string) => void; + onFilterChanged?: (event: ListboxEvent) => void; /** callback for item changes (item added, item removed, item order) */ - onItemsChanged?: (value: ListboxItem[]) => void; + onItemsChanged?: (event: ListboxEvent) => void; + + /** callback for enter keyPress event on an item */ + onItemEnterPressed?: (event: ListboxEvent) => void; + + /** callback for doubleClick event on an item */ + onItemDoubleClicked?: (event: ListboxEvent) => void; +} + +interface ListboxEvent { + /** unique event name */ + eventName: string; + + /** target object for which event is triggered */ + target: JQuery; + + /** any object */ + args: any; +} + +interface ExtendedListboxInstance { + /** DOM element of the listbox root */ + target: JQuery; + + /** Adds a new item to the list */ + addItem(item: string|ListboxItem): string; + + /** Removes a item from the list */ + removeItem(identifier: string): void; + + /** Reverts all changes from the DOM */ + destroy(): void; + + /** Resets the selection state of all items */ + clearSelection(): void; + + /** Returns a item object for the given id or display text */ + getItem(identifier: string): ListboxItem; + + /** Returns all item objects */ + getItems(): ListboxItem[]; + + /** Returns all ListboxItem's which are selected */ + getSelection(): ListboxItem[]; + + /** Decreases the index of the matching item by one */ + moveItemUp(identifier: string): number; + + /** Increases the index of the matching item by one */ + moveItemDown(identifier: string): number; + + /** Moves item to the bottom of the list */ + moveItemToBottom(identifier: string): number; + + /** Moves item to the top of the list */ + moveItemToTop(identifier: string): number; + + /** 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; } interface JQuery { - listbox(): 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[]; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'addItem'): string; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'removeItem'): void; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'destroy'): void; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'getItem'): ListboxItem; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'getItems'): ListboxItem[]; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'moveItemUp'): number; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'moveItemDown'): number; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'clearSelection'): void; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: 'enable'): void; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: string): any; + + /** @deprecated: use method in ExtendedListboxInstance */ listbox(methodName: string, methodParameter: any): any; - listbox(options: ListBoxOptions): JQuery; }