curation/app/views/curations/show.html.erb

274 lines
8.1 KiB
Plaintext

<%
OrbitHelper.render_css_in_head(["mind_map/mindmap"])
params = OrbitHelper.params
page = @page || Page.where(url:params['url']).first
@show_back_and_next_flag = 0
content = ''
prev_content = ''
next_content = ''
if page.methods.include? 'select_option_items'.to_sym
ModuleApp.all.select{|tmp| tmp.key.to_s=='curation'}.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('curation.not_show')
@show_back_and_next_flag = 0
elsif tmp == t('curation.show_top')
@show_back_and_next_flag = 1
elsif tmp == t('curation.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('curation.prev')}' class='prev'><b>#{t('curation.prev')}</b><p>#{prev_result['title'].is_a?(String) ? prev_result['title'] : 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('curation.next')}' class='next'><b>#{t('curation.next')}</b><p>#{next_result['title'].is_a?(String) ? next_result['title'] : next_result['title'][I18n.locale]}</p></a>"
end
if prev_content != '' || next_content != ''
content = "<div class='see_more_boxTitle'>#{prev_content}#{next_content}</div>".html_safe
end
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 double;
}
a.prev, a.next{
width: 50%;
border: 0.2em solid;
padding: 1em;
flex: 1;
}
a.next{
margin-left: 1em;
}
a.prev{
margin-right: 1em;
}
.section_mind_map .mind_map{
height:500px !important;
}
</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' : CurationsHelper.lighten_color(bg_color,-40)
color1 = CurationsHelper.lighten_color(bg_color,-40)
color2 = CurationsHelper.lighten_color(CurationsHelper.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;
}
.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;
}
.announcement-comment {
width: 100%;
}
}
</style>
<script type="text/javascript">
$(function(){
$('.annc-comment-div .btn-comment').click(function(){
$.ajax({
url: "<%= "/xhr/curations/#{URI.encode(params[:slug])}-#{params[:uid]}/comment" %>",
data : {"comment" : $(this).parents('.annc-comment-div').find('.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="announcement-comment">
<%= comment.comment.html_safe %>
</div>
<div class="annc-comments-nickname">by <%= comment.account %></div>
<br>
</div>
<% end rescue nil %>
<% if action_data['show_comment_flag'] %>
<div class="annc-comment-div">
<div data-ph="<%= t('curation.comment') %>" contenteditable="true" class="announcement-comment"></div>
<button class="btn btn-comment">
<%= t('curation.send_comment') %>
</button>
</div>
<% end rescue nil %>
<script>
let audio;
$(".voice-player").on("click", function(){
let status = $(this).attr('status');
if (audio) {
audio.pause();
audio.currentTime = 0;
}
if (status == 'playing') {
$(this).attr('status', '');
$(this).find('i').removeClass('fa-pause');
$(this).find('i').addClass('fa-play');
} else {
let mp3_url = $(this).attr('data-content');
let _this = $(this);
audio = new Audio(mp3_url);
audio.play();
audio.onended = function() {
_this.attr('status', '');
_this.find('i').removeClass('fa-pause');
_this.find('i').addClass('fa-play');
};
$(this).find('i').removeClass('fa-play');
$(this).find('i').addClass('fa-pause');
$(this).attr('status', 'playing');
}
return false;
})
</script>
<script type="module">
import '/assets/mind_map/utils/custom.overrides.js'
import '/assets/mind_map/jsmind/plugins/jsmind.draggable-node.js'
import { initJsmind, getJsmindData } from '/assets/mind_map/utils/custom.main.js'
import { INITIAL_MIND } from '/assets/mind_map/utils/custom.config.js'
let isEditable = false
let minds = []
const options = {
container: '',
editable: isEditable,
theme: 'primary',
mode: 'full',
tableUID: '',
text: {
addNode: "<%= t("universal_table.add_node") %>",
deleteNode: "<%= t("universal_table.delete_node") %>",
strokeColor: "<%= t("universal_table.stroke_color") %>",
bgColor: "<%= t("universal_table.bg_color") %>",
textColor: "<%= t("universal_table.text_color") %>"
},
view: {
engine: 'svg',
draggable: false,
node_overflow: 'wrap',
},
shortcut: {
mapping: {
addbrother: 2048 + 13,
},
},
}
document.querySelectorAll(".section_mind_map .mind_map_data").forEach(function (el) {
const dataText = el.querySelector(".data")?.textContent.trim();
if (!dataText) return;
const data = JSON.parse(dataText);
console.log("data", data);
const id = el.querySelector(".mind_map")?.id;
if (!id) return;
options.container = id;
console.log("options", options);
const mind = {
meta: {},
format: 'node_array',
data: data
};
minds.push(initJsmind(mind, options, isEditable));
});
console.log(minds)
</script>