feat(config): add a 'scrollableTabsetConfig' to ease the directive configuration

Author: tinesoft

README.md

@@ -3,32 +3,74 @@ angular-ui-tab-scroll
 
 A scrollable tab plugin compatible with angular-ui bootstrap tabs.
 
-Dependencies
-============
+# Dependencies
+
 * Bootstrap CSS
 * jQuery
 * AngularJS
 * angular-ui-bootstrap
 
-Usage
-=====
+# Usage
 
 * Include `angular-ui-tab-scroll.js` and `angular-ui-tab-scroll.css` in your page.
 * Add `ui.tab.scroll` to your angular module dependencies.
 * Wrap your `<tabset>` inside of `<scrollable-tabset>`, like so:
 
 ```html
-<scrollable-tabset show-tooltips="true" watch-expression="tabs">
-  <tabset>
-    <tab ng-repeat="x in tabs">...</tab>
-  </tabset>
+<scrollable-tabset show-tooltips="true">
+	<tabset>
+		<tab ng-repeat="x in tabs">...</tab>
+	</tabset>
 </scrollable-tabset>
 ```
-Options
-=======
+
+# Options
+
 * `show-tooltips` - whether or not to show the side-tooltips
 * `tooltip-left` - which tooltip direction to use for the left tooltip (bottom, top, left, right) - defaults to bottom
 * `tooltip-right` - which tooltip direction to use for the right tooltip (bottom, top, left, right) - defaults to bottom
 * `tooltip-text-selector` - the selector for your tooltips, defaults to `*:not(:has("*:not(span)"))`
 * `scroll-left-icon` - the CSS class(es) to customize the left navigation button icon, defaults to `glyphicon glyphicon-chevron-left`
 * `scroll-right-icon` - the CSS class(es) to customize the right navigation button icon, defaults to `glyphicon glyphicon-chevron-right`
+
+
+These options can directly be set on each directive as **DOM attributes**. 
+
+
+Example:
+
+```
+<scrollable-tabset show-tooltips="true" 
+	tooltip-left="right"
+	tooltip-right="left"
+	scroll-left-icon="glyphicon glyphicon-chevron-left" 
+	scroll-right-icon="glyphicon glyphicon-chevron-right">
+	<tabset>
+		<tab ng-repeat="x in tabs">...</tab>
+	</tabset>
+</scrollable-tabset>
+```
+
+Or, they can be configured globally for all your `scrollable-tabset` directives, by using the **scrollableTabsetConfigProvider**, in the `config` section of your app.
+
+Example:
+
+```
+angular.module('yourApp', [])
+	.config(['scrollableTabsetConfigProvider', function(scrollableTabsetConfigProvider){
+
+		scrollableTabsetConfigProvider.setShowTooltips(false);
+		scrollableTabsetConfigProvider.setScrollLeftIcon('glyphicon glyphicon-chevron-left');
+		scrollableTabsetConfigProvider.setScrollRightIcon('glyphicon glyphicon-chevron-right');
+		//...set other properties here
+
+	}]);
+```
+Here is a working plunker : http://plnkr.co/edit/BheQyO7W9qXS0F6vZTlg?p=preview
+
+This way, you can keep the directive usage simple in all your html templates!
+
+
+> **Important Note:** When an option is both defined at directive level and at config level,  the value specified in the DOM **takes precedence over the one from the config**!.
+
+

angular-ui-tab-scroll.js

@@ -1,7 +1,59 @@
 angular.module('ui.tab.scroll', [])
