FileMaster

Edit File: values.hbs

<div class="mailpoet_multiple_values">
  <ul></ul>
  {{#ifCond type 'in' 'radio,select'}}
    <a href="javascript:;" class="add"><span></span><%= __('Add item') %></a>
  {{/ifCond}}
</div>
<script type="text/javascript">
jQuery(function($) {
  {{#if params.values}}
    var field_values = {{{ json_encode params.values }}};
  {{else}}
    var field_values = [{ value: '' }];
  {{/if}}
  var field_type = "{{ type }}";
  var template = Handlebars.compile($('#field_settings_values_item').html());

// set default value for checkbox type if there is no value defined
  if(field_type === 'checkbox' && field_values.length !== 1) {
    if(field_values.length > 1) {
      field_values = [field_values[0]];
    } else {
      // push a default empty value
      field_values = [{}];
    }
  }
  $(function() {
    // render all values by creating inputs
    for(var i = 0, count = field_values.length; i < count; i++) {
      createInput(template, field_values[i]);
    }
    // set inputs name
    setInputNames();

// add value
    $('.mailpoet_multiple_values .add').on('click', function() {
      createInput(template);
      setInputNames();
    });
    // remove value
    $(document).on('click', '.mailpoet_multiple_values li .remove', function() {
      $(this).parent('li').remove();
      setInputNames();
    });
    // create an input
    function createInput(template, values) {
      var data = values || {};
      // set field type
      data.type = field_type;
      // add input to selection
      $('.mailpoet_multiple_values ul').append(template(data));
    }
    // set input names (since their index is based on their position)
    function setInputNames() {
      $('.mailpoet_multiple_values li').each(function(index, item) {
        $(item).find('.is_checked').attr('name', 'params[values]['+index+'][is_checked]');
        $(item).find('.value').attr('name', 'params[values]['+index+'][value]');
      });

// hide remove button if only one item remains
      if ($('.mailpoet_multiple_values li').length > 1) {
        $('.mailpoet_multiple_values .remove').show();
      } else {
        $('.mailpoet_multiple_values .remove').hide();
      }
    }
    {{#ifCond type '!=' 'checkbox'}}
    $('.mailpoet_multiple_values').on('click', '.is_checked', function() {
      // get click checkbox's state
      var is_checked = $(this).is(':checked');
      // uncheck all checkboxes
      $('.mailpoet_multiple_values .is_checked').removeProp('checked');
      // toggle clicked checkbox
      if(is_checked === false) {
        $(this).removeProp('checked');
      } else {
        $(this).prop('checked', 'checked');
      }
    });
    {{/ifCond}}
  });
});
<{{!}}/script>

Back