From d3bf46f6b54ff9f50737678bde07e8fc2e219fcc Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:29:37 -0700 Subject: [PATCH 1/8] Replaced the jquery items with angular element --- app/scripts/app.coffee | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index f10dd50..84377dc 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -53,14 +53,14 @@ angular.module('slick', []) link: (scope, element, attrs) -> destroySlick = () -> $timeout(() -> - slider = $(element) + slider = angular.element(element) slider.slick('unslick') slider.find('.slick-list').remove() slider ) initializeSlick = () -> $timeout(() -> - slider = $(element) + slider = angular.element(element) currentIndex = scope.currentIndex if scope.currentIndex? @@ -72,8 +72,8 @@ angular.module('slick', []) adaptiveHeight: scope.adaptiveHeight is "true" arrows: scope.arrows isnt "false" asNavFor: if scope.asNavFor then scope.asNavFor else undefined - appendArrows: if scope.appendArrows then $(scope.appendArrows) else $(element) - appendDots: if scope.appendDots then $(scope.appendDots) else $(element) + appendArrows: if scope.appendArrows then angular.element(scope.appendArrows) else angular.element(element) + appendDots: if scope.appendDots then angular.element(scope.appendDots) else angular.element(element) autoplay: scope.autoplay is "true" autoplaySpeed: if scope.autoplaySpeed? then parseInt(scope.autoplaySpeed, 10) else 3000 centerMode: scope.centerMode is "true" @@ -105,8 +105,8 @@ angular.module('slick', []) useCSS: scope.useCSS isnt "false" variableWidth: scope.variableWidth is "true" vertical: scope.vertical is "true" - prevArrow: if scope.prevArrow then $(scope.prevArrow) else undefined - nextArrow: if scope.nextArrow then $(scope.nextArrow) else undefined + prevArrow: if scope.prevArrow then angular.element(scope.prevArrow) else undefined + nextArrow: if scope.nextArrow then angular.element(scope.nextArrow) else undefined slider.on 'init', (sl) -> From 6ef0f2e51562cd62e4464383be591ae31b42fc42 Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:32:59 -0700 Subject: [PATCH 2/8] Adding more events to the slick module --- app/scripts/app.coffee | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 84377dc..4883dc6 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -114,6 +114,15 @@ angular.module('slick', []) if currentIndex? sl.slideHandler(currentIndex) + slider.on 'reInit', (sl) -> + scope.onReInit() if attrs.onReInit + + slider.on 'setPosition', (sl) -> + scope.onSetPosition() if attrs.onSetPosition + + slider.on 'swipe', (sl) -> + scope.onSwipe() if attrs.onSwipe + slider.on 'afterChange', (event, slick, currentSlide, nextSlide) -> scope.onAfterChange() if scope.onAfterChange @@ -123,6 +132,18 @@ angular.module('slick', []) scope.currentIndex = currentSlide ) + slider.on 'beforeChange', (sl) -> + scope.onBeforeChange() if attrs.onBeforeChange + + slider.on 'breakpoint', (sl) -> + scope.onBreakpoint() if attrs.onBreakpoint + + slider.on 'destroy', (sl) -> + scope.onDestroy() if attrs.onDestroy + + slider.on 'edge', (sl) -> + scope.onEdge() if attrs.onEdge + scope.$watch("currentIndex", (newVal, oldVal) -> if currentIndex? and newVal? and newVal != currentIndex slider.slick('slickGoTo', newVal) From b614b44fee570b462683e6ac7875445a57ddf6ee Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:34:28 -0700 Subject: [PATCH 3/8] adding support for newer angular --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 9e24782..b9caebf 100644 --- a/bower.json +++ b/bower.json @@ -19,7 +19,7 @@ "carousel" ], "dependencies": { - "angular": "~1.3.0", + "angular": ">=1.3.0", "slick-carousel": "~1.4.1" }, "author": { From 2d941d99e69c5c533a613c68515692602ce1f9c6 Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:36:09 -0700 Subject: [PATCH 4/8] adding mobile first support --- app/scripts/app.coffee | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 4883dc6..79500f8 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -27,6 +27,7 @@ angular.module('slick', []) infinite: "@" initialSlide: "@" lazyLoad: "@" + mobileFirst: "@" onBeforeChange: "&" onAfterChange: "&" onInit: "&" @@ -85,6 +86,7 @@ angular.module('slick', []) easing: scope.easing or "linear" fade: scope.fade is "true" focusOnSelect: scope.focusOnSelect is "true" + mobileFirst: scope.mobileFirst is "true" infinite: scope.infinite isnt "false" initialSlide:scope.initialSlide or 0 lazyLoad: scope.lazyLoad or "ondemand" From 410b6218150f1f3dffadfe5a3cf8dd629da39e1f Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:37:56 -0700 Subject: [PATCH 5/8] update to the latest slick version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index b9caebf..e6eee89 100644 --- a/bower.json +++ b/bower.json @@ -20,7 +20,7 @@ ], "dependencies": { "angular": ">=1.3.0", - "slick-carousel": "~1.4.1" + "slick-carousel": "~1.5.5" }, "author": { "name": "Vasyl Stanislavchuk" From a5b0d74502ee4989bcda2d151033b732b78c8d5b Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:38:36 -0700 Subject: [PATCH 6/8] fix for the initialSlide problem --- app/scripts/app.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 79500f8..de2b526 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -88,7 +88,7 @@ angular.module('slick', []) focusOnSelect: scope.focusOnSelect is "true" mobileFirst: scope.mobileFirst is "true" infinite: scope.infinite isnt "false" - initialSlide:scope.initialSlide or 0 + initialSlide: if scope.initialSlide? then parseInt(scope.initialSlide, 10) else 0 lazyLoad: scope.lazyLoad or "ondemand" beforeChange: if attrs.onBeforeChange then scope.onBeforeChange else undefined onReInit: if attrs.onReInit then scope.onReInit else undefined From d9413b74e3dce2820933fe1a37720b15996e828b Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 10:46:24 -0700 Subject: [PATCH 7/8] Adding the updates js files after running grunt --- dist/slick.js | 51 ++++++++++++++++++++++++++++++++++++++++------- dist/slick.min.js | 4 ++-- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/dist/slick.js b/dist/slick.js index e9da126..88bfa6f 100644 --- a/dist/slick.js +++ b/dist/slick.js @@ -28,6 +28,7 @@ angular.module('slick', []).directive('slick', [ infinite: '@', initialSlide: '@', lazyLoad: '@', + mobileFirst: '@', onBeforeChange: '&', onAfterChange: '&', onInit: '&', @@ -56,7 +57,7 @@ angular.module('slick', []).directive('slick', [ destroySlick = function () { return $timeout(function () { var slider; - slider = $(element); + slider = angular.element(element); slider.slick('unslick'); slider.find('.slick-list').remove(); return slider; @@ -65,7 +66,7 @@ angular.module('slick', []).directive('slick', [ initializeSlick = function () { return $timeout(function () { var currentIndex, customPaging, slider; - slider = $(element); + slider = angular.element(element); if (scope.currentIndex != null) { currentIndex = scope.currentIndex; } @@ -80,8 +81,8 @@ angular.module('slick', []).directive('slick', [ adaptiveHeight: scope.adaptiveHeight === 'true', arrows: scope.arrows !== 'false', asNavFor: scope.asNavFor ? scope.asNavFor : void 0, - appendArrows: scope.appendArrows ? $(scope.appendArrows) : $(element), - appendDots: scope.appendDots ? $(scope.appendDots) : $(element), + appendArrows: scope.appendArrows ? angular.element(scope.appendArrows) : angular.element(element), + appendDots: scope.appendDots ? angular.element(scope.appendDots) : angular.element(element), autoplay: scope.autoplay === 'true', autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000, centerMode: scope.centerMode === 'true', @@ -93,8 +94,9 @@ angular.module('slick', []).directive('slick', [ easing: scope.easing || 'linear', fade: scope.fade === 'true', focusOnSelect: scope.focusOnSelect === 'true', + mobileFirst: scope.mobileFirst === 'true', infinite: scope.infinite !== 'false', - initialSlide: scope.initialSlide || 0, + initialSlide: scope.initialSlide != null ? parseInt(scope.initialSlide, 10) : 0, lazyLoad: scope.lazyLoad || 'ondemand', beforeChange: attrs.onBeforeChange ? scope.onBeforeChange : void 0, onReInit: attrs.onReInit ? scope.onReInit : void 0, @@ -113,8 +115,8 @@ angular.module('slick', []).directive('slick', [ useCSS: scope.useCSS !== 'false', variableWidth: scope.variableWidth === 'true', vertical: scope.vertical === 'true', - prevArrow: scope.prevArrow ? $(scope.prevArrow) : void 0, - nextArrow: scope.nextArrow ? $(scope.nextArrow) : void 0 + prevArrow: scope.prevArrow ? angular.element(scope.prevArrow) : void 0, + nextArrow: scope.nextArrow ? angular.element(scope.nextArrow) : void 0 }); slider.on('init', function (sl) { if (attrs.onInit) { @@ -124,6 +126,21 @@ angular.module('slick', []).directive('slick', [ return sl.slideHandler(currentIndex); } }); + slider.on('reInit', function (sl) { + if (attrs.onReInit) { + return scope.onReInit(); + } + }); + slider.on('setPosition', function (sl) { + if (attrs.onSetPosition) { + return scope.onSetPosition(); + } + }); + slider.on('swipe', function (sl) { + if (attrs.onSwipe) { + return scope.onSwipe(); + } + }); slider.on('afterChange', function (event, slick, currentSlide, nextSlide) { if (scope.onAfterChange) { scope.onAfterChange(); @@ -135,6 +152,26 @@ angular.module('slick', []).directive('slick', [ }); } }); + slider.on('beforeChange', function (sl) { + if (attrs.onBeforeChange) { + return scope.onBeforeChange(); + } + }); + slider.on('breakpoint', function (sl) { + if (attrs.onBreakpoint) { + return scope.onBreakpoint(); + } + }); + slider.on('destroy', function (sl) { + if (attrs.onDestroy) { + return scope.onDestroy(); + } + }); + slider.on('edge', function (sl) { + if (attrs.onEdge) { + return scope.onEdge(); + } + }); return scope.$watch('currentIndex', function (newVal, oldVal) { if (currentIndex != null && newVal != null && newVal !== currentIndex) { return slider.slick('slickGoTo', newVal); diff --git a/dist/slick.min.js b/dist/slick.min.js index 0b74254..a8bfc1f 100644 --- a/dist/slick.min.js +++ b/dist/slick.min.js @@ -1,2 +1,2 @@ -/*! angular-slick v0.2.0 */ -"use strict";angular.module("slick",[]).directive("slick",["$timeout",function(a){return{restrict:"AEC",scope:{initOnload:"@",data:"=",currentIndex:"=",accessibility:"@",adaptiveHeight:"@",arrows:"@",asNavFor:"@",appendArrows:"@",appendDots:"@",autoplay:"@",autoplaySpeed:"@",centerMode:"@",centerPadding:"@",cssEase:"@",customPaging:"&",dots:"@",draggable:"@",easing:"@",fade:"@",focusOnSelect:"@",infinite:"@",initialSlide:"@",lazyLoad:"@",onBeforeChange:"&",onAfterChange:"&",onInit:"&",onReInit:"&",onSetPosition:"&",pauseOnHover:"@",pauseOnDotsHover:"@",responsive:"=",rtl:"@",slide:"@",slidesToShow:"@",slidesToScroll:"@",speed:"@",swipe:"@",swipeToSlide:"@",touchMove:"@",touchThreshold:"@",useCSS:"@",variableWidth:"@",vertical:"@",prevArrow:"@",nextArrow:"@"},link:function(b,c,d){var e,f,g;return e=function(){return a(function(){var a;return a=$(c),a.slick("unslick"),a.find(".slick-list").remove(),a})},f=function(){return a(function(){var a,e,f;return f=$(c),null!=b.currentIndex&&(a=b.currentIndex),e=function(a,c){return b.customPaging({slick:a,index:c})},f.slick({accessibility:"false"!==b.accessibility,adaptiveHeight:"true"===b.adaptiveHeight,arrows:"false"!==b.arrows,asNavFor:b.asNavFor?b.asNavFor:void 0,appendArrows:$(b.appendArrows?b.appendArrows:c),appendDots:$(b.appendDots?b.appendDots:c),autoplay:"true"===b.autoplay,autoplaySpeed:null!=b.autoplaySpeed?parseInt(b.autoplaySpeed,10):3e3,centerMode:"true"===b.centerMode,centerPadding:b.centerPadding||"50px",cssEase:b.cssEase||"ease",customPaging:d.customPaging?e:void 0,dots:"true"===b.dots,draggable:"false"!==b.draggable,easing:b.easing||"linear",fade:"true"===b.fade,focusOnSelect:"true"===b.focusOnSelect,infinite:"false"!==b.infinite,initialSlide:b.initialSlide||0,lazyLoad:b.lazyLoad||"ondemand",beforeChange:d.onBeforeChange?b.onBeforeChange:void 0,onReInit:d.onReInit?b.onReInit:void 0,onSetPosition:d.onSetPosition?b.onSetPosition:void 0,pauseOnHover:"false"!==b.pauseOnHover,responsive:b.responsive||void 0,rtl:"true"===b.rtl,slide:b.slide||"div",slidesToShow:null!=b.slidesToShow?parseInt(b.slidesToShow,10):1,slidesToScroll:null!=b.slidesToScroll?parseInt(b.slidesToScroll,10):1,speed:null!=b.speed?parseInt(b.speed,10):300,swipe:"false"!==b.swipe,swipeToSlide:"true"===b.swipeToSlide,touchMove:"false"!==b.touchMove,touchThreshold:b.touchThreshold?parseInt(b.touchThreshold,10):5,useCSS:"false"!==b.useCSS,variableWidth:"true"===b.variableWidth,vertical:"true"===b.vertical,prevArrow:b.prevArrow?$(b.prevArrow):void 0,nextArrow:b.nextArrow?$(b.nextArrow):void 0}),f.on("init",function(c){return d.onInit&&b.onInit(),null!=a?c.slideHandler(a):void 0}),f.on("afterChange",function(c,d,e){return b.onAfterChange&&b.onAfterChange(),null!=a?b.$apply(function(){return a=e,b.currentIndex=e}):void 0}),b.$watch("currentIndex",function(b){return null!=a&&null!=b&&b!==a?f.slick("slickGoTo",b):void 0})})},b.initOnload?(g=!1,b.$watch("data",function(a){return null!=a?(g&&e(),f(),g=!0):void 0})):f()}}}]); \ No newline at end of file +/*! angular-slick v0.2.1 */ +"use strict";angular.module("slick",[]).directive("slick",["$timeout",function(a){return{restrict:"AEC",scope:{initOnload:"@",data:"=",currentIndex:"=",accessibility:"@",adaptiveHeight:"@",arrows:"@",asNavFor:"@",appendArrows:"@",appendDots:"@",autoplay:"@",autoplaySpeed:"@",centerMode:"@",centerPadding:"@",cssEase:"@",customPaging:"&",dots:"@",draggable:"@",easing:"@",fade:"@",focusOnSelect:"@",infinite:"@",initialSlide:"@",lazyLoad:"@",mobileFirst:"@",onBeforeChange:"&",onAfterChange:"&",onInit:"&",onReInit:"&",onSetPosition:"&",pauseOnHover:"@",pauseOnDotsHover:"@",responsive:"=",rtl:"@",slide:"@",slidesToShow:"@",slidesToScroll:"@",speed:"@",swipe:"@",swipeToSlide:"@",touchMove:"@",touchThreshold:"@",useCSS:"@",variableWidth:"@",vertical:"@",prevArrow:"@",nextArrow:"@"},link:function(b,c,d){var e,f,g;return e=function(){return a(function(){var a;return a=angular.element(c),a.slick("unslick"),a.find(".slick-list").remove(),a})},f=function(){return a(function(){var a,e,f;return f=angular.element(c),null!=b.currentIndex&&(a=b.currentIndex),e=function(a,c){return b.customPaging({slick:a,index:c})},f.slick({accessibility:"false"!==b.accessibility,adaptiveHeight:"true"===b.adaptiveHeight,arrows:"false"!==b.arrows,asNavFor:b.asNavFor?b.asNavFor:void 0,appendArrows:b.appendArrows?angular.element(b.appendArrows):angular.element(c),appendDots:b.appendDots?angular.element(b.appendDots):angular.element(c),autoplay:"true"===b.autoplay,autoplaySpeed:null!=b.autoplaySpeed?parseInt(b.autoplaySpeed,10):3e3,centerMode:"true"===b.centerMode,centerPadding:b.centerPadding||"50px",cssEase:b.cssEase||"ease",customPaging:d.customPaging?e:void 0,dots:"true"===b.dots,draggable:"false"!==b.draggable,easing:b.easing||"linear",fade:"true"===b.fade,focusOnSelect:"true"===b.focusOnSelect,mobileFirst:"true"===b.mobileFirst,infinite:"false"!==b.infinite,initialSlide:null!=b.initialSlide?parseInt(b.initialSlide,10):0,lazyLoad:b.lazyLoad||"ondemand",beforeChange:d.onBeforeChange?b.onBeforeChange:void 0,onReInit:d.onReInit?b.onReInit:void 0,onSetPosition:d.onSetPosition?b.onSetPosition:void 0,pauseOnHover:"false"!==b.pauseOnHover,responsive:b.responsive||void 0,rtl:"true"===b.rtl,slide:b.slide||"div",slidesToShow:null!=b.slidesToShow?parseInt(b.slidesToShow,10):1,slidesToScroll:null!=b.slidesToScroll?parseInt(b.slidesToScroll,10):1,speed:null!=b.speed?parseInt(b.speed,10):300,swipe:"false"!==b.swipe,swipeToSlide:"true"===b.swipeToSlide,touchMove:"false"!==b.touchMove,touchThreshold:b.touchThreshold?parseInt(b.touchThreshold,10):5,useCSS:"false"!==b.useCSS,variableWidth:"true"===b.variableWidth,vertical:"true"===b.vertical,prevArrow:b.prevArrow?angular.element(b.prevArrow):void 0,nextArrow:b.nextArrow?angular.element(b.nextArrow):void 0}),f.on("init",function(c){return d.onInit&&b.onInit(),null!=a?c.slideHandler(a):void 0}),f.on("reInit",function(a){return d.onReInit?b.onReInit():void 0}),f.on("setPosition",function(a){return d.onSetPosition?b.onSetPosition():void 0}),f.on("swipe",function(a){return d.onSwipe?b.onSwipe():void 0}),f.on("afterChange",function(c,d,e,f){return b.onAfterChange&&b.onAfterChange(),null!=a?b.$apply(function(){return a=e,b.currentIndex=e}):void 0}),f.on("beforeChange",function(a){return d.onBeforeChange?b.onBeforeChange():void 0}),f.on("breakpoint",function(a){return d.onBreakpoint?b.onBreakpoint():void 0}),f.on("destroy",function(a){return d.onDestroy?b.onDestroy():void 0}),f.on("edge",function(a){return d.onEdge?b.onEdge():void 0}),b.$watch("currentIndex",function(b,c){return null!=a&&null!=b&&b!==a?f.slick("slickGoTo",b):void 0})})},b.initOnload?(g=!1,b.$watch("data",function(a,b){return null!=a?(g&&e(),f(),g=!0):void 0})):f()}}}]); \ No newline at end of file From fb4c5b39b94c18e6c4f3feefb0ad848a268d0ea2 Mon Sep 17 00:00:00 2001 From: blakeparkinson Date: Fri, 11 Mar 2016 11:10:52 -0700 Subject: [PATCH 8/8] set these ones back to use jQuery --- app/scripts/app.coffee | 4 ++-- dist/slick.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index de2b526..ef35bfb 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -54,14 +54,14 @@ angular.module('slick', []) link: (scope, element, attrs) -> destroySlick = () -> $timeout(() -> - slider = angular.element(element) + slider = $(element) slider.slick('unslick') slider.find('.slick-list').remove() slider ) initializeSlick = () -> $timeout(() -> - slider = angular.element(element) + slider = $(element) currentIndex = scope.currentIndex if scope.currentIndex? diff --git a/dist/slick.js b/dist/slick.js index 88bfa6f..13dfe49 100644 --- a/dist/slick.js +++ b/dist/slick.js @@ -57,7 +57,7 @@ angular.module('slick', []).directive('slick', [ destroySlick = function () { return $timeout(function () { var slider; - slider = angular.element(element); + slider = $(element); slider.slick('unslick'); slider.find('.slick-list').remove(); return slider; @@ -66,7 +66,7 @@ angular.module('slick', []).directive('slick', [ initializeSlick = function () { return $timeout(function () { var currentIndex, customPaging, slider; - slider = angular.element(element); + slider = $(element); if (scope.currentIndex != null) { currentIndex = scope.currentIndex; } @@ -196,4 +196,4 @@ angular.module('slick', []).directive('slick', [ } }; } -]); \ No newline at end of file +]);