admin
1 week ago
front
2 days ago
actions.js
2 days ago
latecheckbox.js
1 year ago
lateselect.js
1 year ago
notifications.js
1 year ago
shared.js
1 year ago
time.js
1 year ago
lateselect.js
96 lines
| 1 | (function($) { |
| 2 | |
| 3 | jQuery.fn.lateSelect = function() { |
| 4 | |
| 5 | function os_build_selected_item($option){ |
| 6 | var quantity_html = ''; |
| 7 | if($option.data('quantity')) quantity_html = '<span class="os-late-quantity-selector-w"><span class="os-late-quantity-selector minus" data-sign="minus"></span><input class="os-late-quantity-selector-input" type="text" data-max-quantity="'+ $option.data('max-quantity') +'" value="' + $option.data('quantity') + '"/><span class="os-late-quantity-selector plus" data-sign="plus"></span></span>'; |
| 8 | return '<div class="ls-item" data-value="' + $option.val() + '"><span class="latepoint-icon latepoint-icon-cross ls-item-remover"></span><span>' + $option.text() + '</span>' + quantity_html + '</div>' |
| 9 | } |
| 10 | |
| 11 | this.each( function() { |
| 12 | var lateselect_html = ''; |
| 13 | var all_items = ''; |
| 14 | var selected_items = ''; |
| 15 | var is_selected = ''; |
| 16 | if(jQuery(this).hasClass('os-late-select-active')) return; |
| 17 | jQuery(this).hide().addClass('os-late-select-active'); |
| 18 | jQuery(this).find('option').each(function(){ |
| 19 | if(jQuery(this).is(':selected')) selected_items+= os_build_selected_item(jQuery(this)); |
| 20 | is_selected = jQuery(this).is(':selected') ? 'selected' : ''; |
| 21 | all_items+= '<div class="ls-item '+ is_selected +'" data-value="' + jQuery(this).val() + '">' + jQuery(this).text() + '</div>'; |
| 22 | }); |
| 23 | var placeholder = '<div class="ls-placeholder">' + jQuery(this).data('placeholder') + '</div>'; |
| 24 | lateselect_html = jQuery('<div class="lateselect-w"></div>'); |
| 25 | jQuery(this).wrap(lateselect_html); |
| 26 | var $lateselect_wrapper = jQuery(this).closest('.lateselect-w'); |
| 27 | $lateselect_wrapper.append('<div class="ls-selected-items-w">' + placeholder + selected_items + '</div>'); |
| 28 | $lateselect_wrapper.append('<div class="ls-all-items-w">' + all_items + '</div>'); |
| 29 | |
| 30 | |
| 31 | // ADD ITEM |
| 32 | $lateselect_wrapper.on('click', '.ls-all-items-w .ls-item:not(.selected)', function(){ |
| 33 | var selected_value = jQuery(this).data('value'); |
| 34 | $lateselect_wrapper.find('.ls-selected-items-w').append(os_build_selected_item($lateselect_wrapper.find('select option[value="'+ selected_value +'"]'))); |
| 35 | jQuery(this).addClass('selected'); |
| 36 | $lateselect_wrapper.removeClass('ls-selecting'); |
| 37 | $lateselect_wrapper.find('select option[value="'+ selected_value +'"]').prop('selected', true); |
| 38 | $lateselect_wrapper.find('select').trigger('change'); |
| 39 | return false; |
| 40 | }); |
| 41 | |
| 42 | // REMOVE ITEM |
| 43 | $lateselect_wrapper.on('click', '.ls-selected-items-w .ls-item-remover', function(){ |
| 44 | var selected_value = jQuery(this).closest('.ls-item').data('value'); |
| 45 | jQuery(this).closest('.ls-item').remove(); |
| 46 | $lateselect_wrapper.find('.ls-all-items-w .ls-item.selected[data-value="' + selected_value + '"]').removeClass('selected'); |
| 47 | $lateselect_wrapper.find('select option[value="'+ selected_value +'"]').prop('selected', false); |
| 48 | $lateselect_wrapper.find('select').trigger('change'); |
| 49 | return false; |
| 50 | }); |
| 51 | |
| 52 | $lateselect_wrapper.on('click', '.ls-selected-items-w', function(){ |
| 53 | $lateselect_wrapper.toggleClass('ls-selecting'); |
| 54 | return false; |
| 55 | }); |
| 56 | |
| 57 | $lateselect_wrapper.on('click', '.os-late-quantity-selector', function(){ |
| 58 | var $input = jQuery(this).closest('.ls-item').find('input.os-late-quantity-selector-input'); |
| 59 | var current_value = parseInt($input.val()); |
| 60 | var new_quantity = (jQuery(this).data('sign') == 'minus') ? current_value - 1 : current_value + 1; |
| 61 | var max_quantity = $input.data('max-quantity'); |
| 62 | if(new_quantity <= 0) new_quantity = 1; |
| 63 | if(max_quantity && (new_quantity > max_quantity)) new_quantity = max_quantity; |
| 64 | var selected_value = jQuery(this).closest('.ls-item').data('value'); |
| 65 | $lateselect_wrapper.find('select option[value="'+ selected_value +'"]').data('quantity', new_quantity); |
| 66 | $input.val(new_quantity); |
| 67 | $lateselect_wrapper.find('select').trigger('change'); |
| 68 | return false; |
| 69 | }); |
| 70 | |
| 71 | jQuery(this).on('change', function(){ |
| 72 | var $hidden_connection = false; |
| 73 | if(jQuery(this).data('hidden-connection')){ |
| 74 | $hidden_connection = jQuery(jQuery(this).data('hidden-connection')); |
| 75 | }else{ |
| 76 | $hidden_connection = jQuery(this).closest('.lateselect-w').next('input[type="hidden"]'); |
| 77 | } |
| 78 | var formatted_ids = ''; |
| 79 | if(jQuery(this).find('option:selected').length){ |
| 80 | jQuery(this).find('option:selected').each(function(){ |
| 81 | if(jQuery(this).data('quantity')){ |
| 82 | var quantity = jQuery(this).data('quantity') ? jQuery(this).data('quantity') : 1; |
| 83 | formatted_ids+= jQuery(this).val() + ':' + quantity + ','; |
| 84 | }else{ |
| 85 | formatted_ids+= jQuery(this).val() + ','; |
| 86 | } |
| 87 | }); |
| 88 | }else{ |
| 89 | formatted_ids = ''; |
| 90 | } |
| 91 | if(formatted_ids != '') formatted_ids = formatted_ids.slice(0, -1); |
| 92 | $hidden_connection.val(formatted_ids); |
| 93 | }); |
| 94 | }); |
| 95 | } |
| 96 | }(jQuery)); |