Application_Form/custom_announcement/app/views/custom_announcements/show.html.erb

<%
  	params = OrbitHelper.params
    page = Page.where(url:params['url']).first
    @show_back_and_next_flag = 0
    if page.methods.include? 'select_option_items'.to_sym
      ModuleApp.all.select{|tmp| tmp.key.to_s=='custom_announcement'}.each do |modile_app|
        @show_option_items = modile_app.show_option_items rescue nil
      end
      page.select_option_items.each do |select_option_item|
        if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s
          value = YAML.load(select_option_item.value)
          tmp = value[:en]
          I18n.with_locale(:en) do
            if tmp == t('custom_announcement.not_show')
              @show_back_and_next_flag = 0
            elsif tmp == t('custom_announcement.show_top')
              @show_back_and_next_flag = 1
            elsif tmp == t('custom_announcement.show_bottom')
              @show_back_and_next_flag = 2
            end
          end
        end
      end
    end
    if @show_back_and_next_flag != 0
      uid = params['uid']
      sorted,total_pages = get_sorted_annc(0)
      now_index = sorted.to_enum.with_index.select{|v| v[0].uid==uid}[0][1] rescue nil
      if !now_index.nil?
        if now_index != 0
          prev_result = sorted[now_index-1]
          prev_url = params['url'] + '/' + prev_result.to_param
          prev_content = "<a href='#{prev_url}' title='#{t('custom_announcement.prev')}' class='prev'><b>#{t('custom_announcement.prev')}</b><p>#{prev_result['title'][I18n.locale]}</p></a>"
        end
        if now_index != sorted.length-1
          next_result = sorted[now_index+1]
          next_url = params['url'] + '/' + next_result.to_param
          next_content = "<a href='#{next_url}' title='#{t('custom_announcement.next')}' class='next'><b>#{t('custom_announcement.next')}</b><p>#{next_result['title'][I18n.locale]}</p></a>"
        end
        content = "<div class='see_more_boxTitle'>#{prev_content}#{next_content}</div>".html_safe
      else
        content = ''
      end
    end
%>
<% if @show_back_and_next_flag!=0 %>
  <style type="text/css">
    .see_more_boxTitle{
      display: flex;
      margin: 1em 0em;
      padding: 1em;
      border: 0.2em solid;
    }
    a.prev, a.next{
      width: 50%;
      border: 0.2em solid;
      padding: 1em;
      flex: 1;
    }
    a.next{
      margin-left: 1em;
    }
    a.prev{
      margin-right: 1em;
    }
  </style>
<% end %>

<% if @show_back_and_next_flag==1 %>
<%= content %>
<% end %>
<%= render_view %>
<% if @show_back_and_next_flag==2 %>
<%= content %>
<% end %>
<% site = Site.first
   hover_color = site.orbit_bar_background_hover_color rescue nil
   hover_color = '#0095CF' if hover_color.blank?
   bg_color = site.orbit_bar_background_color rescue nil 
   bg_color = bg_color.blank? ? '#3a3b3c' : CustomAnnouncementsHelper.lighten_color(bg_color,-40)
   color1 = CustomAnnouncementsHelper.lighten_color(bg_color,-40)
   color2 = CustomAnnouncementsHelper.lighten_color(CustomAnnouncementsHelper.complementaryColor(bg_color),40)
%>
<style type="text/css">
  div[contentEditable=true]:empty:before{
    content: attr(data-ph);
    color: <%= color1 %>;
    padding-left: 3%;
    font-weight: bold;
    font-family: serif;
  }
  .custom_announcement-comment {
    margin-top: 1em;
    border: solid 0.2em <%= bg_color %>;
    background: <%= color2 %>;
    color: <%= bg_color %>;
    font-size: 1.15em;
    padding: 0.3em 0 0.3em 3%;
    border-radius: 0.7em;
    display: inline-block;
    width: 80%;
    outline: 0;
  }
  .annc-comment-div,.annc-comments{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-comment{
    margin-top: 1em;
    margin-left: 3%;
    color: <%= color2 %>;
    font-size: 1em;
    background: <%= bg_color %>;
    margin-left: 3%;
  }
  .btn.btn-comment:focus{
    color: <%= color2 %>;
  }
  .btn-comment:hover{
    color: <%= color2 %>;
    background-color: <%= hover_color %>;
  }
  .annc-comments-nickname {
    margin-top: 1em;
    margin-left: 3%;
    color: <%= bg_color %>;
  }
  .comment-time{
    padding-left: 1em;
    width: 100%;
    color: <%= bg_color %>;
  }
  .annc-comments{
    margin: 1.5em 0;
  }
  @media (max-width: 767px) {
    .annc-comment-div,.annc-comments{
      justify-content: center;
    }
    .custom_announcement-comment {
      width: 100%;
    }
  }
</style>
<script type="text/javascript">
  $(function(){
    $('.annc-comment-div .btn-comment').click(function(){
      $.ajax({
        url: "<%= "/xhr/custom_announcements/#{params[:slug]}-#{params[:uid]}/comment" %>",
        data : {"comment" : $(this).parents('.annc-comment-div').find('.custom_announcement-comment').html()},
        dataType : "json",
        type : "get",
        success : function(data){
          window.location.href = window.location.href
        }
      })
    })
  })
</script>
<% action_data['comments'].reverse.each do |comment| %>
  <div class="annc-comments">
    <div class="comment-time">
      <%= comment.time %>
    </div>
    <div class="custom_announcement-comment">
      <%= comment.comment.html_safe %>
    </div>
    <div class="annc-comments-nickname">by <%= comment.account %></div>
    <br>
  </div>
<% end %>
<% if action_data['show_comment_flag'] %>
  <div class="annc-comment-div">
    <div data-ph="<%= t('custom_announcement.comment') %>" contenteditable="true" class="custom_announcement-comment"></div>
    <button class="btn btn-comment">
      <%= t('custom_announcement.send_comment') %>  
    </button>
  </div>
<% end %>