From a1250028e5aa0f1e9a7a9f3f202385f91e5b999b Mon Sep 17 00:00:00 2001 From: Karanvir Kang Date: Tue, 28 Jul 2015 14:55:58 -0400 Subject: [PATCH] Fixing JsHint errors and trigger for OnChange event Fixing the detection logic for OnChange and UpdateSelectize for single and multi item scenarios. Fixing JsHint errors. Throw error if Selectize library is not loaded before our angular module. --- dist/selectize.js | 241 ++++++++++++++++++++++++---------------------- 1 file changed, 125 insertions(+), 116 deletions(-) diff --git a/dist/selectize.js b/dist/selectize.js index 22bbd59..9c420f0 100755 --- a/dist/selectize.js +++ b/dist/selectize.js @@ -3,126 +3,135 @@ * 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) { - - Selectize.defaults.maxItems = null; //default to tag editor - - var selectize, - config = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config); - - modelCtrl.$isEmpty = function(val){ - return (val === undefined || val === null || !val.length); //override to support checking empty arrays - } - - function createItem(input) { - var data = {}; - data[config.labelField] = input; - data[config.valueField] = input; - return data; - } - - function toggle(disabled){ - disabled ? selectize.disable() : selectize.enable(); - } - - var validate = function() { - var isInvalid = (scope.ngRequired() || attrs.required || config.required) && modelCtrl.$isEmpty(scope.ngModel); - modelCtrl.$setValidity('required', !isInvalid) - }; - - function generateOptions(data){ - if(!data) - return []; - - data = angular.isArray(data) ? data : [data] - - return $.map(data, function(opt){ - return typeof opt === 'string' ? createItem(opt) : opt; - }); - } - - function updateSelectize(){ - 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.addOption(generateOptions(scope.ngModel)) - selectize.setValue(scope.ngModel) - } - } - - var onChange = config.onChange, - onOptionAdd = config.onOptionAdd; - - config.onChange = function(){ - if( !angular.equals(selectize.items, scope.ngModel) ) - scope.$evalAsync(function(){ - var value = selectize.items.slice(); - if (config.maxItems == 1) { - value = value[0] +/*global $: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) { + if (!Selectize) { + throw new Error("Selectize JavaScript library should be loaded before using this angular module."); } - modelCtrl.$setViewValue( value ); - }); - if (onChange) { - onChange.apply(this, arguments); - } - } + Selectize.defaults.maxItems = null; //default to tag editor - config.onOptionAdd = function(value, data) { - if( scope.options.indexOf(data) === -1 ) - scope.options.push(data); + var selectize, + config = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config); - if (onOptionAdd) { - onOptionAdd.apply(this, arguments); - } - } - - // ngModel (ie selected items) is included in this because if no options are specified, we - // need to create the corresponding options for the items to be visible - scope.options = generateOptions( (scope.options || config.options || scope.ngModel).slice() ); - - var angularCallback = config.onInitialize; - - config.onInitialize = function(){ - selectize = element[0].selectize; - selectize.addOption(scope.options) - selectize.setValue(scope.ngModel) - - //provides a way to access the selectize element from an - //angular controller - if(angularCallback){ - angularCallback(selectize); - } + modelCtrl.$isEmpty = function (val) { + return (val === undefined || val === null || !val.length); //override to support checking empty arrays + }; - scope.$watch('options', function(){ - selectize.clearOptions(); - selectize.addOption(scope.options) - selectize.setValue(scope.ngModel) - }, true); - - scope.$watchCollection('ngModel', updateSelectize); - scope.$watch('ngDisabled', toggle); - } - - element.selectize(config); - - element.on('$destroy', function() { - if (selectize) { - selectize.destroy(); - element = null; - } - }); + function createItem(input) { + var data = {}; + data[config.labelField] = input; + data[config.valueField] = input; + return data; + } + + function toggle(disabled) { + disabled ? selectize.disable() : selectize.enable(); + } - } - }; + var validate = function () { + var isInvalid = (scope.ngRequired() || attrs.required || config.required) && modelCtrl.$isEmpty(scope.ngModel); + modelCtrl.$setValidity('required', !isInvalid); + }; + + function generateOptions(data) { + if (!data) + return []; + + data = angular.isArray(data) ? data : [data]; + + return $.map(data, function (opt) { + return typeof opt === 'string' ? createItem(opt) : opt; + }); + } + + function updateSelectize() { + 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); + + var value = selectize.items.slice(); + if (config.maxItems === 1) { + value = value[0]; + } + if (!angular.equals(value, scope.ngModel)) { + selectize.addOption(generateOptions(scope.ngModel)); + selectize.setValue(scope.ngModel); + } + } + + var onChange = config.onChange, + onOptionAdd = config.onOptionAdd; + + config.onChange = function () { + var args = arguments; + scope.$evalAsync(function () { + var value = selectize.items.slice(); + if (config.maxItems === 1) { + value = value[0]; + } + if (!angular.equals(value, scope.ngModel)) { + modelCtrl.$setViewValue(value); + if (onChange) { + onChange.apply(this, args); + } + } + }); + }; + + config.onOptionAdd = function (value, data) { + if (scope.options.indexOf(data) === -1) + scope.options.push(data); + + if (onOptionAdd) { + onOptionAdd.apply(this, arguments); + } + }; + + // ngModel (ie selected items) is included in this because if no options are specified, we + // need to create the corresponding options for the items to be visible + scope.options = generateOptions((scope.options || config.options || scope.ngModel).slice()); + + var angularCallback = config.onInitialize; + + config.onInitialize = function () { + selectize = element[0].selectize; + selectize.addOption(scope.options); + selectize.setValue(scope.ngModel); + + //provides a way to access the selectize element from an + //angular controller + if (angularCallback) { + angularCallback(selectize); + } + + scope.$watch('options', function () { + selectize.clearOptions(); + selectize.addOption(scope.options); + selectize.setValue(scope.ngModel); + }, true); + + scope.$watchCollection('ngModel', updateSelectize); + scope.$watch('ngDisabled', toggle); + }; + + element.selectize(config); + + element.on('$destroy', function () { + if (selectize) { + selectize.destroy(); + element = null; + } + }); + } + }; }]);