diff --git a/CHANGE.md b/CHANGE.md index 7bb6b5d..c7b4e24 100755 --- a/CHANGE.md +++ b/CHANGE.md @@ -5,6 +5,9 @@ Change Log: `yii2-widget-select2` **Date:** 31-Oct-2019 +- (enh #301): Enhancements to multiple select RTL input and select all toggle. + - Intelligent filtered select all and unselect all that validates what all to select or unselect based on select2 search filter field typed + - Better styling of RTL multiple input - (enh #300): Add Material Theme. - (enh #299): Add Czech Translations. - (enh #298, #289): Fix empty options. diff --git a/src/assets/js/select2-krajee.js b/src/assets/js/select2-krajee.js index dcd9991..72aff1a 100644 --- a/src/assets/js/select2-krajee.js +++ b/src/assets/js/select2-krajee.js @@ -15,7 +15,7 @@ var initS2ToggleAll = function () { }, initS2Unselect = function () { }; (function (factory) { - "use strict"; + 'use strict'; if (typeof define === 'function' && define.amd) { // jshint ignore:line // AMD. Register as an anonymous module. define(['jquery'], factory); // jshint ignore:line @@ -30,19 +30,46 @@ var initS2ToggleAll = function () { } } }(function ($) { - "use strict"; + 'use strict'; initS2ToggleAll = function (id) { - var $el = $('#' + id), togId = '#' + 's2-togall-' + id, $tog = $(togId); + var $el = $('#' + id), togId = '#' + 's2-togall-' + id, $tog = $(togId), listenTogAll; if (!$el.attr('multiple')) { return; } + listenTogAll = function () { + $tog.off('.krajees2').on('click.krajees2', function () { + var isSelect = $tog.hasClass('s2-togall-select'), ev = 'selectall', val; + if (!isSelect) { + ev = 'unselectall'; + } + $('#select2-' + id + '-results .select2-results__option[role="option"]').each(function () { + val = $(this).attr('id').split('-').pop(); + $el.find('option:not([disabled])[value="' + val + '"]').prop('selected', !!isSelect); + }); + $el.select2('close').trigger('krajeeselect2:' + ev).trigger('change'); + }); + }; $el.on('select2:open.krajees2', function () { + var ev = 'input.krajees2 keyup.krajees2'; if ($tog.parent().attr('id') === 'parent-' + togId || !$el.attr('multiple')) { return; } $('#select2-' + id + '-results').closest('.select2-dropdown').prepend($tog); $('#parent-' + togId).remove(); - }).on('change.krajeeselect2', function () { + $(this).parent().find('.select2-search__field').off(ev).on(ev, function () { + setTimeout(function () { + var opt = '#select2-' + id + '-results .select2-results__option[role="option"]', + sel = opt + '[aria-selected="true"]', len = $(opt).length; + $tog.removeClass('s2-togall-select s2-togall-unselect'); + if (len > 0 && $(sel).length === len) { + $tog.addClass('s2-togall-unselect'); + } else { + $tog.addClass('s2-togall-select'); + } + listenTogAll(); + }, 100); + }); + }).on('change.krajees2', function () { if (!$el.attr('multiple')) { return; } @@ -58,25 +85,18 @@ var initS2ToggleAll = function () { } else { $tog.addClass('s2-togall-unselect'); } + listenTogAll(); }); - $tog.off('.krajees2').on('click.krajees2', function () { - var isSelect = $tog.hasClass('s2-togall-select'), flag = true, ev = 'selectall'; - if (!isSelect) { - flag = false; - ev = 'unselectall'; - } - $el.find('option:not([disabled])').prop('selected', flag); - $el.select2('close').trigger('krajeeselect2:' + ev).trigger('change'); - }); + listenTogAll(); }; initS2Change = function ($el) { $el = $el || $(this); - var $drop = $(".select2-container--open"), cssClasses, i, $src = $el.parents("[class*='has-']"); + var $drop = $('.select2-container--open'), cssClasses, i, $src = $el.parents('[class*=\'has-\']'); if ($src.length) { cssClasses = $src[0].className.split(/\s+/); for (i = 0; i < cssClasses.length; i++) { - if (cssClasses[i].match("has-")) { - $drop.removeClass("has-success has-error has-warning").addClass(cssClasses[i]); + if (cssClasses[i].match('has-')) { + $drop.removeClass('has-success has-error has-warning').addClass(cssClasses[i]); } } } @@ -84,7 +104,7 @@ var initS2ToggleAll = function () { initS2Unselect = function () { var $el = $(this), opts = $el.data('select2').options; opts.set('disabled', true); - setTimeout(function() { + setTimeout(function () { opts.set('disabled', false); $el.trigger('krajeeselect2:cleared'); }, 1); @@ -124,9 +144,9 @@ var initS2ToggleAll = function () { $el.next(themeCss).removeClass(sizeCss).addClass(sizeCss); } if (doReset) { - $el.closest("form").off('.krajees2').on("reset.krajees2", function () { + $el.closest('form').off('.krajees2').on('reset.krajees2', function () { setTimeout(function () { - $el.trigger("change").trigger("krajeeselect2:reset"); + $el.trigger('change').trigger('krajeeselect2:reset'); }, 100); }); } @@ -146,5 +166,11 @@ var initS2ToggleAll = function () { $el.on('change.krajees2', function () { setTimeout(initS2Change, 500); }).on('select2:unselecting.krajees2', initS2Unselect); + setTimeout(function () { + if ($el.attr('multiple') && $el.attr('dir') === 'rtl') { + $el.parent().find('.select2-search__field').css({width: '100%', direction: 'rtl'}); + $el.parent().find('.select2-search--inline').css({float: 'none'}); + } + }, 100); }; })); \ No newline at end of file diff --git a/src/assets/js/select2-krajee.min.js b/src/assets/js/select2-krajee.min.js index bb8e9f5..3c8b3af 100644 --- a/src/assets/js/select2-krajee.min.js +++ b/src/assets/js/select2-krajee.min.js @@ -7,4 +7,4 @@ * Author: Kartik Visweswaran * For more JQuery plugins visit http://plugins.krajee.com * For more Yii related demos visit http://demos.krajee.com - */var initS2ToggleAll=function(){},initS2Order=function(){},initS2Loading=function(){},initS2Change=function(){},initS2Unselect=function(){};!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){"use strict";initS2ToggleAll=function(t){var n=e("#"+t),s="#s2-togall-"+t,l=e(s);n.attr("multiple")&&(n.on("select2:open.krajees2",function(){l.parent().attr("id")!=="parent-"+s&&n.attr("multiple")&&(e("#select2-"+t+"-results").closest(".select2-dropdown").prepend(l),e("#parent-"+s).remove())}).on("change.krajeeselect2",function(){if(n.attr("multiple")){var t=0,s=n.val()?n.val().length:0;l.removeClass("s2-togall-select s2-togall-unselect"),n.find("option:enabled").each(function(){e(this).val().length&&t++}),0===t||s!==t?l.addClass("s2-togall-select"):l.addClass("s2-togall-unselect")}}),l.off(".krajees2").on("click.krajees2",function(){var e=l.hasClass("s2-togall-select"),t=!0,s="selectall";e||(t=!1,s="unselectall"),n.find("option:not([disabled])").prop("selected",t),n.select2("close").trigger("krajeeselect2:"+s).trigger("change")}))},initS2Change=function(t){t=t||e(this);var n,s,l=e(".select2-container--open"),o=t.parents("[class*='has-']");if(o.length)for(n=o[0].className.split(/\s+/),s=0;s0&&e(l).length===i?o.addClass("s2-togall-unselect"):o.addClass("s2-togall-select"),n()},100)}))}).on("change.krajees2",function(){if(s.attr("multiple")){var t=0,l=s.val()?s.val().length:0;o.removeClass("s2-togall-select s2-togall-unselect"),s.find("option:enabled").each(function(){e(this).val().length&&t++}),0===t||l!==t?o.addClass("s2-togall-select"):o.addClass("s2-togall-unselect"),n()}}),n())},initS2Change=function(t){t=t||e(this);var n,s,l=e(".select2-container--open"),o=t.parents("[class*='has-']");if(o.length)for(n=o[0].className.split(/\s+/),s=0;s