Merge pull request kenwheeler#2079 from simeydotme/multi-options

Set Multiple Options in Object
krisimmig · Jan 30, 2016 · d32f4a1 · d32f4a1
2 parents b238a6b + 7d27cb2
commit d32f4a1
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 27 deletions.
diff --git a/README.markdown b/README.markdown
@@ -59,7 +59,7 @@ Example:
 </div>
 ```
 
-#### Settings
+### Settings
 
 Option | Type | Default | Description
 ------ | ---- | ------- | -----------
@@ -90,7 +90,7 @@ pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed
 pauseOnHover | boolean | true | Pauses autoplay on hover
 pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
 respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two).
-responsive | object | null | 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.
+responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint.
 rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
 slide | string | '' | Slide element query
 slidesPerRow | int | 1 | With grid mode intialized via the rows option, this sets how many slides are in each grid row.
@@ -110,6 +110,45 @@ rtl | boolean | false | Change the slider's direction to become right-to-left
 waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
 zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower
 
+##### Responsive Option Example
+The responsive option, and value, is quite unique and powerful.
+You can use it like so:
+
+```
+$(".slider").slick({
+  
+  // normal options...
+  infinite: false,
+
+  // the magic
+  responsive: [{
+
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 3,
+        infinite: true
+      }
+
+    }, {
+
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 2,
+        dots: true
+      }
+
+    }, {
+
+      breakpoint: 300,
+      settings: "unslick" // destroys slick
+
+    }]
+});
+```
+
+
+
+
 ### Events
 
 In slick 1.4, callback methods have been deprecated and replaced with events. Use them before the initialization of slick as shown below:
@@ -167,20 +206,23 @@ $('.your-element').slick('setPosition');
 
 Method | Argument | Description
 ------ | -------- | -----------
-slick | options : object | Initializes Slick
-unslick |  | Destroys Slick
-slickNext |  |  Triggers next slide
-slickPrev | | Triggers previous slide
-slickPause | | Pause Autoplay
-slickPlay | | Start Autoplay (_will also set `autoplay` option to `true`_)
-slickGoTo | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
-slickCurrentSlide |  |  Returns the current slide index
-slickAdd | element : html or DOM object, index: int, addBefore: bool | 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
-slickRemove | index: int, removeBefore: bool | 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.
-slickFilter | filter : selector or function | Filters slides using jQuery .filter syntax
-slickUnfilter | | Removes applied filter
-slickGetOption | option : string(option name) | Gets an option value.
-slickSetOption | option : string(option name), value : depends on option, refresh : boolean | Sets an option live. Set refresh to true if it is an option that changes the display
+`slick` | options : object | Initializes Slick
+`unslick` |  | Destroys Slick
+`slickNext` |  |  Triggers next slide
+`slickPrev` | | Triggers previous slide
+`slickPause` | | Pause Autoplay
+`slickPlay` | | Start Autoplay (_will also set `autoplay` option to `true`_)
+`slickGoTo` | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
+`slickCurrentSlide` |  |  Returns the current slide index
+`slickAdd` | element : html or DOM object, index: int, addBefore: bool | 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
+`slickRemove` | index: int, removeBefore: bool | 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.
+`slickFilter` | filter : selector or function | Filters slides using jQuery .filter syntax
+`slickUnfilter` | | Removes applied filter
+`slickGetOption` | option : string(option name) | Gets an option value.
+`slickSetOption` | change an option, `refresh` is always `boolean` and will update UI changes...
+ | `option, value, refresh` | change a [single `option`](https://github.com/kenwheeler/slick#settings) to given `value`; `refresh` is optional.
+ | `"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh` | change or add [whole sets of responsive options](#responsive-option-example)
+ | `{ option: value, option: value, ... }, refresh` | change  [multiple `option`s](https://github.com/kenwheeler/slick#settings) to corresponding `value`s.
 
 
 #### Example

diff --git a/slick/slick.js b/slick/slick.js
@@ -1755,9 +1755,8 @@
         _.setPosition();
         _.focusHandler();
 
-        if ( _.options.autoplay ) {
-            _.autoPlay();
-        }
+        _.paused = !_.options.autoplay;
+        _.autoPlay();
 
         _.$slider.trigger('reInit', [_]);
 
@@ -1924,37 +1923,100 @@
 
     };
 
-    Slick.prototype.setOption = Slick.prototype.slickSetOption = function(option, value, refresh) {
+    Slick.prototype.setOption = 
+    Slick.prototype.slickSetOption = function() {
+
+        /**
+         * accepts arguments in format of:
+         *
+         *  - for changing a single option's value:
+         *     .slick("setOption", option, value, refresh )
+         *
+         *  - for changing a set of responsive options:
+         *     .slick("setOption", 'responsive', [{}, ...], refresh )
+         *
+         *  - for updating multiple values at once (not responsive)
+         *     .slick("setOption", { 'option': value, ... }, refresh )
+         */
+
+        var _ = this, l, item, option, value, refresh = false, type;
+
+        if( $.type( arguments[0] ) === 'object' ) {
+
+            option =  arguments[0];
+            refresh = arguments[1];
+            type = 'multiple';
+
+        } else if ( $.type( arguments[0] ) === 'string' ) {
+
+            option =  arguments[0];
+            value = arguments[1];
+            refresh = arguments[2];
+
+            if ( arguments[0] === 'responsive' && $.type(value) === 'array' ) {
+
+                type = 'responsive';
+
+            } else if ( typeof arguments[1] !== 'undefined' ) {
+
+                type = 'single';
+
+            }
+
+        }
+
+        if ( type === 'single' ) {
+
+            _.options[option] = value;
+
+
+        } else if ( type === 'multiple' ) {
 
-        var _ = this, l, item;
+            $.each( option , function( opt, val ) {
 
-        if( option === 'responsive' && $.type(value) === 'array' ) {
+                _.options[opt] = val;
+
+            });
+
+
+        } else if ( type === 'responsive' ) {
 
             for ( item in value ) {
+
                 if( $.type( _.options.responsive ) !== 'array' ) {
+
                     _.options.responsive = [ value[item] ];
+
                 } else {
+
                     l = _.options.responsive.length-1;
+
                     // loop through the responsive object and splice out duplicates.
                     while( l >= 0 ) {
+
                         if( _.options.responsive[l].breakpoint === value[item].breakpoint ) {
+
                             _.options.responsive.splice(l,1);
+
                         }
+
                         l--;
+
                     }
+
                     _.options.responsive.push( value[item] );
-                }
-            }
 
-        } else {
+                }
 
-            _.options[option] = value;
+            }
 
         }
 
-        if ( refresh === true ) {
+        if ( refresh ) {
+
             _.unload();
             _.reinit();
+
         }
 
     };