@kamranbaylarov/one-select 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # 🎯 OneSelect - jQuery Multi-Select Dropdown Component
2
2
 
3
+ **Version:** 1.2.0 | **Author:** Kamran Baylarov
4
+
3
5
  A powerful, flexible, and feature-rich multi-select dropdown component for jQuery.
4
6
 
5
7
  ## 📋 Table of Contents
@@ -77,15 +79,35 @@ OneSelect is a powerful **jQuery-based** plugin that provides multi-select funct
77
79
 
78
80
  ## 📦 Installation
79
81
 
80
- ### 1. Dependencies
82
+ ### Via NPM (Recommended)
83
+
84
+ ```bash
85
+ npm install @kamranbaylarov/one-select
86
+ ```
87
+
88
+ ### Manual Download
89
+
90
+ Download from [GitHub Releases](https://github.com/KamranBeylarov/one-select/releases)
91
+
92
+ ### Dependencies
81
93
 
82
94
  ```html
83
95
  <!-- jQuery must be included first -->
84
96
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
85
97
  ```
86
98
 
87
- ### 2. Include Files
99
+ ### Include Files
88
100
 
101
+ **NPM:**
102
+ ```html
103
+ <!-- CSS -->
104
+ <link rel="stylesheet" href="/node_modules/@kamranbaylarov/one-select/css/one-select.min.css">
105
+
106
+ <!-- JavaScript -->
107
+ <script src="/node_modules/@kamranbaylarov/one-select/js/one-select.min.js"></script>
108
+ ```
109
+
110
+ **Manual:**
89
111
  ```html
90
112
  <!-- CSS -->
91
113
  <link rel="stylesheet" href="/path/to/one-select.min.css">
@@ -94,13 +116,13 @@ OneSelect is a powerful **jQuery-based** plugin that provides multi-select funct
94
116
  <script src="/path/to/one-select.js"></script>
95
117
  ```
96
118
 
97
- ### 3. Create HTML Element
119
+ ### Create HTML Element
98
120
 
99
121
  ```html
100
122
  <div id="mySelect"></div>
101
123
  ```
102
124
 
103
- ### 4. Initialize
125
+ ### Initialize
104
126
 
105
127
  ```javascript
106
128
  $('#mySelect').oneSelect({
@@ -118,11 +140,8 @@ $('#mySelect').oneSelect({
118
140
  | `selectAllText` | String | `'Select All'` | "Select All" button text |
119
141
  | `okText` | String | `'OK'` | OK button text |
120
142
  | `cancelText` | String | `'Cancel'` | Cancel button text |
121
- | `data` | Array | `[]` | Options list (string or object array) |
122
- | `selectedValues` | Array | `[]` | Initially selected values |
123
- | `value` | String/Array/null | `null` | Single or array value - pre-selects items |
124
- | `valueField` | String | `'value'` | Value field name in object array |
125
- | `labelField` | String | `'label'` | Label field name in object array |
143
+ | `data` | Array | `[]` | Options list (string array only) |
144
+ | `value` | Number/Array/null | `null` | Single index or array of indices to pre-select |
126
145
  | `showCheckbox` | Boolean | `true` | Show/hide checkboxes |
127
146
  | `showBadges` | Boolean | `false` | Show badges in trigger |
128
147
  | `showBadgesExternal` | String/null | `null` | External element ID (for badges) |
@@ -160,10 +179,7 @@ All parameters can be set via HTML data attributes. Data attributes **override J
160
179
  | `data-ones-ok-text` | `okText` | String | `data-ones-ok-text="Confirm"` |
161
180
  | `data-ones-cancel-text` | `cancelText` | String | `data-ones-cancel-text="Cancel"` |
162
181
  | `data-ones-data` | `data` | Array | `data-ones-data='["A","B","C"]'` |
163
- | `data-ones-selected` | `selectedValues` | Array | `data-ones-selected='["A","C"]'` |
164
- | `data-ones-value` | `value` | String/Array | `data-ones-value='"A"'` or `data-ones-value='["A","C"]'` |
165
- | `data-ones-value-field` | `valueField` | String | `data-ones-value-field="id"` |
166
- | `data-ones-label-field` | `labelField` | String | `data-ones-label-field="name"` |
182
+ | `data-ones-value` | `value` | Number/Array | `data-ones-value='"0"'` or `data-ones-value='["0","2"]'` |
167
183
  | `data-ones-name` | `name` | String | `data-ones-name="items"` |
168
184
  | `data-ones-multiple` | `multiple` | Boolean | `data-ones-multiple="true"` |
169
185
  | `data-ones-show-checkbox` | `showCheckbox` | Boolean | `data-ones-show-checkbox="false"` |
@@ -320,45 +336,70 @@ $('#mySelect').oneSelect({
320
336
  });
321
337
  ```
322
338
 
323
- ### 2. Object Array
339
+ ### 2. How It Works
340
+
341
+ **Data Format:** String array only
342
+
343
+ ```javascript
344
+ data: ['Apple', 'Banana', 'Cherry']
345
+ ```
346
+
347
+ **Result:**
348
+ - **value** (what gets submitted): `0, 1, 2` (array indices)
349
+ - **label** (what user sees): `'Apple', 'Banana', 'Cherry'`
350
+
351
+ **Perfect for:**
352
+ - PHP associative arrays converted to indexed arrays
353
+ - Backend IDs as array indices
354
+ - Display values as array elements
355
+
356
+ **Example with PHP data:**
357
+ ```php
358
+ // PHP
359
+ $items = [
360
+ 5 => "M.Hadi_9_6/1",
361
+ 6 => "Sarayevo_20_4/2/1",
362
+ 7 => "Sarayevo_13B_3/2/1"
363
+ ];
364
+ echo json_encode(array_values($items));
365
+ // Output: ["M.Hadi_9_6/1","Sarayevo_20_4/2/1","Sarayevo_13B_3/2/1"]
366
+ ```
324
367
 
325
368
  ```javascript
369
+ // JavaScript
326
370
  $('#mySelect').oneSelect({
327
- data: [
328
- { id: 1, name: 'Apple', category: 'Fruit' },
329
- { id: 2, name: 'Banana', category: 'Fruit' }
330
- ],
331
- valueField: 'id',
332
- labelField: 'name'
371
+ data: ["M.Hadi_9_6/1", "Sarayevo_20_4/2/1", "Sarayevo_13B_3/2/1"]
333
372
  });
373
+ // value: 0, 1, 2 (array indices)
374
+ // label: "M.Hadi_9_6/1", "Sarayevo_20_4/2/1", "Sarayevo_13B_3/2/1"
334
375
  ```
335
376
 
336
377
  ### 3. Value Parameter (Pre-selected Items)
337
378
 
338
379
  ```javascript
339
- // Single value
380
+ // Single value (by index)
340
381
  $('#mySelect').oneSelect({
341
382
  data: ['Apple', 'Banana', 'Cherry', 'Mango'],
342
- value: 'Apple' // 'Apple' will be selected
383
+ value: 0 // Index 0 ('Apple') will be selected
343
384
  });
344
385
 
345
386
  // Array with multiple selection
346
387
  $('#mySelect').oneSelect({
347
388
  data: ['Apple', 'Banana', 'Cherry', 'Mango'],
348
- value: ['Apple', 'Cherry'], // Both will be selected
349
- showBadges: true // Enable badge mode
389
+ value: [0, 2], // Indices 0 ('Apple') and 2 ('Cherry') will be selected
390
+ showBadges: true
350
391
  });
351
392
 
352
393
  // HTML data attribute
353
394
  <div class="one-select"
354
395
  data-ones-data='["Apple", "Banana", "Cherry"]'
355
- data-ones-value='"Apple"'> <!-- Single value -->
396
+ data-ones-value='"0"'> <!-- Single index -->
356
397
  </div>
357
398
 
358
399
  <!-- OR -->
359
400
  <div class="one-select"
360
401
  data-ones-data='["Apple", "Banana", "Cherry"]'
361
- data-ones-value='["Apple", "Cherry"]'> <!-- Array -->
402
+ data-ones-value='["0", "2"]'> <!-- Multiple indices -->
362
403
  </div>
363
404
  ```
364
405
 
@@ -394,8 +435,8 @@ $('#mySelect').oneSelect({
394
435
 
395
436
  Backend example:
396
437
  ```javascript
397
- // Receive items array: ['Item 1', 'Item 2']
398
- // Process filtered items
438
+ // Receive items array: [0, 1] (indices of selected items)
439
+ // Use indices to get original values from your data array
399
440
  ```
400
441
 
401
442
  ### 6. AJAX Data Loading
@@ -752,11 +793,10 @@ $('#select1').oneSelect({
752
793
  data: ['A', 'B', 'C']
753
794
  });
754
795
 
755
- // 2. Object array
796
+ // 2. Pre-selected items (by index)
756
797
  $('#select2').oneSelect({
757
- data: [{id: 1, title: 'A'}, {id: 2, title: 'B'}],
758
- valueField: 'id',
759
- labelField: 'title'
798
+ data: ['Apple', 'Banana', 'Cherry'],
799
+ value: [0, 2] // Selects indices 0 and 2
760
800
  });
761
801
 
762
802
  // 3. Badges
@@ -785,21 +825,15 @@ $('#select6').oneSelect({
785
825
  closeOnOutside: true // Close when clicking outside (default)
786
826
  });
787
827
 
788
- // 7. Pre-selected items
828
+ // 7. Search feature (local filtering)
789
829
  $('#select7').oneSelect({
790
- data: ['Apple', 'Banana', 'Cherry'],
791
- value: ['Apple', 'Cherry'] // Pre-select these items
792
- });
793
-
794
- // 8. Search feature (local filtering)
795
- $('#select8').oneSelect({
796
830
  data: ['Apple', 'Banana', 'Cherry', 'Mango', 'Orange'],
797
831
  showSearch: true,
798
832
  searchPlaceholder: 'Search fruits...'
799
833
  });
800
834
 
801
- // 9. AJAX search with debounce
802
- $('#select9').oneSelect({
835
+ // 8. AJAX search with debounce
836
+ $('#select8').oneSelect({
803
837
  showSearch: true,
804
838
  searchUrl: '/api/search',
805
839
  searchDebounceDelay: 500
@@ -810,7 +844,20 @@ $('#select9').oneSelect({
810
844
 
811
845
  ## 📞 Support
812
846
 
813
- **OneSelect** - jQuery Multi-Select Dropdown Component
847
+ ### Links
848
+
849
+ - **NPM Package:** [@kamranbaylarov/one-select](https://www.npmjs.com/package/@kamranbaylarov/one-select)
850
+ - **GitHub:** [KamranBeylarov/one-select](https://github.com/KamranBeylarov/one-select)
851
+ - **Issues:** [Report issues](https://github.com/KamranBeylarov/one-select/issues)
852
+
853
+ ### Installation
854
+
855
+ ```bash
856
+ # NPM
857
+ npm install @kamranbaylarov/one-select
858
+
859
+ # CDN (coming soon)
860
+ ```
814
861
 
815
862
  ### Project Structure
816
863
 
@@ -819,16 +866,12 @@ one-select/
819
866
  ├── css/
820
867
  │ └── one-select.min.css
821
868
  ├── js/
822
- └── one-select.js
869
+ ├── one-select.js
870
+ │ └── one-select.min.js
871
+ ├── package.json
823
872
  └── README.md
824
873
  ```
825
874
 
826
- ### File Locations
827
-
828
- - **JavaScript:** `one-select/js/one-select.js`
829
- - **CSS:** `one-select/css/one-select.min.css`
830
- - **Documentation:** `one-select/README.md`
831
-
832
875
  ### License
833
876
 
834
877
  MIT License - Feel free to use in your projects!
package/js/one-select.js CHANGED
@@ -87,10 +87,7 @@
87
87
  okText: 'OK',
88
88
  cancelText: 'Cancel',
89
89
  data: [],
90
- selectedValues: [],
91
- value: null, // Single value or array of values to pre-select
92
- valueField: 'value',
93
- labelField: 'label',
90
+ value: null, // Single value or array of values to pre-select (index-based)
94
91
  showCheckbox: true,
95
92
  showBadges: false,
96
93
  showBadgesExternal: null,
@@ -133,10 +130,7 @@
133
130
  'ones-ok-text': 'okText',
134
131
  'ones-cancel-text': 'cancelText',
135
132
  'ones-data': 'data',
136
- 'ones-selected': 'selectedValues',
137
133
  'ones-value': 'value',
138
- 'ones-value-field': 'valueField',
139
- 'ones-label-field': 'labelField',
140
134
  'ones-name': 'name',
141
135
  'ones-multiple': 'multiple',
142
136
  'ones-show-checkbox': 'showCheckbox',
@@ -161,7 +155,7 @@
161
155
  return;
162
156
  }
163
157
 
164
- if (setting === 'data' || setting === 'selectedValues' || setting === 'value') {
158
+ if (setting === 'data' || setting === 'value') {
165
159
  if (typeof value === 'string') {
166
160
  try {
167
161
  dataOptions[setting] = JSON.parse(value);
@@ -214,8 +208,14 @@
214
208
  // Register instance in global registry
215
209
  instances[this.instanceId] = this;
216
210
 
217
- // Merge value parameter into selectedValues
218
- this.settings.selectedValues = this.mergeValueSettings(this.settings.value, this.settings.selectedValues);
211
+ // Convert value to array if needed
212
+ if (this.settings.value !== null && this.settings.value !== undefined) {
213
+ if (!Array.isArray(this.settings.value)) {
214
+ this.settings.value = [this.settings.value];
215
+ }
216
+ } else {
217
+ this.settings.value = [];
218
+ }
219
219
 
220
220
  this.wrapper = this.createWrapper();
221
221
  this.trigger = this.createTrigger();
@@ -232,34 +232,6 @@
232
232
  }
233
233
  },
234
234
 
235
- /**
236
- * Merge value parameter into selectedValues array
237
- * @param {*} value - Single value or array of values
238
- * @param {Array} selectedValues - Existing selected values
239
- * @returns {Array} Merged array of selected values
240
- */
241
- mergeValueSettings: function(value, selectedValues) {
242
- var result = selectedValues ? [].concat(selectedValues) : [];
243
-
244
- if (value !== null && value !== undefined) {
245
- if (Array.isArray(value)) {
246
- // value is an array - merge all items
247
- $.each(value, function(i, v) {
248
- if ($.inArray(v, result) === -1) {
249
- result.push(v);
250
- }
251
- });
252
- } else {
253
- // value is a single value - add if not already present
254
- if ($.inArray(value, result) === -1) {
255
- result.push(value);
256
- }
257
- }
258
- }
259
-
260
- return result;
261
- },
262
-
263
235
  build: function() {
264
236
  // Add search input at the top of dropdown if enabled
265
237
  if (this.settings.showSearch) {
@@ -362,17 +334,11 @@
362
334
 
363
335
  var self = this;
364
336
  $.each(this.settings.data, function(index, item) {
365
- var value, label;
366
-
367
- if (typeof item === 'object') {
368
- value = item[self.settings.valueField];
369
- label = item[self.settings.labelField];
370
- } else {
371
- value = item;
372
- label = item;
373
- }
337
+ // Always: value = index, label = item
338
+ var value = index;
339
+ var label = item;
374
340
 
375
- var isSelected = $.inArray(value, self.settings.selectedValues) !== -1;
341
+ var isSelected = $.inArray(value, self.settings.value) !== -1;
376
342
  var option = self.createOption(value, label, isSelected);
377
343
  self.optionsContainer.append(option);
378
344
  });
@@ -477,18 +443,11 @@
477
443
 
478
444
  var self = this;
479
445
  $.each(data, function(index, item) {
480
- var value, label;
481
-
482
- if (typeof item === 'object') {
483
- value = item[self.settings.valueField];
484
- label = item[self.settings.labelField];
485
- } else {
486
- value = item;
487
- label = item;
488
- }
446
+ // Always: value = index, label = item
447
+ var value = index;
448
+ var label = item;
489
449
 
490
- // Keep selection state if value was previously selected
491
- var isSelected = $.inArray(value, self.settings.selectedValues) !== -1;
450
+ var isSelected = $.inArray(value, self.settings.value) !== -1;
492
451
  var option = self.createOption(value, label, isSelected);
493
452
  self.optionsContainer.append(option);
494
453
  });
@@ -941,7 +900,7 @@
941
900
  },
942
901
 
943
902
  handleCancel: function() {
944
- this.settings.selectedValues = [];
903
+ this.settings.value = [];
945
904
  this.optionsContainer.find('input[type="checkbox"]').prop('checked', false);
946
905
  this.optionsContainer.find('.cms-option').removeClass('selected');
947
906
  this.updateSelectAllState();
@@ -960,7 +919,7 @@
960
919
  },
961
920
 
962
921
  setValue: function(values) {
963
- this.settings.selectedValues = values || [];
922
+ this.settings.value = values || [];
964
923
  this.renderOptions();
965
924
  this.updateTriggerText();
966
925
  this.updateHiddenInputs();
@@ -972,7 +931,7 @@
972
931
 
973
932
  updateData: function(data) {
974
933
  this.settings.data = data || [];
975
- this.settings.selectedValues = [];
934
+ this.settings.value = [];
976
935
  this.renderOptions();
977
936
  this.updateTriggerText();
978
937
  this.updateHiddenInputs();
@@ -1,6 +1,7 @@
1
- /**
2
- * OneSelect - jQuery Multi-Select Dropdown Plugin
3
- * Version: 1.0.0
4
- * Licensed under MIT
5
- */
6
- !function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(t,n){return void 0===n&&(n="undefined"!=typeof window?require("jquery"):require("jquery")(t)),e(n),n}:e(window.jQuery||window.$)}(function($){"use strict";var instances={},pluginName="oneSelect";function debounce(e,t){var n;return function(){var a=this,i=arguments;clearTimeout(n),n=setTimeout(function(){e.apply(a,i)},t)}}var OneSelect=function(e,t){this.element=e,this.$element=$(e),this.instanceId="ones-"+Math.random().toString(36).substr(2,9);var n=this.readDataAttributes();this.settings=$.extend({},OneSelect.defaults,t,n),this.init()};OneSelect.defaults={placeholder:"Select options...",selectAllText:"Select All",okText:"OK",cancelText:"Cancel",data:[],selectedValues:[],value:null,valueField:"value",labelField:"label",showCheckbox:!0,showBadges:!1,showBadgesExternal:null,showSearch:!1,searchPlaceholder:"Search...",searchUrl:null,searchDebounceDelay:300,closeOnScroll:!1,closeOnOutside:!0,submitForm:!1,submitOnOutside:!1,formId:null,name:null,multiple:!0,ajax:null,autoLoad:!0,beforeLoad:null,afterLoad:null,onLoadError:null,onChange:null,onSelect:null,onOk:null,onCancel:null},OneSelect.prototype={readDataAttributes:function(){var e=this,t={};const n={"ones-placeholder":"placeholder","ones-select-all-text":"selectAllText","ones-ok-text":"okText","ones-cancel-text":"cancelText","ones-data":"data","ones-selected":"selectedValues","ones-value":"value","ones-value-field":"valueField","ones-label-field":"labelField","ones-name":"name","ones-multiple":"multiple","ones-show-checkbox":"showCheckbox","ones-show-badges":"showBadges","ones-show-badges-external":"showBadgesExternal","ones-show-search":"showSearch","ones-search-placeholder":"searchPlaceholder","ones-search-url":"searchUrl","ones-search-debounce-delay":"searchDebounceDelay","ones-close-on-scroll":"closeOnScroll","ones-close-on-outside":"closeOnOutside","ones-submit-form":"submitForm","ones-submit-on-outside":"submitOnOutside","ones-form-id":"formId","ones-auto-load":"autoLoad"};return $.each(n,function(n,a){var i=e.$element.data(n);if(void 0!==i)switch(a){case"data":case"selectedValues":case"value":t[a]="string"==typeof i?function(){try{return JSON.parse(i)}catch(e){return console.warn("OneSelect: Invalid JSON for "+n,i),i}}():i;break;case"multiple":case"showCheckbox":case"showBadges":case"showSearch":case"closeOnScroll":case"closeOnOutside":case"submitForm":case"submitOnOutside":case"autoLoad":t[a]="string"==typeof i?"true"===i||"1"===i:!!i;break;case"searchDebounceDelay":t[a]="string"==typeof i?parseInt(i,10)||300:i||300;break;default:t[a]=i}}),function(){var e=this.$element.data("ones-ajax");if(e)try{"string"==typeof e&&(t.ajax=JSON.parse(e))}catch(e){console.warn("OneSelect: Invalid JSON for ones-ajax",e)}else t.ajax=e}.call(this),t},init:function(){instances[this.instanceId]=this,this.settings.selectedValues=this.mergeValueSettings(this.settings.value,this.settings.selectedValues),this.wrapper=this.createWrapper(),this.trigger=this.createTrigger(),this.dropdown=this.createDropdown(),this.searchInput=this.createSearchInput(),this.optionsContainer=this.createOptionsContainer(),this.buttons=this.createButtons(),this.build(),this.attachEvents(),this.settings.ajax&&this.settings.autoLoad&&this.loadData()},mergeValueSettings:function(e,t){var n=t?[].concat(t):[];return null!=e&&($.isArray(e)?$.each(e,function(e,t){-1===$.inArray(t,n)&&n.push(t)}):-1===$.inArray(e,n)&&n.push(e)),n},build:function(){this.settings.showSearch&&this.dropdown.append(this.searchInput),this.dropdown.append(this.optionsContainer),this.dropdown.append(this.buttons),this.wrapper.append(this.trigger),this.$element.append(this.wrapper),$("body").append(this.dropdown),this.renderOptions(),this.updateTriggerText(),this.updateHiddenInputs()},updateHiddenInputs:function(){if(this.settings.name){var e=null,t=this;e=this.settings.formId?$("#"+this.settings.formId):this.$element.closest("form");var n=e.length?e:this.wrapper;n.find('input.cms-hidden-input[data-cms-input="'+this.settings.name+'"]').remove();var a=this.settings.name;this.settings.multiple&&-1===a.indexOf("[")&&(a+="[]");var i=this.getSelectedValues();if(this.settings.multiple)$.each(i,function(e,n){var i=$('<input type="hidden" class="cms-hidden-input">').attr("name",a).attr("value",n).attr("data-cms-input",t.settings.name).attr("data-cms-value",n);n.append(i)}.bind({settings:this.settings,name:a}));else{var s=i.length>0?i.join(","):"",o=$('<input type="hidden" class="cms-hidden-input">').attr("name",a).attr("value",s).attr("data-cms-input",this.settings.name);n.append(o)}}},createWrapper:function(){return $('<div class="cms-wrapper"></div>')},createTrigger:function(){return $('<div class="cms-trigger"><span class="cms-selected-text cms-placeholder">'+this.settings.placeholder+"</span></div>")},createDropdown:function(){return $('<div class="cms-dropdown"></div>')},createSearchInput:function(){return $('<div class="cms-search-wrapper"><input type="text" class="cms-search-input" placeholder="'+this.settings.searchPlaceholder+'" /></div>')},createOptionsContainer:function(){return $('<div class="cms-options-container"></div>')},createButtons:function(){var e=$('<div class="cms-buttons"></div>');return this.okBtn=$('<button class="cms-btn cms-btn-ok">'+this.settings.okText+"</button>"),this.cancelBtn=$('<button class="cms-btn cms-btn-cancel">'+this.settings.cancelText+"</button>"),e.append(this.okBtn),e.append(this.cancelBtn),e},renderOptions:function(){this.optionsContainer.empty();var e=this.createOption("select-all",this.settings.selectAllText,!1);this.optionsContainer.append(e);var t=this;$.each(this.settings.data,function(e,n){var a,i;"object"==typeof n?(a=n[t.settings.valueField],i=n[t.settings.labelField]):a=i=n;var s=-1!==$.inArray(a,t.settings.selectedValues),o=t.createOption(a,i,s);t.optionsContainer.append(o)}),this.updateSelectAllState()},createOption:function(e,t,n){var a="cms-option";this.settings.showCheckbox||(a+=" cms-hide-checkbox"),n&&"select-all"!==e&&(a+=" selected");var i=$('<div class="'+a+'" data-value="'+e+'"></div>'),s=$('<input type="checkbox" value="'+e+'"'+(n?" checked":"")+">"),r=$("<label>"+t+"</label>");return i.append(s),i.append(r),i},filterOptions:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"])');""===e?t.show():t.each(function(){var t=$(this),n=t.find("label").text().toLowerCase();-1!==n.indexOf(e)?t.show():t.hide()})},performAjaxSearch:function(e){var t=this;this.optionsContainer.addClass("cms-loading"),$.ajax({url:this.settings.searchUrl,method:"GET",data:{q:e},dataType:"json",success:function(n){var a=n;"object"==typeof n&&n.data?a=n.data:"object"==typeof n&&n.results&&(a=n.results),t.updateSearchResults(a||[]),t.optionsContainer.removeClass("cms-loading")},error:function(n,a,i){console.error("OneSelect: Search error",i),t.optionsContainer.removeClass("cms-loading"),t.settings.onLoadError&&t.settings.onLoadError.call(t,n,a,i)}})},updateSearchResults:function(e){this.optionsContainer.find('.cms-option:not([data-value="select-all"])').remove();var t=this;$.each(e,function(e,n){var a,i;"object"==typeof n?(a=n[t.settings.valueField],i=n[t.settings.labelField]):a=i=n;var s=-1!==$.inArray(a,t.settings.selectedValues),o=t.createOption(a,i,s);t.optionsContainer.append(o)}),this.updateSelectAllState()},attachEvents:function(){var e=this;this.trigger.on("click",function(t){t.stopPropagation(),e.toggle()}),this.settings.showSearch&&(this.settings.searchUrl?function(){var t=debounce(function(t){e.performAjaxSearch(t)},e.settings.searchDebounceDelay);e.searchInput.find(".cms-search-input").on("keyup",function(){var e=$(this).val();e.length>0?t(e):function(){e.filterOptions("")}.call(e)})}():this.searchInput.find(".cms-search-input").on("keyup",function(){var t=$(this).val().toLowerCase();e.filterOptions(t)})),$(window).on("resize.cms",function(){e.wrapper.hasClass("open")&&e.updateDropdownPosition()}),this.settings.closeOnScroll?$(window).on("scroll.cms",function(){e.wrapper.hasClass("open")&&e.close()}):$(window).on("scroll.cms",function(){e.wrapper.hasClass("open")&&e.updateDropdownPosition()}),$(document).on("wheel.onescroll",function(t){!e.wrapper.hasClass("open")||t.originalEvent&&0===Math.abs(t.originalEvent.deltaX)||e.close()}),e._detectHorizontalScroll=function(){if(e.wrapper.hasClass("open")){if(window.scrollX!==e._lastWindowScrollX){if(e._lastWindowScrollX=window.scrollX,e._lastWindowScrollX>0)return void e.close()}for(var t=document.querySelectorAll("*"),n=0;n<t.length;n++){var a=t[n],i=function(e){return e===document?"document":e===document.documentElement?"html":e===document.body?"body":e.tagName+"-"+(e.id||e.className||Math.random().toString(36).substr(2,9))}(a);if(void 0!==e._elementScrollPositions[i]){var s=a.scrollLeft;if(s!==e._elementScrollPositions[i])return void e.close()}}}},e._elementScrollPositions={},e._lastWindowScrollX=window.scrollX;var t=e.open.bind(e);e.open=function(){e._elementScrollPositions={},e._lastWindowScrollX=window.scrollX;for(var n=document.querySelectorAll("*"),a=0;a<n.length;a++){var i=n[a];(i.scrollWidth>i.clientWidth||i.scrollHeight>i.clientHeight)&&(e._elementScrollPositions[function(e){return e===document?"document":e===document.documentElement?"html":e===document.body?"body":e.tagName+"-"+(e.id||e.className||Math.random().toString(36).substr(2,9))}(i)]=i.scrollLeft)}e._horizontalScrollInterval&&(clearInterval(e._horizontalScrollInterval),e._horizontalScrollInterval=null),e._horizontalScrollInterval=setInterval(function(){e._detectHorizontalScroll()},50),t()};var n=e.close.bind(e);e.close=function(){e._horizontalScrollInterval&&(clearInterval(e._horizontalScrollInterval),e._horizontalScrollInterval=null),e._elementScrollPositions={},n()},$(window).on("click.ones",function(t){if(e.settings.closeOnOutside&&e.wrapper.hasClass("open")){var n=$(t.target);if(0===n.closest(".cms-wrapper").length&&0===n.closest(".cms-dropdown").length){if(e.settings.submitOnOutside){e.updateTriggerText(),e.settings.onOk&&e.settings.onOk.call(e,e.getSelectedValues(),e.getSelectedLabels()),e.submitForm()}e.close()}}}),this.optionsContainer.on("click",".cms-option",function(t){t.stopPropagation();var n=$(this),a=n.find('input[type="checkbox"]');$(t.target).is('input[type="checkbox"]')||(a.prop("checked",!a.prop("checked")),e.handleOptionChange(n))}),this.optionsContainer.on("change",'input[type="checkbox"]',function(t){t.stopPropagation();var n=$(t.target).closest(".cms-option");e.handleOptionChange(n)}),this.okBtn.on("click",function(t){t.stopPropagation(),e.handleOk()}),this.cancelBtn.on("click",function(t){t.stopPropagation(),e.handleCancel()})},handleOptionChange:function(e){var t=e.data("value");if("select-all"===t){var n=e.find('input[type="checkbox"]');this.handleSelectAll(n.prop("checked"))}else{var a=e.find('input[type="checkbox"]');a.prop("checked")?e.addClass("selected"):e.removeClass("selected");var i=this;setTimeout(function(){i.updateSelectAllState(),i.updateTriggerText()},0)}this.updateHiddenInputs(),this.settings.onChange&&this.settings.onChange.call(this,this.getSelectedValues(),this.getSelectedLabels()),this.settings.onSelect&&this.settings.onSelect.call(this,this.getSelectedValues())},handleSelectAll:function(e){var t=this;this.optionsContainer.find('.cms-option:not([data-value="select-all"])').each(function(){var t=$(this);t.find('input[type="checkbox"]').prop("checked",e),e?t.addClass("selected"):t.removeClass("selected")}),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs()},updateSelectAllState:function(){var e=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"]'),t=e.filter(":checked"),n=e.length,a=t.length,i=this.optionsContainer.find('.cms-option[data-value="select-all"] input[type="checkbox"]');i.prop("indeterminate",!1),i.prop("checked",!1),0===a?void 0:a===n&&n>0?i.prop("checked",!0):i.prop("indeterminate",!0)},getSelectedValues:function(){var e=[];return this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"]:checked').each(function(){var t=$(this).val();isNaN(t)&&""!==t||(t=Number(t)),e.push(t)}),e},getSelectedLabels:function(){var e=[];return this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"]:checked').siblings("label").each(function(){e.push($(this).text())}),e},updateTriggerText:function(){var e=this.getSelectedLabels(),t=this.getSelectedValues(),n=this.trigger.find(".cms-selected-text");0===e.length?n.empty().text(this.settings.placeholder).addClass("cms-placeholder"):this.settings.showBadges?(n.empty().removeClass("cms-placeholder"),$.each(t,function(t,a){var i=$('<span class="cms-badge"></span>'),s=$("<span></span>").text(e[t]),o=$('<button type="button" class="cms-badge-remove">&times;</button>');o.on("click",function(e){e.stopPropagation(),function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');t.length&&(t.prop("checked",!1),t.closest(".cms-option").removeClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs())}.call(this,a)}),i.append(s),i.append(o),n.append(i)}.bind(this))):(n.empty().removeClass("cms-placeholder"),n.text(e.length+" items selected")),this.updateExternalBadges(t,e)},updateExternalBadges:function(e,t){if(this.settings.showBadgesExternal){var n=$("#"+this.settings.showBadgesExternal);if(0!==n.length){if(n.empty(),0===e.length)return;$.each(e,function(e,a){var i=$('<span class="cms-badge"></span>'),s=$("<span></span>").text(t[e]),o=$('<button type="button" class="cms-badge-remove">&times;</button>');o.on("click",function(e){e.preventDefault(),e.stopPropagation(),function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');t.length&&(t.prop("checked",!1),t.closest(".cms-option").removeClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs())}.call(this,a)}),i.append(s),i.append(o),n.append(i)}.bind(this))}}},toggle:function(){this.wrapper.hasClass("open")?this.close():this.open()},open:function(){$(".cms-wrapper.open").not(this.wrapper).removeClass("open"),$(".cms-dropdown.open").not(this.dropdown).removeClass("open"),this.updateDropdownPosition(),this.wrapper.addClass("open"),this.dropdown.addClass("open")},updateDropdownPosition:function(){var e=this.wrapper[0].getBoundingClientRect(),t=this.wrapper.outerWidth();this.dropdown.css({position:"fixed",top:e.bottom+"px",left:e.left+"px",width:t+"px"})},close:function(){this.wrapper.removeClass("open"),this.dropdown.removeClass("open")},handleOk:function(){this.updateTriggerText();var e=this.getSelectedValues(),t=this.getSelectedLabels();this.settings.onOk&&this.settings.onOk.call(this,e,t),this.settings.submitForm&&this.submitForm(),this.close()},submitForm:function(){var e=this.settings.formId?$("#"+this.settings.formId):this.$element.closest("form");0===e.length?console.warn('OneSelect: Form with ID "'+this.settings.formId+'" not found'):0===e.length?console.warn("OneSelect: No parent form found"):e[0].submit()},handleCancel:function(){this.settings.selectedValues=[],this.optionsContainer.find('input[type="checkbox"]').prop("checked",!1),this.optionsContainer.find(".cms-option").removeClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs(),this.settings.onCancel&&this.settings.onCancel.call(this),this.settings.submitForm&&this.submitForm(),this.close()},setValue:function(e){this.settings.selectedValues=e||[],this.renderOptions(),this.updateTriggerText(),this.updateHiddenInputs()},getValue:function(){return this.getSelectedValues()},updateData:function(e){this.settings.data=e||[],this.settings.selectedValues=[],this.renderOptions(),this.updateTriggerText(),this.updateHiddenInputs()},loadData:function(e,t,n){var a=this,i=e||this.settings.ajax;if(i&&i.url){if(this.settings.beforeLoad&&this.settings.beforeLoad.call(this),this.trigger.find(".cms-selected-text").text("Loading..."),!i.url)return void console.error("OneSelect: Ajax configuration or url is missing");var s=$.extend(!0,{url:i.url,method:i.method||"GET",data:i.data||{},dataType:i.dataType||"json",success:function(e){var t=e;"object"==typeof e&&e.data?t=e.data:"object"==typeof e&&e.results&&(t=e.results),a.settings.data=t||[],a.renderOptions(),a.updateTriggerText(),a.settings.afterLoad&&a.settings.afterLoad.call(a,t,e),t&&t.call(a,t,e)},error:function(e,t,i){a.trigger.find(".cms-selected-text").text("Error loading data"),a.settings.onLoadError&&a.settings.onLoadError.call(a,e,t,i),n&&n.call(a,e,t,i)}},i);i.success&&(s.success=function(e,t){i.success(e),t(e)}),i.error&&(s.error=function(e,t,n){i.error(e,t,n),n(e,t,n)}),$.ajax(s)}else console.error("OneSelect: Ajax configuration or url is missing")},reload:function(){this.settings.ajax?this.loadData():console.warn("OneSelect: No ajax configuration found")},select:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');t.length&&(t.prop("checked",!0),t.closest(".cms-option").addClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs())},unselect:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');t.length&&(t.prop("checked",!1),t.closest(".cms-option").removeClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs())},selectAll:function(){this.handleSelectAll(!0)},unselectAll:function(){this.handleSelectAll(!1)},toggleSelection:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');if(t.length){var n=t.prop("checked");t.prop("checked",!n);var a=t.closest(".cms-option");n?a.removeClass("selected"):a.addClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs()}},getInstanceId:function(){return this.instanceId},destroy:function(){delete instances[this.instanceId],$(window).off(".cms"),$(window).off(".ones"),$(document).off(".onescroll"),this.trigger.off(),this.okBtn.off(),this.cancelBtn.off(),this.optionsContainer.off(),this._horizontalScrollInterval&&(clearInterval(this._horizontalScrollInterval),this._horizontalScrollInterval=null),$('input.cms-hidden-input[data-cms-input="'+this.settings.name+'"]').remove(),this.wrapper.remove(),this.dropdown.remove(),this.$element.removeData(pluginName)}},OneSelect.getInstance=function(e){return instances[e]||null},OneSelect.getAllInstances=function(){return instances},$.fn[pluginName]=function(e){var t=arguments,n=this;return this.each(function(){var a=$(this),i=a.data(pluginName);i||"object"!=typeof e&&e||(i=new OneSelect(this,e),a.data(pluginName,i)),"string"==typeof e&&("value"===e?void 0!==t[1]?(i.setValue(t[1]),n=a):n=i.getValue():"getValues"===e?n=i.getSelectedValues():"getLabels"===e?n=i.getSelectedLabels():"getInstanceId"===e?n=i.getInstanceId():"updateData"===e?i.updateData(t[1]):"loadData"===e?i.loadData(t[1],t[2],t[3]):"reload"===e?i.reload():"select"===e?i.select(t[1]):"unselect"===e?i.unselect(t[1]):"selectAll"===e?i.selectAll():"unselectAll"===e?i.unselectAll():"toggleSelection"===e?i.toggleSelection(t[1]):"open"===e?i.open():"close"===e?i.close():"destroy"===e&&i.destroy())}),n},$.fn[pluginName].Constructor=OneSelect,$.fn[pluginName].getInstance=OneSelect.getInstance,$.fn[pluginName].getAllInstances=OneSelect.getAllInstances});
1
+ /**
2
+ * OneSelect - jQuery Multi-Select Dropdown Plugin
3
+ * Version: 1.2.0
4
+ * https://github.com/KamranBeylarov/one-select
5
+ * Licensed under MIT
6
+ */
7
+ !function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(t,n){return void 0===n&&(n="undefined"!=typeof window?require("jquery"):require("jquery")(t)),e(n),n}:e(window.jQuery||window.$)}(function(e){"use strict";var t={},n="oneSelect";function i(t,n){var i;return function(){var a=this,o=arguments;clearTimeout(i),i=setTimeout(function(){t.apply(a,o)},n)}}var a=function(e,n){this.element=e,this.$element=e(e),this.instanceId="ones-"+Math.random().toString(36).substr(2,9);var i=this.readDataAttributes();this.settings=e.extend({},o.defaults,n,i),this.init()};o.defaults={placeholder:"Select options...",selectAllText:"Select All",okText:"OK",cancelText:"Cancel",data:[],value:null,showCheckbox:!0,showBadges:!1,showBadgesExternal:null,showSearch:!1,searchPlaceholder:"Search...",searchUrl:null,searchDebounceDelay:300,closeOnScroll:!1,closeOnOutside:!0,submitForm:!1,submitOnOutside:!1,formId:null,name:null,multiple:!0,ajax:null,autoLoad:!0,beforeLoad:null,afterLoad:null,onLoadError:null,onChange:null,onSelect:null,onOk:null,onCancel:null},o.prototype={readDataAttributes:function(){var t=this,n={},i={"ones-placeholder":"placeholder","ones-select-all-text":"selectAllText","ones-ok-text":"okText","ones-cancel-text":"cancelText","ones-data":"data","ones-value":"value","ones-name":"name","ones-multiple":"multiple","ones-show-checkbox":"showCheckbox","ones-show-badges":"showBadges","ones-show-badges-external":"showBadgesExternal","ones-show-search":"showSearch","ones-search-placeholder":"searchPlaceholder","ones-search-url":"searchUrl","ones-search-debounce-delay":"searchDebounceDelay","ones-close-on-scroll":"closeOnScroll","ones-close-on-outside":"closeOnOutside","ones-submit-form":"submitForm","ones-submit-on-outside":"submitOnOutside","ones-form-id":"formId","ones-auto-load":"autoLoad"};return e.each(i,function(i,a){var o=t.$element.data(i);if(void 0!==o)if("data"===a||"value"===a)if("string"==typeof o)try{n[a]=JSON.parse(o)}catch(e){console.warn("OneSelect: Invalid JSON for "+i,o),n[a]=o}else n[a]=o;else if("multiple"===a||"showCheckbox"===a||"showBadges"===a||"showSearch"===a||"closeOnScroll"===a||"closeOnOutside"===a||"submitForm"===a||"submitOnOutside"===a||"autoLoad"===a)n[a]="string"==typeof o?"true"===o||"1"===o:!!o;else if("searchDebounceDelay"===a)n[a]="string"==typeof o?parseInt(o,10)||300:o||300;else n[a]=o});var a=this.$element.data("ones-ajax");if(a)"string"==typeof a?try{n.ajax=JSON.parse(a)}catch(e){console.warn("OneSelect: Invalid JSON for ones-ajax",a)}:n.ajax=a;return n},init:function(){t[this.instanceId]=this,null!==this.settings.value&&void 0!==this.settings.value?Array.isArray(this.settings.value)||(this.settings.value=[this.settings.value]):this.settings.value=[],this.wrapper=this.createWrapper(),this.trigger=this.createTrigger(),this.dropdown=this.createDropdown(),this.searchInput=this.createSearchInput(),this.optionsContainer=this.createOptionsContainer(),this.buttons=this.createButtons(),this.build(),this.attachEvents(),this.settings.ajax&&this.settings.autoLoad&&this.loadData()},build:function(){this.settings.showSearch&&this.dropdown.append(this.searchInput),this.dropdown.append(this.optionsContainer),this.dropdown.append(this.buttons),this.wrapper.append(this.trigger),this.$element.append(this.wrapper),e("body").append(this.dropdown),this.renderOptions(),this.updateTriggerText(),this.updateHiddenInputs()},updateHiddenInputs:function(){if(this.settings.name){var t=this.settings.formId?e("#"+this.settings.formId):this.$element.closest("form"),n=t.length?t:this.wrapper;n.find('input.cms-hidden-input[data-cms-input="'+this.settings.name+'"]').remove();var i=this.settings.name;this.settings.multiple&&-1===i.indexOf("[")&&(i+="[]");for(var a=this.getSelectedValues(),o=this,s=0;s<a.length;s++)n.append(e('<input type="hidden" class="cms-hidden-input">').attr("name",i).attr("value",a[s]).attr("data-cms-input",this.settings.name).attr("data-cms-value",a[s]))}},createWrapper:function(){return e('<div class="cms-wrapper"></div>')},createTrigger:function(){return e('<div class="cms-trigger"><span class="cms-selected-text cms-placeholder">'+this.settings.placeholder+"</span></div>")},createDropdown:function(){return e('<div class="cms-dropdown"></div>')},createSearchInput:function(){return e('<div class="cms-search-wrapper"><input type="text" class="cms-search-input" placeholder="'+this.settings.searchPlaceholder+'" /></div>')},createOptionsContainer:function(){return e('<div class="cms-options-container"></div>')},createButtons:function(){var t=e('<div class="cms-buttons"></div>');return this.okBtn=e('<button class="cms-btn cms-btn-ok">'+this.settings.okText+"</button>"),this.cancelBtn=e('<button class="cms-btn cms-btn-cancel">'+this.settings.cancelText+"</button>"),t.append(this.okBtn),t.append(this.cancelBtn),t},renderOptions:function(){this.optionsContainer.empty();var t=this.createOption("select-all",this.settings.selectAllText,!1);this.optionsContainer.append(t);var n=this;e.each(this.settings.data,function(e,t){var i=e,a=t,o=-1!==e.inArray(i,n.settings.value),s=n.createOption(i,a,o);n.optionsContainer.append(s)}),this.updateSelectAllState()},createOption:function(e,t,n){var i="cms-option";this.settings.showCheckbox||(i+=" cms-hide-checkbox"),n&&"select-all"!==e&&(i+=" selected");var a=e('<div class="'+i+'" data-value="'+e+'"></div>'),o=e('<input type="checkbox" value="'+e+'"'+(n?" checked":"")+">"),s=e("<label>"+t+"</label>");return a.append(o),a.append(s),a},filterOptions:function(t){var n=this.optionsContainer.find('.cms-option:not([data-value="select-all"])');""===t?n.show():n.each(function(){var n=e(this),i=n.find("label").text().toLowerCase();-1!==i.indexOf(t)?n.show():n.hide()})},performAjaxSearch:function(t){var n=this;this.optionsContainer.addClass("cms-loading"),e.ajax({url:this.settings.searchUrl,method:"GET",data:{q:t},dataType:"json",success:function(t){var i=t;"object"==typeof t&&t.data?i=t.data:"object"==typeof t&&t.results&&(i=t.results),n.updateSearchResults(i||[]),n.optionsContainer.removeClass("cms-loading")},error:function(e,t,i){console.error("OneSelect: Search error",i),n.optionsContainer.removeClass("cms-loading"),n.settings.onLoadError&&n.settings.onLoadError.call(n,e,t,i)}})},updateSearchResults:function(t){this.optionsContainer.find('.cms-option:not([data-value="select-all"])').remove();var n=this;e.each(t,function(e,t){var i=e,a=t,o=-1!==e.inArray(i,n.settings.value),s=n.createOption(i,a,o);n.optionsContainer.append(s)}),this.updateSelectAllState()},attachEvents:function(){var t=this;this.trigger.on("click",function(e){e.stopPropagation(),t.toggle()}),this.settings.showSearch&&(this.settings.searchUrl?(e=".search-input",n=i(function(e){t.performAjaxSearch(e)},t.settings.searchDebounceDelay),t.searchInput.find(".cms-search-input").on("keyup",function(){var t=e(this).val();t.length>0?n(t):t.filterOptions("")})):t.searchInput.find(".cms-search-input").on("keyup",function(){var e=e(this).val().toLowerCase();t.filterOptions(e)})),e(window).on("resize.cms",function(){t.wrapper.hasClass("open")&&t.updateDropdownPosition()}),this.settings.closeOnScroll?e(window).on("scroll.cms",function(){t.wrapper.hasClass("open")&&t.close()}):e(window).on("scroll.cms",function(){t.wrapper.hasClass("open")&&t.updateDropdownPosition()}),e(document).on("wheel.onescroll",function(e){!t.wrapper.hasClass("open")||e.originalEvent&&0!==Math.abs(e.originalEvent.deltaX)||t.close()}),t._detectHorizontalScroll=function(){if(t.wrapper.hasClass("open")){if(window.scrollX!==t._lastWindowScrollX){if(t._lastWindowScrollX=window.scrollX,t._lastWindowScrollX>0)return void t.close()}for(var e=document.querySelectorAll("*"),n=0;n<e.length;n++){var i=e[n],a=function(e){return e===document?"document":e===document.documentElement?"html":e===document.body?"body":e.tagName+"-"+(e.id||e.className||Math.random().toString(36).substr(2,9))}(i);if(void 0!==t._elementScrollPositions[a]){var o=i.scrollLeft;if(o!==t._elementScrollPositions[a])return void t.close()}}}},t._elementScrollPositions={},t._lastWindowScrollX=window.scrollX,t._elementScrollPositions={},t._lastWindowScrollX=window.scrollX;for(var o=t.open.bind(t),s=t.close.bind(t),a=function(e){return e===document?"document":e===document.documentElement?"html":e===document.body?"body":e.tagName+"-"+(e.id||e.className||Math.random().toString(36).substr(2,9))},o=function(){t._elementScrollPositions={},t._lastWindowScrollX=window.scrollX;for(var e=document.querySelectorAll("*"),n=0;n<e.length;n++){var i=e[n];i.scrollWidth>i.clientWidth||i.scrollHeight>i.clientHeight?t._elementScrollPositions[a(i)]=i.scrollLeft:void 0}t._horizontalScrollInterval&&(clearInterval(t._horizontalScrollInterval),t._horizontalScrollInterval=null),t._horizontalScrollInterval=setInterval(function(){t._detectHorizontalScroll()},50),o()},t.close=function(){t._horizontalScrollInterval&&(clearInterval(t._horizontalScrollInterval),t._horizontalScrollInterval=null),t._elementScrollPositions={},s()},e(window).on("click.ones",function(e){if(t.settings.closeOnOutside&&t.wrapper.hasClass("open")){0===e(e.target).closest(".cms-wrapper").length&&0===e(e.target).closest(".cms-dropdown").length&&(t.settings.submitOnOutside&&(t.updateTriggerText(),t.settings.onOk&&t.settings.onOk.call(t,t.getSelectedValues(),t.getSelectedLabels()),t.submitForm()),t.close())}}),this.optionsContainer.on("click",".cms-option",function(e){e.stopPropagation();var n=e(this),i=n.find('input[type="checkbox"]');e(e.target).is('input[type="checkbox"]')||(i.prop("checked",!i.prop("checked")),t.handleOptionChange(n))}),this.optionsContainer.on("change",'input[type="checkbox"]',function(e){e.stopPropagation();var n=e(e.target).closest(".cms-option");t.handleOptionChange(n)}),this.okBtn.on("click",function(e){e.stopPropagation(),t.handleOk()}),this.cancelBtn.on("click",function(e){e.stopPropagation(),t.handleCancel()})},handleOptionChange:function(e){var t=e.data("value");if("select-all"===t){var n=e.find('input[type="checkbox"]');this.handleSelectAll(n.prop("checked"))}else{var i=e.find('input[type="checkbox"]');i.prop("checked")?e.addClass("selected"):e.removeClass("selected");var a=this;setTimeout(function(){a.updateSelectAllState(),a.updateTriggerText()},0)}this.updateHiddenInputs(),this.settings.onChange&&this.settings.onChange.call(this,this.getSelectedValues(),this.getSelectedLabels()),this.settings.onSelect&&this.settings.onSelect.call(this,this.getSelectedValues())},handleSelectAll:function(e){var t=this;this.optionsContainer.find('.cms-option:not([data-value="select-all"])').each(function(){var n=e(this);n.find('input[type="checkbox"]').prop("checked",e),e?n.addClass("selected"):n.removeClass("selected")}),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs()},updateSelectAllState:function(){var e=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"]'),t=e.filter(":checked"),n=e.length,i=t.length,a=this.optionsContainer.find('.cms-option[data-value="select-all"] input[type="checkbox"]');a.prop("indeterminate",!1),a.prop("checked",!1),0===i||i===n&&n>0?a.prop("checked",!0):a.prop("indeterminate",!0)},getSelectedValues:function(){var t=[];return this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"]:checked').each(function(){var n=e(this).val();isNaN(n)&&""!==n||(n=Number(n)),t.push(n)}),t},getSelectedLabels:function(){var t=[];return this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"]:checked').siblings("label").each(function(){t.push(e(this).text())}),t},updateTriggerText:function(){var e=this.getSelectedLabels(),t=this.getSelectedValues(),n=this.trigger.find(".cms-selected-text");0===e.length?n.empty().text(this.settings.placeholder).addClass("cms-placeholder"):this.settings.showBadges?(n.empty().removeClass("cms-placeholder");var i=this;e.each(t,function(e,t){var a=i,o=e('<span class="cms-badge"></span>'),s=e("<span></span>").text(t[e]),r=e('<button type="button" class="cms-badge-remove">&times;</button>');r.on("click",function(e){e.stopPropagation(),i.unselect(t)}),o.append(s),o.append(r),n.append(o)})):n.empty().removeClass("cms-placeholder"),n.text(e.length+" items selected"),this.updateExternalBadges(t,e)},updateExternalBadges:function(t,n){if(this.settings.showBadgesExternal){var i=e("#"+this.settings.showBadgesExternal);if(0!==i.length){if(i.empty(),0===t.length)return;var a=this;e.each(t,function(e,t){var o=a,s=e('<span class="cms-badge"></span>'),r=e("<span></span>").text(n[e]),l=e('<button type="button" class="cms-badge-remove">&times;</button>');l.on("click",function(e){e.preventDefault(),e.stopPropagation(),a.unselect(t)}),s.append(r),s.append(l),i.append(s)})}}},toggle:function(){this.wrapper.hasClass("open")?this.close():this.open()},open:function(){e(".cms-wrapper.open").not(this.wrapper).removeClass("open"),e(".cms-dropdown.open").not(this.dropdown).removeClass("open"),this.updateDropdownPosition(),this.wrapper.addClass("open"),this.dropdown.addClass("open")},updateDropdownPosition:function(){var e=this.wrapper[0].getBoundingClientRect(),t=this.wrapper.outerWidth();this.dropdown.css({position:"fixed",top:e.bottom+"px",left:e.left+"px",width:t+"px"})},close:function(){this.wrapper.removeClass("open"),this.dropdown.removeClass("open")},handleOk:function(){this.updateTriggerText();var e=this.getSelectedValues(),t=this.getSelectedLabels();this.settings.onOk&&this.settings.onOk.call(this,e,t),this.settings.submitForm&&this.submitForm(),this.close()},submitForm:function(){var e=null;if(this.settings.formId?(e=e("#"+this.settings.formId),0===e.length&&console.warn('OneSelect: Form with ID "'+this.settings.formId+'" not found')):(e=this.$element.closest("form"),0===e.length&&console.warn("OneSelect: No parent form found")),0!==e.length&&e[0].submit()},handleCancel:function(){this.settings.value=[],this.optionsContainer.find('input[type="checkbox"]').prop("checked",!1),this.optionsContainer.find(".cms-option").removeClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs(),this.settings.onCancel&&this.settings.onCancel.call(this),this.settings.submitForm&&this.submitForm(),this.close()},setValue:function(e){this.settings.value=e||[],this.renderOptions(),this.updateTriggerText(),this.updateHiddenInputs()},getValue:function(){return this.getSelectedValues()},updateData:function(e){this.settings.data=e||[],this.settings.value=[],this.renderOptions(),this.updateTriggerText(),this.updateHiddenInputs()},loadData:function(t,n,i){var a=this,o=t||this.settings.ajax;if(o&&o.url){if(this.settings.beforeLoad&&this.settings.beforeLoad.call(this),this.trigger.find(".cms-selected-text").text("Loading..."),!o.url)return void console.error("OneSelect: Ajax configuration or url is missing");var s=e.extend(!0,{url:o.url,method:o.method||"GET",data:o.data||{},dataType:o.dataType||"json",success:function(e){var t=e;"object"==typeof e&&e.data?t=e.data:"object"==typeof e&&e.results&&(t=e.results),a.settings.data=t||[],a.renderOptions(),a.updateTriggerText(),a.settings.afterLoad&&a.settings.afterLoad.call(a,t,e),n&&n.call(a,t,e)},error:function(e,t,n){a.trigger.find(".cms-selected-text").text("Error loading data"),a.settings.onLoadError&&a.settings.onLoadError.call(a,e,t,n),i&&i.call(a,e,t,n)}},o);o.success&&(s.success=function(e){o.success(e),t(e)}),o.error&&(s.error=function(e,t,n){o.error(e,t,n),t(e,t,n)}),e.ajax(s)}else console.error("OneSelect: Ajax configuration or url is missing")},reload:function(){this.settings.ajax?this.loadData():console.warn("OneSelect: No ajax configuration found")},select:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');t.length&&(t.prop("checked",!0),t.closest(".cms-option").addClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs())},unselect:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');t.length&&(t.prop("checked",!1),t.closest(".cms-option").removeClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs())},selectAll:function(){this.handleSelectAll(!0)},unselectAll:function(){this.handleSelectAll(!1)},toggleSelection:function(e){var t=this.optionsContainer.find('.cms-option:not([data-value="select-all"]) input[type="checkbox"][value="'+e+'"]');if(t.length){var n=t.prop("checked");t.prop("checked",!n);var i=t.closest(".cms-option");n?i.removeClass("selected"):i.addClass("selected"),this.updateSelectAllState(),this.updateTriggerText(),this.updateHiddenInputs()}},getInstanceId:function(){return this.instanceId},destroy:function(){delete t[this.instanceId],e(window).off(".cms"),e(window).off(".ones"),e(document).off(".onescroll"),this.trigger.off(),this.okBtn.off(),this.cancelBtn.off(),this.optionsContainer.off(),this._horizontalScrollInterval&&(clearInterval(this._horizontalScrollInterval),this._horizontalScrollInterval=null),e('input.cms-hidden-input[data-cms-input="'+this.settings.name+'"]').remove(),this.wrapper.remove(),this.dropdown.remove(),this.$element.removeData(n)}},o.getInstance=function(e){return t[e]||null},o.getAllInstances=function(){return t},e.fn[n]=function(t){var i=arguments,a=this;return this.each(function(){var o=e(this),s=o.data(n);s||"object"!=typeof t&&t||(s=new o(this,t),o.data(n,s)),"string"==typeof t&&("value"===t?void 0!==i[1]?(s.setValue(i[1]),a=o):a=s.getValue():"getValues"===t?a=s.getSelectedValues():"getLabels"===t?a=s.getSelectedLabels():"getInstanceId"===t?a=s.getInstanceId():"updateData"===t?s.updateData(i[1]):"loadData"===t?s.loadData(i[1],i[2],i[3]):"reload"===t?s.reload():"select"===t?s.select(i[1]):"unselect"===t?s.unselect(i[1]):"selectAll"===t?s.selectAll():"unselectAll"===t?s.unselectAll():"toggleSelection"===t?s.toggleSelection(i[1]):"open"===t?s.open():"close"===t?s.close():"destroy"===t&&s.destroy())}),a},e.fn[n].Constructor=o,e.fn[n].getInstance=o.getInstance,e.fn[n].getAllInstances=o.getAllInstances});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kamranbaylarov/one-select",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "A powerful, flexible, and feature-rich multi-select dropdown component for jQuery",
5
5
  "main": "js/one-select.js",
6
6
  "scripts": {