diff options
Diffstat (limited to 'frontends/php/js/multiselect.js')
| -rw-r--r-- | frontends/php/js/multiselect.js | 266 |
1 files changed, 181 insertions, 85 deletions
diff --git a/frontends/php/js/multiselect.js b/frontends/php/js/multiselect.js index 894a99e0b85..73ced640f04 100644 --- a/frontends/php/js/multiselect.js +++ b/frontends/php/js/multiselect.js @@ -48,7 +48,8 @@ jQuery(function($) { 'No matches found': t('No matches found'), 'More matches found...': t('More matches found...'), 'type here to search': t('type here to search'), - 'new': t('new') + 'new': t('new'), + 'Select': t('Select') }; return this.each(function() { @@ -56,44 +57,137 @@ jQuery(function($) { }); }; + /* + * Multiselect methods + */ + var methods = { + /** + * Get multi select selected data. + * + * @return array array of multiselect value objects + */ + getData: function() { + var ms = this.first().data('multiSelect'); + + var data = []; + for (var id in ms.values.selected) { + var item = ms.values.selected[id]; + + data[data.length] = { + id: id, + name: item.name, + prefix: item.prefix === 'undefined' ? '' : item.prefix + }; + } + + return data; + }, + + /** + * Rezise multiselect selected text + * + * @return jQuery + */ + resize: function() { + return this.each(function() { + var obj = $(this); + var ms = $(this).data('multiSelect'); + + resizeAllSelectedTexts(obj, ms.options, ms.values); + }); + }, + + /** + * Insert outside data + * + * @param object multiselect value object + * + * @return jQuery + */ + addData: function(item) { + return this.each(function() { + var obj = $(this); + var ms = $(this).data('multiSelect'); + + // clean input if selectedLimit = 1 + if (ms.options.selectedLimit == 1) { + for (var id in ms.values.selected) { + removeSelected(id, obj, ms.values, ms.options); + } + + cleanAvailable(item, ms.values); + } + addSelected(item, obj, ms.values, ms.options); + }); + }, + + /** + * Clean multi select object values. + * + * @return jQuery + */ + clean: function() { + return this.each(function() { + var obj = $(this); + var ms = $(this).data('multiSelect'); + + for (var id in ms.values.selected) { + removeSelected(id, obj, ms.values, ms.options); + } + + cleanAvailable(obj, ms.values); + }); + } + }; + /** * Create multi select input element. * - * @param string options['id'] multi select id in dom - * @param string options['url'] backend url - * @param string options['name'] input element name - * @param object options['labels'] translated labels (optional) - * @param object options['data'] preload data {id, name, prefix} (optional) + * @param string options['url'] backend url + * @param string options['name'] input element name + * @param object options['labels'] translated labels (optional) + * @param object options['data'] preload data {id, name, prefix} (optional) * @param string options['data'][id] * @param string options['data'][name] - * @param string options['data'][prefix] (optional) - * @param array options['ignored'] preload ignored {id: name} (optional) - * @param string options['defaultValue'] default value for input element (optional) - * @param bool options['disabled'] turn on/off readonly state (optional) - * @param bool options['addNew'] allow user to create new names (optional) - * @param int options['selectedLimit'] how many items can be selected (optional) - * @param int options['limit'] how many available items can be received from backend (optional) + * @param string options['data'][prefix] (optional) + * @param array options['ignored'] preload ignored {id: name} (optional) + * @param string options['defaultValue'] default value for input element (optional) + * @param bool options['disabled'] turn on/off readonly state (optional) + * @param bool options['addNew'] allow user to create new names (optional) + * @param int options['selectedLimit'] how many items can be selected (optional) + * @param int options['limit'] how many available items can be received from backend (optional) + * @param object options['popup'] popup data {parameters, width, height, buttonClass} (optional) + * @param string options['popup']['parameters'] + * @param int options['popup']['width'] + * @param int options['popup']['height'] + * @param string options['popup']['buttonClass'](optional) * * @return object */ $.fn.multiSelect = function(options) { + // call a public method + if (methods[options]) { + return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); + } + var defaults = { - id: '', url: '', name: '', labels: { 'No matches found': 'No matches found', 'More matches found...': 'More matches found...', 'type here to search': 'type here to search', - 'new': 'new' + 'new': 'new', + 'Select': 'Select' }, data: [], - ignored: [], + ignored: {}, addNew: false, defaultValue: null, disabled: false, selectedLimit: null, - limit: 20 + limit: 20, + popup: [] }; options = $.extend({}, defaults, options); @@ -110,80 +204,32 @@ jQuery(function($) { }; return this.each(function() { - /** - * Clean multi select object values. - */ - $.fn.multiSelect.clean = function(msId) { - var ms = window.multiSelect[msId]; + var obj = $(this); - for (var id in ms.values.selected) { - removeSelected(id, ms.obj, ms.values, ms.options); - } - - cleanAvailable(ms.obj, ms.values); - }; - - /** - * Get multi select selected data. - * - * @return array - */ - $.fn.multiSelect.getData = function() { - var data = []; - - for (var id in values.selected) { - data[data.length] = { - id: id, - name: $('input[value="' + id + '"]', obj).data('name'), - prefix: $('input[value="' + id + '"]', obj).data('prefix') - }; - } - - return data; - }; - - /** - * Rezise multiselect selected text - */ - $.fn.multiSelect.resize = function() { - $.each(window.multiSelect, function(i) { - var ms = window.multiSelect[i]; - if (!empty(ms.options.data)) { - resizeAllSelectedTexts(ms.obj, ms.options, ms.values); - } - }); - } - - /** - * MultiSelect object. - */ - if (empty(window.multiSelect)) { - window.multiSelect = {}; - } - - window.multiSelect[options.id] = { + var ms = { options: options, - obj: $(this), - jqxhr: null, values: { search: '', - width: null, + width: parseInt(obj.css('width')), isWaiting: false, isAjaxLoaded: true, isMoreMatchesFound: false, - isAvailableOpenned: false, + isAvailableOpened: false, selected: {}, available: {}, - ignored: empty(options.ignored) ? [] : options.ignored + ignored: empty(options.ignored) ? {} : options.ignored } }; - var ms = window.multiSelect[options.id], - obj = ms.obj, - jqxhr = ms.jqxhr, - values = ms.values; + // store the configuration in the elements data + obj.data('multiSelect', ms); - ms.values.width = parseInt(obj.css('width')); + var values = ms.values; + + // add wrap + obj.wrap(jQuery('<div>', { + 'class': 'multiselect-wrapper' + })); // search input if (!options.disabled) { @@ -206,12 +252,12 @@ jQuery(function($) { } var search = input.val(); - if (!empty(search)) { if (input.data('lastSearch') != search) { if (!values.isWaiting) { values.isWaiting = true; + var jqxhr = null; window.setTimeout(function() { values.isWaiting = false; @@ -398,17 +444,17 @@ jQuery(function($) { }) .append($('<ul>')) .mouseenter(function() { - values.isAvailableOpenned = true; + values.isAvailableOpened = true; }) .mouseleave(function() { - values.isAvailableOpenned = false; + values.isAvailableOpened = false; }); // multi select obj.append(available) .focusout(function() { setTimeout(function() { - if (!values.isAvailableOpenned && $('.available', obj).is(':visible')) { + if (!values.isAvailableOpened && $('.available', obj).is(':visible')) { hideAvailable(obj); } }, 200); @@ -426,6 +472,43 @@ jQuery(function($) { // resize resize(obj, values, options); + + // draw popup link + if (options.popup.parameters != null) { + var popupBlock = $('<div>', { + 'class': 'select-popup' + }); + + var urlParameters = options.popup.parameters; + + if (options.ignored) { + $.each(options.ignored, function(i, value) { + urlParameters = urlParameters + '&excludeids[]=' + i; + }); + } + + var popupButton = $('<input>', { + type: 'button', + 'class': options.popup.buttonClass ? options.popup.buttonClass : 'input link_menu select-popup', + value: options.labels['Select'] + }); + + if (options.disabled) { + popupButton.attr('disabled', true); + } + else { + popupButton.click(function() { + return PopUp('popup.php?' + urlParameters, options.popup.width, options.popup.height); + }); + } + + obj.parent().append(popupButton); + } + + // IE browsers use default width + if (IE) { + options.defaultWidth = $('input[type="text"]', obj).width(); + } }); }; @@ -805,10 +888,20 @@ jQuery(function($) { } if (IE) { - $('input[type="text"]', obj).css({ + var input = $('input[type="text"]', obj); + + input.css({ 'padding-top': top, - 'padding-left': left + 'padding-left': left, + 'width': options.defaultWidth - left }); + + // IE8 hack to fix inline-block container resizing and poke input element value to trigger reflow + if (IE8) { + $('.multiselect-wrapper').addClass('ie8fix-inline').removeClass('ie8fix-inline'); + var currentInputVal = input.val(); + input.val(' ').val(currentInputVal); + } } else { $('input[type="text"]', obj).css({ @@ -911,7 +1004,10 @@ jQuery(function($) { } function removePlaceholder(obj) { - $('input[type="text"]', obj).removeAttr('placeholder'); + $('input[type="text"]', obj) + .removeAttr('placeholder') + .removeClass('placeholder') + .val(''); } function getLimit(values, options) { |