feat(styling): make font-awesome optional via own css classes and mak…

…e button texts customisable

README.md

@@ -12,20 +12,18 @@ Features:
 * Customisable texts (placeholders and selected representation)
 
 
-## Getting Started
-
-### Installation
+## Installation
 
 * Install via Bower (w11k-select) or download manually from our release repository (https://github.com/w11k/w11k-select-bower)
 * Include scripts into your application (w11k-select and dependencies):
-  * jQuery
   * AngularJS
   * bind-once
   * w11k-dropdownToggle
   * w11k-select
+  * font-awesome (optional)
 * Add dependency to w11k-select to your angular module
 
-### Usage
+## Usage
 
     <div w11k-select multiple="options.multiple"
                      disabled="!options.enabled"
@@ -34,10 +32,41 @@ Features:
                      options="option.value as option.label for option in options.data"
                      placeholder="'All'"
                      filter-placeholder="'Filter'"
+                     select-filtered-text="'all'"
+                     deselect-filtered-text="'none'"
                      >
     </div>
 
-Attention: ```placeholder``` and ```filter-placeholder``` are expressions but for a better preformance they are evaluated only once. So you can not change the placeholder and filter-placeholder text dynamically at runtime via data-binding but e.g. you can use expressions like ```'common.filter.placeholder' | translate``` to read the text form a translation file. 
+
+```placeholder```, ```filter-placeholder```, ```select-filtered-text``` and ```deselect-filtered-text``` are optional attributes with default values in English.
+**Attention**: These attributes are expressions but for a better preformance they are evaluated only once. So you can not change the texts dynamically at runtime via data-binding but e.g. you can use expressions like ```'common.filter.placeholder' | translate``` to read the text form a translation file.
+
+### Usage without font-awesome
+
+font-awesome is an optional dependency of w11k-select. w11k-select uses font-awesome classes to show icons. If you don't want to include font-awesome in your project, you can use the following classes to style the icons / define their content. Otherwise they will be empty.
+
+This is a sass example to reproduce the default icons. Notice: You don't need this code if you use font-awesome. The font-awesome classes are already included in the template of the directive.
+
+    .w11k-select .icon-deselect-all {
+      @extend .fa;
+      @extend .fa-times;
+    }
+    .w11k-select .icon-dropdown-open {
+      @extend .fa;
+      @extend .fa-chevron-up;
+    }
+    .w11k-select .icon-dropdown-closed {
+      @extend .fa;
+      @extend .fa-chevron-down;
+    }
+    .w11k-select .icon-select-filtered {
+      @extend .fa;
+      @extend .fa-check-square-o;
+    }
+    .w11k-select .icon-deselect-filtered {
+      @extend .fa;
+      @extend .fa-square-o;
+    }
 
 
 ## Roadmap

bower.json

@@ -5,10 +5,10 @@
   "dependencies": {
     "angular": "1.2.x",
     "w11k-dropdownToggle": "0.1.x",
-    "angular-bindonce": "0.3.x",
-    "font-awesome": "4.0.x"
+    "angular-bindonce": "0.3.x"
   },
   "devDependencies": {
+    "font-awesome": "4.0.x",
     "bootstrap": "3.1.0"
   }
 }

src/w11k-select.js

@@ -160,8 +160,10 @@ angular.module('w11k.select').directive('w11kSelect', [
             header.placeholder = scope.$eval(placeholder);
             updateHeader();
 
-            placeholderAttrObserver();
-            placeholderAttrObserver = null;
+            if (angular.isFunction(placeholderAttrObserver)) {
+              placeholderAttrObserver();
+              placeholderAttrObserver = undefined;
+            }
           }
         });
 
