Skip to content
Snippets Groups Projects
Unverified Commit cbb08de2 authored by Fredrik Jonsson's avatar Fredrik Jonsson Committed by GitHub
Browse files

Merge pull request #1844 from OpenTechFund/maintenance/update-select2-checkbox 

Upgrade Django Select 2
parents 0ba13cda 1a46bf01
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
hypha/apply/dashboard/static/js/django_select2-checkboxes.js
+ 28
− 20
View file @ cbb08de2
(function ($) { (function($) {
var init = function ($element) { $.fn.select2.amd.require(
options = { [
placeholder: $element.data('placeholder'), 'select2/multi-checkboxes/selection',
templateSelection: function(selected, total) { 'select2/multi-checkboxes/results'
let filterType = this.placeholder; ],
if ( !selected.length ) { function(SelectionAdapter, ResultsAdapter) {
return filterType;
} else if ( selected.length===total ) { $(function () {
return 'All ' + filterType + ' selected';
}
return selected.length + ' of ' + total + ' ' + filterType + ' selected';
}
};
$element.select2MultiCheckboxes(options);
};
$(function () {
$('.django-select2-checkboxes').each(function (i, element) { $('.django-select2-checkboxes').each(function (i, element) {
var $element = $(element); var $element = $(element);
init($element); $element.select2({
placeholder: $element.data('placeholder'),
closeOnSelect: false,
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,
returnesultsAdapter: ResultsAdapter
});
}); });
});
}); });
}(this.jQuery)); }(this.jQuery));
\ No newline at end of file
hypha/apply/dashboard/static/js/select2.multi-checkboxes.js
+ 114
− 67
View file @ cbb08de2
...@@ -3,77 +3,124 @@ ...@@ -3,77 +3,124 @@
* - allow to select multi values via normal dropdown control * - allow to select multi values via normal dropdown control
* *
* author : wasikuss * 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 * inspired by : https://github.com/select2/select2/issues/411
* License : MIT * License : MIT
*/ */
(function($) {
var S2MultiCheckboxes = function(options, element) { /* global define jQuery */
var self = this; (function(factory) {
self.options = options; if (typeof define === 'function' && define.amd) {
self.$element = $(element); define(['jquery'], factory);
var values = self.$element.val(); } else {
self.$element.removeAttr('multiple'); // Browser globals
self.select2 = self.$element.select2({ factory(jQuery);
allowClear: true, }
minimumResultsForSearch: options.minimumResultsForSearch, }(function(jQuery) {
placeholder: options.placeholder, if (jQuery && jQuery.fn && jQuery.fn.select2 && jQuery.fn.select2.amd) {
closeOnSelect: false, define = jQuery.fn.select2.amd.define;
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');
} }
var define;
$.fn.extend({ /* global define */
select2MultiCheckboxes: function() { define('select2/multi-checkboxes/dropdown', [
var options = $.extend({ 'select2/utils',
placeholder: 'Choose elements', 'select2/dropdown',
templateSelection: function(selected, total) { 'select2/dropdown/search',
return selected.length + ' > ' + total + ' total'; 'select2/dropdown/attachBody'
}, ],
wrapClass: 'wrap', function(Utils, Dropdown, DropdownSearch, AttachBody) {
minimumResultsForSearch: -1, return Utils.Decorate(
searchMatchOptGroups: true Utils.Decorate(
}, arguments[0]); Dropdown,
DropdownSearch
this.each(function() { ),
new S2MultiCheckboxes(options, this); 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); })
);
hypha/static_src/src/sass/apply/components/_select2.scss
+ 15
− 21
View file @ cbb08de2
...@@ -68,30 +68,24 @@ $dropdown-height: 45px; ...@@ -68,30 +68,24 @@ $dropdown-height: 45px;
} }
.select2-results__option { .select2-results__option {
padding: 0; display: flex;
align-items: center;
&[aria-selected='true'] { padding: 6px;
.wrap {
&::before { &::before {
background: url('./../../images/tick.svg') $color--dark-blue center no-repeat; min-width: 20px;
background-size: 12px; height: 20px;
border: 1px solid $color--dark-blue; margin-right: 10px;
content: ''; background: $color--white;
} border: 1px solid $color--mid-grey;
} content: '';
} }
.wrap { &[aria-selected='true'] {
display: flex;
align-items: center;
padding: 6px;
&::before { &::before {
min-width: 20px; background: url('./../../images/tick.svg') $color--dark-blue center no-repeat;
height: 20px; background-size: 12px;
margin-right: 10px; border: 1px solid $color--dark-blue;
background: $color--white;
border: 1px solid $color--mid-grey;
content: ''; content: '';
} }
} }
......
hypha/static_src/src/sass/public/components/_select2.scss
+ 22
− 31
View file @ cbb08de2
$dropdown-height: 45px;
.select2 { .select2 {
&-container { &-container {
z-index: 99995; // to override any modals z-index: 99995; // to override any modals
...@@ -8,7 +10,7 @@ ...@@ -8,7 +10,7 @@
width: 100% !important; // sass-lint:disable-line no-important width: 100% !important; // sass-lint:disable-line no-important
.select2-selection--single { .select2-selection--single {
height: 55px; height: $dropdown-height;
border: 1px solid $color--mid-grey; border: 1px solid $color--mid-grey;
border-radius: 0; border-radius: 0;
...@@ -18,27 +20,22 @@ ...@@ -18,27 +20,22 @@
} }
.select2-selection__clear { .select2-selection__clear {
position: absolute;
right: 35px;
display: none; display: none;
float: none;
@include media-query(small-tablet) {
display: block;
}
} }
.select2-selection__rendered { .select2-selection__rendered {
padding-left: 15px; padding-left: 15px;
line-height: 55px; padding-right: 30px;
line-height: $dropdown-height;
} }
.select2-selection__arrow { .select2-selection__arrow {
right: 15px; right: 15px;
height: 53px; height: $dropdown-height;
pointer-events: none; pointer-events: none;
background: url('./../../images/dropdown.svg') transparent no-repeat 95% center; background: url('./../../images/dropdown.svg') transparent no-repeat 95% center;
background-size: 8px; background-size: 8px;
width: 8px;
b[role='presentation'] { b[role='presentation'] {
display: none; display: none;
...@@ -71,30 +68,24 @@ ...@@ -71,30 +68,24 @@
} }
.select2-results__option { .select2-results__option {
padding: 0; display: flex;
align-items: center;
&[aria-selected='true'] { padding: 6px;
.wrap {
&::before { &::before {
background: url('./../../images/tick.svg') $color--dark-blue center no-repeat; min-width: 20px;
background-size: 12px; height: 20px;
border: 1px solid $color--dark-blue; margin-right: 10px;
content: ''; background: $color--white;
} border: 1px solid $color--mid-grey;
} content: '';
} }
.wrap { &[aria-selected='true'] {
display: flex;
align-items: center;
padding: 6px;
&::before { &::before {
width: 20px; background: url('./../../images/tick.svg') $color--dark-blue center no-repeat;
height: 20px; background-size: 12px;
margin-right: 10px; border: 1px solid $color--dark-blue;
background: $color--white;
border: 1px solid $color--mid-grey;
content: ''; content: '';
} }
} }
......
requirements.txt
+ 1
− 1
View file @ cbb08de2
...@@ -25,7 +25,7 @@ django-tables2==1.21.2 ...@@ -25,7 +25,7 @@ django-tables2==1.21.2
django-tinymce4-lite==1.7.5 django-tinymce4-lite==1.7.5
django-two-factor-auth==1.9.1 django-two-factor-auth==1.9.1
django-webpack-loader==0.6.0 django-webpack-loader==0.6.0
django_select2==7.1.1 django_select2==7.2.2
djangorestframework==3.9.2 djangorestframework==3.9.2
djangorestframework-api-key==1.4.1 djangorestframework-api-key==1.4.1
django==2.2.11 django==2.2.11
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment