diff options
| -rw-r--r-- | templates/web/base/common_header_tags.html | 2 | ||||
| -rw-r--r-- | templates/web/base/common_scripts.html | 2 | ||||
| -rw-r--r-- | web/vendor/jquery.multi-select.js | 337 | ||||
| -rw-r--r-- | web/vendor/jquery.multi-select.min.js | 9 |
4 files changed, 11 insertions, 339 deletions
diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html index f65f1e336..151fe2c1c 100644 --- a/templates/web/base/common_header_tags.html +++ b/templates/web/base/common_header_tags.html @@ -39,7 +39,7 @@ [%~ IF NOT c.user_exists OR NOT (c.user.from_body OR c.user.is_superuser) %] <link rel="prefetch" href="[% version('/jslib/jquery-1.7.2.min.js') %]"> [%~ END %] - <link rel="prefetch" href="[% version('/js/jquery.multi-select.js') %]"> + <link rel="prefetch" href="[% version('/vendor/jquery.multi-select.min.js') %]"> <link rel="prefetch" href="[% version('/vendor/jquery.validate.min.js') %]"> <link rel="prefetch" href="[% version('/cobrands/fixmystreet/fixmystreet.js') %]"> [% END %] diff --git a/templates/web/base/common_scripts.html b/templates/web/base/common_scripts.html index 5bd9f9c76..4c8fcfe74 100644 --- a/templates/web/base/common_scripts.html +++ b/templates/web/base/common_scripts.html @@ -27,7 +27,7 @@ ELSE; scripts.push( version('/js/validation_rules.js'), version('/jslib/jquery-1.7.2.min.js'), - version('/vendor/jquery.multi-select.js'), + version('/vendor/jquery.multi-select.min.js'), version('/vendor/jquery.validate.min.js'), version('/cobrands/fixmystreet/fixmystreet.js'), ); diff --git a/web/vendor/jquery.multi-select.js b/web/vendor/jquery.multi-select.js deleted file mode 100644 index 976cd29ad..000000000 --- a/web/vendor/jquery.multi-select.js +++ /dev/null @@ -1,337 +0,0 @@ -// jquery.multi-select.js -// by mySociety -// https://github.com/mysociety/jquery-multi-select - -;(function($) { - - "use strict"; - - var pluginName = "multiSelect", - defaults = { - 'containerHTML': '<div class="multi-select-container">', - 'menuHTML': '<div class="multi-select-menu">', - 'buttonHTML': '<span class="multi-select-button">', - 'menuItemsHTML': '<div class="multi-select-menuitems">', - 'menuItemHTML': '<label class="multi-select-menuitem">', - 'presetsHTML': '<div class="multi-select-presets">', - 'activeClass': 'multi-select-container--open', - 'noneText': '-- Select --', - 'allText': undefined, - 'presets': undefined, - 'positionedMenuClass': 'multi-select-container--positioned', - 'positionMenuWithin': undefined - }; - - function Plugin(element, options) { - this.element = element; - this.$element = $(element); - this.settings = $.extend( {}, defaults, options ); - this._defaults = defaults; - this._name = pluginName; - this.init(); - } - - function arraysAreEqual(array1, array2) { - if ( array1.length != array2.length ){ - return false; - } - - array1.sort(); - array2.sort(); - - for ( var i = 0; i < array1.length; i++ ){ - if ( array1[i] !== array2[i] ){ - return false; - } - } - - return true; - } - - $.extend(Plugin.prototype, { - - init: function() { - this.checkSuitableInput(); - this.findLabels(); - this.constructContainer(); - this.constructButton(); - this.constructMenu(); - - this.setUpBodyClickListener(); - this.setUpLabelsClickListener(); - - this.$element.hide(); - }, - - checkSuitableInput: function(text) { - if ( this.$element.is('select[multiple]') === false ) { - throw new Error('$.multiSelect only works on <select multiple> elements'); - } - }, - - findLabels: function() { - this.$labels = $('label[for="' + this.$element.attr('id') + '"]'); - }, - - constructContainer: function() { - this.$container = $(this.settings['containerHTML']); - this.$element.data('multi-select-container', this.$container); - this.$container.insertAfter(this.$element); - }, - - constructButton: function() { - var _this = this; - this.$button = $(this.settings['buttonHTML']); - this.$button.attr({ - 'role': 'button', - 'aria-haspopup': 'true', - 'tabindex': 0, - 'aria-label': this.$labels.eq(0).text() - }) - .on('keydown.multiselect', function(e) { - var key = e.which; - var returnKey = 13; - var spaceKey = 32; - if ((key === returnKey) || (key === spaceKey)) { - _this.$button.click(); - } - }).on('click.multiselect', function(e) { - _this.menuToggle(); - }) - .appendTo(this.$container); - - this.$element.on('change.multiselect', function() { - _this.updateButtonContents(); - }); - - this.updateButtonContents(); - }, - - updateButtonContents: function() { - var _this = this; - var options = []; - var selected = []; - - this.$element.children('option').each(function() { - var text = $(this).text(); - options.push(text); - if ($(this).is(':selected')) { - selected.push( $.trim(text) ); - } - }); - - this.$button.empty(); - - if (selected.length == 0) { - this.$button.text( this.settings['noneText'] ); - } else if ( (selected.length === options.length) && this.settings['allText']) { - this.$button.text( this.settings['allText'] ); - } else { - this.$button.text( selected.join(', ') ); - } - }, - - constructMenu: function() { - var _this = this; - - this.$menu = $(this.settings['menuHTML']); - this.$menu.attr({ - 'role': 'menu' - }).on('keyup.multiselect', function(e){ - var key = e.which; - var escapeKey = 27; - if (key === escapeKey) { - _this.menuHide(); - } - }) - .appendTo(this.$container); - - this.constructMenuItems(); - - if ( this.settings['presets'] ) { - this.constructPresets(); - } - }, - - constructMenuItems: function() { - var _this = this; - - this.$menuItems = $(this.settings['menuItemsHTML']); - this.$menu.append(this.$menuItems); - - this.$element.on('change.multiselect', function(e, internal) { - // Don't need to update the menu items if this - // change event was fired by our tickbox handler. - if(internal !== true){ - _this.updateMenuItems(); - } - }); - - this.updateMenuItems(); - }, - - updateMenuItems: function() { - var _this = this; - this.$menuItems.empty(); - - this.$element.children('option').each(function(option_index, option) { - var $item = _this.constructMenuItem($(option), option_index); - _this.$menuItems.append($item); - }); - }, - - constructPresets: function() { - var _this = this; - this.$presets = $(this.settings['presetsHTML']); - this.$menu.prepend(this.$presets); - - $.each(this.settings['presets'], function(i, preset){ - var unique_id = _this.$element.attr('name') + '_preset_' + i; - var $item = $(_this.settings['menuItemHTML']) - .attr({ - 'for': unique_id, - 'role': 'menuitem' - }) - .text(' ' + preset.name) - .appendTo(_this.$presets); - - var $input = $('<input>') - .attr({ - 'type': 'radio', - 'name': _this.$element.attr('name') + '_presets', - 'id': unique_id - }) - .prependTo($item); - - $input.on('change.multiselect', function(){ - _this.$element.val(preset.options); - _this.$element.trigger('change'); - }); - }); - - this.$element.on('change.multiselect', function() { - _this.updatePresets(); - }); - - this.updatePresets(); - }, - - updatePresets: function() { - var _this = this; - - $.each(this.settings['presets'], function(i, preset){ - var unique_id = _this.$element.attr('name') + '_preset_' + i; - var $input = _this.$presets.find('#' + unique_id); - - if ( arraysAreEqual(preset.options || [], _this.$element.val() || []) ){ - $input.prop('checked', true); - } else { - $input.prop('checked', false); - } - }); - }, - - constructMenuItem: function($option, option_index) { - var unique_id = this.$element.attr('name') + '_' + option_index; - var $item = $(this.settings['menuItemHTML']) - .attr({ - 'for': unique_id, - 'role': 'menuitem' - }) - .text(' ' + $option.text()); - - var $input = $('<input>') - .attr({ - 'type': 'checkbox', - 'id': unique_id, - 'value': $option.val() - }) - .prependTo($item); - - if ( $option.is(':disabled') ) { - $input.attr('disabled', 'disabled'); - } - if ( $option.is(':selected') ) { - $input.prop('checked', 'checked'); - } - - $input.on('change.multiselect', function() { - if ($(this).prop('checked')) { - $option.prop('selected', true); - } else { - $option.prop('selected', false); - } - - // .prop() on its own doesn't generate a change event. - // Other plugins might want to do stuff onChange. - $option.trigger('change', [true]); - }); - - return $item; - }, - - setUpBodyClickListener: function() { - var _this = this; - - // Hide the $menu when you click outside of it. - $('html').on('click.multiselect', function(){ - _this.menuHide(); - }); - - // Stop click events from inside the $button or $menu from - // bubbling up to the body and closing the menu! - this.$container.on('click.multiselect', function(e){ - e.stopPropagation(); - }); - }, - - setUpLabelsClickListener: function() { - var _this = this; - this.$labels.on('click.multiselect', function(e) { - e.preventDefault(); - e.stopPropagation(); - _this.menuToggle(); - }); - }, - - menuShow: function() { - $('html').trigger('click.multiselect'); // Close any other open menus - this.$container.addClass(this.settings['activeClass']); - if (this.settings['positionMenuWithin'] && this.settings['positionMenuWithin'] instanceof $) { - var menuLeftEdge = this.$menu.offset().left + this.$menu.outerWidth(); - var withinLeftEdge = this.settings['positionMenuWithin'].offset().left + - this.settings['positionMenuWithin'].outerWidth(); - - if( menuLeftEdge > withinLeftEdge ) { - this.$menu.css( 'width', (withinLeftEdge - this.$menu.offset().left) ); - this.$container.addClass(this.settings['positionedMenuClass']); - } - } - }, - - menuHide: function() { - this.$container.removeClass(this.settings['activeClass']); - this.$container.removeClass(this.settings['positionedMenuClass']); - this.$menu.css('width', 'auto'); - }, - - menuToggle: function() { - if ( this.$container.hasClass(this.settings['activeClass']) ) { - this.menuHide(); - } else { - this.menuShow(); - } - } - - }); - - $.fn[ pluginName ] = function(options) { - return this.each(function() { - if ( !$.data(this, "plugin_" + pluginName) ) { - $.data(this, "plugin_" + pluginName, - new Plugin(this, options) ); - } - }); - }; - -})(jQuery); diff --git a/web/vendor/jquery.multi-select.min.js b/web/vendor/jquery.multi-select.min.js new file mode 100644 index 000000000..6c7cefced --- /dev/null +++ b/web/vendor/jquery.multi-select.min.js @@ -0,0 +1,9 @@ +(function(c){function f(a,b){this.b=c(a);this.a=c.extend({},g,b);this.H()}var g={containerHTML:'<div class="multi-select-container">',menuHTML:'<div class="multi-select-menu">',buttonHTML:'<span class="multi-select-button">',menuItemsHTML:'<div class="multi-select-menuitems">',menuItemHTML:'<label class="multi-select-menuitem">',presetsHTML:'<div class="multi-select-presets">',activeClass:"multi-select-container--open",noneText:"-- Select --",allText:void 0,presets:void 0,positionedMenuClass:"multi-select-container--positioned", +positionMenuWithin:void 0};c.extend(f.prototype,{H:function(){this.v();this.G();this.A();this.w();this.B();this.J();this.K();this.b.hide()},v:function(){if(!1===this.b.is("select[multiple]"))throw Error("$.multiSelect only works on <select multiple> elements");},G:function(){this.l=c('label[for="'+this.b.attr("id")+'"]')},A:function(){this.c=c(this.a.containerHTML);this.b.data("multi-select-container",this.c);this.c.insertAfter(this.b)},w:function(){var a=this;this.g=c(this.a.buttonHTML);this.g.attr({role:"button", +"aria-haspopup":"true",tabindex:0,"aria-label":this.l.eq(0).text()}).on("keydown.multiselect",function(b){b=b.which;13!==b&&32!==b||a.g.click()}).on("click.multiselect",function(){a.m()}).appendTo(this.c);this.b.on("change.multiselect",function(){a.o()});this.o()},o:function(){var a=[],b=[];this.b.children("option").each(function(){var d=c(this).text();a.push(d);c(this).is(":selected")&&b.push(c.trim(d))});this.g.empty();0==b.length?this.g.text(this.a.noneText):b.length===a.length&&this.a.allText? +this.g.text(this.a.allText):this.g.text(b.join(", "))},B:function(){var a=this;this.f=c(this.a.menuHTML);this.f.attr({role:"menu"}).on("keyup.multiselect",function(b){27===b.which&&a.j()}).appendTo(this.c);this.D();this.a.presets&&this.F()},D:function(){var a=this;this.h=c(this.a.menuItemsHTML);this.f.append(this.h);this.b.on("change.multiselect",function(b,d){!0!==d&&a.s()});this.s()},s:function(){var a=this;this.h.empty();this.b.children("option").each(function(b,d){b=a.C(c(d),b);a.h.append(b)})}, +F:function(){var a=this;this.i=c(this.a.presetsHTML);this.f.prepend(this.i);c.each(this.a.presets,function(b,d){b=a.b.attr("name")+"_preset_"+b;var h=c(a.a.menuItemHTML).attr({"for":b,role:"menuitem"}).text(" "+d.name).appendTo(a.i);c("<input>").attr({type:"radio",name:a.b.attr("name")+"_presets",id:b}).prependTo(h).on("change.multiselect",function(){a.b.val(d.options);a.b.trigger("change")})});this.b.on("change.multiselect",function(){a.u()});this.u()},u:function(){var a=this;c.each(this.a.presets, +function(b,d){b=a.b.attr("name")+"_preset_"+b;b=a.i.find("#"+b);a:{d=d.options||[];var c=a.b.val()||[];if(d.length!=c.length)d=!1;else{d.sort();c.sort();for(var e=0;e<d.length;e++)if(d[e]!==c[e]){d=!1;break a}d=!0}}d?b.prop("checked",!0):b.prop("checked",!1)})},C:function(a,b){var d=this.b.attr("name")+"_"+b;b=c(this.a.menuItemHTML).attr({"for":d,role:"menuitem"}).text(" "+a.text());d=c("<input>").attr({type:"checkbox",id:d,value:a.val()}).prependTo(b);a.is(":disabled")&&d.attr("disabled","disabled"); +a.is(":selected")&&d.prop("checked","checked");d.on("change.multiselect",function(){c(this).prop("checked")?a.prop("selected",!0):a.prop("selected",!1);a.trigger("change",[!0])});return b},J:function(){var a=this;c("html").on("click.multiselect",function(){a.j()});this.c.on("click.multiselect",function(a){a.stopPropagation()})},K:function(){var a=this;this.l.on("click.multiselect",function(b){b.preventDefault();b.stopPropagation();a.m()})},I:function(){c("html").trigger("click.multiselect");this.c.addClass(this.a.activeClass); +if(this.a.positionMenuWithin&&this.a.positionMenuWithin instanceof c){var a=this.f.offset().left+this.f.outerWidth(),b=this.a.positionMenuWithin.offset().left+this.a.positionMenuWithin.outerWidth();a>b&&(this.f.css("width",b-this.f.offset().left),this.c.addClass(this.a.positionedMenuClass))}},j:function(){this.c.removeClass(this.a.activeClass);this.c.removeClass(this.a.positionedMenuClass);this.f.css("width","auto")},m:function(){this.c.hasClass(this.a.activeClass)?this.j():this.I()}});c.fn.multiSelect= +function(a){return this.each(function(){c.data(this,"plugin_multiSelect")||c.data(this,"plugin_multiSelect",new f(this,a))})}})(jQuery); |