diff --git a/jquery.mmenu/jquery.mmenu-tests.ts b/jquery.mmenu/jquery.mmenu-tests.ts new file mode 100644 index 000000000..ae52793d6 --- /dev/null +++ b/jquery.mmenu/jquery.mmenu-tests.ts @@ -0,0 +1,85 @@ +/// +/// + + +// -------------------------------------------------------- +// ---------------- TEST DEFAULT OPTIONS ------------------ +// -------------------------------------------------------- + +var menu: JQuery = $("#my-menu"); +menu.mmenu( + // options + { + extensions: [], + navbar: { + add: true, + title: "Menu", + titleLink: "parent" + }, + onClick: { + close: true, + preventDefault: false, + setSelected: false + }, + slidingSubmenus: true + }, + // configurations + { + classNames: { + divider: "Divider", + inset: "Inset", + panel: "Panel", + selected: "Selected", + vertical: "vertical" + }, + clone: false, + openingInterval: 25, + panelNodetype: "div, ul, ol", + transitionDuration: 400 + } +); + + +// -------------------------------------------------------- +// ------------------- TEST MMENU API --------------------- +// -------------------------------------------------------- + +var api = menu.data("mmenu"); +var myPanel: JQuery = $("#panel"); +var listItem: JQuery = $(".list-item"); + +api.closeAllPanels(); +api.bind("closeAllPanels", function() { + console.log("close all opened panels and go back to the first panel."); +}); + +api.closePanel(myPanel); +api.bind("closePanel", function(panel) { + console.log("close this ", panel); +}); + +api.getInstance(); +api.bind("getInstance", function() { + console.log("get the class instance for the menu."); +}); + +api.init(myPanel); +api.bind("init", function(panel) { + console.log("method to (re)initialize a newly added ", panel); +}); + +api.openPanel(myPanel); +api.bind("openPanel", function(panel) { + console.log("This panel is now opened ", panel); +}); + +api.setSelected(listItem, true); +api.bind("setSelected", function(listItem, selected) { + console.log("set or unset a list item as selected ", listItem); + console.log("has selected ", selected); +}); + +api.update(); +api.bind("update", function() { + console.log("update the appearance for the menu"); +}); diff --git a/jquery.mmenu/jquery.mmenu.d.ts b/jquery.mmenu/jquery.mmenu.d.ts new file mode 100644 index 000000000..a502c37cd --- /dev/null +++ b/jquery.mmenu/jquery.mmenu.d.ts @@ -0,0 +1,242 @@ +// Type definitions for jQuery mmenu v5.5.3 +// Project: http://mmenu.frebsite.nl/ +// Definitions by: John Gouigouix +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module JQueryMmenu { + + interface NavbarOptions { + + /** + * Whether or not to add a navbar above the panels. + * Default: true + */ + add?: boolean; + + /** + * The title above the main panel. + * Default: "Menu" + */ + title?: string; + + /** + * The type of link to set for the title. + * Possible values: "parent", "anchor" or "none". + * Default: "parent" + */ + titleLink?: string; + + } + + interface OnclickOptions { + + /** + * Whether or not the menu should close after clicking a link inside it. + * The default value varies per link: true if the default behavior for + * the clicked link is prevented, false otherwise. + * Default: null + */ + close?: boolean | any; + + /** + * Whether or not to prevent the default behavior for the clicked link. + * The default value varies per link: true if its href is equal to + * or starts with a hash (#), false otherwise. + * Default: null + */ + preventDefault?: boolean | any; + + /** + * Whether or not the clicked link should be visibly "selected". + * Default: true + */ + setSelected?: boolean | any; + + } + + interface Options { + + /** + * A collection of extension names to enable for the menu. + * You'll need this option when using the extensions. + * Default: [] + */ + extensions?: Array; + + /** + * navbar options + */ + navbar?: NavbarOptions; + + /** + * onClick options + */ + onClick?: OnclickOptions; + + /** + * Whether or not submenus should come sliding in from the right. + * If false, submenus expand below their parent. + * To expand a single submenu below its parent item, add the class "Vertical" to it. + * Default: true + */ + slidingSubmenus?: boolean; + + } + + interface ClassnamesConfigurations { + + /** + * The classname on a LI that should be displayed as a divider. + * Default: "Divider" + */ + divider?: string; + + /** + * The classname on a submenu (a nested UL) that should be displayed as a default list. + * Default: "Inset" + */ + inset?: string; + + /** + * The classname on an element (for example a DIV) that should be considered to be a panel. + * Only applies if the "isMenu" option is set to false. + * Default: "Panel" + */ + panel?: string; + + /** + * The classname on the LI that should be displayed as selected. + * Default: "Selected" + */ + selected?: string; + + /** + * The classname on a submenu (a nested UL) that should expand below + * their parent instead of slide in from the right. + * Default: "vertical" + */ + vertical?: string; + + } + + interface Configurations { + + /** + * the CSS class names object + */ + classNames?: ClassnamesConfigurations; + + /** + * Whether or not the menu should be cloned (and the original menu kept intact). + * Default: false + */ + clone?: boolean; + + /** + * The number of milliseconds between opening/closing the menu and panels, + * needed to force CSS transitions. + * Default: 25 + */ + openingInterval?: number; + + /** + * jQuery selector containing the node-type of panels. + * Default: "div, ul, ol" + */ + panelNodetype?: string; + + /** + * The number of milliseconds used in the CSS transitions. + * Default: 400 (The value should match the associated CSS value.) + */ + transitionDuration?: number; + + } + + interface API { + + /** + * Trigger non-specialized signature method + * @param methodName + * @param callback + */ + bind(methodName: string, callback: (...args: any[]) => void): any; + + /** + * Trigger this method to close all opened panels and go back to the first panel. + */ + closeAllPanels(): JQuery; + /** @see closeAllPanels() */ + bind(methodName: "closeAllPanels", callback: () => void): JQuery; + + /** + * Trigger this method to close a panel + * (only available if the "slidingSubmenus" option is set to false). + * @param panel + */ + closePanel(panel: JQuery): void; + /** @see closePanel() */ + bind(methodName: "closePanel", callback: (panel: JQuery) => void): void; + + /** + * Trigger this method to get the class instance for the menu. + */ + getInstance(): void; + /** @see getInstance() */ + bind(methodName: "getInstance", callback: () => void): void; + + /** + * Trigger this method to (re)initialize a newly added panel. + * @param panel The panel to (re)initialize. + */ + init(panel: JQuery): void; + /** @see init() */ + bind(methodName: "init", callback: (panel: JQuery) => void): void; + + /** + * Trigger this method to open a panel. + * @param panel The panel to open. + */ + openPanel(panel: JQuery): void; + /** @see openPanel() */ + bind(methodName: "openPanel", callback: (panel: JQuery) => void): void; + + /** + * Trigger this method to set or unset a list item as "selected". + * @param li The list item to set or unset as "selected". + * @param selected Whether to set or unset the list item as "selected". Default: true + */ + setSelected(li: JQuery, selected?: boolean): void; + /** @see setSelected() */ + bind(methodName: "setSelected", callback: (li: JQuery, selected?: boolean) => void): void; + + /** + * Trigger this method to update the appearance for the menu. + */ + update(): void; + /** @see update() */ + bind(methodName: "update", callback: () => void): void; + + } + +} + + +interface JQuery { + + /** + * Create mmenu component + */ + mmenu(): JQuery; + mmenu(options: JQueryMmenu.Options): JQuery; + mmenu(options: JQueryMmenu.Options, configurations: JQueryMmenu.Configurations): JQuery; + + /** + * Return the mmenu object + * @param element + */ + data(element: "mmenu"): JQueryMmenu.API; + +} diff --git a/slick-carousel/slick-carousel-tests.ts b/slick-carousel/slick-carousel-tests.ts new file mode 100644 index 000000000..0279f5131 --- /dev/null +++ b/slick-carousel/slick-carousel-tests.ts @@ -0,0 +1,231 @@ +/// +/// + + +// -------------------------------------------------------- +// ------------------- WEBSITE EXAMPLE -------------------- +// ---------- http://kenwheeler.github.io/slick/ ---------- +// -------------------------------------------------------- + +$('.single-item').slick(); + +$('.multiple-items').slick({ + infinite: true, + slidesToShow: 3, + slidesToScroll: 3 +}); + +$('.responsive').slick({ + dots: true, + infinite: false, + speed: 300, + slidesToShow: 4, + slidesToScroll: 4, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 3, + infinite: true, + dots: true + } + }, + { + breakpoint: 600, + settings: { + slidesToShow: 2, + slidesToScroll: 2 + } + }, + { + breakpoint: 480, + settings: { + slidesToShow: 1, + slidesToScroll: 1 + } + } + // You can unslick at a given breakpoint now by adding: + // settings: "unslick" + // instead of a settings object + ] +}); + +$('.variable-width').slick({ + dots: true, + infinite: true, + speed: 300, + slidesToShow: 1, + centerMode: true, + variableWidth: true +}); + +$('.one-time').slick({ + dots: true, + infinite: true, + speed: 300, + slidesToShow: 1, + adaptiveHeight: true +}); + +$('.center').slick({ + centerMode: true, + centerPadding: '60px', + slidesToShow: 3, + responsive: [ + { + breakpoint: 768, + settings: { + arrows: false, + centerMode: true, + centerPadding: '40px', + slidesToShow: 3 + } + }, + { + breakpoint: 480, + settings: { + arrows: false, + centerMode: true, + centerPadding: '40px', + slidesToShow: 1 + } + } + ] +}); + +// To use lazy loading, set a data-lazy attribute +// on your img tags and leave off the src +// + +$('.lazy').slick({ + lazyLoad: 'ondemand', + slidesToShow: 3, + slidesToScroll: 1 +}); + +$('.autoplay').slick({ + slidesToShow: 3, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 2000, +}); + +$('.fade').slick({ + dots: true, + infinite: true, + speed: 500, + fade: true, + cssEase: 'linear' +}); + +var slideIndex = 1; +$('.add-remove').slick({ + slidesToShow: 3, + slidesToScroll: 3 +}); +$('.js-add-slide').on('click', function() { + slideIndex++; + $('.add-remove').slick('slickAdd','

' + slideIndex + '

'); +}); + +$('.js-remove-slide').on('click', function() { + $('.add-remove').slick('slickRemove', slideIndex - 1); + if (slideIndex !== 0){ + slideIndex--; + } +}); + +$('.filtering').slick({ + slidesToShow: 4, + slidesToScroll: 4 +}); + +var filtered = false; + +$('.js-filter').on('click', function(){ + if (filtered === false) { + $('.filtering').slick('slickFilter',':even'); + $(this).text('Unfilter Slides'); + filtered = true; + } else { + $('.filtering').slick('slickUnfilter'); + $(this).text('Filter Slides'); + filtered = false; + } +}); + +$('.your-slider').slick('unslick'); + +$('.slider-for').slick({ + slidesToShow: 1, + slidesToScroll: 1, + arrows: false, + fade: true, + asNavFor: '.slider-nav' +}); +$('.slider-nav').slick({ + slidesToShow: 3, + slidesToScroll: 1, + asNavFor: '.slider-for', + dots: true, + centerMode: true, + focusOnSelect: true +}); + +$('.single-item-rtl').slick({ + rtl: true +}); + + + +// -------------------------------------------------------- +// ---------------- TEST DEFAULT OPTIONS ------------------ +// -------------------------------------------------------- + +$("#diaporama").slick({ + accessibility: true, + adaptiveHeight: false, + autoplay: false, + autoplaySpeed: 3000, + arrows: true, + asNavFor: "#slideshow", + appendArrows: "", + prevArrow: "", + nextArrow: "", + centerMode: false, + centerPadding: "50px", + cssEase: "ease", + customPaging: (slider, i) => { + return "customPaging slider " + slider + " customPaging index " + i; + }, + dots: false, + draggable: true, + fade: false, + focusOnSelect: false, + easing: "linear", + edgeFriction: 0.15, + infinite: true, + initialSlide: 0, + lazyLoad: "ondemand", + mobileFirst: false, + pauseOnHover: true, + pauseOnDotsHover: false, + respondTo: "window", + responsive: null, + rows: 1, + slide: "div", + slidesPerRow: 1, + slidesToShow: 1, + slidesToScroll: 1, + speed: 300, + swipe: true, + swipeToSlide: false, + touchMove: true, + touchThreshold: 5, + useCSS: true, + variableWidth: false, + vertical: false, + verticalSwiping: false, + rtl: false +}); diff --git a/slick-carousel/slick-carousel.d.ts b/slick-carousel/slick-carousel.d.ts new file mode 100644 index 000000000..d75090bb2 --- /dev/null +++ b/slick-carousel/slick-carousel.d.ts @@ -0,0 +1,388 @@ +// Type definitions for stick 1.5.8 +// Project: http://kenwheeler.github.io/slick/ +// Definitions by: John Gouigouix +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +interface JQuerySlickOptions { + + /** + * Enables tabbing and arrow key navigation + * Default: true + */ + accessibility?: boolean; + + /** + * Enables adaptive height for single slide horizontal carousels. + * Default: false + */ + adaptiveHeight?: boolean; + + /** + * Enables Autoplay + * Default: false + */ + autoplay?: boolean; + + /** + * Autoplay Speed in milliseconds + * Default: 3000 + */ + autoplaySpeed?: number; + + /** + * Prev/Next Arrows + * Default: true + */ + arrows?: boolean; + + /** + * Set the slider to be the navigation of other slider (Class or ID Name) + * Default: null + */ + asNavFor?: string; + + /** + * Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) + * Default: $(element) + */ + appendArrows?: any; + + /** + * Allows you to select a node or customize the HTML for the "Previous" arrow. + * Default: + */ + prevArrow?: string | Object; + + /** + * Allows you to select a node or customize the HTML for the "Next" arrow. + * Default: + */ + nextArrow?: string | Object; + + /** + * Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. + * Default: false + */ + centerMode?: boolean; + + /** + * Side padding when in center mode (px or %) + * Default: '50px' + */ + centerPadding?: string; + + /** + * CSS3 Animation Easing + * Default: 'ease' + */ + cssEase?: string; + + /** + * Custom paging templates. See source for use example. + * Default: n/a + */ + customPaging?: (slider: any, i: number) => string; + + /** + * Show dot indicators + * Default: false + */ + dots?: boolean; + + /** + * Enable mouse dragging + * Default: true + */ + draggable?: boolean; + + /** + * Enable fade + * Default: false + */ + fade?: boolean; + + /** + * Enable focus on selected element (click) + * Default: false + */ + focusOnSelect?: boolean; + + /** + * Add easing for jQuery animate. Use with easing libraries or default easing methods + * Default: 'linear' + */ + easing?: string; + + /** + * Resistance when swiping edges of non-infinite carousels + * Default: 0.15 + */ + edgeFriction?: number; + + /** + * Infinite loop sliding + * Default: true + */ + infinite?: boolean; + + /** + * Slide to start on + * Default: 0 + */ + initialSlide?: number; + + /** + * Set lazy loading technique. Accepts 'ondemand' or 'progressive'. + * Default: 'ondemand' + */ + lazyLoad?: string; + + /** + * Responsive settings use mobile first calculation + * Default: false + */ + mobileFirst?: boolean; + + /** + * Pause Autoplay On Hover + * Default: true + */ + pauseOnHover?: boolean; + + /** + * Pause Autoplay when a dot is hovered + * Default: false + */ + pauseOnDotsHover?: boolean; + + /** + * Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two) + * Default: 'window' + */ + respondTo?: string; + + /** + * Object containing breakpoints and settings objects (see demo). + * Enables settings sets at given screen width. + * Set settings to "unslick" instead of an object to disable slick at a given breakpoint. + * Default: none + */ + responsive?: Object; + + /** + * Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row. + * Default: 1 + */ + rows?: number; + + /** + * Element query to use as slide + * Default: 'div' + */ + slide?: string; + + /** + * With grid mode intialized via the rows option, this sets how many slides are in each grid row. + * Default: 1 + */ + slidesPerRow?: number; + + /** + * # of slides to show + * Default: 1 + */ + slidesToShow?: number; + + /** + * # of slides to scroll + * Default: 1 + */ + slidesToScroll?: number; + + /** + * Slide/Fade animation speed (ms) + * Default: 300 + */ + speed?: number; + + /** + * Enable swiping + * Default: true + */ + swipe?: boolean; + + /** + * Allow users to drag or swipe directly to a slide irrespective of slidesToScroll. + * Default: false + */ + swipeToSlide?: boolean; + + /** + * Enable slide motion with touch + * Default: true + */ + touchMove?: boolean; + + /** + * To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider. + * Default: 5 + */ + touchThreshold?: number; + + /** + * Enable/Disable CSS Transitions + * Default: true + */ + useCSS?: boolean; + + /** + * Variable width slides. + * Default: false + */ + variableWidth?: boolean; + + /** + * Vertical slide mode + * Default: false + */ + vertical?: boolean; + + /** + * Vertical swipe mode + * Default: false + */ + verticalSwiping?: boolean; + + /** + * Change the slider's direction to become right-to-left + * Default: false + */ + rtl?: boolean; + +} + + +interface JQuery { + + /** + * Create slick component + */ + slick(): JQuery; + slick(options: JQuerySlickOptions): JQuery; + + /** + * Trigger non-specialized signature method + * @param methodName + * @param arg + */ + slick(methodName: string, ...arg: any[]): any; + + /** + * Returns the current slide index + * @param methodName The name of the method + */ + slick(methodName: "slickCurrentSlide"): number; + + /** + * Navigates to a slide by index + * @param methodName The name of the method + * @param slide + * @param animate + */ + slick(methodName: "slickGoTo", slide: number, animate?: boolean): JQuery; + + /** + * Navigates to the next slide + * @param methodName The name of the method + */ + slick(methodName: "slickNext"): JQuery; + + /** + * Navigates to the previous slide + * @param methodName The name of the method + */ + slick(methodName: "slickPrev"): JQuery; + + /** + * Pauses autoplay + * @param methodName The name of the method + */ + slick(methodName: "slickPause"): JQuery; + + /** + * Starts autoplay + * @param methodName The name of the method + */ + slick(methodName: "slickPlay"): JQuery; + + /** + * Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, + * add to the end or to the beginning if addBefore is set. Accepts HTML String || Object + * @param methodName The name of the method + * @param html + * @param index/div> + * @param addBefore + */ + slick(methodName: "slickAdd", html: string | Object, index?: number, addBefore?: number): JQuery; + + /** + * Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. + * If removeBefore is set to false, remove the slide following index, or the last slide if no index is set. + * @param methodName The name of the method + * @param index + * @param removeBefore + */ + slick(methodName: "slickRemove", index: number, removeBefore?: number): JQuery; + + /** + * Filters slides using jQuery .filter() + * @param methodName The name of the method + * @param selector + */ + slick(methodName : "slickFilter", selector: string): JQuery; + + /** + * Filters slides using jQuery .filter() + * @param methodName The name of the method + * @param func + */ + slick(methodName : "slickFilter", func: (index: number, element: Element) => any): JQuery; + + /** + * Removes applied filtering + * @param methodName The name of the method + * @param index + */ + slick(methodName: "slickUnfilter", index: number): JQuery; + + /** + * Sets an individual value live. Set refresh to true if it's a UI update. + * @param methodName The name of the method + * @param option The option name + */ + slick(methodName: "slickGetOption", option: any): JQuerySlickOptions; + + /** + * Sets an individual value live. Set refresh to true if it's a UI update. + * @param methodName The name of the method + * @param option The option name + * @param value depends on option + * @param refresh + */ + slick(methodName: "slickSetOption", option: string, value: JQuerySlickOptions, refresh?: boolean): JQuery; + + /** + * Deconstructs slick + * @param methodName The name of the method + */ + slick(methodName: "unslick"): JQuery; + + /** + * Get Slick Object + * @param methodName The name of the method + */ + slick(methodName: "getSlick"): Object; + +}