refactor. support arrays of strings again

machineboy2045 · Dec 20, 2014 · b963a1f · b963a1f
1 parent 8c2c0d9
commit b963a1f
Showing 1 changed file with 66 additions and 119 deletions.
diff --git a/dist/selectize.js b/dist/selectize.js
@@ -6,149 +6,96 @@
 angular.module('selectize', []).value('selectizeConfig', {}).directive("selectize", ['selectizeConfig', function(selectizeConfig) {
   return {
     restrict: 'EA',
-    require: '^ngModel',
-    scope: {ngModel: '=', config: '=selectize', options: '=', ngDisabled: '='},
+    require: 'ngModel',
+    scope: {ngModel: '=', config: '=selectize', options: '=?', ngDisabled: '='},
     link: function(scope, element, attrs, modelCtrl) {
-      var config = angular.copy(selectizeConfig);
-      var selectize;
-
-      config.options = scope.options || [];
-
-      if (typeof scope.config !== 'undefined') {
-        config = angular.extend(config, scope.config);
-      }
 
-      config.maxItems = config.maxItems || null; //default to tag editor
-
-      function addAngularOption(value, data) {
-        scope.$evalAsync(function(){
-          if(selectize.currentResults && (scope.options.length < selectize.currentResults.total)){
-            scope.options.push(data);
-          }
-        });
-
+      Selectize.defaults.maxItems = null; //default to tag editor
+      
+      var selectize,
+          config = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config);
+
+
+      //override to support checking empty arrays
+      modelCtrl.$isEmpty = function(val){
+        return (!val || !val.length);
       }
 
+
       function createItem(input) {
         var data = {};
-        data[selectize.settings.labelField] = input;
-        data[selectize.settings.valueField] = input;
-        data[selectize.settings.searchField] = input;
-        data[selectize.settings.sortField] = input;
+        data[config.labelField] = input;
+        data[config.valueField] = input;
+        data[config.searchField] = input;
+        data[config.sortField] = input;
         return data;
       }
 
       function toggle(disabled){
         disabled ? selectize.disable() : selectize.enable();
       }
-
-      function setDirty(){
-        modelCtrl.$setViewValue(angular.copy(modelCtrl.$modelValue));
+
+      modelCtrl.$validators.required = function(modelValue, viewValue) {
+        if(!config.required)
+          return true;
+
+        if (modelCtrl.$isEmpty(modelValue)) {
+          selectize.$control.toggleClass('ng-invalid', true)
+          return false;
+        }else{
+          selectize.$control.toggleClass('ng-invalid', false)
+          return true
+        }
+      };
+
+      config.onChange = function(){
+        if(!angular.equals(selectize.items, scope.ngModel))
+          modelCtrl.$setViewValue( angular.copy(selectize.items) );
       }
-
-      function updateClasses(){
-        selectize.$control.toggleClass('ng-invalid', modelCtrl.$invalid)
+
+      config.onOptionAdd = function(value, data) {
+        if( scope.options.indexOf(data) === -1 )
+          scope.options.push(data);
       }
 
-      function updateValidity(){
-        modelCtrl.$setValidity('required', !config.required || scope.ngModel.length !== 0 ? true : false)
-        updateClasses();
+      function updateSelectizeOptions(){
+        selectize.addOption(scope.options)
       }
 
-      function getValue(){
-        if(selectize.settings.maxItems === 1)
-          return selectize.items.join(selectize.settings.delimiter);
-        else
-          return selectize.items;
+      function updateSelectizeValue(){
+        if(!angular.equals(selectize.items, scope.ngModel))
+          selectize.setValue(scope.ngModel);
       }
-
-      function updateAngularValue(val){
-        if(val ===  scope.ngModel)
-          return false;
+
+
+      scope.options = scope.options || config.options || scope.ngModel || [];
+
+
+      scope.options = $.map(scope.options, function(opt){
+        if(typeof opt === 'string')
+          return createItem(opt)
         else
-          setDirty();
-
-
-        scope.$evalAsync(function(){
-          scope.ngModel = getValue();
-          updateValidity();
-        });
-      }
-
-      function updateSelectizeOptions(value, prev){
-        if( value === prev ) return;
-
-        var needOptionRefresh = false;
-
-        value = angular.isArray(value) ? value : [value]
-
-        angular.forEach(value, function(item){
-          var value = item[selectize.settings.valueField];
-          if(!selectize.options[value]){
-            selectize.addOption(item);
-            needOptionRefresh = true;
-          }
-        });
-
-        if(needOptionRefresh)
-          updateSelectizeValue(scope.ngModel); //allow the model value to be set before the options are loaded
-      }
-
-      function updateSelectizeValue(value, prev){
-        var needOptionRefresh = false;
-
-
-        if(value === prev) return;
-
-        selectize.clear();
-
-
-        if(!value || !value.length)
-          return updateValidity();
-
-
-        value = angular.isArray(value) ? value : [value]
-
-
-        angular.forEach(value, function(val){
-
-          if(selectize.settings.create){
-            var item = createItem(val)
-            if(!selectize.options[val]){
-              selectize.addOption(item);
-              needOptionRefresh = true;
-            }
-          }
-
-
-          selectize.addItem(val);
-        });
-
-        if(needOptionRefresh)
-          selectize.refreshOptions(false);
-
-        updateValidity();
-
+          return opt
+      })
+
+      config.onInitialize = function(){
+        selectize = element[0].selectize;
+
+        selectize.addOption(scope.options)
+        selectize.setValue(scope.ngModel)
+
+        scope.$watchCollection('options', updateSelectizeOptions);
+        scope.$watch('ngModel', updateSelectizeValue, true);
+        scope.$watch('ngDisabled', toggle)
       }
 
       element.selectize(config);
-      selectize = element[0].selectize;
-
-      selectize.on('option_add', addAngularOption);
-      selectize.on('change', updateAngularValue);
 
-      //initialize with ngModel
-      updateSelectizeValue(scope.ngModel);
-
-      scope.$watchCollection('options', updateSelectizeOptions);
-      scope.$watch('ngModel', updateSelectizeValue, true);
-      scope.$watch('ngDisabled', toggle);
-
       element.on('$destroy', function() {
-          if (selectize) {
-              selectize.destroy();
-              element = null;
-          }
+        if (selectize) {
+            selectize.destroy();
+            element = null;
+        }
       });