From a7fcb48fec997ba30057ed4a409b8ecbdc081957 Mon Sep 17 00:00:00 2001 From: Will Date: Fri, 7 Aug 2015 07:39:35 -0700 Subject: [PATCH 1/5] update to selectize 0.12.1 --- README.md | 4 +- bower.json | 2 +- dist/selectize.js | 107 ++++++++++++++++------------------------------ 3 files changed, 41 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 505cb1f..d3a7d87 100755 --- a/README.md +++ b/README.md @@ -3,12 +3,12 @@ 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 diff --git a/bower.json b/bower.json index b6f81b4..3c9b05d 100755 --- a/bower.json +++ b/bower.json @@ -5,6 +5,6 @@ "./dist/selectize.js" ], "dependencies": { - "selectize": ">=0.9.0" + "selectize": ">=0.12.1" } } diff --git a/dist/selectize.js b/dist/selectize.js index 5696b4c..bb8a45b 100755 --- a/dist/selectize.js +++ b/dist/selectize.js @@ -10,43 +10,39 @@ angular.module('selectize', []).value('selectizeConfig', {}).directive("selectiz 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); + settings = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config); - modelCtrl.$isEmpty = function(val) { - return val === undefined || val === null || !val.length; //override to support checking empty arrays - }; + scope.options = scope.options || []; + scope.config = scope.config || {}; - function createItem(input) { - var data = {}; - data[config.labelField] = input; - data[config.valueField] = input; - return data; - } + var isEmpty = function(val) { + return val === undefined || val === null || !val.length; //support checking empty arrays + }; - function toggle(disabled) { + var toggle = function(disabled) { disabled ? selectize.disable() : selectize.enable(); } var validate = function() { - var isInvalid = (scope.ngRequired() || attrs.required || config.required) && modelCtrl.$isEmpty(scope.ngModel); + var isInvalid = (scope.ngRequired() || attrs.required || settings.required) && isEmpty(scope.ngModel); modelCtrl.$setValidity('required', !isInvalid); }; - function generateOptions(data) { - if (!data) - return []; + var setSelectizeOptions = function(curr, prev) { + angular.forEach(prev, function(opt){ + if(curr.indexOf(opt) === -1){ + var value = opt[settings.valueField]; + selectize.removeOption(value, true); + } + }); - data = angular.isArray(data) || angular.isObject(data) ? data : [data] + selectize.addOption(curr, true); - return $.map(data, function(opt) { - return typeof opt === 'string' ? createItem(opt) : opt; - }); + setSelectizeValue(); } - function updateSelectize() { + var setSelectizeValue = function() { validate(); selectize.$control.toggleClass('ng-valid', modelCtrl.$valid); @@ -55,76 +51,49 @@ angular.module('selectize', []).value('selectizeConfig', {}).directive("selectiz selectize.$control.toggleClass('ng-pristine', modelCtrl.$pristine); if (!angular.equals(selectize.items, scope.ngModel)) { - selectize.addOption(generateOptions(scope.ngModel)); - selectize.setValue(scope.ngModel); + selectize.setValue(scope.ngModel, true); } } - var onChange = config.onChange, - onOptionAdd = config.onOptionAdd; - - config.onChange = function() { - if(scope.disableOnChange) - return; - - if (!angular.equals(selectize.items, scope.ngModel)) - scope.$evalAsync(function() { - var value = angular.copy(selectize.items); - if (config.maxItems == 1) { - value = value[0] - } - modelCtrl.$setViewValue( value ); - }); + settings.onChange = function(value) { + var value = angular.copy(selectize.items); + if (settings.maxItems == 1) { + value = value[0] + } + modelCtrl.$setViewValue( value ); - if (onChange) { - onChange.apply(this, arguments); + if (scope.config.onChange) { + scope.config.onChange.apply(this, arguments); } }; - config.onOptionAdd = function(value, data) { + settings.onOptionAdd = function(value, data) { if( scope.options.indexOf(data) === -1 ) { scope.options.push(data); - if (onOptionAdd) { - onOptionAdd.apply(this, arguments); + if (scope.config.onOptionAdd) { + scope.config.onOptionAdd.apply(this, arguments); } } }; - if(scope.options){ - // replace scope options with generated options while retaining a reference to the same array - scope.options.splice(0, scope.options.length, generateOptions(scope.options) ); - }else{ - // default options = [ngModel] if no options specified - scope.options = generateOptions( angular.copy(scope.ngModel) ); - } - - var angularCallback = config.onInitialize; - - config.onInitialize = function() { + settings.onInitialize = function() { selectize = element[0].selectize; - selectize.addOption(scope.options); - selectize.setValue(scope.ngModel); + + setSelectizeOptions(scope.options, []); //provides a way to access the selectize element from an //angular controller - if (angularCallback) { - angularCallback(selectize); + if (scope.config.onInitialize) { + scope.config.onInitialize(selectize); } - scope.$watch('options', function() { - scope.disableOnChange = true; - selectize.clearOptions(); - selectize.addOption(scope.options); - selectize.setValue(scope.ngModel); - scope.disableOnChange = false; - }, true); - - scope.$watchCollection('ngModel', updateSelectize); + scope.$watchCollection('options', setSelectizeOptions); + scope.$watch('ngModel', setSelectizeValue); scope.$watch('ngDisabled', toggle); }; - element.selectize(config); + element.selectize(settings); element.on('$destroy', function() { if (selectize) { From 62648c483985403034408bcd3019f6e4ebf02c62 Mon Sep 17 00:00:00 2001 From: Will Date: Fri, 7 Aug 2015 07:57:50 -0700 Subject: [PATCH 2/5] update readme - remove support for arrays of strings --- README.md | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/README.md b/README.md index d3a7d87..2ae276a 100755 --- a/README.md +++ b/README.md @@ -46,21 +46,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 - -``` - -## Advanced Usage +## Usage ```javascript $scope.myModel = 1; From df5376b1d9d699fc35afdf56a86f23908f4a0f54 Mon Sep 17 00:00:00 2001 From: Will Date: Mon, 7 Sep 2015 08:20:50 -0700 Subject: [PATCH 3/5] cleanup --- dist/selectize.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/selectize.js b/dist/selectize.js index bb8a45b..df0b3c0 100755 --- a/dist/selectize.js +++ b/dist/selectize.js @@ -80,7 +80,7 @@ angular.module('selectize', []).value('selectizeConfig', {}).directive("selectiz settings.onInitialize = function() { selectize = element[0].selectize; - setSelectizeOptions(scope.options, []); + setSelectizeOptions(scope.options); //provides a way to access the selectize element from an //angular controller From 7c2cfae808fa1ad843d9dc6e26befdb5c65817f0 Mon Sep 17 00:00:00 2001 From: Will Date: Mon, 7 Sep 2015 08:21:43 -0700 Subject: [PATCH 4/5] rename to angular-selectize.js --- dist/{selectize.js => angular-selectize.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename dist/{selectize.js => angular-selectize.js} (100%) diff --git a/dist/selectize.js b/dist/angular-selectize.js similarity index 100% rename from dist/selectize.js rename to dist/angular-selectize.js From 6bf238b32f11e33de995c7f5da9e498ae278e4a4 Mon Sep 17 00:00:00 2001 From: Will Date: Mon, 7 Sep 2015 08:49:45 -0700 Subject: [PATCH 5/5] update documentation --- CHANGELOG.md | 14 ++++++++++++++ README.md | 9 ++++++--- bower.json | 4 ++-- 3 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..998b1c7 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/README.md b/README.md index 2ae276a..d9e7d88 100755 --- a/README.md +++ b/README.md @@ -16,7 +16,9 @@ This is an Angular.js directive for Brian Reavis's [selectize jQuery plugin](htt * 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 @@ -74,9 +76,10 @@ $scope.myConfig = { ```html ``` +##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) diff --git a/bower.json b/bower.json index 3c9b05d..6b0f6fd 100755 --- a/bower.json +++ b/bower.json @@ -1,8 +1,8 @@ { "name": "angular-selectize2", - "version": "1.2.3", + "version": "3.0.1", "main" : [ - "./dist/selectize.js" + "./dist/angular-selectize.js" ], "dependencies": { "selectize": ">=0.12.1"