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;
+};