From f9be59c5bd36c8e2a977d01381537986ecab4c97 Mon Sep 17 00:00:00 2001 From: Boris Yankov Date: Wed, 17 Oct 2012 20:03:28 +0300 Subject: [PATCH] Updates to jQuery UI definitions and tests --- Definitions/jqueryui-1.9.d.ts | 217 ++++++--- Tests/jqueryui-tests.ts | 867 ++++++++++++++++------------------ 2 files changed, 560 insertions(+), 524 deletions(-) diff --git a/Definitions/jqueryui-1.9.d.ts b/Definitions/jqueryui-1.9.d.ts index a9788562c..d8dd1d9e4 100644 --- a/Definitions/jqueryui-1.9.d.ts +++ b/Definitions/jqueryui-1.9.d.ts @@ -1,9 +1,8 @@ -/// - // Type definitions for jQueryUI 1.9 // Project: http://jqueryui.com/ // Definitions: https://github.com/borisyankov/DefinitelyTyped +/// // Widget ////////////////////////////////////////////////// @@ -40,16 +39,7 @@ interface Accordion extends Widget { icons?: any; // Methods - destroy(); - disable(); - enable(); - option(optionName: string): any; - option(): any; - option(optionName: string, value: any): void; - option(options: any): void; - refresh(); - widget(): JQuery; - + // Events activate(event: Event, ui): void; beforeActivate(event: Event, ui): void; @@ -59,7 +49,7 @@ interface Accordion extends Widget { // Autocomplete ////////////////////////////////////////////////// -interface Autocomplete { +interface Autocomplete extends Widget { // Options appendTo?: any; //Selector; @@ -71,16 +61,8 @@ interface Autocomplete { source?: any; // [], string or () // Methods - close(); - destroy(); - disable(); - enable(); - option(optionName: string): any; - option(): any; - option(optionName: string, value: any): void; - option(options: any): void; + close(); search(value?: string); - widget(): JQuery; // Events change(event: Event, ui): void; @@ -96,7 +78,7 @@ interface Autocomplete { // Button ////////////////////////////////////////////////// -interface Button { +interface Button extends Widget { // Options disabled?: bool; @@ -104,16 +86,8 @@ interface Button { label?: string; text?: bool; - // Methods - destroy(); - disable(); - enable(); - option(optionName: string): any; - option(): any; - option(optionName: string, value: any): void; - option(options: any): void; + // Methods refresh(); - widget(): JQuery; // Events create(event: Event, ui): void; @@ -122,7 +96,7 @@ interface Button { // Datepicker ////////////////////////////////////////////////// -interface Datepicker { +interface Datepicker extends Widget { // Options altFieldType?: any; // Selecotr, jQuery or Element @@ -178,7 +152,7 @@ interface Datepicker { // Methods destroy(); - dialog(date: any, onSelect?: (), settings?: any, pos?: any); + dialog(date: any, onSelect?: () => void, settings?: any, pos?: any); getDate(): Date; hide(): void; isDisabled(): bool; @@ -192,7 +166,7 @@ interface Datepicker { // Dialog ////////////////////////////////////////////////// -interface Dialog { +interface Dialog extends Widget { // Options autoOpen?: bool; @@ -356,7 +330,7 @@ interface JQueryDatePicker { // Menu ////////////////////////////////////////////////// -interface Menu { +interface Menu extends Widget { // Options disabled?: bool; @@ -369,24 +343,15 @@ interface Menu { blur(event?: Event): void; collapse(event?: Event): void; blurAll(event?: Event, all?: bool): void; - destroy(); - disable(); - enable(); expand(event?: Event): void; focus(event?: Event, item?: JQuery): void; isFirstItem(): bool; isLastItem(): bool; next(event?: Event): void; nextPage(event?: Event): void; - option(optionName: string): any; - option(): any; - option(optionName: string, value: any): void; - option(options: any): void; previous(event?: Event): void; previousPage(event?: Event): void; - refresh(): void; select(event?: Event): void; - widget(): JQuery; // Events blur(event: Event, ui): void; @@ -398,11 +363,11 @@ interface Menu { // Progressbar ////////////////////////////////////////////////// -interface Progressbar { +interface Progressbar extends Widget { // Options disabled?: bool; - value?: number; + //value?: number; // Methods destroy(); @@ -423,6 +388,64 @@ interface Progressbar { } +// Resizable ////////////////////////////////////////////////// + +interface Resizable extends Widget { + + // Options + alsoResize?: any; // Selector, JQuery or Element + animate?: bool; + animateDuration?: any; // number or string + animateEasing?: string; + aspectRatio?: any; // bool or number + autoHide?: bool; + cancel?: any; // TODO Selector + containment?: any; // Selector, Element or string + delay?: number; + disabled?: bool; + distance?: number; + ghost?: bool; + grid?: number[]; + handles?: any; // string or object + helper?: string; + maxHeight?: number; + maxWidth?: number; + minHeight?: number; + minWidth?: number; + + // Methods + + // Events + resize(event: Event, ui): void; + start(event: Event, ui): void; + stop(event: Event, ui): void; +} + + +// Resizable ////////////////////////////////////////////////// + +interface Selectable extends Widget { + + // Options + autoRefresh?: bool; + cancel?: any; // TODO Selector + delay?: number; + disabled?: bool; + distance?: number; + filter?: any; // TODO Selector + tolerance?: string; + + // Methods + + // Events + selected(event: Event, ui): void; + selecting(event: Event, ui): void; + start(event: Event, ui): void; + stop(event: Event, ui): void; + unselected(event: Event, ui): void; + unselecting(event: Event, ui): void; +} + // Slider ////////////////////////////////////////////////// interface Slider extends Widget { @@ -435,8 +458,8 @@ interface Slider extends Widget { orientation?: string; range?: any; // bool or string step?: number; - value?: number; - values?: number[]; + // value?: number; + // values?: number[]; // Methods value(): number; @@ -444,7 +467,7 @@ interface Slider extends Widget { values(): number[]; values(index: number): number; values(index: number, newValue: number): void; - values(newValues: numbers[]): void; + values(newValues: number[]): void; // Events change(event: Event, ui): void; @@ -455,9 +478,62 @@ interface Slider extends Widget { } +// Sortable ////////////////////////////////////////////////// + +interface Sortable extends Widget { + + // Options + appendTo?: any; // jQuery, Element, Selector or string + axis?: string; + // cancel?: any; // TODO Selector + connectWith?: any; // TODO Selector + containment?: any; // Element, Selector or string + cursor?: string; + cursorAt?: any; + delay?: number; + disabled?: bool; + distance?: number; + dropOnEmpty?: bool; + forceHelperSize?: bool; + forcePlaceholderSize?: bool; + grid?: number[]; + handle?: any; // Selector or Element + items?: any; // Selector + opacity?: number; + placeholder?: string; + revert?: any; // bool or number + scroll?: bool; + scrollSensitivity?: number; + scrollSpeed?: number; + tolerance?: string; + zIndex?: number; + + // Methods + cancel(): void; + refreshPositions(): void; + serialize(options: any): void; // TODO + toArray(): string[]; + + // Events + activate(event: Event, ui): void; + beforeStop(event: Event, ui): void; + change(event: Event, ui): void; + deactivate(event: Event, ui): void; + out(event: Event, ui): void; + over(event: Event, ui): void; + receive(event: Event, ui): void; + remove(event: Event, ui): void; + sort(event: Event, ui): void; + start(event: Event, ui): void; + stop(event: Event, ui): void; + update(event: Event, ui): void; +} + + + // Spinner ////////////////////////////////////////////////// -interface Spinner { +interface Spinner extends Widget { // Options culture?: string; @@ -487,7 +563,7 @@ interface Spinner { // Tabs ////////////////////////////////////////////////// -interface Tabs { +interface Tabs extends Widget { // Options active?: any; // bool or number @@ -513,7 +589,7 @@ interface Tabs { // Tooltip ////////////////////////////////////////////////// -interface Tooltip { +interface Tooltip extends Widget { // Options content?: any; // () or string @@ -538,19 +614,48 @@ interface Tooltip { //////////////////////////////////////////////////////////////////////////////////////////////////// interface JQuery { - draggable(options: Draggable): JQuery; + + accordion(options?: Accordion): void; + + autocomplete(options?: Autocomplete): void; + + button(options?: Button): void; + buttonset(options?: Button): void; + + datepicker(options?: Datepicker): void; + + dialog(options?: Dialog): void; + dialog(optionLiteral: string): void; + + draggable(options?: Draggable): JQuery; draggable(optionLiteral: string, options: Draggable): JQuery; draggable(optionLiteral: string, optionName: string, optionValue: any): JQuery; draggable(optionLiteral: string, optionName: string): any; // draggable(methodName: string): any; + droppable(options: Droppable): JQuery; droppable(optionLiteral: string, options: Draggable): JQuery; droppable(optionLiteral: string, optionName: string, optionValue: any): JQuery; droppable(optionLiteral: string, optionName: string): any; droppable(methodName: string): any; - autocomplete(any): void; - datepicker(any): void; + menu(options?: Menu): void; + + progressbar(options?: Progressbar): void; + + resizable(options?: Resizable): void; + + selectable(options?: Selectable): void; + + slider(options?: Slider): void; + + sortable(options?: Sortable): void; + + spinner(options?: Spinner): void; + + tabs(options?: Tabs): void; + + tooltip(options?: Tooltip): void; } interface JQueryStatic { diff --git a/Tests/jqueryui-tests.ts b/Tests/jqueryui-tests.ts index f23317ffd..145bd64d1 100644 --- a/Tests/jqueryui-tests.ts +++ b/Tests/jqueryui-tests.ts @@ -15,24 +15,13 @@ $("#draggable3").draggable({ cursorAt: { bottom: 0 } }); $("#draggable").draggable(); $("#draggable").draggable({ distance: 20 }); $("#draggable2").draggable({ delay: 1000 }); -$(".ui-draggable").disableSelection(); $("#draggable").draggable({ - start: () => { - counts[0]++; - updateCounterStatus($start_counter, counts[0]); - }, - drag: () => { - counts[1]++; - updateCounterStatus($drag_counter, counts[1]); - }, - stop: () => { - counts[2]++; - updateCounterStatus($stop_counter, counts[2]); - } + start: () => { }, + drag: () => { }, + stop: () => { } }); $("#draggable").draggable({ handle: "p" }); $("#draggable2").draggable({ cancel: "p.ui-widget-header" }); -$("div, p").disableSelection(); $("#draggable").draggable({ revert: true }); $("#draggable2").draggable({ revert: true, helper: "clone" }); $("#draggable").draggable({ scroll: true }); @@ -43,23 +32,18 @@ $("#draggable2").draggable({ snap: ".ui-widget-header" }); $("#draggable3").draggable({ snap: ".ui-widget-header", snapMode: "outer" }); $("#draggable4").draggable({ grid: [20, 20] }); $("#draggable5").draggable({ grid: [80, 80] }); -$("#sortable").sortable({ - revert: true -}); +$("#sortable").sortable({ revert: true}); $("#draggable").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); -$("ul, li").disableSelection(); $("#draggable").draggable({ helper: "original" }); $("#draggable2").draggable({ opacity: 0.7, helper: "clone" }); $("#draggable3").draggable({ cursor: "move", cursorAt: { top: -12, left: -20 }, - helper: (event) => { - return $("
I'm a custom helper
"); - } + helper: (event) => { return $("
I'm a custom helper
"); } }); $("#set div").draggable({ stack: "#set div" }); @@ -67,171 +51,158 @@ $("#set div").draggable({ stack: "#set div" }); // Droppable ////////////////////////////////////////////////// $( "#draggable, #draggable-nonvalid" ).draggable(); -$( "#droppable" ).droppable({ +$("#droppable").droppable({ accept: "#draggable", activeClass: "ui-state-hover", hoverClass: "ui-state-active", - drop:( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "p" ) - .html( "Dropped!" ); + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("p") + .html("Dropped!"); } }); $( "#draggable" ).draggable(); -$( "#droppable" ).droppable({ - drop: ( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "p" ) - .html( "Dropped!" ); +$("#droppable").droppable({ + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("p") + .html("Dropped!"); } }); - // there's the gallery and the trash - var $gallery = $( "#gallery" ), - $trash = $( "#trash" ); +var $gallery = $( "#gallery" ), + $trash = $( "#trash" ); +$("li", $gallery).draggable({ + cancel: "a.ui-icon", + revert: "invalid", + containment: "document", + helper: "clone", + cursor: "move" +}); - // let the gallery items be draggable - $( "li", $gallery ).draggable({ - cancel: "a.ui-icon", // clicking an icon won't initiate dragging - revert: "invalid", // when not dropped, the item will revert back to its initial position - containment: "document", - helper: "clone", - cursor: "move" - }); +$trash.droppable({ + accept: "#gallery > li", + activeClass: "ui-state-highlight", + drop: ( event, ui ) => { } +}); - // let the trash be droppable, accepting the gallery items - $trash.droppable({ - accept: "#gallery > li", - activeClass: "ui-state-highlight", - drop: ( event, ui ) => { - deleteImage( ui.draggable ); - } - }); +$gallery.droppable({ + accept: "#trash li", + activeClass: "custom-state-active", + drop: ( event, ui ) => { } +}); - // let the gallery be droppable as well, accepting items from the trash - $gallery.droppable({ - accept: "#trash li", - activeClass: "custom-state-active", - drop: ( event, ui ) => { - recycleImage( ui.draggable ); - } - }); - - // image deletion function - var recycle_icon = "Recycle image"; - function deleteImage( $item ) { - $item.fadeOut(() => { - var $list = $( "ul", $trash ).length ? - $( "ul", $trash ) : - $( "
    " ).appendTo( $trash ); - - $item.find( "a.ui-icon-trash" ).remove(); - $item.append( recycle_icon ).appendTo( $list ).fadeIn(() => { - $item - .animate({ width: "48px" }) - .find( "img" ) - .animate({ height: "36px" }); - }); - }); - } - - // image recycle function - var trash_icon = "Delete image"; - function recycleImage( $item ) { - $item.fadeOut(() => { +var recycle_icon = "Recycle image"; +function deleteImage($item) { + $item.fadeOut(() => { + var $list = $("ul", $trash).length ? + $("ul", $trash) : + $("
      ").appendTo($trash); + + $item.find("a.ui-icon-trash").remove(); + $item.append(recycle_icon).appendTo($list).fadeIn(() => { $item - .find( "a.ui-icon-refresh" ) - .remove() - .end() - .css( "width", "96px") - .append( trash_icon ) - .find( "img" ) - .css( "height", "72px" ) - .end() - .appendTo( $gallery ) - .fadeIn(); + .animate({ width: "48px" }) + .find("img") + .animate({ height: "36px" }); }); - } - - // image preview function, demonstrating the ui.dialog used as a modal window - function viewLargerImage( $link ) { - var src = $link.attr( "href" ), - title = $link.siblings( "img" ).attr( "alt" ), - $modal = $( "img[src$='" + src + "']" ); - - if ( $modal.length ) { - $modal.dialog( "open" ); - } else { - var img = $( "" + title + "" ) - .attr( "src", src ).appendTo( "body" ); - setTimeout(() => { - img.dialog({ - title: title, - width: 400, - modal: true - }); - }, 1 ); - } - } - - // resolve the icons behavior with event delegation - $( "ul.gallery > li" ).click(( event ) => { - var $item = $( this ), - $target = $( event.target ); - - if ( $target.is( "a.ui-icon-trash" ) ) { - deleteImage( $item ); - } else if ( $target.is( "a.ui-icon-zoomin" ) ) { - viewLargerImage( $target ); - } else if ( $target.is( "a.ui-icon-refresh" ) ) { - recycleImage( $item ); - } - - return false; }); - - -$( "#draggable" ).draggable(); +} -$( "#droppable, #droppable-inner" ).droppable({ +var trash_icon = "Delete image"; +function recycleImage($item) { + $item.fadeOut(() => { + $item + .find("a.ui-icon-refresh") + .remove() + .end() + .css("width", "96px") + .append(trash_icon) + .find("img") + .css("height", "72px") + .end() + .appendTo($gallery) + .fadeIn(); + }); +} + +function viewLargerImage($link) { + var src = $link.attr("href"), + title = $link.siblings("img").attr("alt"), + $modal = $("img[src$='" + src + "']"); + + if ($modal.length) { + $modal.dialog("open"); + } else { + var img = $("" + title + "") + .attr("src", src).appendTo("body"); + setTimeout(() => { + img.dialog({ + title: title, + width: 400, + modal: true + }); + }, 1); + } +} + +$("ul.gallery > li").click((event) => { + var $item = $(this), + $target = $(event.target); + + if ($target.is("a.ui-icon-trash")) { + deleteImage($item); + } else if ($target.is("a.ui-icon-zoomin")) { + viewLargerImage($target); + } else if ($target.is("a.ui-icon-refresh")) { + recycleImage($item); + } + + return false; +}); + + +$("#draggable").draggable(); + +$("#droppable, #droppable-inner").droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", - drop: ( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "> p" ) - .html( "Dropped!" ); + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("> p") + .html("Dropped!"); return false; } }); -$( "#droppable2, #droppable2-inner" ).droppable({ +$("#droppable2, #droppable2-inner").droppable({ greedy: true, activeClass: "ui-state-hover", hoverClass: "ui-state-active", - drop: ( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "> p" ) - .html( "Dropped!" ); + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("> p") + .html("Dropped!"); } }); -$( "#draggable" ).draggable({ revert: "valid" }); -$( "#draggable2" ).draggable({ revert: "invalid" }); -$( "#droppable" ).droppable({ +$("#draggable").draggable({ revert: "valid" }); +$("#draggable2").draggable({ revert: "invalid" }); +$("#droppable").droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", - drop: ( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "p" ) - .html( "Dropped!" ); + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("p") + .html("Dropped!"); } }); -$( "#catalog" ).accordion(); +$("#catalog").accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" @@ -249,32 +220,32 @@ $( "#cart ol" ).droppable({ sort: () => { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options - $( this ).removeClass( "ui-state-default" ); + $(this).removeClass("ui-state-default"); } }); -$( "#draggable" ).draggable(); - $( "#droppable" ).droppable({ - hoverClass: "ui-state-active", - drop: ( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "p" ) - .html( "Dropped!" ); - } - }); +$("#draggable").draggable(); +$("#droppable").droppable({ + hoverClass: "ui-state-active", + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("p") + .html("Dropped!"); + } +}); - $( "#draggable2" ).draggable(); - $( "#droppable2" ).droppable({ - accept: "#draggable2", - activeClass: "ui-state-hover", - drop: ( event, ui ) => { - $( this ) - .addClass( "ui-state-highlight" ) - .find( "p" ) - .html( "Dropped!" ); - } - }); +$( "#draggable2" ).draggable(); +$("#droppable2").droppable({ + accept: "#draggable2", + activeClass: "ui-state-hover", + drop: (event, ui) => { + $(this) + .addClass("ui-state-highlight") + .find("p") + .html("Dropped!"); + } +}); // Resizable ////////////////////////////////////////////////// @@ -288,69 +259,58 @@ $( "#draggable" ).draggable(); // Accordion ////////////////////////////////////////////////// -$( "#accordion" ).accordion({ - collapsible: true -}); +$("#accordion").accordion({ collapsible: true }); var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; -$( "#accordion" ).accordion({ - icons: icons -}); -$( "#toggle" ).button().click(() => { - if ( $( "#accordion" ).accordion( "option", "icons" ) ) { - $( "#accordion" ).accordion( "option", "icons", null ); +$("#accordion").accordion({ icons: icons }); +$("#toggle").button().click(() => { + if ($("#accordion").accordion("option", "icons")) { + $("#accordion").accordion("option", "icons", null); } else { - $( "#accordion" ).accordion( "option", "icons", icons ); + $("#accordion").accordion("option", "icons", icons); } }); -$( "#accordion" ).accordion({ - heightStyle: "fill" - }); -}); -$( "#accordion-resizer" ).resizable({ +$( "#accordion" ).accordion({ heightStyle: "fill" }); + +$("#accordion-resizer").resizable({ minHeight: 140, minWidth: 200, resize: () => { - $( "#accordion" ).accordion( "refresh" ); + $("#accordion").accordion("refresh"); } }); -$( "#accordion" ).accordion({ - event: "click hoverintent" -}); - $( "#accordion" ).accordion({ - heightStyle: "content" - }); -$( "#accordion" ) - .accordion({ - header: "> div > h3" - }) - .sortable({ - axis: "y", - handle: "h3", - stop: ( event, ui ) => { - // IE doesn't register the blur when sorting - // so trigger focusout handlers to remove .ui-state-focus - ui.item.children( "h3" ).triggerHandler( "focusout" ); - } - }); +$("#accordion").accordion({ event: "click hoverintent" }); +$("#accordion").accordion({ heightStyle: "content" }); +$("#accordion") + .accordion({ + header: "> div > h3" + }) + .sortable({ + axis: "y", + handle: "h3", + stop: (event, ui) => { + ui.item.children("h3").triggerHandler("focusout"); + } + }); + // Autocomplete ////////////////////////////////////////////////// -$.widget( "custom.catcomplete", $.ui.autocomplete, { - _renderMenu: ( ul, items ) => { - var that = this, - currentCategory = ""; - $.each( items, ( index, item ) => { - if ( item.category != currentCategory ) { - ul.append( "
    • " + item.category + "
      • " ); - currentCategory = item.category; - } - that._renderItemData( ul, item ); - }); - } - }); +$.widget("custom.catcomplete", $.ui.autocomplete, { + _renderMenu: (ul, items) => { + var that = this, + currentCategory = ""; + $.each(items, (index, item) => { + if (item.category != currentCategory) { + ul.append("
    • " + item.category + "
      • "); + currentCategory = item.category; + } + that._renderItemData(ul, item); + }); + } +}); var data = [ { label: "anders", category: "" }, @@ -364,268 +324,241 @@ var data = [ { label: "andreas johnson", category: "People" } ]; - $( "#search" ).catcomplete({ - delay: 0, - source: data - }); +$("#search").catcomplete({ + delay: 0, + source: data +}); $.widget( "ui.combobox", { - _create: () => { - var input, - that = this, - select = this.element.hide(), - selected = select.children( ":selected" ), - value = selected.val() ? selected.text() : "", - wrapper = this.wrapper = $( "" ) - .addClass( "ui-combobox" ) - .insertAfter( select ); + _create: () => { + var input, + that = this, + select = this.element.hide(), + selected = select.children( ":selected" ), + value = selected.val() ? selected.text() : "", + wrapper = this.wrapper = $( "" ) + .addClass( "ui-combobox" ) + .insertAfter( select ); - function removeIfInvalid(element) { - var value = $( element ).val(), - matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ), - valid = false; - select.children( "option" ).each(() => { - if ( $( this ).text().match( matcher ) ) { - this.selected = valid = true; - return false; - } - }); - if ( !valid ) { - // remove invalid value, as it didn't match anything - $( element ) - .val( "" ) - .attr( "title", value + " didn't match any item" ) - .tooltip( "open" ); - select.val( "" ); - setTimeout(() => { - input.tooltip( "close" ).attr( "title", "" ); - }, 2500 ); - input.data( "autocomplete" ).term = ""; - return false; - } + function removeIfInvalid(element) { + var value = $(element).val(), + matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"), + valid = false; + select.children("option").each(() => { + if ($(this).text().match(matcher)) { + this.selected = valid = true; + return false; } - - input = $( "" ) - .appendTo( wrapper ) - .val( value ) - .attr( "title", "" ) - .addClass( "ui-state-default ui-combobox-input" ) - .autocomplete({ - delay: 0, - minLength: 0, - source: ( request, response ) => { - var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); - response( select.children( "option" ).map(() => { - var text = $( this ).text(); - if ( this.value && ( !request.term || matcher.test(text) ) ) - return { - label: text.replace( - new RegExp( - "(?![^&;]+;)(?!<[^<>]*)(" + - $.ui.autocomplete.escapeRegex(request.term) + - ")(?![^<>]*>)(?![^&;]+;)", "gi" - ), "$1" ), - value: text, - option: this - }; - }) ); - }, - select: ( event, ui ) => { - ui.item.option.selected = true; - that._trigger( "selected", event, { - item: ui.item.option - }); - }, - change: ( event, ui ) => { - if ( !ui.item ) - return removeIfInvalid( this ); - } - }) - .addClass( "ui-widget ui-widget-content ui-corner-left" ); - - input.data( "autocomplete" )._renderItem = ( ul, item ) => { - return $( "
    • " ) - .data( "item.autocomplete", item ) - .append( "" + item.label + "" ) - .appendTo( ul ); - }; - - $( "" ) - .attr( "tabIndex", -1 ) - .attr( "title", "Show All Items" ) - .tooltip() - .appendTo( wrapper ) - .button({ - icons: { - primary: "ui-icon-triangle-1-s" - }, - text: false - }) - .removeClass( "ui-corner-all" ) - .addClass( "ui-corner-right ui-combobox-toggle" ) - .click(() => { - // close if already visible - if ( input.autocomplete( "widget" ).is( ":visible" ) ) { - input.autocomplete( "close" ); - removeIfInvalid( input ); - return; - } - - // work around a bug (likely same cause as #5265) - $( this ).blur(); - - // pass empty string as value to search for, displaying all results - input.autocomplete( "search", "" ); - input.focus(); - }); - - input - .tooltip({ - position: { - of: this.button - }, - tooltipClass: "ui-state-highlight" - }); - }, - - destroy: () => { - this.wrapper.remove(); - this.element.show(); - $.Widget.prototype.destroy.call( this ); + }); + if (!valid) { + // remove invalid value, as it didn't match anything + $(element) + .val("") + .attr("title", value + " didn't match any item") + .tooltip("open"); + select.val(""); + setTimeout(() => { + input.tooltip("close").attr("title", ""); + }, 2500); + input.data("autocomplete").term = ""; + return false; } - }); -$( "#combobox" ).combobox(); -$( "#toggle" ).click(() => { $( "#combobox" ).toggle(); }); -$( "#project" ).autocomplete({ + } + + input = $("") + .appendTo(wrapper) + .val(value) + .attr("title", "") + .addClass("ui-state-default ui-combobox-input") + .autocomplete({ + delay: 0, + minLength: 0, + source: (request, response) => { + var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); + response(select.children("option").map(() => { + var text = $(this).text(); + if (this.value && (!request.term || matcher.test(text))) + return { + label: text.replace( + new RegExp( + "(?![^&;]+;)(?!<[^<>]*)(" + + $.ui.autocomplete.escapeRegex(request.term) + + ")(?![^<>]*>)(?![^&;]+;)", "gi" + ), "$1"), + value: text, + option: this + }; + })); + }, + select: (event, ui) => { + ui.item.option.selected = true; + that._trigger("selected", event, { + item: ui.item.option + }); + }, + change: (event, ui) => { + if (!ui.item) + return removeIfInvalid(this); + } + }) + .addClass("ui-widget ui-widget-content ui-corner-left"); + + input.data( "autocomplete" )._renderItem = ( ul, item ) => { + return $( "
    • " ) + .data( "item.autocomplete", item ) + .append( "" + item.label + "" ) + .appendTo( ul ); + }; + + $( "" ) + .attr( "tabIndex", -1 ) + .attr( "title", "Show All Items" ) + .tooltip() + .appendTo( wrapper ) + .button({ + icons: { + primary: "ui-icon-triangle-1-s" + }, + text: false + }) + .removeClass( "ui-corner-all" ) + .addClass( "ui-corner-right ui-combobox-toggle" ) + .click(() => { + if (input.autocomplete("widget").is(":visible")) { + input.autocomplete("close"); + removeIfInvalid(input); + return; + } + + $(this).blur(); + + input.autocomplete("search", ""); + input.focus(); + }); + + input + .tooltip({ + position: { + of: this.button + }, + tooltipClass: "ui-state-highlight" + }); + }, + + destroy: () => { + this.wrapper.remove(); + this.element.show(); + $.Widget.prototype.destroy.call( this ); + } +}); +$("#combobox").combobox(); +$("#toggle").click(() => { $("#combobox").toggle(); }); +$("#project").autocomplete({ minLength: 0, - source: projects, - focus: ( event, ui ) => { - $( "#project" ).val( ui.item.label ); + source: null, + focus: (event, ui) => { + $("#project").val(ui.item.label); return false; }, - select: ( event, ui ) => { - $( "#project" ).val( ui.item.label ); - $( "#project-id" ).val( ui.item.value ); - $( "#project-description" ).html( ui.item.desc ); - $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); - + select: (event, ui) => { + $("#project").val(ui.item.label); + $("#project-id").val(ui.item.value); + $("#project-description").html(ui.item.desc); + $("#project-icon").attr("src", "images/" + ui.item.icon); return false; } }) -.data( "autocomplete" )._renderItem = ( ul, item ) => { - return $( "
    • " ) - .data( "item.autocomplete", item ) - .append( "" + item.label + "
      " + item.desc + "      " ) - .appendTo( ul ); +.data("autocomplete")._renderItem = (ul, item) => { + return $("
    • ") + .data("item.autocomplete", item) + .append("" + item.label + "
      " + item.desc + "      ") + .appendTo(ul); }; -$( "#developer" ).autocomplete({ - source: ( request, response ) => { - var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); - response( $.grep( names, ( value ) => { - value = value.label || value.value || value; - return matcher.test( value ) || matcher.test( normalize( value ) ); - }) ); - } - }); +$("#developer").autocomplete({ + source: (request, response) => { + var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); + response($.grep(names, (value) => { + value = value.label || value.value || value; + return matcher.test(value) || matcher.test(normalize(value)); + })); + } +}); - var availableTags = [ - "ActionScript", - "AppleScript", - "Asp", - "BASIC", - "C", - "C++", - "Clojure", - "COBOL", - "ColdFusion", - "Erlang", - "Fortran", - "Groovy", - "Haskell", - "Java", - "JavaScript", - "Lisp", - "Perl", - "PHP", - "Python", - "Ruby", - "Scala", - "Scheme" - ]; - $( "#tags" ).autocomplete({ - source: availableTags - }); -$( "#birds" ) - // don't navigate away from the field on tab when selecting an item - .bind( "keydown", ( event ) => { - if ( event.keyCode === $.ui.keyCode.TAB && - $( this ).data( "autocomplete" ).menu.active ) { +var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" +]; +$("#tags").autocomplete({ source: availableTags }); +$("#birds") + .bind("keydown", (event) => { + if (event.keyCode === $.ui.keyCode.TAB && + $(this).data("autocomplete").menu.active) { event.preventDefault(); } }) .autocomplete({ - source: ( request, response ) => { - $.getJSON( "search.php", { - term: extractLast( request.term ) - }, response ); + source: (request, response) => { + $.getJSON("search.php", { + term: extractLast(request.term) + }, response); }, search: () => { // custom minLength - var term = extractLast( this.value ); - if ( term.length < 2 ) { + var term = extractLast(this.value); + if (term.length < 2) { return false; } }, focus: () => { - // prevent value inserted on focus return false; }, - select: ( event, ui ) => { - var terms = split( this.value ); - // remove the current input - terms.pop(); - // add the selected item - terms.push( ui.item.value ); - // add placeholder to get the comma-and-space at the end - terms.push( "" ); - this.value = terms.join( ", " ); + select: (event, ui) => { return false; } }); $( "#tags" ) - // don't navigate away from the field on tab when selecting an item - .bind( "keydown", ( event ) => { - if ( event.keyCode === $.ui.keyCode.TAB && - $( this ).data( "autocomplete" ).menu.active ) { + .bind("keydown", (event) => { + if (event.keyCode === $.ui.keyCode.TAB && + $(this).data("autocomplete").menu.active) { event.preventDefault(); } }) .autocomplete({ minLength: 0, - source: ( request, response ) => { - // delegate back to autocomplete, but extract the last term - response( $.ui.autocomplete.filter( - availableTags, extractLast( request.term ) ) ); + source: (request, response) => { + response($.ui.autocomplete.filter( + availableTags, extractLast(request.term))); }, focus: () => { - // prevent value inserted on focus return false; }, - select: ( event, ui ) => { - var terms = split( this.value ); - // remove the current input - terms.pop(); - // add the selected item - terms.push( ui.item.value ); - // add placeholder to get the comma-and-space at the end - terms.push( "" ); - this.value = terms.join( ", " ); + select: (event, ui) => { return false; } }); - $( "#city" ).autocomplete({ - source: ( request, response ) => { +$("#city").autocomplete({ + source: (request, response) => { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", @@ -635,8 +568,8 @@ $( "#tags" ) maxRows: 12, name_startsWith: request.term }, - success: ( data ) => { - response( $.map( data.geonames, ( item ) => { + success: (data) => { + response($.map(data.geonames, (item) => { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name @@ -646,45 +579,45 @@ $( "#tags" ) }); }, minLength: 2, - select: ( event, ui ) => { - log( ui.item ? + select: (event, ui) => { + log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: () => { - $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); + $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: () => { - $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); + $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); } }); function log( message ) { $( "
      " ).text( message ).prependTo( "#log" ); $( "#log" ).attr( "scrollTop", 0 ); } - var cache = {}; -$( "#birds" ).autocomplete({ +var cache = {}; +$("#birds").autocomplete({ minLength: 2, - source: ( request, response ) => { + source: (request, response) => { var term = request.term; - if ( term in cache ) { - response( cache[ term ] ); + if (term in cache) { + response(cache[term]); return; } - - $.getJSON( "search.php", request, ( data, status, xhr ) => { - cache[ term ] = data; - response( data ); + + $.getJSON("search.php", request, (data, status, xhr) => { + cache[term] = data; + response(data); }); } }); -$( "#birds" ).autocomplete({ +$("#birds").autocomplete({ source: "search.php", minLength: 2, - select: ( event, ui ) => { - log( ui.item ? + select: (event, ui) => { + log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : - "Nothing selected, input was " + this.value ); + "Nothing selected, input was " + this.value); } }); $("#birds").autocomplete({ @@ -700,10 +633,8 @@ $("#birds").autocomplete({ // Button ////////////////////////////////////////////////// -$( "#check" ).button(); -$( "#format" ).buttonset(); -$( "input[type=submit], a, button" ) +$("#check").button(); +$("#format").buttonset(); +$("input[type=submit], a, button") .button() - .click(( event ) => { - event.preventDefault(); - }); \ No newline at end of file + .click((event) => { event.preventDefault(); }); \ No newline at end of file