From b871af331acc1678c06e6f1476f18a086fe63655 Mon Sep 17 00:00:00 2001 From: Dimitris Date: Fri, 20 Jun 2014 18:51:19 +0300 Subject: [PATCH 1/4] Added the option to dock the carousel indicators to a specific elelment. --- dist/angular-carousel.css | 4 ++-- dist/angular-carousel.js | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/dist/angular-carousel.css b/dist/angular-carousel.css index d8c85fb..eb82fad 100755 --- a/dist/angular-carousel.css +++ b/dist/angular-carousel.css @@ -41,8 +41,8 @@ text-align: center; height: 20px; background-color: black; - background-color: rgba(0, 0, 0, 0.6); - position: relative; + background-color: rgba(0, 0, 0, 0.3); + position: absolute; bottom: 0; cursor: pointer; } .rn-carousel-indicator span { diff --git a/dist/angular-carousel.js b/dist/angular-carousel.js index 5a59673..7a423f1 100755 --- a/dist/angular-carousel.js +++ b/dist/angular-carousel.js @@ -134,7 +134,8 @@ angular.module('angular-carousel') slidesCount = 0, swipeMoved = false, // javascript based animation easing - timestamp; + timestamp, + indicator; // add a wrapper div that will hide the overflow var carousel = iElement.wrap(""), @@ -154,10 +155,21 @@ angular.module('angular-carousel') // enable carousel indicator if (angular.isDefined(iAttributes.rnCarouselIndicator)) { - var indicator = $compile("")(scope); - container.append(indicator); + indicator = $compile("")(scope); + indicator.appendTo(container); } + // check if the indicator should be docked to a specific element + iAttributes.$observe('dockIn', function(value) { + //console.log('dockIn=', value); + // check if target dock element actually exists + if(angular.element('#' + value).length) { + // move the indicator to the dock element + var dock = angular.element('#' + value); + indicator.appendTo(dock); + } + }); + // enable carousel controls if (angular.isDefined(iAttributes.rnCarouselControl)) { var controls = $compile("")(scope); From 8d432fd4239c0d466af3724dcb0bbb8dda1e753f Mon Sep 17 00:00:00 2001 From: Dimitris Date: Fri, 20 Jun 2014 18:54:08 +0300 Subject: [PATCH 2/4] Reverted a change in the CSS to make sure the carousel works as originally intended if there is no dock attribute set. --- dist/angular-carousel.css | 2 +- dist/angular-carousel.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/dist/angular-carousel.css b/dist/angular-carousel.css index eb82fad..7e4a324 100755 --- a/dist/angular-carousel.css +++ b/dist/angular-carousel.css @@ -42,7 +42,7 @@ height: 20px; background-color: black; background-color: rgba(0, 0, 0, 0.3); - position: absolute; + position: relative; bottom: 0; cursor: pointer; } .rn-carousel-indicator span { diff --git a/dist/angular-carousel.js b/dist/angular-carousel.js index 7a423f1..622691a 100755 --- a/dist/angular-carousel.js +++ b/dist/angular-carousel.js @@ -166,6 +166,7 @@ angular.module('angular-carousel') if(angular.element('#' + value).length) { // move the indicator to the dock element var dock = angular.element('#' + value); + indicator.css('position', 'absolute'); indicator.appendTo(dock); } }); From ec4cb427640cc44728e1b7a0230a27ab2845aa9b Mon Sep 17 00:00:00 2001 From: Dimitris Date: Fri, 20 Jun 2014 19:12:33 +0300 Subject: [PATCH 3/4] Added indicator autohide option. Changed the attribute names to adhere to the original ones better. --- README.md | 4 +++- dist/angular-carousel.js | 12 ++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5acba04..ad3a8dc 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,9 @@ angular.module('MyApp', ['angular-carousel']); - `rn-carousel-buffered` boolean value to enable the carousel buffering, good to minimize the DOM, defaults to 5 slides. (works only with arrays) - `rn-carousel-swipe` boolean value to enable/disable swiping (default true) - `rn-carousel-control` boolean value to enable builtin prev/next buttons (you can override by CSS) - + - `rn-carousel-indicator-dock='#elementID'` (optional) choose to dock the carousel indicators to an element with the specified ID + - `rn-carousel-indicator-autohide` (optional) add this attribute to hide the carousel indicators if there are less than 2 elements to show + ## Todo : - see the [TODO file](./TODO) diff --git a/dist/angular-carousel.js b/dist/angular-carousel.js index 622691a..9110ba9 100755 --- a/dist/angular-carousel.js +++ b/dist/angular-carousel.js @@ -160,8 +160,7 @@ angular.module('angular-carousel') } // check if the indicator should be docked to a specific element - iAttributes.$observe('dockIn', function(value) { - //console.log('dockIn=', value); + iAttributes.$observe('rnCarouselIndicatorDock', function(value) { // check if target dock element actually exists if(angular.element('#' + value).length) { // move the indicator to the dock element @@ -171,6 +170,15 @@ angular.module('angular-carousel') } }); + // check for the indicator-autohide attribute, which + // hides the indicators if there is no need for them + // i.e. if there are less than 2 elements to show + iAttributes.$observe('rnCarouselIndicatorAutohide', function(value) { + if(slidesCount < 2) { + indicator.remove(); + } + }); + // enable carousel controls if (angular.isDefined(iAttributes.rnCarouselControl)) { var controls = $compile("")(scope); From 465a2a246381029f50734d309a4beb54b773a258 Mon Sep 17 00:00:00 2001 From: Dimitris Date: Fri, 20 Jun 2014 20:03:12 +0300 Subject: [PATCH 4/4] Improved readme file to clarify new additions. --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ad3a8dc..25f4ece 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,10 @@ angular.module('MyApp', ['angular-carousel']); - `rn-carousel-buffered` boolean value to enable the carousel buffering, good to minimize the DOM, defaults to 5 slides. (works only with arrays) - `rn-carousel-swipe` boolean value to enable/disable swiping (default true) - `rn-carousel-control` boolean value to enable builtin prev/next buttons (you can override by CSS) - - `rn-carousel-indicator-dock='#elementID'` (optional) choose to dock the carousel indicators to an element with the specified ID - - `rn-carousel-indicator-autohide` (optional) add this attribute to hide the carousel indicators if there are less than 2 elements to show + +### Additional Options: + - `rn-carousel-indicator-dock="#elementID"` Add this attribute to dock the carousel indicators to an element with the specified ID, useful when the carousel is inside a container with "overflow: hidden". + - `rn-carousel-indicator-autohide` Add this attribute to hide the carousel indicators if there are less than 2 elements to show. ## Todo : - see the [TODO file](./TODO)