Merge pull request #45 from 8eo/master

Add enabled option
devmark · Nov 25, 2015 · 28df19f · 28df19f
2 parents c91575f + e3011d6
commit 28df19f
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -43,11 +43,13 @@ as either a `<div>` attribute or a `<slick>` element.
 
 ### Attributes & Event ###
 `settings`: optional `Object` containing any of the slick options. Consult [here](http://kenwheeler.github.io/slick/#settings).
+ - `enabled` should slick be enabled or not. Default to true. Example below
  - `method` optional containing slick method. discussed [below](#method) in detail
  - `event` optional containing slick event
 
 ```javascript
 $scope.slickConfig = {
+    enabled: true,
     autoplay: true,
     draggable: false,  
     autoplaySpeed: 3000,
@@ -60,6 +62,23 @@ $scope.slickConfig = {
     }
 };
 ```
+### Enable/disable slick ###
+Slick can be easily switched on and off by using `enabled` settings flag.
+```js
+    $scope.slickConfig = {
+        enabled: true,
+    }
+    $scope.toggleSlick = function() {
+      $scope.slickConfig.enabled = !$scope.slickConfig.enabled;
+    }
+```
+```html
+    <slick settings="slickConfig">
+     ...
+    </slick>
+    <button ng-click="toggleSlick()">Toggle</button>
+```
+
 
 ### Method ###
 1. All the functions in the plugin are exposed through a control

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-slick-carousel",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "homepage": "https://github.com/devmark/angular-slick-carousel",
   "authors": [
     "DevMark <hc.devmark@gmail.com>"

diff --git a/dist/angular-slick.js b/dist/angular-slick.js
@@ -2,7 +2,7 @@
  * angular-slick-carousel
  * DevMark <hc.devmark@gmail.com>
  * https://github.com/devmark/angular-slick-carousel
- * Version: 3.1.2 - 2015-11-24T02:43:00.279Z
+ * Version: 3.1.3 - 2015-11-25T09:13:43.590Z
  * License: MIT
  */
 
@@ -25,6 +25,7 @@ angular
       return {
         scope: {
           settings: '=',
+          enabled: '@',
           accessibility: '@',
           adaptiveHeight: '@',
           autoplay: '@',
@@ -77,6 +78,7 @@ angular
 
           initOptions = function () {
             options = angular.extend(angular.copy(slickCarouselConfig), {
+              enabled: scope.enabled !== 'false',
               accessibility: scope.accessibility !== 'false',
               adaptiveHeight: scope.adaptiveHeight === 'true',
               autoplay: scope.autoplay === 'true',
@@ -141,10 +143,17 @@ angular
             var slickness = angular.element(element);
 
             if (angular.element(element).hasClass('slick-initialized')) {
-              return slickness.slick('getSlick');
+              if(options.enabled) {
+                return slickness.slick('getSlick');
+              } else {
+                destroy();
+              }
             } else {
               angular.element(element).css('display', 'block');
 
+              if(!options.enabled) {
+                return;
+              }
               // Event
               slickness.on('init', function (event, slick) {
                 if (typeof options.event.init !== 'undefined') {

diff --git a/dist/angular-slick.min.js b/dist/angular-slick.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-slick-carousel",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "main": "dist/angular-slick.js",
   "repository": {
     "type": "git",

diff --git a/src/slick.js b/src/slick.js
@@ -16,6 +16,7 @@ angular
       return {
         scope: {
           settings: '=',
+          enabled: '@',
           accessibility: '@',
           adaptiveHeight: '@',
           autoplay: '@',
@@ -68,6 +69,7 @@ angular
 
           initOptions = function () {
             options = angular.extend(angular.copy(slickCarouselConfig), {
+              enabled: scope.enabled !== 'false',
               accessibility: scope.accessibility !== 'false',
               adaptiveHeight: scope.adaptiveHeight === 'true',
               autoplay: scope.autoplay === 'true',
@@ -132,10 +134,17 @@ angular
             var slickness = angular.element(element);
 
             if (angular.element(element).hasClass('slick-initialized')) {
-              return slickness.slick('getSlick');
+              if(options.enabled) {
+                return slickness.slick('getSlick');
+              } else {
+                destroy();
+              }
             } else {
               angular.element(element).css('display', 'block');
 
+              if(!options.enabled) {
+                return;
+              }
               // Event
               slickness.on('init', function (event, slick) {
                 if (typeof options.event.init !== 'undefined') {

diff --git a/test/main.spec.js b/test/main.spec.js
@@ -24,6 +24,7 @@ describe('angular slick testing', function () {
   function compileTemplate(template) {
     var el = $compile(angular.element(template))(scope);
     scope.$digest();
+    $timeout.flush();
     return el;
   }
 
@@ -80,6 +81,7 @@ describe('angular slick testing', function () {
 
     scope.slickConfig.autoplay = false;
     scope.$digest();
+    $timeout.flush();
     expect(scope.isDestroy).toBe(true);
     expect(element.hasClass('slick-initialized')).toBe(true);