Merge pull request #96 from machineboy2045/v3.0.0

V3.0.0

Author: machineboy2045

CHANGELOG.md

@@ -0,0 +1,14 @@
+## 3.0.1 (2015-09-07)
+
+Documentation:
+
+  - Added CHANGELOG
+  - Updated README concerning config.options
+
+## 3.0.0 (2015-08-07)
+
+Changes:
+
+  - Dropped support for simple arrays `['Option 1', 'Option 2']` in order to simplify the directive and ensure consistent behavior.
+  - Renamed `'selectize.js'` to `'angular-selectize.js'` to avoid confusion.
+  - update to selectize 0.12.1

README.md

@@ -3,20 +3,22 @@ angular-selectize
 ![selectize5](https://cloud.githubusercontent.com/assets/4087667/5633745/2cfeac18-958f-11e4-9e62-6eba90547b4c.png)
 
 ###Demo
-[Try the Demo on Plunker](http://plnkr.co/edit/X2YYPX?p=preview)
+[Try the Demo on Plunker](http://plnkr.co/edit/nTf19f?p=preview)
 
 ###Features
 This is an Angular.js directive for Brian Reavis's [selectize jQuery plugin](http://brianreavis.github.io/selectize.js/). It supports all of Selectize's features. Here are some highlights:
 
-* Better performance than UI-Select ([ui-select](http://plnkr.co/edit/pSJNHS?p=preview) vs [angular-selectize](http://plnkr.co/edit/xdyzf9?p=preview))
+* Better performance than UI-Select ([ui-select](http://plnkr.co/edit/pSJNHS?p=preview) vs [angular-selectize](http://plnkr.co/edit/23VkhV?p=preview))
 * Selectize is ~7kb (gzipped)
 * Smart Ranking / Multi-Property Searching & Sorting
 * Angular Models & Bindings
 * Skinnable
 * Keyboard support
 
 
-
+## Upgrading to version 3.x.x
+Previous versions supported simple arrays for options `['Option 1', 'Option 2']`. Version 3.0 drops this in order
+to simplify the directive and make it more consistent with the original Selectize.
 
 
 ## Dependencies
@@ -46,21 +48,7 @@ Add the selectize module as a dependency to your application module:
 var myAppModule = angular.module('MyApp', ['selectize']);
 ```
 
-## Basic Usage
-Setup your controller variables:
-
-```javascript
-$scope.myModel;
-$scope.myOptions = ['Spectrometer', 'Star Chart', 'Laser Pointer'];
-```
-
-Add the selectize element to your view template:
-
-```html
-<selectize options='myOptions' ng-model="myModel"></selectize>
-```
-
-## Advanced Usage
+## Usage
 
 ```javascript
 $scope.myModel = 1;
@@ -88,9 +76,10 @@ $scope.myConfig = {
 ```html
 <selectize config='myConfig' options='myOptions' ng-model="myModel"></selectize>
 ```
+##Differences in Angular version
+Please note in the example that, unlike the original Selectize, options should NOT be passed in the config object.
 
-
-##Documentation
+##More Documentation
 - [Selectize config options](https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md)
 - [Selectize API](https://github.com/brianreavis/selectize.js/blob/master/docs/api.md)
 

bower.json

@@ -1,10 +1,10 @@
 {
   "name": "angular-selectize2",
-  "version": "1.2.3",
+  "version": "3.0.1",
   "main" : [
-    "./dist/selectize.js"
+    "./dist/angular-selectize.js"
   ],
   "dependencies": {
-    "selectize": ">=0.9.0"
+    "selectize": ">=0.12.1"
   }
 }

dist/angular-selectize.js

@@ -0,0 +1,106 @@
+/**
+ * Angular Selectize2
+ * https://github.com/machineboy2045/angular-selectize
+ **/
+
+angular.module('selectize', []).value('selectizeConfig', {}).directive("selectize", ['selectizeConfig', function(selectizeConfig) {
+  return {
+    restrict: 'EA',
+    require: '^ngModel',
+    scope: { ngModel: '=', config: '=?', options: '=?', ngDisabled: '=', ngRequired: '&' },
+    link: function(scope, element, attrs, modelCtrl) {
+
+      var selectize,
+          settings = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config);
+
+      scope.options = scope.options || [];
+      scope.config = scope.config || {};
+
+      var isEmpty = function(val) {
+        return val === undefined || val === null || !val.length; //support checking empty arrays
+      };
+
+      var toggle = function(disabled) {
+        disabled ? selectize.disable() : selectize.enable();
+      }
+
+      var validate = function() {
+        var isInvalid = (scope.ngRequired() || attrs.required || settings.required) && isEmpty(scope.ngModel);
+        modelCtrl.$setValidity('required', !isInvalid);
+      };
+
+      var setSelectizeOptions = function(curr, prev) {
+        angular.forEach(prev, function(opt){
+          if(curr.indexOf(opt) === -1){
+            var value = opt[settings.valueField];
+            selectize.removeOption(value, true);
+          }
+        });
+
+        selectize.addOption(curr, true);
+
+        setSelectizeValue();
+      }
+
+      var setSelectizeValue = function() {
+        validate();
+
+        selectize.$control.toggleClass('ng-valid', modelCtrl.$valid);
+        selectize.$control.toggleClass('ng-invalid', modelCtrl.$invalid);
+        selectize.$control.toggleClass('ng-dirty', modelCtrl.$dirty);
+        selectize.$control.toggleClass('ng-pristine', modelCtrl.$pristine);
+
+        if (!angular.equals(selectize.items, scope.ngModel)) {
+          selectize.setValue(scope.ngModel, true);
+        }
+      }
+
+      settings.onChange = function(value) {
+        var value = angular.copy(selectize.items);
+        if (settings.maxItems == 1) {
+          value = value[0]
+        }
+        modelCtrl.$setViewValue( value );
+
+        if (scope.config.onChange) {
+          scope.config.onChange.apply(this, arguments);
+        }
+      };
+
+      settings.onOptionAdd = function(value, data) {
+        if( scope.options.indexOf(data) === -1 ) {
+          scope.options.push(data);
+
+          if (scope.config.onOptionAdd) {
+            scope.config.onOptionAdd.apply(this, arguments);
+          }
+        }
+      };
+
+      settings.onInitialize = function() {
+        selectize = element[0].selectize;
+
+        setSelectizeOptions(scope.options);
+
+        //provides a way to access the selectize element from an
+        //angular controller
+        if (scope.config.onInitialize) {
+          scope.config.onInitialize(selectize);
+        }
+
+        scope.$watchCollection('options', setSelectizeOptions);
+        scope.$watch('ngModel', setSelectizeValue);
+        scope.$watch('ngDisabled', toggle);
+      };
+
+      element.selectize(settings);
+
+      element.on('$destroy', function() {
+        if (selectize) {
+          selectize.destroy();
+          element = null;
+        }
+      });
+    }
+  };
+}]);