diff --git a/Definitions/jqueryui-1.9.d.ts b/Definitions/jqueryui-1.9.d.ts
index d8dd1d9e4..2d49a15e2 100644
--- a/Definitions/jqueryui-1.9.d.ts
+++ b/Definitions/jqueryui-1.9.d.ts
@@ -39,7 +39,7 @@ interface Accordion extends Widget {
icons?: any;
// Methods
-
+
// Events
activate(event: Event, ui): void;
beforeActivate(event: Event, ui): void;
@@ -61,7 +61,7 @@ interface Autocomplete extends Widget {
source?: any; // [], string or ()
// Methods
- close();
+ close();
search(value?: string);
// Events
@@ -78,7 +78,7 @@ interface Autocomplete extends Widget {
// Button //////////////////////////////////////////////////
-interface Button extends Widget {
+interface Button extends Widget {
// Options
disabled?: bool;
@@ -152,7 +152,7 @@ interface Datepicker extends Widget {
// Methods
destroy();
- dialog(date: any, onSelect?: () => void, settings?: any, pos?: any);
+ dialog(date: any, onSelect?: () => void , settings?: any, pos?: any);
getDate(): Date;
hide(): void;
isDisabled(): bool;
@@ -357,7 +357,7 @@ interface Menu extends Widget {
blur(event: Event, ui): void;
create(event: Event, ui): void;
focus(event: Event, ui): void;
- select(event: Event, ui): void;
+ select(event: Event, ui): void;
}
@@ -372,7 +372,7 @@ interface Progressbar extends Widget {
// Methods
destroy();
disable();
- enable();
+ enable();
option(optionName: string): any;
option(): any;
option(optionName: string, value: any): void;
@@ -414,7 +414,7 @@ interface Resizable extends Widget {
minWidth?: number;
// Methods
-
+
// Events
resize(event: Event, ui): void;
start(event: Event, ui): void;
@@ -436,7 +436,7 @@ interface Selectable extends Widget {
tolerance?: string;
// Methods
-
+
// Events
selected(event: Event, ui): void;
selecting(event: Event, ui): void;
@@ -452,7 +452,7 @@ interface Slider extends Widget {
// Options
animate?: any; // bool, string or number
- disabled?: bool;
+ disabled?: bool;
max?: number;
min?: number;
orientation?: string;
@@ -471,8 +471,8 @@ interface Slider extends Widget {
// Events
change(event: Event, ui): void;
- create(event: Event, ui): void;
- slide(event: Event, ui): void;
+ create(event: Event, ui): void;
+ slide(event: Event, ui): void;
start(event: Event, ui): void;
stop(event: Event, ui): void;
}
@@ -615,47 +615,124 @@ interface Tooltip extends Widget {
interface JQuery {
- accordion(options?: Accordion): void;
+ accordion(): JQuery;
+ accordion(methodName: string): JQuery;
+ accordion(options: Dialog): JQuery;
+ accordion(optionLiteral: string, options: Dialog): JQuery;
+ accordion(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ accordion(optionLiteral: string, optionName: string): JQuery;
- autocomplete(options?: Autocomplete): void;
+ autocomplete(): JQuery;
+ autocomplete(methodName: string): JQuery;
+ autocomplete(options: Autocomplete): JQuery;
+ autocomplete(optionLiteral: string, options: Autocomplete): JQuery;
+ autocomplete(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ autocomplete(optionLiteral: string, optionName: string): JQuery;
- button(options?: Button): void;
- buttonset(options?: Button): void;
+ button(): JQuery;
+ button(methodName: string): JQuery;
+ button(options: Button): JQuery;
+ button(optionLiteral: string, options: Button): JQuery;
+ button(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ button(optionLiteral: string, optionName: string): JQuery;
- datepicker(options?: Datepicker): void;
+ buttonset(): JQuery;
+ buttonset(methodName: string): JQuery;
+ buttonset(options: Button): JQuery;
+ buttonset(optionLiteral: string, options: Button): JQuery;
+ buttonset(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ buttonset(optionLiteral: string, optionName: string): JQuery;
- dialog(options?: Dialog): void;
- dialog(optionLiteral: string): void;
+ datepicker(): JQuery;
+ datepicker(methodName: string): JQuery;
+ datepicker(options: Datepicker): JQuery;
+ datepicker(optionLiteral: string, options: Datepicker): JQuery;
+ datepicker(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ datepicker(optionLiteral: string, optionName: string): JQuery;
- draggable(options?: Draggable): JQuery;
+ dialog(): JQuery;
+ dialog(methodName: string): JQuery;
+ dialog(options: Dialog): JQuery;
+ dialog(optionLiteral: string, options: Dialog): JQuery;
+ dialog(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ dialog(optionLiteral: string, optionName: string): JQuery;
+
+ draggable(): JQuery;
+ draggable(methodName: string): JQuery;
+ 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;
+ draggable(optionLiteral: string, optionName: string): JQuery;
+ droppable(): JQuery;
+ droppable(methodName: string): JQuery;
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;
+ droppable(optionLiteral: string, optionName: string): JQuery;
- menu(options?: Menu): void;
+ menu(): JQuery;
+ menu(methodName: string): JQuery;
+ menu(options: Menu): JQuery;
+ menu(optionLiteral: string, options: Menu): JQuery;
+ menu(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ menu(optionLiteral: string, optionName: string): JQuery;
- progressbar(options?: Progressbar): void;
+ progressbar(): JQuery;
+ progressbar(methodName: string): JQuery;
+ progressbar(options: Progressbar): JQuery;
+ progressbar(optionLiteral: string, options: Progressbar): JQuery;
+ progressbar(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ progressbar(optionLiteral: string, optionName: string): JQuery;
- resizable(options?: Resizable): void;
+ resizable(): JQuery;
+ resizable(methodName: string): JQuery;
+ resizable(options: Resizable): JQuery;
+ resizable(optionLiteral: string, options: Resizable): JQuery;
+ resizable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ resizable(optionLiteral: string, optionName: string): JQuery;
- selectable(options?: Selectable): void;
+ selectable(): JQuery;
+ selectable(methodName: string): JQuery;
+ selectable(options: Selectable): JQuery;
+ selectable(optionLiteral: string, options: Selectable): JQuery;
+ selectable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ selectable(optionLiteral: string, optionName: string): JQuery;
- slider(options?: Slider): void;
+ slider(): JQuery;
+ slider(methodName: string): JQuery;
+ slider(options: Slider): JQuery;
+ slider(optionLiteral: string, options: Slider): JQuery;
+ slider(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ slider(optionLiteral: string, optionName: string): JQuery;
- sortable(options?: Sortable): void;
+ sortable(): JQuery;
+ sortable(methodName: string): JQuery;
+ sortable(options: Sortable): JQuery;
+ sortable(optionLiteral: string, options: Sortable): JQuery;
+ sortable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ sortable(optionLiteral: string, optionName: string): JQuery;
- spinner(options?: Spinner): void;
+ spinner(): JQuery;
+ spinner(methodName: string): JQuery;
+ spinner(options: Spinner): JQuery;
+ spinner(optionLiteral: string, options: Spinner): JQuery;
+ spinner(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ spinner(optionLiteral: string, optionName: string): JQuery;
- tabs(options?: Tabs): void;
+ tabs(): JQuery;
+ tabs(methodName: string): JQuery;
+ tabs(options: Tabs): JQuery;
+ tabs(optionLiteral: string, options: Tabs): JQuery;
+ tabs(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ tabs(optionLiteral: string, optionName: string): JQuery;
- tooltip(options?: Tooltip): void;
+ tooltip(): JQuery;
+ tooltip(methodName: string): JQuery;
+ tooltip(options: Tooltip): JQuery;
+ tooltip(optionLiteral: string, options: Tooltip): JQuery;
+ tooltip(optionLiteral: string, optionName: string, optionValue: any): JQuery;
+ tooltip(optionLiteral: string, optionName: string): JQuery;
}
interface JQueryStatic {
diff --git a/Tests/jqueryui-tests.ts b/Tests/jqueryui-tests.ts
index 896b0f7a4..7ef12853a 100644
--- a/Tests/jqueryui-tests.ts
+++ b/Tests/jqueryui-tests.ts
@@ -2,440 +2,449 @@
declare var $: any;
+function tests_draggable() {
-// Draggable //////////////////////////////////////////////////
-
-$("#draggable").draggable({ axis: "y" });
-$("#draggable2").draggable({ axis: "x" });
-$("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
-$("#draggable5").draggable({ containment: "parent" });
-$("#draggable").draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
-$("#draggable2").draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
-$("#draggable3").draggable({ cursorAt: { bottom: 0 } });
-$("#draggable").draggable();
-$("#draggable").draggable({ distance: 20 });
-$("#draggable2").draggable({ delay: 1000 });
-$("#draggable").draggable({
- start: () => { },
- drag: () => { },
- stop: () => { }
-});
-$("#draggable").draggable({ handle: "p" });
-$("#draggable2").draggable({ cancel: "p.ui-widget-header" });
-$("#draggable").draggable({ revert: true });
-$("#draggable2").draggable({ revert: true, helper: "clone" });
-$("#draggable").draggable({ scroll: true });
-$("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
-$("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
-$("#draggable").draggable({ snap: true });
-$("#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 });
-$("#draggable").draggable({
- connectToSortable: "#sortable",
- helper: "clone",
- revert: "invalid"
-});
-$("#draggable").draggable({ helper: "original" });
-$("#draggable2").draggable({ opacity: 0.7, helper: "clone" });
-$("#draggable3").draggable({
- cursor: "move",
- cursorAt: { top: -12, left: -20 },
- helper: (event) => { return $(""); }
-});
-$("#set div").draggable({ stack: "#set div" });
-
-
-// Droppable //////////////////////////////////////////////////
-
-$( "#draggable, #draggable-nonvalid" ).draggable();
-$("#droppable").droppable({
- accept: "#draggable",
- activeClass: "ui-state-hover",
- hoverClass: "ui-state-active",
- 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!");
- }
-});
-
-var $gallery = $( "#gallery" ),
- $trash = $( "#trash" );
-$("li", $gallery).draggable({
- cancel: "a.ui-icon",
- revert: "invalid",
- containment: "document",
- helper: "clone",
- cursor: "move"
-});
-
-$trash.droppable({
- accept: "#gallery > li",
- activeClass: "ui-state-highlight",
- drop: ( event, ui ) => { }
-});
-
-$gallery.droppable({
- accept: "#trash li",
- activeClass: "custom-state-active",
- drop: ( event, ui ) => { }
-});
-
-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" });
- });
+ $("#draggable").draggable({ axis: "y" });
+ $("#draggable2").draggable({ axis: "x" });
+ $("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
+ $("#draggable5").draggable({ containment: "parent" });
+ $("#draggable").draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
+ $("#draggable2").draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
+ $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
+ $("#draggable").draggable();
+ $("#draggable").draggable({ distance: 20 });
+ $("#draggable2").draggable({ delay: 1000 });
+ $("#draggable").draggable({
+ start: () => { },
+ drag: () => { },
+ stop: () => { }
});
-}
-
-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();
+ $("#draggable").draggable({ handle: "p" });
+ $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
+ $("#draggable").draggable({ revert: true });
+ $("#draggable2").draggable({ revert: true, helper: "clone" });
+ $("#draggable").draggable({ scroll: true });
+ $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
+ $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
+ $("#draggable").draggable({ snap: true });
+ $("#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 });
+ $("#draggable").draggable({
+ connectToSortable: "#sortable",
+ helper: "clone",
+ revert: "invalid"
});
+ $("#draggable").draggable({ helper: "original" });
+ $("#draggable2").draggable({ opacity: 0.7, helper: "clone" });
+ $("#draggable3").draggable({
+ cursor: "move",
+ cursorAt: { top: -12, left: -20 },
+ helper: (event) => { return $(""); }
+ });
+ $("#set div").draggable({ stack: "#set div" });
+
}
-
-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);
+function tests_droppable() {
- 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")
+ $("#draggable, #draggable-nonvalid").draggable();
+ $("#droppable").droppable({
+ accept: "#draggable",
+ activeClass: "ui-state-hover",
+ hoverClass: "ui-state-active",
+ 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!");
- return false;
- }
-});
-
-$("#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!");
- }
-});
-
-$("#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!");
- }
-});
-$("#catalog").accordion();
-$( "#catalog li" ).draggable({
- appendTo: "body",
- helper: "clone"
-});
-$( "#cart ol" ).droppable({
- activeClass: "ui-state-default",
- hoverClass: "ui-state-hover",
- accept: ":not(.ui-sortable-helper)",
- drop: ( event, ui ) => {
- $( this ).find( ".placeholder" ).remove();
- $( "" ).text( ui.draggable.text() ).appendTo( this );
- }
-}).sortable({
- items: "li:not(.placeholder)",
- 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");
- }
-});
-
-$("#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!");
- }
-});
-
-
-// Resizable //////////////////////////////////////////////////
-
-
-// Selectable //////////////////////////////////////////////////
-
-
-// Sortable //////////////////////////////////////////////////
-
-
-// Accordion //////////////////////////////////////////////////
-
-$("#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);
- } else {
- $("#accordion").accordion("option", "icons", icons);
- }
-});
-$( "#accordion" ).accordion({ heightStyle: "fill" });
-
-$("#accordion-resizer").resizable({
- minHeight: 140,
- minWidth: 200,
- resize: () => {
- $("#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) => {
- ui.item.children("h3").triggerHandler("focusout");
}
});
+var $gallery = $("#gallery"),
+ $trash = $("#trash");
+ $("li", $gallery).draggable({
+ cancel: "a.ui-icon",
+ revert: "invalid",
+ containment: "document",
+ helper: "clone",
+ cursor: "move"
+ });
-// Autocomplete //////////////////////////////////////////////////
+ $trash.droppable({
+ accept: "#gallery > li",
+ activeClass: "ui-state-highlight",
+ drop: (event, ui) => { }
+ });
-$.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);
+ $gallery.droppable({
+ accept: "#trash li",
+ activeClass: "custom-state-active",
+ drop: (event, ui) => { }
+ });
+
+ 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" });
+ });
});
}
-});
-var data = [
- { label: "anders", category: "" },
- { label: "andreas", category: "" },
- { label: "antal", category: "" },
- { label: "annhhx10", category: "Products" },
- { label: "annk K12", category: "Products" },
- { label: "annttop C13", category: "Products" },
- { label: "anders andersson", category: "People" },
- { label: "andreas andersson", category: "People" },
- { label: "andreas johnson", category: "People" }
- ];
-
-$("#search").catcomplete({
- delay: 0,
- source: data
-});
+ 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();
+ });
+ }
-$.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 );
-
- 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;
+ 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!");
+ return false;
+ }
+ });
+
+ $("#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!");
+ }
+ });
+
+ $("#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!");
+ }
+ });
+ $("#catalog").accordion();
+ $("#catalog li").draggable({
+ appendTo: "body",
+ helper: "clone"
+ });
+ $("#cart ol").droppable({
+ activeClass: "ui-state-default",
+ hoverClass: "ui-state-hover",
+ accept: ":not(.ui-sortable-helper)",
+ drop: (event, ui) => {
+ $(this).find(".placeholder").remove();
+ $("").text(ui.draggable.text()).appendTo(this);
+ }
+ }).sortable({
+ items: "li:not(.placeholder)",
+ 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");
+ }
+ });
+
+ $("#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!");
+ }
+ });
+
+}
+
+
+function tests_resizable() {
+
+}
+
+
+function tests_selectable() {
+
+}
+
+
+function tests_sortable() {
+
+}
+
+
+function tests_accordion() {
+
+ $("#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);
+ } else {
+ $("#accordion").accordion("option", "icons", icons);
+ }
+ });
+ $("#accordion").accordion({ heightStyle: "fill" });
+
+ $("#accordion-resizer").resizable({
+ minHeight: 140,
+ minWidth: 200,
+ resize: () => {
+ $("#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) => {
+ ui.item.children("h3").triggerHandler("focusout");
+ }
+ });
+
+}
+
+function tests_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);
+ });
+ }
+ });
+
+ var data = [
+ { label: "anders", category: "" },
+ { label: "andreas", category: "" },
+ { label: "antal", category: "" },
+ { label: "annhhx10", category: "Products" },
+ { label: "annk K12", category: "Products" },
+ { label: "annttop C13", category: "Products" },
+ { label: "anders andersson", category: "People" },
+ { label: "andreas andersson", category: "People" },
+ { label: "andreas johnson", category: "People" }
+ ];
+
+ $("#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);
+
+ 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;
}
- });
- 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;
}
- }
-
- 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 = $("")
+ .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.autocomplete("search", "");
- input.focus();
- });
-
input
.tooltip({
position: {
@@ -443,198 +452,202 @@ $.widget( "ui.combobox", {
},
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: 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);
- return false;
- }
-})
-.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));
- }));
- }
-});
-
-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();
+ destroy: () => {
+ this.wrapper.remove();
+ this.element.show();
+ $.Widget.prototype.destroy.call(this);
+ }
+ });
+ $("#combobox").combobox();
+ $("#toggle").click(() => { $("#combobox").toggle(); });
+ $("#project").autocomplete({
+ minLength: 0,
+ 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);
+ return false;
}
})
- .autocomplete({
+ .data("autocomplete")._renderItem = (ul, item) => {
+ return $("")
+ .data("item.autocomplete", item)
+ .append("" + item.label + "
" + item.desc + "")
+ .appendTo(ul);
+ };
+
+ $("#developer").autocomplete({
source: (request, response) => {
- $.getJSON("search.php", {
- term: extractLast(request.term)
- }, response);
- },
- search: () => {
- // custom minLength
- var term = extractLast(this.value);
- if (term.length < 2) {
+ 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")
+ .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);
+ },
+ search: () => {
+ // custom minLength
+ var term = extractLast(this.value);
+ if (term.length < 2) {
+ return false;
+ }
+ },
+ focus: () => {
+ return false;
+ },
+ select: (event, ui) => {
return false;
}
- },
- focus: () => {
- return false;
- },
- select: (event, ui) => {
- return false;
- }
- });
-$( "#tags" )
- .bind("keydown", (event) => {
- if (event.keyCode === $.ui.keyCode.TAB &&
- $(this).data("autocomplete").menu.active) {
- event.preventDefault();
- }
- })
- .autocomplete({
- minLength: 0,
- source: (request, response) => {
- response($.ui.autocomplete.filter(
- availableTags, extractLast(request.term)));
- },
- focus: () => {
- return false;
- },
- select: (event, ui) => {
- return false;
- }
- });
-$("#city").autocomplete({
- source: (request, response) => {
- $.ajax({
- url: "http://ws.geonames.org/searchJSON",
- dataType: "jsonp",
- data: {
- featureClass: "P",
- style: "full",
- maxRows: 12,
- name_startsWith: request.term
+ });
+ $("#tags")
+ .bind("keydown", (event) => {
+ if (event.keyCode === $.ui.keyCode.TAB &&
+ $(this).data("autocomplete").menu.active) {
+ event.preventDefault();
+ }
+ })
+ .autocomplete({
+ minLength: 0,
+ source: (request, response) => {
+ response($.ui.autocomplete.filter(
+ availableTags, extractLast(request.term)));
},
- success: (data) => {
- response($.map(data.geonames, (item) => {
- return {
- label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
- value: item.name
- }
- }));
+ focus: () => {
+ return false;
+ },
+ select: (event, ui) => {
+ return false;
}
});
- },
- minLength: 2,
- 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");
- },
- close: () => {
- $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
- }
-});
-function log( message ) {
- $( "" ).text( message ).prependTo( "#log" );
- $( "#log" ).attr( "scrollTop", 0 );
-}
-var cache = {};
-$("#birds").autocomplete({
- minLength: 2,
- source: (request, response) => {
- var term = request.term;
- if (term in cache) {
- response(cache[term]);
- return;
+ $("#city").autocomplete({
+ source: (request, response) => {
+ $.ajax({
+ url: "http://ws.geonames.org/searchJSON",
+ dataType: "jsonp",
+ data: {
+ featureClass: "P",
+ style: "full",
+ maxRows: 12,
+ name_startsWith: request.term
+ },
+ success: (data) => {
+ response($.map(data.geonames, (item) => {
+ return {
+ label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
+ value: item.name
+ }
+ }));
+ }
+ });
+ },
+ minLength: 2,
+ 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");
+ },
+ close: () => {
+ $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
-
- $.getJSON("search.php", request, (data, status, xhr) => {
- cache[term] = data;
- response(data);
- });
+ });
+ function log(message) {
+ $("").text(message).prependTo("#log");
+ $("#log").attr("scrollTop", 0);
}
-});
-$("#birds").autocomplete({
- source: "search.php",
- minLength: 2,
- select: (event, ui) => {
- log(ui.item ?
- "Selected: " + ui.item.value + " aka " + ui.item.id :
- "Nothing selected, input was " + this.value);
- }
-});
-$("#birds").autocomplete({
- source: data,
- minLength: 0,
- select: ( event, ui ) => {
- log( ui.item ?
- "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
- "Nothing selected, input was " + this.value );
- }
-});
+ var cache = {};
+ $("#birds").autocomplete({
+ minLength: 2,
+ source: (request, response) => {
+ var term = request.term;
+ if (term in cache) {
+ response(cache[term]);
+ return;
+ }
+
+ $.getJSON("search.php", request, (data, status, xhr) => {
+ cache[term] = data;
+ response(data);
+ });
+ }
+ });
+ $("#birds").autocomplete({
+ source: "search.php",
+ minLength: 2,
+ select: (event, ui) => {
+ log(ui.item ?
+ "Selected: " + ui.item.value + " aka " + ui.item.id :
+ "Nothing selected, input was " + this.value);
+ }
+ });
+ $("#birds").autocomplete({
+ source: data,
+ minLength: 0,
+ select: (event, ui) => {
+ log(ui.item ?
+ "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
+ "Nothing selected, input was " + this.value);
+ }
+ });
+
+}
-// Button //////////////////////////////////////////////////
+function tests_button() {
-$("#check").button();
-$("#format").buttonset();
-$("input[type=submit], a, button")
- .button()
- .click((event) => { event.preventDefault(); });
\ No newline at end of file
+ $("#check").button();
+ $("#format").buttonset();
+ $("input[type=submit], a, button")
+ .button()
+ .click((event) => { event.preventDefault(); });
+
+}
\ No newline at end of file