From 84bd84ffd7a65d2e64c4779cf1e2e6aebf9ca3ab Mon Sep 17 00:00:00 2001
From: Vaibhav Mule <vaibhavmule135@gmail.com>
Date: Fri, 6 Mar 2020 13:51:10 +0000
Subject: [PATCH] upgrade Django Select 2
---
.../static/js/django_select2-checkboxes.js | 54 ++++--
.../static/js/select2.multi-checkboxes.js | 181 +++++++++++-------
.../src/sass/apply/components/_select2.scss | 8 +-
requirements.txt | 2 +-
4 files changed, 152 insertions(+), 93 deletions(-)
diff --git a/hypha/apply/dashboard/static/js/django_select2-checkboxes.js b/hypha/apply/dashboard/static/js/django_select2-checkboxes.js
index a024d320e..63ecf8588 100644
--- a/hypha/apply/dashboard/static/js/django_select2-checkboxes.js
+++ b/hypha/apply/dashboard/static/js/django_select2-checkboxes.js
@@ -1,23 +1,35 @@
-(function ($) {
- var init = function ($element) {
- options = {
- placeholder: $element.data('placeholder'),
- templateSelection: function(selected, total) {
- let filterType = this.placeholder;
- if ( !selected.length ) {
- return filterType;
- } else if ( selected.length===total ) {
- return 'All ' + filterType + ' selected';
- }
- return selected.length + ' of ' + total + ' ' + filterType + ' selected';
- }
- };
- $element.select2MultiCheckboxes(options);
- };
- $(function () {
+/* global jQuery */
+(function($) {
+ $.fn.select2.amd.require(
+ [
+ 'select2/multi-checkboxes/dropdown',
+ 'select2/multi-checkboxes/selection',
+ 'select2/multi-checkboxes/results'
+ ],
+ function(DropdownAdapter, SelectionAdapter, ResultsAdapter) {
+
+ $(function () {
$('.django-select2-checkboxes').each(function (i, element) {
- var $element = $(element);
- init($element);
+ var $element = $(element)
+
+ $element.select2({
+ placeholder: $element.data('placeholder'),
+ templateSelection: function(data) {
+ let filterType = $element.data('placeholder');
+
+ if (!data.selected.length) {
+ return filterType
+ } else if (data.selected.length == data.all.length ) {
+ return 'All ' + filterType + ' selected';
+ }
+ return data.selected.length + ' of ' + data.all.length + ' ' + filterType + ' selected';
+ },
+ selectionAdapter: SelectionAdapter,
+ resultsAdapter: ResultsAdapter
+ });
+
});
- });
-}(this.jQuery));
+ });
+ }
+ );
+}(this.jQuery));
\ No newline at end of file
diff --git a/hypha/apply/dashboard/static/js/select2.multi-checkboxes.js b/hypha/apply/dashboard/static/js/select2.multi-checkboxes.js
index ec6182afb..815268be4 100644
--- a/hypha/apply/dashboard/static/js/select2.multi-checkboxes.js
+++ b/hypha/apply/dashboard/static/js/select2.multi-checkboxes.js
@@ -3,77 +3,124 @@
* - allow to select multi values via normal dropdown control
*
* author : wasikuss
- * repo : https://github.com/wasikuss/select2-multi-checkboxes
+ * repo : https://github.com/wasikuss/select2-multi-checkboxes/tree/amd
* inspired by : https://github.com/select2/select2/issues/411
* License : MIT
*/
-(function($) {
- var S2MultiCheckboxes = function(options, element) {
- var self = this;
- self.options = options;
- self.$element = $(element);
- var values = self.$element.val();
- self.$element.removeAttr('multiple');
- self.select2 = self.$element.select2({
- allowClear: true,
- minimumResultsForSearch: options.minimumResultsForSearch,
- placeholder: options.placeholder,
- closeOnSelect: false,
- templateSelection: function() {
- return self.options.templateSelection(self.$element.val() || [], $('option', self.$element).length);
- },
- templateResult: function(result) {
- if (result.loading !== undefined)
- return result.text;
- return $('<div>').text(result.text).addClass(self.options.wrapClass);
- },
- matcher: function(params, data) {
- var original_matcher = $.fn.select2.defaults.defaults.matcher;
- var result = original_matcher(params, data);
- if (result && self.options.searchMatchOptGroups && data.children && result.children && data.children.length != result.children.length) {
- result.children = data.children;
- }
- return result;
- }
- }).data('select2');
- self.select2.$results.off("mouseup").on("mouseup", ".select2-results__option[aria-selected]", (function(self) {
- return function(evt) {
- var $this = $(this);
-
- var data = $this.data('data');
-
- if ($this.attr('aria-selected') === 'true') {
- self.trigger('unselect', {
- originalEvent: evt,
- data: data
- });
- return;
- }
-
- self.trigger('select', {
- originalEvent: evt,
- data: data
- });
- }
- })(self.select2));
- self.$element.attr('multiple', 'multiple').val(values).trigger('change.select2');
+
+/* global define jQuery */
+(function(factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery'], factory);
+ } else {
+ // Browser globals
+ factory(jQuery);
+ }
+}(function(jQuery) {
+ if (jQuery && jQuery.fn && jQuery.fn.select2 && jQuery.fn.select2.amd) {
+ define = jQuery.fn.select2.amd.define;
}
+ var define;
- $.fn.extend({
- select2MultiCheckboxes: function() {
- var options = $.extend({
- placeholder: 'Choose elements',
- templateSelection: function(selected, total) {
- return selected.length + ' > ' + total + ' total';
- },
- wrapClass: 'wrap',
- minimumResultsForSearch: -1,
- searchMatchOptGroups: true
- }, arguments[0]);
-
- this.each(function() {
- new S2MultiCheckboxes(options, this);
- });
+ /* global define */
+ define('select2/multi-checkboxes/dropdown', [
+ 'select2/utils',
+ 'select2/dropdown',
+ 'select2/dropdown/search',
+ 'select2/dropdown/attachBody'
+ ],
+ function(Utils, Dropdown, DropdownSearch, AttachBody) {
+ return Utils.Decorate(
+ Utils.Decorate(
+ Dropdown,
+ DropdownSearch
+ ),
+ AttachBody
+ );
+ });
+
+
+ /* global define */
+ define('select2/multi-checkboxes/results', [
+ 'jquery',
+ 'select2/utils',
+ 'select2/results'
+ ],
+ function($, Utils, _Results) {
+ function Results() {
+ Results.__super__.constructor.apply(this, arguments);
}
+ Utils.Extend(Results, _Results);
+
+ Results.prototype.highlightFirstItem = function() {
+ this.ensureHighlightVisible();
+ };
+
+ Results.prototype.bind = function(container) {
+ container.on('open', function() {
+ var $options = this.$results.find('.select2-results__option[aria-selected]');
+ var $selected = $options.filter('[aria-selected=true]');
+ var $optionToScrollTo = ($selected.length > 0 ? $selected : $selected).first();
+ $optionToScrollTo.trigger('mouseenter');
+ });
+ Results.__super__.bind.apply(this, arguments);
+ };
+
+ Results.prototype.template = function(result, container) {
+ var template = this.options.get('templateResult');
+ var escapeMarkup = this.options.get('escapeMarkup');
+
+ var content = template(result, container);
+ $(container).addClass('multi-checkboxes_wrap');
+
+ if (content == null) {
+ container.style.display = 'none';
+ } else if (typeof content === 'string') {
+ container.innerHTML = escapeMarkup(content);
+ } else {
+ $(container).append(content);
+ }
+ };
+
+ return Results;
+ });
+
+
+ /* global define */
+ define('select2/multi-checkboxes/selection', [
+ 'select2/utils',
+ 'select2/selection/multiple',
+ 'select2/selection/placeholder',
+ 'select2/selection/single',
+ 'select2/selection/eventRelay'
+ ],
+ function(Utils, MultipleSelection, Placeholder, SingleSelection, EventRelay) {
+ var adapter = Utils.Decorate(MultipleSelection, Placeholder);
+ adapter = Utils.Decorate(adapter, EventRelay);
+
+ adapter.prototype.render = function() {
+ return SingleSelection.prototype.render.call(this);
+ };
+
+ adapter.prototype.update = function(data) {
+ var $rendered = this.$selection.find('.select2-selection__rendered');
+ var formatted = '';
+
+ if (data.length === 0) {
+ formatted = this.options.get('placeholder') || '';
+ } else {
+ var itemsData = {
+ selected: data || [],
+ all: this.$element.find('option') || []
+ };
+ formatted = this.display(itemsData, $rendered);
+ }
+
+ $rendered.empty().append(formatted);
+ $rendered.prop('title', formatted);
+ };
+
+ return adapter;
});
-})(jQuery);
+})
+);
diff --git a/hypha/static_src/src/sass/apply/components/_select2.scss b/hypha/static_src/src/sass/apply/components/_select2.scss
index dff4cdb83..fa4207c8d 100644
--- a/hypha/static_src/src/sass/apply/components/_select2.scss
+++ b/hypha/static_src/src/sass/apply/components/_select2.scss
@@ -71,17 +71,17 @@ $dropdown-height: 45px;
padding: 0;
&[aria-selected='true'] {
- .wrap {
+
&::before {
background: url('./../../images/tick.svg') $color--dark-blue center no-repeat;
background-size: 12px;
border: 1px solid $color--dark-blue;
content: '';
}
- }
+
}
- .wrap {
+
display: flex;
align-items: center;
padding: 6px;
@@ -94,6 +94,6 @@ $dropdown-height: 45px;
border: 1px solid $color--mid-grey;
content: '';
}
- }
+
}
}
diff --git a/requirements.txt b/requirements.txt
index 17af6dd3e..33881388f 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -25,7 +25,7 @@ django-tables2==1.21.2
django-tinymce4-lite==1.7.5
django-two-factor-auth==1.9.1
django-webpack-loader==0.6.0
-django_select2==7.1.1
+django_select2==7.2.0
djangorestframework==3.9.2
djangorestframework-api-key==1.4.1
django==2.2.11
--
GitLab