244 lines
8.3 KiB
Plaintext
Executable File
244 lines
8.3 KiB
Plaintext
Executable File
<% content_for :page_specific_css do %>
|
||
<%= stylesheet_link_tag "universal_table/universal-table" %>
|
||
<% end %>
|
||
<style>
|
||
#entry-status{
|
||
float: right;
|
||
margin-right: 1em;
|
||
|
||
}
|
||
.toggle_entries[data-status="show"] {
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
margin-bottom: 0;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-family: 'Varela Round';
|
||
letter-spacing: -.4px;
|
||
color: #ffffff;
|
||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||
background-color: #007AFF;
|
||
margin-right: 0.5em;
|
||
&:hover{
|
||
background-color:#1A73E8;
|
||
}
|
||
}
|
||
.toggle_entries[data-status="hide"] {
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
margin-bottom: 0;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-family: 'Varela Round';
|
||
letter-spacing: -.4px;
|
||
color: #ffffff;
|
||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||
background-color: #5F6368;
|
||
margin-right: 0.5em;
|
||
&:hover{
|
||
background-color:#4b4e53;
|
||
}
|
||
}
|
||
.hidden_entry{
|
||
td{
|
||
background-color: #9eacb5a8;
|
||
}
|
||
}
|
||
</style>
|
||
<form class="form-search" action="<%= admin_universal_table_path(@table) %>" method="get">
|
||
<input type="text" name="q" class="input-large search-query" placeholder="Search from text or editor columns">
|
||
<button type="submit" class="btn btn-primary">Search</button>
|
||
<% if params[:q].present? %>
|
||
<a href="<%= admin_universal_table_path(@table) %>" class="btn btn-info">Reset</a>
|
||
<% end %>
|
||
</form>
|
||
|
||
<div id="data-table" class="ut-table">
|
||
<table class="table main-list">
|
||
<thead>
|
||
<tr class="sort-header">
|
||
<th width="15">
|
||
<%= t(:status) %>
|
||
<div class="status hide" id="entry-status">
|
||
<a href="" class="toggle_entries" data-status="hide"><%= t(:hide) %></a>
|
||
<a href="" class="toggle_entries" data-status="show"><%= t(:show) %></a>
|
||
</div>
|
||
</th>
|
||
<% @table_fields.each do |field| %>
|
||
<%
|
||
sort = field.to_s.include?('.') ? field.to_s.split('.')[1] : field.to_s
|
||
active = params[:sort].eql? sort
|
||
order = active ? (["asc", "desc"]-[params[:order]]).first : "asc"
|
||
arrow = (order.eql? "desc") ? "<b class='icons-arrow-up-3'></b>" : "<b class='icons-arrow-down-4'></b>"
|
||
klass = field.eql?(:title) ? "span5" : "span2"
|
||
th_data = "<a href='?sort=#{sort}&order=#{order}'>#{field} #{active ? arrow : ""}</a>"
|
||
%>
|
||
<th class='<%= klass %> <%= active ? "active" : "" %>'><%= th_data.html_safe %></th>
|
||
<% end %>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% can_edit = can_edit_or_delete?(@table) %>
|
||
<% @entries.each do |entry| %>
|
||
<tr id="tr_entry_<%= entry.id.to_s %>" class="<%= entry.is_hidden? ? 'hidden_entry' : '' %>">
|
||
<td><input class="hide-toggle" type="checkbox" value="<%= entry.id.to_s %>" /></td>
|
||
<% @columns.each_with_index do |column, index| %>
|
||
<% ce = entry.column_entries.where(:table_column_id => column.id).first rescue nil %>
|
||
<td>
|
||
<% if !ce.nil? %>
|
||
<% case ce.type %>
|
||
<% when "text" %>
|
||
<%= ce.text %>
|
||
<% when "integer" %>
|
||
<%= ce.number %>
|
||
<% when "editor" %>
|
||
<%= ce.content.html_safe rescue "" %>
|
||
<% when "image" %>
|
||
<div class="image-expander">
|
||
<% if !ce.image.nil? %>
|
||
<a href="<%= ce.image.url %>" target="_blank"><img src="<%= ce.image.thumb.url %>" class="image-preview" /></a>
|
||
<% end %>
|
||
</div>
|
||
<% when "date" %>
|
||
<%= format_date(ce.date, column.date_format) %>
|
||
<% when "period" %>
|
||
<% if !ce.period_from.nil? %>
|
||
<%= format_date(ce.period_from, column.date_format) %> ~ <%= format_date(ce.period_to, column.date_format) %>
|
||
<% end %>
|
||
<% when "file" %>
|
||
<% locale = I18n.locale.to_s %>
|
||
<ol>
|
||
<% ce.column_entry_files.desc(:sort_number).each do |entry_file| %>
|
||
<% next unless entry_file.choose_lang_display(locale) %>
|
||
<% if entry_file.file.content_type.start_with?('audio/') %>
|
||
<li class="pronunciation-wrapper">
|
||
<%= entry_file.get_file_title %>
|
||
<a class="voice-player" data-content="<%= entry_file.file.url %>" href="" title="播放讀音">
|
||
<i class="fa fa-play" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<% else %>
|
||
<li><%= link_to entry_file.get_file_title, entry_file.file.url, target: "_blank" %></li>
|
||
<% end %>
|
||
<% end %>
|
||
</ol>
|
||
<% end %>
|
||
<% else %>
|
||
|
||
<% end %>
|
||
<% if index == 0 && can_edit %>
|
||
<div class="quick-edit">
|
||
<ul class="nav nav-pills">
|
||
<li><a href="<%= admin_universal_table_edit_entry_path(:universal_table_id=> entry.to_param, :page => params[:page]) %>"><%= t(:edit) %></a></li>
|
||
<li><a href="<%= admin_universal_table_delete_entry_path(entry.id) %>" class="delete text-error" data-method="delete" data-confirm="Are you sure?"><%= t(:delete_) %></a></li>
|
||
</ul>
|
||
</div>
|
||
<% end %>
|
||
</td>
|
||
<% end %>
|
||
</tr>
|
||
<% end %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<div class="bottomnav clearfix">
|
||
<%= content_tag :div, paginate(@entries), class: "pagination pagination-centered" %>
|
||
<div class="action pull-right">
|
||
<a href="<%= admin_universal_table_new_entry_path(@table) %>" class="btn btn-primary" role="button" data-toggle="modal">Add Entry</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
$(document).ready(function () {
|
||
$('.ut-table ol').each(function () {
|
||
const $ol = $(this);
|
||
const nodes = Array.from($ol.contents());
|
||
let currentText = null;
|
||
|
||
nodes.forEach(function (node) {
|
||
// 如果是文字節點，暫存
|
||
if (node.nodeType === 3 && node.nodeValue.trim() !== '') {
|
||
currentText = node.nodeValue.trim();
|
||
node.remove(); // 移除原始文字節點
|
||
}
|
||
|
||
// 如果是 .voice-player，包進 wrapper 並包在 <li>
|
||
if (node.nodeType === 1 && node.classList.contains('voice-player')) {
|
||
const $wrapper = $('<div class="pronunciation-wrapper"></div>');
|
||
if (currentText) {
|
||
$wrapper.append(document.createTextNode(currentText));
|
||
currentText = null; // 清空暫存
|
||
}
|
||
$wrapper.append($(node));
|
||
|
||
const $li = $('<li></li>').append($wrapper);
|
||
$ol.append($li);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
$(".action").after($("#entry-status"));
|
||
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;
|
||
})
|
||
$(".hide-toggle").on("click", function(){
|
||
var count = $(".hide-toggle:checked").length;
|
||
if(count > 0){
|
||
$("#entry-status").removeClass("hide")
|
||
}else{
|
||
$("#entry-status").addClass("hide");
|
||
|
||
}
|
||
})
|
||
$(".toggle_entries").on("click", function(){
|
||
let checkedValues = $('.hide-toggle:checked').map(function() {
|
||
return $(this).val();
|
||
}).get();
|
||
let status = $(this).data("status");
|
||
$.ajax({
|
||
url: "/admin/universal_tables/toggle_entries",
|
||
method: "post",
|
||
data: {"ids": checkedValues, "status": status},
|
||
type: "json"
|
||
}).done(function(){
|
||
if(status == "hide"){
|
||
$('.hide-toggle:checked').parents("tr").addClass("hidden_entry");
|
||
}else{
|
||
$('.hide-toggle:checked').parents("tr").removeClass("hidden_entry");
|
||
}
|
||
})
|
||
return false;
|
||
})
|
||
</script> |