+.provider('scrollableTabsetConfig', function(){
+
+    //the default options
+    var defaultConfig = {
+      showTooltips: true,
+
+      tooltipLeft: 'bottom',
+      tooltipRight: 'bottom',
+
+      //select the innermost child that isn't a span
+      //this way we cover getting <tab-heading> and <tab heading=''>
+      //but leave other markup out of it, unless it's a span (commonly an icon)
+      tooltipTextSelector: '*:not(:has("*:not(span)"))',
+
+      scrollLeftIcon: 'glyphicon glyphicon-chevron-left',
+      scrollRightIcon: 'glyphicon glyphicon-chevron-right'
+    };
+
+    var config = angular.extend({}, defaultConfig);
+
+    return {
+      setShowTooltips : function(value){
+        config.showTooltips = value;
+      },
+      setTooltipLeft : function(value){
+        config.tooltipLeft = value;
+      },
+      setTooltipRight : function(value){
+        config.tooltipRight = value;
+      },
+      setTooltipTextSelector : function(value){
+        config.tooltipTextSelector = value;
+      },
+      setScrollLeftIcon : function(value){
+        config.scrollLeftIcon = value;
+      },
+      setScrollRightIcon : function(value){
+        config.scrollRightIcon = value;
+      },
+      $get: function(){
+        return {
+                  showTooltips: config.showTooltips,
+                  tooltipLeft: config.tooltipLeft,
+                  tooltipRight: config.tooltipRight,
+                  tooltipTextSelector: config.tooltipTextSelector,
+                  scrollLeftIcon: config.scrollLeftIcon,
+                  scrollRightIcon: config.scrollRightIcon
+                };
+      }
+    };
+  }
+)
 .directive('scrollableTabset', [
-  '$window', '$interval', '$timeout',
-  function($window, $interval, $timeout) {
+  'scrollableTabsetConfig', '$window', '$interval', '$timeout',
+  function(scrollableTabsetConfig, $window, $interval, $timeout) {
 
     var timeoutId = null;
 
@@ -75,6 +127,8 @@ angular.module('ui.tab.scroll', [])
         $scope.toTheLeftHTML = '';
         $scope.toTheRightHTML = '';
 
+        var showTooltips = angular.isDefined($scope.showTooltips)? $scope.showTooltips : scrollableTabsetConfig.showTooltips;
+
         $scope.disableLeft = function() {
           return !$scope.toTheLeftHTML;
         };
@@ -84,36 +138,32 @@ angular.module('ui.tab.scroll', [])
         };
 
         $scope.tooltipLeftContent = function() {
-          return $scope.showTooltips ? $scope.toTheLeftHTML : '';
+          return showTooltips ? $scope.toTheLeftHTML : '';
         };
 
         $scope.tooltipRightContent = function() {
-          return $scope.showTooltips ? $scope.toTheRightHTML : '';
+          return showTooltips ? $scope.toTheRightHTML : '';
         };
 
         $scope.tooltipLeftDirection = function() {
-          return $scope.tooltipLeft ? $scope.tooltipLeft : 'bottom';
+          return $scope.tooltipLeft ? $scope.tooltipLeft : scrollableTabsetConfig.tooltipLeft;
         };
 
         $scope.tooltipRightDirection = function() {
-          return $scope.tooltipRight ? $scope.tooltipRight : 'bottom';
+          return $scope.tooltipRight ? $scope.tooltipRight : scrollableTabsetConfig.tooltipRight;
         };
 
         $scope.scrollLeftIconClass = function() {
-          return $scope.scrollLeftIcon ? $scope.scrollLeftIcon : 'glyphicon glyphicon-chevron-left';
+          return $scope.scrollLeftIcon ? $scope.scrollLeftIcon : scrollableTabsetConfig.scrollLeftIcon;
         };
 
         $scope.scrollRightIconClass = function() {
-          return $scope.scrollRightIcon ? $scope.scrollRightIcon : 'glyphicon glyphicon-chevron-right';
+          return $scope.scrollRightIcon ? $scope.scrollRightIcon : scrollableTabsetConfig.scrollRightIcon;
         };
 
-        //select the innermost child that isn't a span
-        //this way we cover getting <tab-heading> and <tab heading=''>
-        //but leave other markup out of it, unless it's a span (commonly an icon)
-        var selector = '*:not(:has("*:not(span)"))';
 
         $scope.getSelector = function() {
-          return $scope.tooltipTextSelector ? $scope.tooltipTextSelector : selector;
+          return $scope.tooltipTextSelector ? $scope.tooltipTextSelector : scrollableTabsetConfig.tooltipTextSelector;
         };
 
         $scope.toTheLeft = function() {