From 9c219fe3369a56a1963eb5aee32b23bac9d7aa8d Mon Sep 17 00:00:00 2001 From: Shahadat Shuvo Date: Fri, 24 Dec 2021 19:53:52 +0600 Subject: [PATCH 1/2] Add image on every option of select Add image on every option of select with data-image attribute. tag will be appended inside option if the data-image attribute is not empty. --- js/jquery.nice-select.js | 362 ++++++++++++++++++++------------------- 1 file changed, 182 insertions(+), 180 deletions(-) diff --git a/js/jquery.nice-select.js b/js/jquery.nice-select.js index 57fe3b2..1b67e7a 100644 --- a/js/jquery.nice-select.js +++ b/js/jquery.nice-select.js @@ -1,190 +1,192 @@ /* jQuery Nice Select - v1.1.0 https://github.com/hernansartorio/jquery-nice-select Made by Hernán Sartorio */ - -(function($) { - $.fn.niceSelect = function(method) { - - // Methods - if (typeof method == 'string') { - if (method == 'update') { - this.each(function() { - var $select = $(this); - var $dropdown = $(this).next('.nice-select'); - var open = $dropdown.hasClass('open'); - - if ($dropdown.length) { - $dropdown.remove(); - create_nice_select($select); - - if (open) { - $select.next().trigger('click'); + (function($) { + + $.fn.niceSelect = function(method) { + + // Methods + if (typeof method == 'string') { + if (method == 'update') { + this.each(function() { + var $select = $(this); + var $dropdown = $(this).next('.nice-select'); + var open = $dropdown.hasClass('open'); + + if ($dropdown.length) { + $dropdown.remove(); + create_nice_select($select); + + if (open) { + $select.next().trigger('click'); + } + } + }); + } else if (method == 'destroy') { + this.each(function() { + var $select = $(this); + var $dropdown = $(this).next('.nice-select'); + + if ($dropdown.length) { + $dropdown.remove(); + $select.css('display', ''); + } + }); + if ($('.nice-select').length == 0) { + $(document).off('.nice_select'); + } + } else { + console.log('Method "' + method + '" does not exist.') } + return this; } - }); - } else if (method == 'destroy') { - this.each(function() { - var $select = $(this); - var $dropdown = $(this).next('.nice-select'); - - if ($dropdown.length) { - $dropdown.remove(); - $select.css('display', ''); - } - }); - if ($('.nice-select').length == 0) { - $(document).off('.nice_select'); - } - } else { - console.log('Method "' + method + '" does not exist.') - } - return this; - } - - // Hide native select - this.hide(); - - // Create custom markup - this.each(function() { - var $select = $(this); - - if (!$select.next().hasClass('nice-select')) { - create_nice_select($select); - } - }); - - function create_nice_select($select) { - $select.after($('
') - .addClass('nice-select') - .addClass($select.attr('class') || '') - .addClass($select.attr('disabled') ? 'disabled' : '') - .attr('tabindex', $select.attr('disabled') ? null : '0') - .html('') - ); - - var $dropdown = $select.next(); - var $options = $select.find('option'); - var $selected = $select.find('option:selected'); - - $dropdown.find('.current').html($selected.data('display') || $selected.text()); - - $options.each(function(i) { - var $option = $(this); - var display = $option.data('display'); + + // Hide native select + this.hide(); + + // Create custom markup + this.each(function() { + var $select = $(this); + + if (!$select.next().hasClass('nice-select')) { + create_nice_select($select); + } + }); + + function create_nice_select($select) { + $select.after($('
') + .addClass('nice-select') + .addClass($select.attr('class') || '') + .addClass($select.attr('disabled') ? 'disabled' : '') + .attr('tabindex', $select.attr('disabled') ? null : '0') + .html('') + ); + + var $dropdown = $select.next(); + var $options = $select.find('option'); + var $selected = $select.find('option:selected'); + $dropdown.find('.current').html($selected.data('display') || $selected.attr('data-image') ? "" + $selected.text() : $selected.text()); - $dropdown.find('ul').append($('
  • ') - .attr('data-value', $option.val()) - .attr('data-display', (display || null)) - .addClass('option' + - ($option.is(':selected') ? ' selected' : '') + - ($option.is(':disabled') ? ' disabled' : '')) - .html($option.text()) - ); - }); - } - - /* Event listeners */ - - // Unbind existing events in case that the plugin has been initialized before - $(document).off('.nice_select'); - - // Open/close - $(document).on('click.nice_select', '.nice-select', function(event) { - var $dropdown = $(this); - - $('.nice-select').not($dropdown).removeClass('open'); - $dropdown.toggleClass('open'); - - if ($dropdown.hasClass('open')) { - $dropdown.find('.option'); - $dropdown.find('.focus').removeClass('focus'); - $dropdown.find('.selected').addClass('focus'); - } else { - $dropdown.focus(); - } - }); - - // Close when clicking outside - $(document).on('click.nice_select', function(event) { - if ($(event.target).closest('.nice-select').length === 0) { - $('.nice-select').removeClass('open').find('.option'); - } - }); - - // Option click - $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) { - var $option = $(this); - var $dropdown = $option.closest('.nice-select'); - - $dropdown.find('.selected').removeClass('selected'); - $option.addClass('selected'); - - var text = $option.data('display') || $option.text(); - $dropdown.find('.current').text(text); - - $dropdown.prev('select').val($option.data('value')).trigger('change'); - }); + $options.each(function(i) { + var $option = $(this); + var display = $option.data('display'); + + $dropdown.find('ul').append($('
  • ') + .attr('data-value', $option.val()) + .attr('data-image', $option.attr('data-image')) + .attr('data-display', (display || null)) + .addClass('option' + + ($option.is(':selected') ? ' selected' : '') + + ($option.is(':disabled') ? ' disabled' : '')) + .html($option.attr('data-image') ? "" + $option.text() : $option.text()) + ); + + }); - // Keyboard events - $(document).on('keydown.nice_select', '.nice-select', function(event) { - var $dropdown = $(this); - var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected')); - - // Space or Enter - if (event.keyCode == 32 || event.keyCode == 13) { - if ($dropdown.hasClass('open')) { - $focused_option.trigger('click'); - } else { - $dropdown.trigger('click'); - } - return false; - // Down - } else if (event.keyCode == 40) { - if (!$dropdown.hasClass('open')) { - $dropdown.trigger('click'); - } else { - var $next = $focused_option.nextAll('.option:not(.disabled)').first(); - if ($next.length > 0) { - $dropdown.find('.focus').removeClass('focus'); - $next.addClass('focus'); } - } - return false; - // Up - } else if (event.keyCode == 38) { - if (!$dropdown.hasClass('open')) { - $dropdown.trigger('click'); - } else { - var $prev = $focused_option.prevAll('.option:not(.disabled)').first(); - if ($prev.length > 0) { - $dropdown.find('.focus').removeClass('focus'); - $prev.addClass('focus'); + + /* Event listeners */ + + // Unbind existing events in case that the plugin has been initialized before + $(document).off('.nice_select'); + + // Open/close + $(document).on('click.nice_select', '.nice-select', function(event) { + var $dropdown = $(this); + + $('.nice-select').not($dropdown).removeClass('open'); + $dropdown.toggleClass('open'); + + if ($dropdown.hasClass('open')) { + $dropdown.find('.option'); + $dropdown.find('.focus').removeClass('focus'); + $dropdown.find('.selected').addClass('focus'); + } else { + $dropdown.focus(); + } + }); + + // Close when clicking outside + $(document).on('click.nice_select', function(event) { + if ($(event.target).closest('.nice-select').length === 0) { + $('.nice-select').removeClass('open').find('.option'); + } + }); + + // Option click + $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) { + var $option = $(this); + var $dropdown = $option.closest('.nice-select'); + + $dropdown.find('.selected').removeClass('selected'); + $option.addClass('selected'); + + var text = $option.data('display') || "" + $option.text(); + $dropdown.find('.current').html(text); + + $dropdown.prev('select').val($option.data('value')).trigger('change'); + }); + + // Keyboard events + $(document).on('keydown.nice_select', '.nice-select', function(event) { + var $dropdown = $(this); + var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected')); + + // Space or Enter + if (event.keyCode == 32 || event.keyCode == 13) { + if ($dropdown.hasClass('open')) { + $focused_option.trigger('click'); + } else { + $dropdown.trigger('click'); + } + return false; + // Down + } else if (event.keyCode == 40) { + if (!$dropdown.hasClass('open')) { + $dropdown.trigger('click'); + } else { + var $next = $focused_option.nextAll('.option:not(.disabled)').first(); + if ($next.length > 0) { + $dropdown.find('.focus').removeClass('focus'); + $next.addClass('focus'); + } + } + return false; + // Up + } else if (event.keyCode == 38) { + if (!$dropdown.hasClass('open')) { + $dropdown.trigger('click'); + } else { + var $prev = $focused_option.prevAll('.option:not(.disabled)').first(); + if ($prev.length > 0) { + $dropdown.find('.focus').removeClass('focus'); + $prev.addClass('focus'); + } + } + return false; + // Esc + } else if (event.keyCode == 27) { + if ($dropdown.hasClass('open')) { + $dropdown.trigger('click'); + } + // Tab + } else if (event.keyCode == 9) { + if ($dropdown.hasClass('open')) { + return false; + } + } + }); + + // Detect CSS pointer-events support, for IE <= 10. From Modernizr. + var style = document.createElement('a').style; + style.cssText = 'pointer-events:auto'; + if (style.pointerEvents !== 'auto') { + $('html').addClass('no-csspointerevents'); } - } - return false; - // Esc - } else if (event.keyCode == 27) { - if ($dropdown.hasClass('open')) { - $dropdown.trigger('click'); - } - // Tab - } else if (event.keyCode == 9) { - if ($dropdown.hasClass('open')) { - return false; - } - } - }); - - // Detect CSS pointer-events support, for IE <= 10. From Modernizr. - var style = document.createElement('a').style; - style.cssText = 'pointer-events:auto'; - if (style.pointerEvents !== 'auto') { - $('html').addClass('no-csspointerevents'); - } - - return this; - - }; - -}(jQuery)); \ No newline at end of file + + return this; + + }; + + }(jQuery)); From ef1c248fc8f190470c7f15b0f3e197c49211d80b Mon Sep 17 00:00:00 2001 From: Shahadat Shuvo Date: Fri, 24 Dec 2021 23:44:34 +0600 Subject: [PATCH 2/2] Update jquery.nice-select.js --- js/jquery.nice-select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.nice-select.js b/js/jquery.nice-select.js index 1b67e7a..be57339 100644 --- a/js/jquery.nice-select.js +++ b/js/jquery.nice-select.js @@ -122,7 +122,7 @@ $dropdown.find('.selected').removeClass('selected'); $option.addClass('selected'); - var text = $option.data('display') || "" + $option.text(); + var text = $option.data('display') || $option.attr('data-image') ? "" + $option.text() : $option.text(); $dropdown.find('.current').html(text); $dropdown.prev('select').val($option.data('value')).trigger('change');