orbit-4-1/app/views/admin/pages/_default_front.html.erb

<label><%= t("default_widget.select_widget_style") %></label>
<ul class="typesetting">
  <% if @enabled_styles.include?("typeA") %>
    <li>
      <%= radio_button_tag "page[frontend_style]", "typeA", @checked_style ? @checked_style.eql?("typeA") : true, class: "d-theme" %>
      <%= image_tag 'module/default_widgets/style01.png'%>
      <span class="style_description"><%= t("default_widget.caption.typeA") %></span>  
    </li>
  <% end %>
  <% if @enabled_styles.include?("typeB_style2") %>
    <li>
      <%= radio_button_tag "page[frontend_style]", "typeB_style2", @checked_style ? @checked_style.eql?("typeB_style2") : false, class: "d-theme" %>
      <%= image_tag 'module/default_widgets/style02.png'%>
      <span class="style_description"><%= t("default_widget.caption.typeB_style2") %></span>
    </li>
  <% end %>
  <% if @enabled_styles.include?("typeB_style3") %>
    <li>
      <%= radio_button_tag "page[frontend_style]", "typeB_style3", @checked_style ? @checked_style.eql?("typeB_style3") : false, class: "d-theme" %>
      <%= image_tag 'module/default_widgets/style03.png'%>
      <span class="style_description"><%= t("default_widget.caption.typeB_style3") %></span>
    </li>
  <% end %>
  <% if @enabled_styles.include?("typeB_style4") %>
    <li>
      <%= radio_button_tag "page[frontend_style]", "typeB_style4", @checked_style ? @checked_style.eql?("typeB_style4") : false, class: "d-theme" %>
      <%= image_tag 'module/default_widgets/style04.png'%>
      <span class="style_description"><%= t("default_widget.caption.typeB_style4") %></span>
    </li>
  <% end %>
  <% if @enabled_styles.include?("typeC") %>
    <li>
      <%= radio_button_tag "page[frontend_style]", "typeC", @checked_style ? @checked_style.eql?("typeC") : false, class: "d-theme" %>
      <%= image_tag 'module/default_widgets/style05.png'%>
      <span class="style_description"><%= t("default_widget.caption.typeC") %></span>
    </li>
  <% end %>
</ul>
<label><%= t("default_widget.fields_") %></label>
<table>
  <thead>
    <tr>
      <th><%= t "default_widget.fields_order" %></th>
      <th></th>
      <th><%= t "default_widget.fields_style" %></th>
      <th class="span1"></th>
    </tr>
  </thead>
  <tbody class="form-inline">
    <% @widget_fields.count.times do |i| %>
      <tr>
        <td>
          <%= select_tag "page[frontend_field][][field_name]", options_for_select(@widget_fields, (@item.frontend_field_name[i] if @item)), include_blank: true, class: "input-small widget_field" %>
        </td>
        <td><i class="icons-arrow-right-6"></i></td>
        <td>
          <%= select_tag "page[frontend_field][][class]", options_for_select(@class_options, (@item.frontend_class[i] if @item)), include_blank: true, class: "input-small" %>
        </td>
        <td>
          <label class="checkbox">
            <span class="checkbox_link hide"><%= check_box_tag 'page[frontend_field][][sat_to_link]', true, @item && @item.frontend_with_link[i] || false %> <%= t(:link) %></span>
          </label>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>


<script>
  $('.typesetting li').each(function(index, el) {
    $(this).find('input').prop('checked') ? $(this).addClass('active') : '';
  });

  $('#pageslide').on(clickEvent, '.typesetting input[type="radio"]', function(event) {
    $(this).prop('checked') ? $(this).closest('li').addClass('active').siblings('li').removeClass('active') : '';
  });

  $('#pageslide select.widget_field').each(function() {
    if($(this).find(":selected").prop('class') == 'link') {
      $(this).closest('tr').find('.checkbox_link').show();
    }
  });
  
  $('#pageslide').on('change', '.widget_field', function() {
    if($(this).find(":selected").prop('class') == 'link') {
      $(this).closest('tr').find('.checkbox_link')
                            .show()
                            .end()
                            .find('.checkbox_link input[type="checkbox"]')
                            .prop('checked', false);
    }
    else {
      $(this).closest('tr').find('.checkbox_link')
                            .hide()
                            .end()
                            .find('.checkbox_link input[type="checkbox"]')
                            .prop('checked', false);
    }
  });
</script>