@kamranbaylarov/one-select 1.0.0

package/js/one-select.min.js

@@ -0,0 +1,6 @@
+/**
+ * OneSelect - jQuery Multi-Select Dropdown Plugin
+ * Version: 1.0.0
+ * Licensed under MIT
+ */
+!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});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@kamranbaylarov/one-select",
+  "version": "1.0.0",
+  "description": "A powerful, flexible, and feature-rich multi-select dropdown component for jQuery",
+  "main": "js/one-select.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "jquery",
+    "plugin",
+    "select",
+    "multiselect",
+    "dropdown",
+    "checkbox",
+    "ajax",
+    "search"
+  ],
+  "author": "Kamran Baylarov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KamranBeylarov/one-select.git"
+  },
+  "bugs": {
+    "url": "https://github.com/KamranBeylarov/one-select/issues"
+  },
+  "homepage": "https://github.com/KamranBeylarov/one-select#readme",
+  "peerDependencies": {
+    "jquery": ">=1.9.0"
+  },
+  "files": [
+    "js/one-select.js",
+    "js/one-select.min.js",
+    "css/one-select.min.css",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}