@@ -171,8 +173,38 @@ angular.module('w11k.select').directive('w11kSelect', [
             header.selectedMessage = scope.$eval(selectedMessage);
             updateHeader();
 
-            selectedMessageAttrObserver();
-            selectedMessageAttrObserver = null;
+            if (angular.isFunction(selectedMessageAttrObserver)) {
+              selectedMessageAttrObserver();
+              selectedMessageAttrObserver = undefined;
+            }
+          }
+        });
+
+        // read the select-filtered-text attribute once
+        var selectFilteredTextAttrObserver = attrs.$observe('selectFilteredText', function (selectFilteredText) {
+          if (angular.isDefined(selectFilteredText)) {
+            var text = scope.$eval(selectFilteredText);
+            var span = angular.element(element[0].querySelector('.select-filtered-text'));
+            span.text(text);
+
+            if (angular.isFunction(selectFilteredTextAttrObserver)) {
+              selectFilteredTextAttrObserver();
+              selectFilteredTextAttrObserver = undefined;
+            }
+          }
+        });
+
+        // read the deselect-filtered-text attribute once
+        var deselectFilteredTextAttrObserver = attrs.$observe('deselectFilteredText', function (deselectFilteredText) {
+          if (angular.isDefined(deselectFilteredText)) {
+            var text = scope.$eval(deselectFilteredText);
+            var span = angular.element(element[0].querySelector('.deselect-filtered-text'));
+            span.text(text);
+
+            if (angular.isFunction(deselectFilteredTextAttrObserver)) {
+              deselectFilteredTextAttrObserver();
+              deselectFilteredTextAttrObserver = undefined;
+            }
           }
         });
 
@@ -233,8 +265,10 @@ angular.module('w11k.select').directive('w11kSelect', [
           if (angular.isDefined(filterPlaceholder)) {
             scope.filter.placeholder = scope.$eval(filterPlaceholder);
 
-            filterPlaceholderAttrObserver();
-            filterPlaceholderAttrObserver = null;
+            if (angular.isFunction(filterPlaceholderAttrObserver)) {
+              filterPlaceholderAttrObserver();
+              filterPlaceholderAttrObserver = undefined;
+            }
           }
         });
 

src/w11k-select.tpl.html

@@ -1,13 +1,13 @@
 <div class="dropdown w11k-select">
   <div class="input-group select-toggle" w11k-dropdown-toggle="dropdown" ng-class="{disabled: isDisabled}">
     <div class="input-group-addon deselect-all" ng-if="!isDisabled && !isRequired && !isEmpty()" ng-click="deselectAll($event)">
-      <i class="fa fa-times"></i>
+      <i class="fa fa-times icon-deselect-all"></i>
     </div>
     <div class="form-control" ng-disabled="isDisabled">
       {{header.text}}
     </div>
     <div class="input-group-addon">
-      <i class="fa" ng-class="{ 'fa-chevron-down': !dropdown.isOpen(), 'fa-chevron-up': dropdown.isOpen() }"></i>
+      <i class="fa" ng-class="{ 'fa-chevron-down': !dropdown.isOpen(), 'fa-chevron-up': dropdown.isOpen(), 'icon-dropdown-open': !dropdown.isOpen(), 'icon-dropdown-closed': dropdown.isOpen() }"></i>
     </div>
   </div>
   <div class="dropdown-menu">
@@ -20,16 +20,22 @@
                ng-keypress="onKeyPressedInFilter($event)"
             />
         <a class="input-group-addon clear" ng-click="clearFilter()">
-          <i class="fa fa-times"></i>
+          <i class="fa fa-times icon-clear-filter"></i>
         </a>
       </div>
       <div class="controls" ng-show="isMultiple">
         <div class="row">
           <div class="col-xs-6">
-            <button type="button" class="btn btn-default btn-sm" ng-click="selectFiltered()"><i class="fa fa-check-square-o"></i> all</button>
+            <button type="button" class="btn btn-default btn-sm" ng-click="selectFiltered()">
+              <i class="fa fa-check-square-o icon-select-filtered"></i>
+              <span class="select-filtered-text">all</span>
+            </button>
           </div>
           <div class="col-xs-6">
-            <button type="button" class="btn btn-default btn-sm" ng-click="deselectFiltered()"><i class="fa fa-square-o"></i> none</button>
+            <button type="button" class="btn btn-default btn-sm" ng-click="deselectFiltered()">
+              <i class="fa fa-square-o icon-deselect-filtered"></i>
+              <span class="deselect-filtered-text">none</span>
+            </button>
           </div>
         </div>
       </div>