date_default.hbs
4 years ago
date_formats.hbs
4 years ago
date_types.hbs
4 years ago
field.hbs
4 years ago
field_form.hbs
4 years ago
index.php
3 years ago
label.hbs
4 years ago
label_within.hbs
4 years ago
required.hbs
4 years ago
segment_selection.hbs
2 years ago
segment_selection_item.hbs
4 years ago
submit.hbs
4 years ago
validate.hbs
4 years ago
values.hbs
4 years ago
values_item.hbs
4 years ago
segment_selection.hbs
131 lines
| 1 | <ul id="mailpoet_segment_selection" class="clearfix"></ul> |
| 2 | |
| 3 | <div id="mailpoet_segment_available_container"> |
| 4 | <h3><%= __('Select the list that you want to add:') %></h3> |
| 5 | |
| 6 | <select class="mailpoet_segment_available"></select> |
| 7 | |
| 8 | <a href="javascript:;" class="mailpoet_segment_add"><span><%= __('Add') %></span></a> |
| 9 | </div> |
| 10 | |
| 11 | <script type="text/javascript"> |
| 12 | jQuery(function($) { |
| 13 | <% autoescape false %> |
| 14 | var selected_segments = {{#if params.values}}{{{ json_encode params.values }}} |
| 15 | {{else}}[]{{/if}}; |
| 16 | <% endautoescape %> |
| 17 | |
| 18 | $(function() { |
| 19 | mailpoet_segment_available_render(); |
| 20 | mailpoet_segment_selection_render(); |
| 21 | |
| 22 | setInputNames(); |
| 23 | |
| 24 | // add segment |
| 25 | $('.mailpoet_segment_add').on('click', function() { |
| 26 | // add currently selected segment to the selection |
| 27 | var selected_segment = $('.mailpoet_segment_available :selected'); |
| 28 | |
| 29 | // add segment to selection |
| 30 | selected_segments.push({ |
| 31 | id: selected_segment.val(), |
| 32 | name: selected_segment.text(), |
| 33 | is_checked: 0 |
| 34 | }); |
| 35 | |
| 36 | // remove segment from available segments |
| 37 | selected_segment.remove(); |
| 38 | |
| 39 | // render selection |
| 40 | mailpoet_segment_selection_render(); |
| 41 | |
| 42 | setInputNames(); |
| 43 | }); |
| 44 | |
| 45 | // remove segment |
| 46 | $('#mailpoet_segment_selection').on('click', '.remove', function(e) { |
| 47 | if($('#mailpoet_segment_selection').children().length === 1) { |
| 48 | return e.preventDefault(); |
| 49 | } |
| 50 | var element = $(this).parents('li'); |
| 51 | // remove currently selected segment to the selection |
| 52 | var selected_segment = parseInt(element.data('segment'), 10); |
| 53 | |
| 54 | // remove segment from selection |
| 55 | selected_segments = selected_segments.filter(function(segment) { |
| 56 | return (parseInt(segment.id, 10) !== selected_segment); |
| 57 | }); |
| 58 | |
| 59 | // remove element |
| 60 | element.remove(); |
| 61 | |
| 62 | // render available segment |
| 63 | mailpoet_segment_available_render(); |
| 64 | |
| 65 | setInputNames(); |
| 66 | }); |
| 67 | }); |
| 68 | |
| 69 | function setupSortableSegments() { |
| 70 | // make segment selection sortable |
| 71 | Sortable.create('mailpoet_segment_selection', { |
| 72 | handles: $$('#mailpoet_segment_selection .handle'), |
| 73 | onChange: function(item) { |
| 74 | setInputNames(); |
| 75 | } |
| 76 | }); |
| 77 | } |
| 78 | |
| 79 | function mailpoet_segment_available_render() { |
| 80 | // clear available segments |
| 81 | $('.mailpoet_segment_available').html(''); |
| 82 | |
| 83 | var selected_segment_ids = selected_segments.map(function(segment) { |
| 84 | return segment.id; |
| 85 | }); |
| 86 | |
| 87 | // display available segments |
| 88 | $.each(mailpoet_segments, function(i, segment) { |
| 89 | if($.inArray(segment.id, selected_segment_ids) < 0) { |
| 90 | $('.mailpoet_segment_available').append( |
| 91 | '<option value="'+segment.id+'">'+segment.name+'</option>' |
| 92 | ); |
| 93 | } |
| 94 | }); |
| 95 | mailpoet_segment_available_toggle(); |
| 96 | } |
| 97 | |
| 98 | function mailpoet_segment_selection_render() { |
| 99 | // segment item template |
| 100 | var template = Handlebars.compile( |
| 101 | $('#field_settings_segment_selection_item').html() |
| 102 | ); |
| 103 | |
| 104 | // update view |
| 105 | $('#mailpoet_segment_selection').html( |
| 106 | template({ segments: selected_segments }) |
| 107 | ); |
| 108 | |
| 109 | mailpoet_segment_available_toggle(); |
| 110 | } |
| 111 | |
| 112 | function mailpoet_segment_available_toggle() { |
| 113 | // toggle visibility of available segments |
| 114 | if($('.mailpoet_segment_available option').length === 0) { |
| 115 | $('#mailpoet_segment_available_container').hide(); |
| 116 | } else { |
| 117 | $('#mailpoet_segment_available_container').show(); |
| 118 | } |
| 119 | } |
| 120 | |
| 121 | function setInputNames() { |
| 122 | $('#mailpoet_segment_selection li').each(function(index, item) { |
| 123 | $(item).find('.mailpoet_is_checked').attr('name', 'params[values]['+index+'][is_checked]'); |
| 124 | $(item).find('.mailpoet_segment_id').attr('name', 'params[values]['+index+'][id]'); |
| 125 | $(item).find('.mailpoet_segment_name').attr('name', 'params[values]['+index+'][name]'); |
| 126 | }); |
| 127 | setupSortableSegments(); |
| 128 | } |
| 129 | }); |
| 130 | <{{!}}/script> |
| 131 |