From 2c4b3f8e034349c259e19efcc524305d234b075a Mon Sep 17 00:00:00 2001 From: Seboo Date: Mon, 19 Aug 2013 23:13:39 -0300 Subject: [PATCH 1/2] Added definitions for Swiper --- README.md | 1 + swiper/swiper-test.ts | 330 ++++++++++++++++++++++++++++++++++++++++++ swiper/swiper.d.ts | 195 +++++++++++++++++++++++++ 3 files changed, 526 insertions(+) create mode 100644 swiper/swiper-test.ts create mode 100644 swiper/swiper.d.ts diff --git a/README.md b/README.md index 5683009161..f9361d6b87 100755 --- a/README.md +++ b/README.md @@ -172,6 +172,7 @@ List of Definitions * [Spin](http://fgnass.github.com/spin.js/) (by [Boris Yankov](https://github.com/borisyankov)) * [Store.js](https://github.com/marcuswestin/store.js/) (by [Vincent Bortone](https://github.com/vbortone)) * [Sugar](http://sugarjs.com/) (by [Josh Baldwin](https://github.com/jbaldwin/)) +* [Swiper](www.idangero.us/sliders/swiper/‎) (by [Sebastián Galiano](https://github.com/sgaliano)) * [SwipeView](http://cubiq.org/swipeview) (by [Boris Yankov](https://github.com/borisyankov)) * [Tags Manager](http://welldonethings.com/tags/manager) (by [Vincent Bortone](https://github.com/vbortone)) * [Teechart](http://www.steema.com) (by [Steema](http://www.steema.com)) diff --git a/swiper/swiper-test.ts b/swiper/swiper-test.ts new file mode 100644 index 0000000000..55c004124a --- /dev/null +++ b/swiper/swiper-test.ts @@ -0,0 +1,330 @@ +/// +/// + +// +// Main demos +// + +// 01-default.html +function defaultDemo() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + loop: true, + grabCursor: true, + paginationClickable: true + }); + + $('.arrow-left').on('click', function (e) { + e.preventDefault(); + mySwiper.swipePrev(); + }); + + $('.arrow-right').on('click', function (e) { + e.preventDefault(); + mySwiper.swipeNext(); + }); +} + +// 02-vertical-mode.html +function verticalMode() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + mode: 'vertical' + }); +} + +// 03-dynamic-slides.html +function dynamicSlides() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true + }); + + function randomColor() { + var colors = ('blue red green orange pink').split(' '); + return colors[Math.floor(Math.random() * colors.length)]; + } + + var count = 4; + + $('.sdl-append').click(function (e) { + e.preventDefault(); + mySwiper.appendSlide('
Slide ' + (++count) + '
', 'swiper-slide ' + randomColor() + '-slide') + }); + + $('.sdl-prepend').click(function (e) { + e.preventDefault(); + mySwiper.prependSlide('
Slide ' + (++count) + '
', 'swiper-slide ' + randomColor() + '-slide') + }); + + $('.sdl-swap').click(function (e) { + e.preventDefault(); + mySwiper + .getFirstSlide() + .insertAfter(1); + }); + + $('.sdl-insert').click(function (e) { + e.preventDefault(); + mySwiper + .createSlide('
Slide ' + (++count) + '
', 'swiper-slide ' + randomColor() + '-slide') + .insertAfter(0); + }); + + $('.sdl-remove1').click(function (e) { + e.preventDefault(); + mySwiper.removeSlide(0); + }); + + $('.sdl-removel').click(function (e) { + e.preventDefault(); + mySwiper.removeLastSlide(); + }); + + $('.sdl-remove2').click(function (e) { + e.preventDefault(); + mySwiper.removeSlide(1); + }); +} + +// 04-scroll-container.html +function scrollContainer() { + var mySwiper = new Swiper('.swiper-container', { + scrollContainer: true, + scrollbar: { + container: '.swiper-scrollbar' + } + }); +} + +// 05-free-mode.html +function freeMode() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + freeMode: true, + freeModeFluid: true + }); +} + +// 06-carousel-mode.html +function carouselMode() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + slidesPerView: 3 + }); +} + +// 07-carousel-loop.html +function carouselLoop() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + slidesPerView: 3, + loop: true + }); +} + +// 08-nested.html +function nested() { + var swiperParent = new Swiper('.swiper-parent', { + pagination: '.pagination-parent', + paginationClickable: true, + slidesPerView: 3 + }); + + var swiperNested1 = new Swiper('.swiper-nested-1', { + mode: 'vertical', + pagination: '.pagination-nested-1', + paginationClickable: true, + slidesPerView: 2 + }); + + var swiperNested2 = new Swiper('.swiper-nested-2', { + mode: 'vertical', + pagination: '.pagination-nested-2', + paginationClickable: true, + slidesPerView: 2 + }); +} + +// 09-nested-loop.html +function nestedLoop() { + var swiperParent = new Swiper('.swiper-parent', { + pagination: '.pagination-parent', + paginationClickable: true, + loop: true, + slidesPerView: 3 + }); + + var swiperNested1 = new Swiper('.swiper-nested', { + mode: 'vertical', + pagination: '.pagination-nested', + paginationClickable: true, + slidesPerView: 2 + }); +} + +// 10-tabs.html +function tabs() { + var tabsSwiper = new Swiper('.swiper-container', { + onlyExternal: true, + speed: 500 + }); + + $(".tabs a").on('touchstart mousedown', function (e) { + e.preventDefault(); + $(".tabs .active").removeClass('active'); + $(this).addClass('active'); + tabsSwiper.swipeTo($(this).index()); + }); + + $(".tabs a").click(function (e) { + e.preventDefault(); + }); +} + +// 11-tabs-feedback.html +function tabsFeedback() { + var tabsSwiper = new Swiper('.swiper-container', { + speed: 500, + onSlideChangeStart: function () { + $(".tabs .active").removeClass('active'); + $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active'); + } + }); + + $(".tabs a").on('touchstart mousedown', function (e) { + e.preventDefault(); + $(".tabs .active").removeClass('active'); + $(this).addClass('active'); + tabsSwiper.swipeTo($(this).index()); + }); + + $(".tabs a").click(function (e) { + e.preventDefault(); + }); +} + +// 12-partial-display.html +function partialDisplay() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + slidesPerView: 'auto' + }); +} + +// 13-threshold.html +function threshold() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + moveStartThreshold: 100 + }); +} + +// 14-different-widths.html +function differentWidths() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + slidesPerView: 'auto' + }); +} + +// 15-centered-slides.html +function centeredSlides() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + centeredSlides: true, + slidesPerView: 'auto' + }); +} + +// 16-visibility-api.html +function visibilityApi() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true, + centeredSlides: true, + slidesPerView: 3, + watchActiveIndex: true + }); +} + +// 17 - responsive.html +function responsive() { + var mySwiper = new Swiper('.swiper-container', { + pagination: '.pagination', + paginationClickable: true + }); +} + + +// +// Scrollbar +// + +// demo-1.html +function demo1() { + var mySwiper = new Swiper('.swiper-container', { + scrollbar: { + container: '.swiper-scrollbar', + hide: false, + draggable: false + } + }); +} + +// demo-2.html +function demo2() { + var mySwiper = new Swiper('.swiper-container', { + scrollbar: { + container: '.swiper-scrollbar', + hide: false, + draggable: true + } + }); +} + +// demo-3.html +function demo3() { + var mySwiper = new Swiper('.swiper-container', { + scrollbar: { + container: '.swiper-scrollbar', + hide: true, + draggable: true + } + }); +} + +// demo-4.html +function demo4() { + var mySwiper = new Swiper('.swiper-container', { + slidesPerView: 3, + scrollbar: { + container: '.swiper-scrollbar', + hide: false, + draggable: true, + snapOnRelease: true + } + }); +} + +// demo-5.html +function demo5() { + var mySwiper = new Swiper('.swiper-container', { + scrollContainer: true, + mousewheelControl: true, + mode: 'vertical', + scrollbar: { + container: '.swiper-scrollbar', + hide: true, + draggable: false + } + }); +} \ No newline at end of file diff --git a/swiper/swiper.d.ts b/swiper/swiper.d.ts new file mode 100644 index 0000000000..0b5fd2d921 --- /dev/null +++ b/swiper/swiper.d.ts @@ -0,0 +1,195 @@ +// Type definitions for Swiper 2.0.0 +// Project: https://github.com/nolimits4web/Swiper +// Definitions by: Sebastián Galiano +// Definitions: https://github.com/borisyankov/DefinitelyTyped + + +interface SwiperOptions { + speed?: number; + autoplay?: number; + mode?: string; + loop?: boolean; + loopAdditionalSlides?: number; + slidesPerView?: any; + slidesPerGroup?: number; + calculateHeight?: boolean; + updateOnImagesReady?: boolean; + releaseFormElements?: boolean; + watchActiveIndex?: boolean; + visibilityFullFit?: boolean; + autoResize?: boolean; + resizeReInit?: boolean; + DOMAnimation?: boolean; + resistance?: any; + noSwiping?: boolean; + preventLinks?: boolean; + initialSlide?: number; + useCSS3Transforms?: boolean; + + // Free Mode and Scroll Container + freeMode?: boolean; + freeModeFluid?: boolean; + scrollContainer?: boolean; + momentumRatio?: number; + momentumBounce?: boolean; + momentumBounceRatio?: number; + + // Slides offset + centeredSlides?: boolean; + offsetPxBefore?: number; + offsetPxAfter?: number; + offsetSlidesBefore?: number; + offsetSlidesAfter?: number; + + // Touch/mouse interactions + touchRatio?: number; + simulateTouch?: boolean; + onlyExternal?: boolean; + followFinger?: boolean; + grabCursor?: boolean; + shortSwipes?: boolean; + moveStartThreshold?: number; + + // Navigation + keyboardControl?: boolean; + mousewheelControl?: boolean; + + // Pagination + pagination?: any; + paginationClickable?: boolean; + paginationAsRange?: boolean; + createPagination?: boolean; + + // Namespace + wrapperClass?: string; + slideClass?: string; + slideActiveClass?: string; + slideVisibleClass?: string; + slideElement?: string; + noSwipingClass?: string; + paginationElement?: string; + paginationElementClass?: string; + paginationActiveClass?: string; + paginationVisibleClass?: string; + + // Callbacks + queueStartCallbacks?: boolean; + queueEndCallbacks?: boolean; + onTouchStart?: (swiper: Swiper) => void; + onTouchMove?: (swiper: Swiper) => void; + onTouchEnd?: (swiper: Swiper) => void; + onSlideReset?: (swiper: Swiper) => void; + onSlideChangeStart?: (swiper: Swiper) => void; + onSlideChangeEnd?: (swiper: Swiper) => void; + onSlideClick?: (swiper: Swiper) => void; + onSlideTouch?: (swiper: Swiper) => void; + onImagesReady?: (swiper: Swiper) => void; + onMomentumBounce?: (swiper: Swiper) => void; + onResistanceBefore?: (swiper: Swiper, distance) => void; + onResistanceAfter?: (swiper: Swiper, distance) => void; + + // Slides Loader + loader?: { + slides?: Array; + slidesHTMLType?: string; + surroundGroups?: number; + logic?: string; + loadAllSlides?: boolean; + }; + + // Plugins + scrollbar?: SwiperScrollbarOptions; +} + +interface SwiperScrollbarOptions { + container: string; // Default: '.swiper-scrollbar' + draggable?: boolean; // Default: true + hide?: boolean; // Default: true + snapOnRelease?: boolean; // Default: false +} + +declare class SwiperSlide { + append(): SwiperSlide; + clone(): SwiperSlide; + getWidth(): number; + getHeight(): number; + getOffset(): { top: number; left: number; }; + insertAfter(index: number): SwiperSlide; + prepend(): SwiperSlide; + remove(): void; +} + +declare class Swiper { + constructor(container: string, options?: SwiperOptions); + constructor(container: Element, options?: SwiperOptions); + + // Properties + width: number; + height: number; + params; + positions; + + // Feature detection + support: { + touch: boolean; + transforms: boolean; + transforms3d: boolean; + transitions: boolean; + }; + + // Browser detection + browser: { + ie8: boolean; + ie10: boolean; + }; + + // Navigation + activeIndex: number; + activeLoopIndex: number; + activeLoaderIndex: number; + previousIndex: number; + swipeNext(internal?: boolean): boolean; + swipePrev(internal?: boolean): boolean; + swipeReset(): boolean; + swipeTo(index: number, speed?: number, runCallbacks?: boolean): boolean; + activeSlide(): SwiperSlide; + updateActiveSlide(index: number): void; + + // Events + touches; + isTouched: boolean; + clickedSlideIndex: number; + clickedSlide: SwiperSlide; + wrapperTransitionEnd(callback: () => void, permanent: boolean): void; + + // Init/reset + destroy(removeResizeEvent?: boolean): void; + reInit(forceCalcSlides?: boolean): void; + resizeFix(reInit?: boolean): void; + + // Autoplaying + autoplay: boolean; + startAutoplay(): void; + stopAutoplay(): void; + + // Other methods + getWrapperTranslate(axis: string): number; // 'x' or 'y' + setWrapperTranslate(x: number, y: number, z: number): void; + setWrapperTransition(duration): void; + + // Slides API + slides: Array; + createSlide(html: string, slideClassList?: string, element?: string): SwiperSlide; + appendSlide(html: string, slideClassList?: string, element?: string): SwiperSlide; + appendSlide(slideInstance: HTMLElement): SwiperSlide; + prependSlide(html: string, slideClassList?: string, element?: string): SwiperSlide; + prependSlide(slideInstance: HTMLElement): SwiperSlide; + insertSlideAfter(index: number, html: string, slideClassList?: string, element?: string): SwiperSlide; + insertSlideAfter(index: number, slideInstance: HTMLElement): SwiperSlide; + removeSlide(index: number): boolean; + removeLastSlide(): boolean; + removeAllSlides(): void; + getSlide(index: number): SwiperSlide; + getLastSlide(): SwiperSlide; + getFirstSlide(): SwiperSlide; +} \ No newline at end of file From 7e881864158aa0dacc49d350caba06cf4c5757fe Mon Sep 17 00:00:00 2001 From: Seboo Date: Tue, 20 Aug 2013 23:07:03 -0300 Subject: [PATCH 2/2] The tests file name should be plural --- swiper/{swiper-test.ts => swiper-tests.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename swiper/{swiper-test.ts => swiper-tests.ts} (100%) diff --git a/swiper/swiper-test.ts b/swiper/swiper-tests.ts similarity index 100% rename from swiper/swiper-test.ts rename to swiper/swiper-tests.ts