From c5959a03d4023774f4f964a26083840d0a1191be Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Thu, 18 Jul 2013 15:14:18 +0200 Subject: [PATCH 1/7] Quick and dirty constructor --- royalslider/royalslider.d.ts | 48 ++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 royalslider/royalslider.d.ts diff --git a/royalslider/royalslider.d.ts b/royalslider/royalslider.d.ts new file mode 100644 index 0000000000..a210a1b11f --- /dev/null +++ b/royalslider/royalslider.d.ts @@ -0,0 +1,48 @@ +// Type definitions for jQuery royal-slider +// Project: http://dimsemenov.com/plugins/royal-slider/documentation/ +// Definitions by: Christiaan Rakowski +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module RoyalSlider { + export interface RoyalSliderOptions { + /** + * Enable mobile invert style scrolling. (default: false) + */ + invertscroll?: boolean; + /** + * Vertical or horizontal scroller? 'x' or 'y'. (default: 'x') + */ + axis?: string; + /** + * How many pixels must the mouswheel scrolls at a time. (default: 40) + */ + wheel?: number; + /** + * Enable or disable the mousewheel. (default: true) + */ + scroll?: boolean; + /** + * Return scrollwheel event to browser if there is no more content. (default: true) + */ + lockscroll?: boolean; + /** + * Set the size of the scrollbar to auto or a fixed number. (default: 'auto') + */ + size?: any; + /** + * Set the size of the thumb to auto or a fixed number. (default: 'auto') + */ + sizethumb?: any; + } +} + +interface JQuery { + /** + * Creates a new royal-slider with the specified, or default, options. + * + * @param options The options + */ + royalSlider(options?: RoyalSlider.RoyalSliderOptions): JQuery; +} \ No newline at end of file From 54056fc7061e59b54d7aa033bc6bc072bd825153 Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Thu, 18 Jul 2013 20:56:37 +0200 Subject: [PATCH 2/7] Halfway there... --- royalslider/royalslider-tests.ts | 43 +++++ royalslider/royalslider.d.ts | 259 ++++++++++++++++++++++++++++--- 2 files changed, 281 insertions(+), 21 deletions(-) create mode 100644 royalslider/royalslider-tests.ts diff --git a/royalslider/royalslider-tests.ts b/royalslider/royalslider-tests.ts new file mode 100644 index 0000000000..10715db6a4 --- /dev/null +++ b/royalslider/royalslider-tests.ts @@ -0,0 +1,43 @@ +/// + +$(".royalSlider").royalSlider(); + +$(".royalSlider").royalSlider({ + // options go here + // as an example, enable keyboard arrows nav + keyboardNavEnabled: true +}); + +$(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + thumbs: { + // thumbnails options go gere + spacing: 10, + arrowsAutoHide: true + } +}); + +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + fullscreen: { + // fullscreen options go gere + enabled: true, + native: true + } + }); +}); + +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + deeplinking: { + // deep linking options go gere + enabled: true, + prefix: 'slider-' + } + }); +}); \ No newline at end of file diff --git a/royalslider/royalslider.d.ts b/royalslider/royalslider.d.ts index a210a1b11f..af80ddb6ff 100644 --- a/royalslider/royalslider.d.ts +++ b/royalslider/royalslider.d.ts @@ -6,35 +6,252 @@ /// declare module RoyalSlider { + export interface RoyalSliderThumbsOptions { + /** + * Thumbnails mouse drag. (default: true) + */ + drag?: boolean; + /** + * Thumbnails touch. (default: true) + */ + touch?: boolean; + /** + * 'horizontal' or 'vertical'. (default: 'horizontal') + */ + orientation?: string; + /** + * Thumbnails arrows. (default: true) + */ + arrows?: boolean; + /** + * Spacing between thumbs. (default: 4) + */ + spacing?: number; + /** + * Auto hide thumbnails arrows on hover. (default: false) + */ + arrowsAutoHide?: boolean; + /** + * Automatically centers container with thumbs if there are small number of items (default: true) + */ + autoCenter?: boolean; + /** + * Thumbnails transition speed. (default: 600) + */ + transitionSpeed?: number; + /** + * Reduces size of main viewport area by thumbnails width or height, use it when you set 100 % width to slider.This option is always true, when slider is in fullscreen mode. (default: true) + */ + fitInViewport?: boolean; + /** + * Margin that equals thumbs spacing for first and last item. (default: true) + */ + firstMargin?: boolean; + /** + * Replaces default thumbnail arrow. You have to add it to DOM manually. (default: null) + */ + arrowLeft?: JQuery; + /** + * Replaces default thumbnail arrow. You have to add it to DOM manually. (default: null) + */ + arrowRight?: JQuery; + /** + * Adds span element with class thumbIco to every thumbnail. Useful for styling (default: false) + */ + appendSpan?: boolean; + } + + export interface RoyalSliderFullscreenOptions { + /** + * Fullscreen functions enabled. (default: false) + */ + enabled?: boolean; + /** + * Force keyboard arrows nav in fullscreen. (default: true) + */ + keyboardNav?: boolean; + /** + * Fullscreen button at top right. (default: true) + */ + buttonFS?: boolean; + /** + * Native browser fullscreen. (default: false) + */ + nativeFS?: boolean; + } + + export interface RoyalSliderDeeplinkingOptions { + /** + * Linking to slides by appending #SLIDE_INDEX to url.Slides count starts from 1. If change is set to false hash is only read once, after page load. (default: false) + */ + enabled?: boolean; + /** + * Automatically change URL after transition and listen for hash change. (default: false) + */ + change?: boolean; + /** + * Prefix that will be added to hash. For example if you set it to 'gallery-', hash would look like this: #gallery-5 (default: '') + */ + prefix?: string; + } + export interface RoyalSliderOptions { /** - * Enable mobile invert style scrolling. (default: false) - */ - invertscroll?: boolean; + * Automatically updates slider height based on base width. (default: false) + */ + autoScaleSlider?: boolean; /** - * Vertical or horizontal scroller? 'x' or 'y'. (default: 'x') - */ - axis?: string; + * Base slider width.Slider will autocalculate the ratio based on these values. (default: 800) + */ + autoScaleSliderWidth?: number; /** - * How many pixels must the mouswheel scrolls at a time. (default: 40) - */ - wheel?: number; + * 400 Base slider height + */ + autoScaleSliderHeight?: number; /** - * Enable or disable the mousewheel. (default: true) - */ - scroll?: boolean; + * Scale mode for images."fill", "fit", "fit-if-smaller" or "none". (default: 'fit-if-smaller') + */ + imageScaleMode?: string; /** - * Return scrollwheel event to browser if there is no more content. (default: true) - */ - lockscroll?: boolean; + * Aligns image to center of slide. (default: true) + */ + imageAlignCenter?: boolean; /** - * Set the size of the scrollbar to auto or a fixed number. (default: 'auto') - */ - size?: any; + * Distance between image and edge of slide (doesn't work with 'fill' scale mode). (default: 4) + */ + imageScalePadding?: number; /** - * Set the size of the thumb to auto or a fixed number. (default: 'auto') - */ - sizethumb?: any; + * Navigation type, can be 'bullets', 'thumbnails', 'tabs' or 'none' (default: 'bullets') + */ + controlNavigation?: string; + /** + * Direction arrows navigation. (default: true) + */ + arrowsNav?: boolean; + /** + * Auto hide arrows. (default: true) + */ + arrowsNavAutoHide?: boolean; + /** + * Hides arrows completely on touch devices. (default: false) + */ + arrowsNavHideOnTouch?: boolean; + /** + * Adds base width to all images for better-looking loading. Can be specified separately for each image. (default: null) + */ + imgWidth?: number; + /** + * Adds base height to all images for better-looking loading. Can be specified separately for each image. (default: null) + */ + imgHeight?: number; + /** + * Spacing between slides in pixels. (default: 8) + */ + slidesSpacing?: number; + /** + * Start slide index. (default: 0) + */ + startSlideId?: number; + /** + * Makes slider to go from last slide to first. (default: false) + */ + loop?: boolean; + /** + * Makes slider to go from last slide to first with rewind. Overrides prev option. (default: false) + */ + loopRewind?: boolean; + /** + * Randomizes all slides at start. (default: false) + */ + randomizeSlides?: boolean; + /** + * Number of slides to preload on sides.If you set it to 0, only one slide will be kept in the display list at once. (default: 4) + */ + numImagesToPreload?: number; + /** + * Enables spinning preloader, you may style it via CSS (class rsPreloader). (default: true) + */ + usePreloader?: boolean; + /** + * Can be 'vertical' or 'horizontal'. (default: 'horizontal') + */ + slidesOrientation?: string; + /** + * 'move' or 'fade'. Important note about fade transition, slides must have background as only one image is animating. (default: 'move') + */ + transitionType?: string; + /** + * Slider transition speed, in ms. (default: 600) + */ + transitionSpeed?: number; + /** + * Easing function for simple transition.Read more in the easing section of the documentation. (default: 'easeInOutSine') + */ + easeInOut?: string; + /** + * Easing function of animation after ending of the swipe gesture. Read more in the easing section of the documentation. (default: 'easeOutSine') + */ + easeOut?: string; + /** + * If set to true adds arrows and fullscreen button inside rsOverflow container, otherwise inside root slider container. (default: true) + */ + controlsInside?: boolean; + /** + * Navigates forward by clicking on slide. (default: true) + */ + navigateByClick?: boolean; + /** + * Mouse drag navigation over slider. (default: true) + */ + sliderDrag?: boolean; + /** + * Touch navigation of slider. (default: true) + */ + sliderTouch?: boolean; + /** + * Navigate slider with keyboard left and right arrows. (default: false) + */ + keyboardNavEnabled?: boolean; + /** + * Fades in slide after it's loaded. (default: true) + */ + fadeinLoadedSlide?: boolean; + /** + * Allows usage of CSS3 transitions. Might be useful if you're experiencing font-rendering problems, or other CSS3-related bugs. (default: true) + */ + allowCSS3?: boolean; + /** + * Adds global caption element to slider, read more in the global caption section of documentation. (default: false) + */ + globalCaption?: boolean; + /** + * Adds rsActiveSlide class to current slide before transition. (default: false) + */ + addActiveClass?: boolean; + /** + * Minimum distance in pixels to show next slide while dragging. (default: 10) + */ + minSlideOffset?: number; + /** + * Scales and animates height based on current slide. Please note: if you have images in slide that don't have rsImg class) or don't have fixed size, use $(window).load() instead of $(document).ready() before initializing slider. Also, autoHeight doesn't work with properties like autoScaleSlider, imageScaleMode and imageAlignCenter. (default: false) + */ + autoHeight?: boolean;// false + /** + * Overrides HTML of slides, used for creating of slides from HTML that is not attached to DOM. More info in knowledge base. (default: null) + */ + slides?: Element; + /** + * Thumbnail options + */ + thumbs?: RoyalSliderThumbsOptions; + /** + * You may specify larger images when slider is in fullscreen mode by adding data-rsBigImg attribute to rsImg element. A few examples: + */ + fullscreen?: RoyalSliderFullscreenOptions; + /** + * Deep linking module makes URL automatically change when you switch slides and you can easily link to specific slide (aka permalink). + */ + deeplinking?: RoyalSliderDeeplinkingOptions } } From 07ee38e957a825a91d4ff074bd6f79855525cdeb Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Thu, 18 Jul 2013 21:05:08 +0200 Subject: [PATCH 3/7] added autoplay and video --- royalslider/royalslider.d.ts | 54 +++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/royalslider/royalslider.d.ts b/royalslider/royalslider.d.ts index af80ddb6ff..72af7d7a1d 100644 --- a/royalslider/royalslider.d.ts +++ b/royalslider/royalslider.d.ts @@ -95,6 +95,50 @@ declare module RoyalSlider { prefix?: string; } + export interface RoyalSliderAutoplayOptions { + /** + * Enable autoplay or not. (default: false) + */ + enabled?: boolean; + /** + * Stop autoplay at first user action. (default: true) + */ + stopAtAction?: boolean; + /** + * Pause autoplay on hover. (default: true) + */ + pauseOnHover?: boolean; + /** + * Delay between items in ms. (default: 300) + */ + delay?: number; + } + + export interface RoyalSliderVideoOptions { + /** + * Auto hide arrows when video is playing (default: true) + */ + autoHideArrows?: boolean; + /** + * Auto hide navigation when video is playing. (default: false) + */ + autoHideControlNav?: boolean; + /** + * Auto hide animated blocks when video is playing. (default: false) + */ + autoHideBlocks?: boolean; + /** + * Youtube embed code. %id% is replaced by video id. (default: '') + */ + youTubeCode?: string; + /** + * Vimeo embed code. %id% is replaced by video id. (default: '') + */ + vimeoCode?: string; + } + + + export interface RoyalSliderOptions { /** * Automatically updates slider height based on base width. (default: false) @@ -251,7 +295,15 @@ declare module RoyalSlider { /** * Deep linking module makes URL automatically change when you switch slides and you can easily link to specific slide (aka permalink). */ - deeplinking?: RoyalSliderDeeplinkingOptions + deeplinking?: RoyalSliderDeeplinkingOptions; + /** + * Autoplay slideshow can be enabled via slider options. Delay between items can be set globally via delay option, or specifically for each item by adding data-rsDelay="1000" to root element of the slide (1000 = 1sec). + */ + autoplay?: RoyalSliderAutoplayOptions; + /** + * To add video to slide, you need to add data-rsVideo="" attribute to image. It can contain link to YouTube or Vimeo video. + */ + video?: RoyalSliderVideoOptions; } } From 5f3e373e14e63aa0a850297b7b53824b90281836 Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Thu, 18 Jul 2013 21:06:52 +0200 Subject: [PATCH 4/7] updated tests --- royalslider/royalslider-tests.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/royalslider/royalslider-tests.ts b/royalslider/royalslider-tests.ts index 10715db6a4..025bfb2d94 100644 --- a/royalslider/royalslider-tests.ts +++ b/royalslider/royalslider-tests.ts @@ -40,4 +40,29 @@ jQuery(document).ready(function ($) { prefix: 'slider-' } }); +}); + + +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + autoPlay: { + // autoplay options go gere + enabled: true, + pauseOnHover: true + } + }); +}); + +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + video: { + // video options go gere + autoHideBlocks: true, + autoHideArrows: false + } + }); }); \ No newline at end of file From b6e1333b6c83a6a53b6527090da7ac7f7390ef00 Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Thu, 18 Jul 2013 21:50:43 +0200 Subject: [PATCH 5/7] Added typings for jQuery royal-slider v9.4.0 --- royalslider/royalslider-tests.ts | 161 +++++++++++++++++++++++++++ royalslider/royalslider.d.ts | 183 ++++++++++++++++++++++++++++++- 2 files changed, 342 insertions(+), 2 deletions(-) diff --git a/royalslider/royalslider-tests.ts b/royalslider/royalslider-tests.ts index 025bfb2d94..8a5e2dcd61 100644 --- a/royalslider/royalslider-tests.ts +++ b/royalslider/royalslider-tests.ts @@ -65,4 +65,165 @@ jQuery(document).ready(function ($) { autoHideArrows: false } }); +}); + +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + block: { + // animated blocks options go gere + fadeEffect: false, + moveEffect: 'left' + } + }); +}); + +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + keyboardNavEnabled: true, + visibleNearby: { + enabled: true, + centerArea: 0.5, + center: true, + breakpoint: 650, + breakpointCenterArea: 0.64, + navigateByCenterClick: true + } + }); +}); + +// All public methods can be called jQuery-way - $(".royalSlider").royalSlider('startAutoPlay'); +// Another example: $(".royalSlider").royalSlider('goTo', 3); +// But it's recommended to get instance once if you have many calls: + +var slider = $(".royalSlider").royalSlider(); + +slider.goTo(3); // go to slide with id +slider.next(); // next slide +slider.prev(); // prev slide + +slider.destroy(); // removes all events and clears all slider data +// use on ajax sites to avoid memory leaks + +// Dynamic slides adding/removing +// More info in Javascript API section of support desk - http://dimsemenov.com/private/forum.php +slider.appendSlide($('div')); +slider.appendSlide($('div'), 4); + +slider.removeSlide(); +slider.removeSlide(4); + +slider.updateSliderSize(); // updates size of slider. Use after you resize slider with js. +slider.updateSliderSize(true); // Function has "forceResize" Boolean paramater. + +// Thumbnails public methods +slider.setThumbsOrientation('vertical'); // changes orientation of thumbnails +slider.updateThumbsSize(); // updates size of thumbnails + +// Fullscreen public methods +slider.enterFullscreen(); +slider.exitFullscreen(); + +// Autoplay public methods +slider.startAutoPlay(); +slider.stopAutoPlay(); +slider.toggleAutoPlay(); + +// Video public methods +slider.toggleVideo(); +slider.playVideo(); +slider.stopVideo(); + + + + +slider.currSlideId // current slide index +slider.currSlide // current slide object + +slider.numSlides // total number of slides + +slider.isFullscreen // indicates if slider is in fullscreen mode +slider.nativeFS // indicates if browser supports native fullscreen + +slider.width // width of slider +slider.height // height of slider + +slider.dragSuccess // Boolean, changes on mouseup, indicates if slide was dragged. Used to check if event is drag or click. + +slider.slides // array, contains all data about each slide +slider.slidesJQ // array, contains list of HTML slides that are added to slider + +slider.st // object with slider settings +slider.ev // jQuery object with slider events + + + + +// In each listener event.target is slider instance + +slider.ev.on('rsAfterSlideChange', function (event) { + // triggers after slide change +}); +slider.ev.on('rsBeforeAnimStart', function (event) { + // before animation between slides start +}); +slider.ev.on('rsBeforeMove', function (event, type, userAction) { + // before any transition start (including after drag release) + // "type" - can be "next", "prev", or ID of slide to move + // userAction (Boolean) - defines if action is triggered by user (e.g. will be false if movement is triggered by autoPlay) +}); +slider.ev.on('rsBeforeSizeSet', function (event) { + // before size of slider is changed +}); +slider.ev.on('rsDragStart', function (event) { + // mouse/touch drag start +}); +slider.ev.on('rsDragRelease', function () { + // mouse/touch drag end +}); +slider.ev.on('rsBeforeDestroy', function () { + // triggers before slider in destroyed +}); +slider.ev.on('rsOnCreateVideoElement', function (e, url)) { + // triggers before video element is created, after click on play button. + // Read more in Tips&Tricks section +}); +slider.ev.on('rsSlideClick', function () { + // triggers when user clicks on slide + // doesn't trigger after click and drag +}); +slider.ev.on('rsEnterFullscreen', function () { + // enter fullscreen mode +}); +slider.ev.on('rsExitFullscreen', function () { + // exit fullscreen mode +}); + +slider.ev.on('rsVideoPlay', function () { + // video start +}); +slider.ev.on('rsVideoStop', function () { + // video stop +}); + +slider.slides[2].holder.on('rsAfterContentSet', function () { + // fires when third slide content is loaded and added to DOM +}); +// or globally +slider.ev.on('rsAfterContentSet', function (e, slideObject) { + // fires when every time when slide content is loaded and added to DOM +}); + +// Next events TRIGGER DIRECTLY ON SLIDER INITIALIZATION +// if you bind them after slider init they'll not fire +// used for module development +slider.ev.on('rsAfterInit', function () { + // after slider is initialized, +}); +slider.ev.on('rsBeforeParseNode', function (e, content, obj) { + // before slide node is parsed + // content - HTML object of slide that is parsed + // obj - RoyalSlider data object (stores image URLs) }); \ No newline at end of file diff --git a/royalslider/royalslider.d.ts b/royalslider/royalslider.d.ts index 72af7d7a1d..2e83e395ce 100644 --- a/royalslider/royalslider.d.ts +++ b/royalslider/royalslider.d.ts @@ -1,4 +1,4 @@ -// Type definitions for jQuery royal-slider +// Type definitions for jQuery royal-slider v9.4.0 // Project: http://dimsemenov.com/plugins/royal-slider/documentation/ // Definitions by: Christiaan Rakowski // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -137,7 +137,59 @@ declare module RoyalSlider { vimeoCode?: string; } + export interface RoyalSliderBlockOptions { + /** + * true or false (default: true) + */ + fadeEffect?: boolean; + /** + * Move effect direction.Can be 'left', 'right', 'top', 'bottom' or 'none'. (default: 'top') + */ + moveEffect?: string; + /** + * Distance for move effect in pixels. (default: 20) + */ + moveOffset?: number; + /** + * Transition speed of block, in ms. (default: 400) + */ + speed?: number; + /** + * Easing function of block animation.Read more in easing section of docs. (default: 'easeOutSine' ) + */ + easing?: string; + /** + * Delay between each block show up, in ms. (default: 200) + */ + delay?: number; + } + export interface RoyalSliderVisibleOptions { + /** + * Enable visible-nearby. (default: true) + */ + enabled?: boolean; + /** + * Ratio that determines area of center image.For example for 0.6 - 60 % of slider area will get center image and 20% for two images on sides. (default: 0.6) + */ + centerArea?: number; + /** + * Alignment of center image, if you set it to false center image will be aligned to left. (default: true) + */ + center?: boolean; + /** + * Disables navigation to next slide by clicking on current slide (if navigateByClick is true). (default: true) + */ + navigateByCenterClick?: boolean; + /** + * Used for responsive design. Changes centerArea value to breakpointCenterArea when width of slider is less then value in this option. Set to 0 to disable. (default: 0) + */ + breakpoint?: number; + /** + * Same as centerArea option, just for breakpoint. Can be changed dynamically via `sliderInstance.st.breakpointCenterArea`. (default: 0.8) + */ + breakpointCenterArea?: number; + } export interface RoyalSliderOptions { /** @@ -304,6 +356,133 @@ declare module RoyalSlider { * To add video to slide, you need to add data-rsVideo="" attribute to image. It can contain link to YouTube or Vimeo video. */ video?: RoyalSliderVideoOptions; + /** + * All elements inside slide that have class rsABlock will be treated by slider as animated blocks (tag name doesn't matter). Blocks can not be nested, but you can put multiple instances of them into one slide, or make slide itself animated block. + */ + block?: RoyalSliderBlockOptions; + /** + * Module "reveals" next and previous slides, like in this template. + */ + visibleNearby?: RoyalSliderVisibleOptions; + } + + export interface RoyalSlider { //TODO: extends/implements JQuery? (giving problems due to next(), prev(), width and height and 'selector'. + /** + * go to slide with id + */ + goTo(id: number): void; + /** + * next slide + */ + next(): void; + /** + * prev slide + */ + prev(): void; + /** + * removes all events and clears all slider data (use on ajax sites to avoid memory leaks) + */ + destroy(): void; + /** + * Dynamic slides adding/removing + */ + appendSlide(element: JQuery, index?: number): void; + /** + * Remove slide + */ + removeSlide(index?: number): void; + /** + * updates size of slider. Use after you resize slider with js. + */ + updateSliderSize(forceResize?: boolean): void; + /** + * changes orientation of thumbnails + */ + setThumbsOrientation(orientation: string): void; + /** + * updates size of thumbnails + */ + updateThumbsSize(): void; + /** + * Enter Fullscreen mode + */ + enterFullscreen(): void; + /** + * Exit Fullscreen mode + */ + exitFullscreen(): void; + /** + * Start autoplay + */ + startAutoPlay(): void; + /** + * Stop autoplay + */ + stopAutoPlay(): void; + /** + * Toggle autoplay between start and stop + */ + toggleAutoPlay(): void; + /** + * Toggle video between start and stop + */ + toggleVideo(): void; + /** + * Play video + */ + playVideo(): void; + /** + * Stop video + */ + stopVideo(): void; + /** + * current slide index + */ + currSlideId: number; + /** + * current slide object + */ + currSlide: JQuery; + /** + * total number of slides + */ + numSlides: number; + /** + * indicates if slider is in fullscreen mode + */ + isFullscreen: boolean; + /** + * indicates if browser supports native fullscreen + */ + nativeFS: boolean; + /** + * width of slider + */ + width: number; + /** + * height of slider + */ + height: number; + /** + * Boolean, changes on mouseup, indicates if slide was dragged. Used to check if event is drag or click. + */ + dragSuccess: boolean; + /** + * contains all data about each slide + */ + slides: any[]; //TODO: what type? + /** + * Contains list of HTML slides that are added to slider + */ + slidesJQ: JQuery[]; //TODO: what type? + /** + * Object with slider settings + */ + st: RoyalSliderOptions; + /** + * jQuery object with slider events + */ + ev: JQuery; } } @@ -313,5 +492,5 @@ interface JQuery { * * @param options The options */ - royalSlider(options?: RoyalSlider.RoyalSliderOptions): JQuery; + royalSlider(options?: RoyalSlider.RoyalSliderOptions): RoyalSlider.RoyalSlider; } \ No newline at end of file From 299381fb0d5d47de3838623effc5e4a1928835bd Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Fri, 26 Jul 2013 17:07:33 +0200 Subject: [PATCH 6/7] fixed typo --- royalslider/royalslider-tests.ts | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/royalslider/royalslider-tests.ts b/royalslider/royalslider-tests.ts index 8a5e2dcd61..03294c4642 100644 --- a/royalslider/royalslider-tests.ts +++ b/royalslider/royalslider-tests.ts @@ -8,14 +8,16 @@ $(".royalSlider").royalSlider({ keyboardNavEnabled: true }); -$(".royalSlider").royalSlider({ - // general options go gere - autoScaleSlider: true, - thumbs: { - // thumbnails options go gere - spacing: 10, - arrowsAutoHide: true - } +jQuery(document).ready(function ($) { + $(".royalSlider").royalSlider({ + // general options go gere + autoScaleSlider: true, + thumbs: { + // thumbnails options go gere + spacing: 10, + arrowsAutoHide: true + } + }); }); jQuery(document).ready(function ($) { @@ -186,7 +188,7 @@ slider.ev.on('rsDragRelease', function () { slider.ev.on('rsBeforeDestroy', function () { // triggers before slider in destroyed }); -slider.ev.on('rsOnCreateVideoElement', function (e, url)) { +slider.ev.on('rsOnCreateVideoElement', function (e, url) { // triggers before video element is created, after click on play button. // Read more in Tips&Tricks section }); From 5c92515db62d2cbf39e0cf80bd6f526b81c2b890 Mon Sep 17 00:00:00 2001 From: Christiaan Rakowski Date: Sat, 27 Jul 2013 15:56:31 +0200 Subject: [PATCH 7/7] Updated readme to add royalslider --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0bccaa28f0..2db6bb1c3c 100755 --- a/README.md +++ b/README.md @@ -152,6 +152,7 @@ List of Definitions * [PreloadJS](http://www.createjs.com/#!/PreloadJS) (by [Pedro Ferreira](https://bitbucket.org/drk4)) * [QUnit](http://qunitjs.com/) (by [Diullei Gomes](https://github.com/Diullei)) * [Restify](https://github.com/mcavage/node-restify) (by [Bret Little](https://github.com/blittle)) +* [Royalslider](http://dimsemenov.com/plugins/royal-slider/) (by [Christiaan Rakowski](https://github.com/csrakowski)) * [Rx.js](http://rx.codeplex.com/) (by [gsino](http://www.codeplex.com/site/users/view/gsino)) * [Raphael](http://raphaeljs.com/) (by [CheCoxshall](https://github.com/CheCoxshall)) * [Restangular](https://github.com/mgonto/restangular/) (by [Boris Yankov](https://github.com/borisyankov))