harry
/
universal_table
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

file upload fix

This commit is contained in:
rulingcom 2025-07-08 18:55:41 +08:00
parent 16a3b54942
commit f00fe8a348
10 changed files with 1085 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/tasks/universal_table_tasks.rake
View File

@ -128,15 +128,15 @@ namespace :universal_table_tasks do
site_locales.each_with_index do |locale, locale_idx| site_locales.each_with_index do |locale, locale_idx|
file_titles[locale.to_s] = row[col_idx + locale_idx + 1]&.value.to_s.split(";").map(&:strip) file_titles[locale.to_s] = row[col_idx + locale_idx + 1]&.value.to_s.split(";").map(&:strip)
end end
ce.column_entry_files.destroy_all # ce.column_entry_files.destroy_all
ce.column_entry_files = [] # ce.column_entry_files = []
cef_ids = ce.column_entry_files.pluck(:id)
file_urls.each_with_index do |remote_url, file_idx| file_urls.each_with_index do |remote_url, file_idx|
if remote_url.blank? if remote_url.blank?
skip = site_locales.size skip = site_locales.size
end end
next if remote_url.blank? next if remote_url.blank?
debugger
file = ColumnEntryFile.new file = ColumnEntryFile.new
file.remote_file_url = remote_url file.remote_file_url = remote_url
titles = {} titles = {}
@ -147,6 +147,7 @@ namespace :universal_table_tasks do
file.save! file.save!
ce.column_entry_files << file ce.column_entry_files << file
end end
ColumnEntryFile.where(:id.in => cef_ids).destroy_all
when "date" when "date"
ce.date = val ce.date = val

113
modules/universal_table/_tag_cloud.html.erb
View File

@ -1 +1,112 @@
hi <ul id="hashtag-list" data-list="hashtags" data-level="0" style="display:none;">
<li class="tag-weight-{{count}}"><a href="{{url_to_show}}" title="{{title}}">#{{title}}</a></li>
</ul>
<div id="hashtag-wordcloud-wrapper">
<div id="hashtag-wordcloud" style=" "></div>
</div>
<script>
function generateWordCloud() {
const container = $('#hashtag-wordcloud');
const containerWidth = container.width();
const containerHeight = container.height();
const placedRects = [];
function isOverlap(r1, r2, padding = 4) {
return !(r2.left > r1.right + padding ||
r2.right < r1.left - padding ||
r2.top > r1.bottom + padding ||
r2.bottom < r1.top - padding);
}
function hasCollision(rect) {
return placedRects.some(r => isOverlap(r, rect));
}
function getRandomColor() {
const hue = Math.floor(Math.random() * 360);
const saturation = Math.floor(Math.random() * 20) + 10;
const lightness = Math.floor(Math.random() * 20) + 45;
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
container.empty();
$('#hashtag-list li').each(function () {
const $li = $(this);
const weightClass = $li.attr('class');
const weightMatch = weightClass.match(/tag-weight-(\d+)/);
const weight = weightMatch ? parseInt(weightMatch[1], 10) : 1;
const $a = $li.find('a');
let text = $a.text();
if (text.startsWith('#')) {
text = text.substring(1);
}
const href = $a.attr('href');
const title = $a.attr('title');
const fontSize = Math.min(36, Math.max(16, weight / 100 * 36));
const $word = $('<a></a>')
.attr('href', href)
.attr('title', title)
.text(text)
.css({
position: 'absolute',
fontSize: fontSize + 'px',
color: getRandomColor(),
whiteSpace: 'nowrap',
cursor: 'pointer',
userSelect: 'none',
textDecoration: 'none',
visibility: 'hidden',
display: 'inline-block'
});
container.append($word);
const width = $word.outerWidth();
const height = $word.outerHeight();
let maxAttempts = 1000;
let placed = false;
while (!placed && maxAttempts > 0) {
const left = Math.random() * (containerWidth - width);
const top = Math.random() * (containerHeight - height);
const rect = {
left: left,
top: top,
right: left + width,
bottom: top + height
};
if (!hasCollision(rect)) {
$word.css({
left: left + 'px',
top: top + 'px',
visibility: 'visible'
});
placedRects.push(rect);
placed = true;
}
maxAttempts--;
}
if (!placed) {
$word.remove(); // 放不下就不強塞
}
});
}
$(function() {
generateWordCloud();
// RWD時重新生成文字雲
$(window).on('resize', function() {
generateWordCloud();
});
});
</script>

222
modules/universal_table/index.html.erb
View File

@ -1,111 +1,133 @@
<style> <style>
.universal-dropdown-menu {
padding: 15px 18px; .universal-dropdown{
white-space: nowrap; float:left;
}
tr>th:first-child{
display: none!important;
}
tr>td:first-child{
display: none!important;
}
.col-ken{
min-width: 4em;
&:first-child{
min-width: unset!important;
} }
.universal-th-text { }
padding: 8px 0 0 0; .universal-table-index3{
display: inline; table-layout: auto!important;
margin-right: 5px; .universal-th-icon{
color: #888; margin:0;
} }
.universal-dropdown { .universal-th-text {
display: inline-block;
}
a.universal-btn {
vertical-align: baseline;
color: #fff;
}
.universal-table-index {
border-collapse: collapse;
border: 1px solid #eee;
table-layout: fixed;
word-wrap: break-word;
}
.universal-table-index h3 {
float: left;
margin: 0; margin: 0;
.universal-th-icon{
margin:0;
}
.universal-th-text {
margin: 0;
}
} }
.universal-table-index.table td{
padding: 15px 18px; }
} .universal-th-text{
.universal-table-index thead th:last-child .dropdown-menu { white-space: pre!important;
left: auto; overflow: hidden;
right: 0; display: -webkit-box;
} -webkit-line-clamp: 2;
.universal-th-icon { white-space: normal;
border: 1px solid #eee; }
padding: 5px 8px; .universal-dropdown-menu {
margin-right: 5px; padding: 15px 18px;
color: gray; white-space: nowrap;
cursor: pointer; }
} .universal-th-text {
.universal-th-text.no-sort.no-search { padding: 8px 0 0 0;
position: relative; display: inline;
top: -6px; margin-right: 5px;
} }
.image-preview { .universal-dropdown {
width: 120px; display: inline-block;
} }
</style> a.universal-btn {
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> vertical-align: baseline;
<table class="table table-hover table-striped universal-table-index"> color: #fff;
<caption> }
<h3>{{table-name}}</h3> .universal-table-index {
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a> border-collapse: collapse;
</caption> border: 1px solid #eee;
<thead> table-layout: fixed;
<tr data-list="head-columns" data-level="0"> word-wrap: break-word;
<th class="col-md-3"> }
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> .universal-table-index h3 {
<div class="universal-th-text {{title-class}}">{{title}}</div> float: left;
<div class="dropdown universal-dropdown {{search}}"> margin: 0;
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> }
<i class="fa fa-search"></i> .universal-table-index.table td{
<span class="caret"></span> padding: 15px 18px;
</button> }
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> .universal-table-index thead th:last-child .dropdown-menu {
left: auto;
right: 0;
}
.universal-th-icon {
border: 1px solid #eee;
padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<table class="table table-hover table-striped universal-table-index universal-table-index1">
<caption>
<h3>{{table-name}}</h3>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
</caption>
<thead>
<tr data-list="head-columns" data-level="0">
<th class="col-ken">
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group"> <div class="form-group">
{{form-field}} {{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div> </div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button> <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</div> </form>
</div> </div>
</th> </div>
</tr> <div class="universal-th-text {{title-class}}">{{title}}</div>
</thead> </th>
<tbody data-level="0" data-list="rows"> </tr>
<tr data-level="1" data-list="columns"> </thead>
<td>{{text}}</td> <tbody data-level="0" data-list="rows">
</tr> <tr data-level="1" data-list="columns">
</tbody> <td>{{text}}</td>
</table> </tr>
</form> </tbody>
<div>{{total_entries}}</div> </table>
<div>{{export_button}}</div> <div>{{total_entries}}</div>
{{pagination_goes_here}} <div>{{export_button}}</div>
<script type="text/javascript"> {{pagination_goes_here}}
$('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p'); <script>
$('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
$('.universal-table-index').each(function(){
if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
$(this).DataTable({
searching: false,
paging: false,
ordering: false,
info: false,
order: false,
autoWidth: false,
responsive: true
});
}
});
$(document).on('click', '.universal-table-index .dropdown-menu', function (e) {
e.stopPropagation();
});
</script> </script>
<style> <style>
.universal-table-index.dtr-inline.collapsed td.dtr-control{ .universal-table-index.dtr-inline.collapsed td.dtr-control{
vertical-align: middle; vertical-align: middle;
} }
</style> </style>

196
modules/universal_table/index2.html.erb
View File

@ -1,99 +1,111 @@
<style> <style>
.universal-dropdown-menu {
padding: 15px 18px; .universal-dropdown{
white-space: nowrap; float:left;
}
.col-ken{
min-width: 4em;
&:first-child{
min-width: unset!important;
} }
.universal-th-text { }
padding: 8px 0 0 0; .universal-th-text{
display: inline; white-space: pre!important;
margin-right: 5px; overflow: hidden;
color: #fff; display: -webkit-box;
} -webkit-line-clamp: 2;
.universal-dropdown { white-space: normal;
display: inline-block; }
color: gray; .universal-dropdown-menu {
} padding: 15px 18px;
a.universal-btn { white-space: nowrap;
vertical-align: baseline; }
color: #fff; .universal-th-text {
} padding: 8px 0 0 0;
.universal-table-index { display: inline;
border-collapse: collapse; margin-right: 5px;
border: 1px solid #eee; }
table-layout: fixed; .universal-dropdown {
word-wrap: break-word; display: inline-block;
} }
.universal-table-index h3 { a.universal-btn {
float: left; vertical-align: baseline;
margin: 0; color: #fff;
} }
.universal-table-index.table td{ .universal-table-index {
padding: 15px 18px; border-collapse: collapse;
} border: 1px solid #eee;
.universal-table-index thead th:last-child .dropdown-menu { table-layout: fixed;
left: auto; word-wrap: break-word;
right: 0; }
} .universal-table-index h3 {
.universal-table-index tbody { float: left;
counter-reset: item; margin: 0;
} }
.universal-table-index thead > tr > th:first-child { .universal-table-index.table td{
width: 4em; padding: 15px 18px;
} }
.universal-th-icon { .universal-table-index thead th:last-child .dropdown-menu {
border: 1px solid #eee; left: auto;
padding: 5px 8px; right: 0;
margin-right: 5px; }
color: #fff; .universal-th-icon {
cursor: pointer; border: 1px solid #eee;
} padding: 5px 8px;
.universal-th-text.no-sort.no-search { margin-right: 5px;
position: relative; color: gray;
top: -6px; cursor: pointer;
} }
.image-preview { .universal-th-text.no-sort.no-search {
width: 120px; position: relative;
} top: -6px;
</style> }
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> .image-preview {
<table class="table table-hover table-striped universal-table-index"> width: 120px;
<caption> }
<h3>{{table-name}}</h3> </style>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a> <table class="table table-hover table-striped universal-table-index universal-table-index2">
</caption> <caption>
<thead> <h3>{{table-name}}</h3>
<tr data-list="head-columns" data-level="0"> <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
<th class="col-md-3"> </caption>
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> <thead>
<div class="universal-th-text {{title-class}}">{{title}}</div> <tr data-list="head-columns" data-level="0">
<div class="dropdown universal-dropdown {{search}}"> <th class="col-ken">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<i class="fa fa-search"></i> <div class="dropdown universal-dropdown {{search}}">
<span class="caret"></span> <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button> <i class="fa fa-search"></i>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> <span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group"> <div class="form-group">
{{form-field}} {{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div> </div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button> <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</div> </form>
</div> </div>
</th> </div>
</tr> <div class="universal-th-text {{title-class}}">{{title}}</div>
</thead> </th>
<tbody data-level="0" data-list="rows"> </tr>
<tr data-level="1" data-list="columns"> </thead>
<td>{{text}}</td> <tbody data-level="0" data-list="rows">
</tr> <tr data-level="1" data-list="columns">
</tbody> <td>{{text}}</td>
</table> </tr>
</form> </tbody>
<div>{{total_entries}}</div> </table>
<div>{{export_button}}</div> <div>{{total_entries}}</div>
{{pagination_goes_here}} <div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
<script type="text/javascript"> </script>
$(document).on('click', '.universal-table-index .dropdown-menu', function (e) { <style>
e.stopPropagation(); .universal-table-index.dtr-inline.collapsed td.dtr-control{
}); vertical-align: middle;
</script> }
</style>

255
modules/universal_table/index3.html.erb
View File

@ -1,118 +1,153 @@
<style> <style>
.universal-dropdown-menu { tr>th:first-child{
padding: 15px 18px; display: none!important;
white-space: nowrap; }
} tr>td:first-child{
.universal-th-text { display: none!important;
padding: 8px 0 0 0; }
display: inline; .universal-table-index3{
margin-right: 5px; table-layout: auto!important;
color: #888; }
} .universal-dropdown-menu {
.universal-dropdown { padding: 15px 18px;
display: inline-block; white-space: nowrap;
} }
a.universal-btn { .universal-th-text{
vertical-align: baseline; white-space: pre!important;
color: #fff; overflow: hidden;
} display: -webkit-box;
.universal-table-index { -webkit-line-clamp: 2;
border-collapse: collapse; white-space: normal;
border: 1px solid #eee; }
table-layout: fixed; .universal-dropdown-menu {
word-wrap: break-word; padding: 15px 18px;
} white-space: nowrap;
.universal-table-index h3 { }
float: left; .universal-th-text {
margin: 0; padding: 8px 0 0 0;
} display: inline;
.universal-table-index.table td{ margin-right: 5px;
padding: 15px 18px; }
} .universal-dropdown {
.universal-table-index thead th:last-child .dropdown-menu { display: inline-block;
left: auto; }
right: 0; a.universal-btn {
} vertical-align: baseline;
.universal-table-index tbody { color: #fff;
counter-reset: item; }
} .universal-table-index {
.universal-th-icon { border-collapse: collapse;
border: 1px solid #eee; border: 1px solid #eee;
padding: 5px 8px; table-layout: fixed;
margin-right: 5px; word-wrap: break-word;
color: gray; }
cursor: pointer; .universal-table-index h3 {
} float: left;
.universal-th-text.no-sort.no-search { margin: 0;
position: relative; }
top: -6px; .universal-table-index.table td{
} padding: 15px 18px;
.image-preview { }
width: 120px; .universal-table-index thead th:last-child .dropdown-menu {
} left: auto;
</style> right: 0;
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> }
<table class="table table-hover table-striped universal-table-index"> /* .universal-table-index tbody {
<div class="searchbtn"> counter-reset: item;
<div class="ken-click"> } */
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div> .universal-th-icon {
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a> border: 1px solid #eee;
</div> padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index universal-table-index3">
<div class="searchbtn">
<div class="ken-click">
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
</div> </div>
<div class="searchbox"> </div>
<div class="theadsearch2"> <div class="searchbox">
<div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0"> <div class="theadsearch2">
<div class="{{col-class}}"> <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> <div class="{{col-class}}">
<div class="universal-th-text {{title-class}}">{{title}}</div> <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="dropdown universal-dropdown {{search}}"> <div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> <div class="dropdown universal-dropdown {{search}}">
<div class="form-group"> <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
{{form-field}} <div class="form-group">
<input type="hidden" value="{{key}}" name="column" > {{form-field}}
</div> <input type="hidden" value="{{key}}" name="column" >
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-1 col-xs-12 submit-btn-wrap">
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
</div>
</div> </div>
<div class="col-md-1 col-xs-12 submit-btn-wrap">
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
</div> </div>
<caption> </div>
<h3>{{table-name}}</h3> </div>
</caption> <caption>
<thead class="theadsearch"> <h3>{{table-name}}</h3>
<tr data-list="head-columns" data-level="0"> </caption>
<th class="col-md-3"> <thead class="theadsearch">
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> <tr data-list="head-columns" data-level="0">
<div class="universal-th-text {{title-class}}">{{title}}</div> <th class="col-ken">
<div class="dropdown universal-dropdown {{search}}"> <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="universal-th-text {{title-class}}">{{title}}</div>
<i class="fa fa-search"></i> <div class="dropdown universal-dropdown {{search}}">
<span class="caret"></span> <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button> <i class="fa fa-search"></i>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> <span class="caret"></span>
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> </button>
<div class="form-group"> <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
{{form-field}} <form class="form-inline universal-form-inline" action="{{url}}" method="get">
<input type="hidden" value="{{key}}" name="column" > <div class="form-group">
</div> {{form-field}}
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button> <input type="hidden" value="{{key}}" name="column" >
</form> </div>
</div> <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div> </div>
</th> </div>
</tr> </th>
</thead> </tr>
<tbody data-level="0" data-list="rows"> </thead>
<tr data-level="1" data-list="columns"> <tbody data-level="0" data-list="rows">
<td>{{text}}</td> <tr data-level="1" data-list="columns">
</tr> <td>{{text}}</td>
</tbody> </tr>
</table> </tbody>
</form> </table>
<div>{{total_entries}}</div> </form>
<div>{{export_button}}</div> <div>{{total_entries}}</div>
{{pagination_goes_here}} <div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
// $(document).ready(function(){
// $("tr>th:first-child").removeClass("col-md-3");
// $("tr>th:first-child").addClass("col-md-1");
// $("tr>th:nth-child(2)").removeClass("col-md-3");
// $("tr>th:nth-child(2)").addClass("col-md-6");
// $("tr>th:nth-child(3)").removeClass("col-md-3");
// $("tr>th:nth-child(3)").addClass("col-md-3");
// $("tr>th:nth-child(4)").removeClass("col-md-3");
// $("tr>th:nth-child(4)").addClass("col-md-2");
// $("tr>th:nth-child(5)").removeClass("col-md-3");
// $("tr>th:nth-child(5)").addClass("col-md-3");
// });
// $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>')
</script>

147
modules/universal_table/index4.html.erb Normal file
View File

@ -0,0 +1,147 @@
<style>
.universal-table-index4{
table-layout: auto!important;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text{
white-space: pre!important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
white-space: normal;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text {
padding: 8px 0 0 0;
display: inline;
margin-right: 5px;
}
.universal-dropdown {
display: inline-block;
}
a.universal-btn {
vertical-align: baseline;
color: #fff;
}
.universal-table-index {
border-collapse: collapse;
border: 1px solid #eee;
table-layout: fixed;
word-wrap: break-word;
}
.universal-table-index h3 {
float: left;
margin: 0;
}
.universal-table-index.table td{
padding: 15px 18px;
}
.universal-table-index thead th:last-child .dropdown-menu {
left: auto;
right: 0;
}
/* .universal-table-index tbody {
counter-reset: item;
} */
.universal-th-icon {
border: 1px solid #eee;
padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index universal-table-index4">
<div class="searchbtn">
<div class="ken-click">
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
</div>
</div>
<div class="searchbox">
<div class="theadsearch2">
<div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
<div class="{{col-class}}">
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-xs-12 submit-btn-wrap">
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
</div>
</div>
</div>
<caption>
<h3>{{table-name}}</h3>
</caption>
<thead class="theadsearch">
<tr data-list="head-columns" data-level="0">
<th class="col-ken">
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</th>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
</form>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
// $(document).ready(function(){
// $("tr>th:first-child").removeClass("col-md-3");
// $("tr>th:first-child").addClass("col-md-1");
// $("tr>th:nth-child(2)").removeClass("col-md-3");
// $("tr>th:nth-child(2)").addClass("col-md-6");
// $("tr>th:nth-child(3)").removeClass("col-md-3");
// $("tr>th:nth-child(3)").addClass("col-md-3");
// $("tr>th:nth-child(4)").removeClass("col-md-3");
// $("tr>th:nth-child(4)").addClass("col-md-2");
// $("tr>th:nth-child(5)").removeClass("col-md-3");
// $("tr>th:nth-child(5)").addClass("col-md-3");
// });
// $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>')
</script>

214
modules/universal_table/index5.html.erb Normal file
View File

@ -0,0 +1,214 @@
<style>
.combined-search-inner{
border: 1px solid #d5d5d5;
background: #f6f6f6;
padding: 0.5em;
border-radius: 0.5em;
}
.input-group2{
display: flex;
justify-content: space-between;
}
.more-btn {
background-color: #c93a42;
color: #fff;
font-size: 1rem;
border-radius: 5px;
&:hover{
color:#fff!important;
}
}
#combined-search{
max-width:250px;
flex: 0 0 75%;
width: auto;
display: block;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
tr>th:first-child{
display: none!important;
}
tr>td:first-child{
display: none!important;
}
.universal-table-index3{
table-layout: auto!important;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text{
white-space: pre!important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
white-space: normal;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text {
padding: 8px 0 0 0;
display: inline;
margin-right: 5px;
}
.universal-dropdown {
display: inline-block;
}
a.universal-btn {
vertical-align: baseline;
color: #fff;
}
.universal-table-index {
border-collapse: collapse;
border: 1px solid #eee;
table-layout: fixed;
word-wrap: break-word;
}
.universal-table-index h3 {
float: left;
margin-left: 0;
}
.universal-table-index.table td{
padding: 15px 18px;
}
.universal-table-index thead th:last-child .dropdown-menu {
left: auto;
right: 0;
}
/* .universal-table-index tbody {
counter-reset: item;
} */
.universal-th-icon {
border: 1px solid #eee;
padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<form class="form-inline universal-form-inline universal-form-inline5 universal-index5" action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index universal-table-index3">
<caption>
<h3>{{table-name}}</h3>
<div class="row col-md-12 col-xs-12 combined-search-row">
<div class="col-md-12 combined-search-inner">
<label for="combined-search" class="sr-only">整合搜尋</label>
<div class="input-group2">
<input type="text" id="combined-search" class="form-control" placeholder="輸入欲揣的詞，揤送出" aria-label="搜揣" title="輸入欲揣的詞，揤送出">
<div class="input-group-btn2">
<button id="combined-search-btn" type="button" class="btn btn-warning2 more-btn">
送出<i class="fa fa-arrow-right" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="searchbtn">
<div class="ken-click">
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>進階</div>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
</div>
</div>
<div class="searchbox">
<div class="theadsearch2">
<div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
<div class="{{col-class}}">
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-xs-12 submit-btn-wrap">
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
</div>
</div>
</div>
</div>
</div>
</caption>
<thead class="theadsearch">
<tr data-list="head-columns" data-level="0">
<th class="col-ken">
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</form>
</div>
</div>
</th>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr class="tdken" data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
</form>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
$(document).ready(function(){
$('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
$('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
$(".universal-th-text").append(" :");
# $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
$('.voice-player').each(function () {
// 取得 <i> 元素
const icon = $(this).find('i')[0];
if (icon) {
// 取得 <i> 前面的節點
const prevNode = icon.previousSibling;
// 如果是文字節點，則移除
if (prevNode && prevNode.nodeType === 3) {
prevNode.remove();
}
}
});
});
</script>

55
modules/universal_table/info.json
View File

@ -12,26 +12,53 @@
"filename" : "index2", "filename" : "index2",
"name" : { "name" : {
"zh_tw" : "2. 含序號表格列表", "zh_tw" : "2. 含序號表格列表",
"en" : "2. Index Table with serial number" "en" : "2. Index Table with serial number "
},
"thumbnail" : "thumb.png"
},
{
"filename" : "index3",
"name" : {
"zh_tw" : "3. 含序號表格列表 + 多欄位搜尋",
"en" : "3. Index Table with serial number + Multiple Field Search"
}, },
"thumbnail" : "thumb.png", "thumbnail" : "thumb.png",
"default": true "default": true
}, },
{
"filename" : "index3",
"name" : {
"zh_tw" : "3. 單純表格列表 + 多欄位搜尋",
"en" : "3. col Pure index table+ Multiple Field Search"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "index4",
"name" : {
"zh_tw" : "4.含序號表格列表 + 多欄位搜尋",
"en" : "4. col Index Table with serial number + Multiple Field Search"
},
"thumbnail" : "thumb.png",
"default": true
},
{
"filename" : "index5",
"name" : {
"zh_tw" : "5. 卡片單純表格列表 + 多欄位搜尋",
"en" : "5. card-col Pure index table+ Multiple Field Search"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "mindmap",
"name" : {
"zh_tw" : "6. Mind Maps",
"en" : "6. Mind Maps"
},
"thumbnail" : "thumb.png"
}
],
"widgets" : [
{ {
"filename" : "mindmap", "filename" : "tag_cloud",
"name" : { "name" : {
"zh_tw" : "6. Mind Maps", "zh_tw" : "0. Tag Cloud",
"en" : "6. Mind Maps" "en" : "0. Tag Cloud"
}, },
"thumbnail" : "thumb.png" "thumbnail" : "_tag_cloud_thumb.png"
} }
] ]
} }

229
modules/universal_table/mindmap.html.erb
View File

@ -1,107 +1,122 @@
<style> <style>
tr>th:first-child{ .fa-diagram-project{
display: none!important; box-shadow: 0 0 0 2px white, 0 0 0 4px #0f5293;
} background: #f0f0f0;
/* tr>td:first-child{ border: 2px solid #145494;
display: none!important; color: #145494;
} */ padding: 0.5em;
.universal-table-index3{ border-radius: 3em;
table-layout: auto!important; position: absolute;
} right: 2em;
.universal-dropdown-menu { }
padding: 15px 18px; .midmap-universal-table-index{
white-space: nowrap; border:0!important;
} }
.universal-th-text{
white-space: pre!important; tr>th:first-child{
overflow: hidden; display: none!important;
display: -webkit-box; }
-webkit-line-clamp: 2; /* tr>td:first-child{
white-space: normal; display: none!important;
} } */
.universal-dropdown-menu {
padding: 15px 18px; .universal-table-index3{
white-space: nowrap; table-layout: auto!important;
} }
.universal-th-text { .universal-dropdown-menu {
padding: 8px 0 0 0; padding: 15px 18px;
display: inline; white-space: nowrap;
margin-right: 5px; }
} .universal-th-text{
.universal-dropdown { white-space: pre!important;
display: inline-block; overflow: hidden;
} display: -webkit-box;
a.universal-btn { -webkit-line-clamp: 2;
vertical-align: baseline; white-space: normal;
color: #fff; }
} .universal-dropdown-menu {
.universal-table-index { padding: 15px 18px;
border-collapse: collapse; white-space: nowrap;
border: 1px solid #eee; }
table-layout: fixed; .universal-th-text {
word-wrap: break-word; padding: 8px 0 0 0;
} display: inline;
.universal-table-index h3 { margin-right: 5px;
float: left; }
margin: 0; .universal-dropdown {
} display: inline-block;
.universal-table-index.table td{ }
padding: 15px 18px; a.universal-btn {
} vertical-align: baseline;
.universal-table-index thead th:last-child .dropdown-menu { color: #fff;
left: auto; }
right: 0; .universal-table-index {
} border-collapse: collapse;
/* .universal-table-index tbody { border: 1px solid #eee;
counter-reset: item; table-layout: fixed;
} */ word-wrap: break-word;
.universal-th-icon { }
border: 1px solid #eee; .universal-table-index h3 {
padding: 5px 8px; float: left;
margin-right: 5px; margin: 0;
color: gray; }
cursor: pointer; .universal-table-index.table td{
} padding: 15px 18px;
.universal-th-text.no-sort.no-search { }
position: relative; .universal-table-index thead th:last-child .dropdown-menu {
top: -6px; left: auto;
} right: 0;
.image-preview { }
width: 120px; /* .universal-table-index tbody {
} counter-reset: item;
</style> } */
<form class="form-inline universal-form-inline universal-form-inline5" action="{{url}}" method="get"> .universal-th-icon {
<table class="table table-hover table-striped universal-table-index universal-table-index3"> border: 1px solid #eee;
<caption> padding: 5px 8px;
<h3>{{table-name}}</h3> margin-right: 5px;
</caption> color: gray;
<tbody> cursor: pointer;
<tr class="tdken" data-level="0" data-list="mindmaps"> }
<td><a href="{{url}}">{{title}}</a></td> .universal-th-text.no-sort.no-search {
</tr> position: relative;
</tbody> top: -6px;
</table> }
</form> .image-preview {
{{pagination_goes_here}} width: 120px;
<script> }
$(document).ready(function(){ </style>
$('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text ')); <form class="form-inline universal-form-inline midmap" action="{{url}}" method="get">
$('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text ')); <table class="table table-hover table-striped universal-table-index midmap-universal-table-index">
$(".universal-th-text").append(" :"); <caption>
$(".tdken").append('<i class="fa-solid fa-thumbtack"></i>'); <h3>{{table-name}}</h3>
}); </caption>
// $(document).ready(function(){ <tbody>
// $("tr>th:first-child").removeClass("col-md-3"); <tr class="tdken" data-level="0" data-list="mindmaps">
// $("tr>th:first-child").addClass("col-md-1"); <td><a href="{{url}}">{{title}}</a></td>
// $("tr>th:nth-child(2)").removeClass("col-md-3"); </tr>
// $("tr>th:nth-child(2)").addClass("col-md-6"); </tbody>
// $("tr>th:nth-child(3)").removeClass("col-md-3"); </table>
// $("tr>th:nth-child(3)").addClass("col-md-3"); </form>
// $("tr>th:nth-child(4)").removeClass("col-md-3"); {{pagination_goes_here}}
// $("tr>th:nth-child(4)").addClass("col-md-2"); <script>
// $("tr>th:nth-child(5)").removeClass("col-md-3"); $(document).ready(function(){
// $("tr>th:nth-child(5)").addClass("col-md-3"); $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
// }); $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
// $('.universal-table-index thead tr').prepend('<th></th>') $(".universal-th-text").append(" :");
// $('.universal-table-index tbody tr').prepend('<td></td>') $(".tdken td").append('<i class="fa-solid fa-diagram-project"></i>');
</script> });
// $(document).ready(function(){
// $("tr>th:first-child").removeClass("col-md-3");
// $("tr>th:first-child").addClass("col-md-1");
// $("tr>th:nth-child(2)").removeClass("col-md-3");
// $("tr>th:nth-child(2)").addClass("col-md-6");
// $("tr>th:nth-child(3)").removeClass("col-md-3");
// $("tr>th:nth-child(3)").addClass("col-md-3");
// $("tr>th:nth-child(4)").removeClass("col-md-3");
// $("tr>th:nth-child(4)").addClass("col-md-2");
// $("tr>th:nth-child(5)").removeClass("col-md-3");
// $("tr>th:nth-child(5)").addClass("col-md-3");
// });
// $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>')
</script>

85
modules/universal_table/show.html.erb
View File

@ -1,33 +1,96 @@
<style> <style>
.universal-table-show { .universal-table-show {
border: 1px solid #eee; border: 0;
border-collapse: collapse; border-collapse: collapse;
tr{
display: flex;
flex-wrap: wrap;
}
} }
.universal-table-show.table td{ .universal-table-show.table td{
padding: 15px 18px; padding: 0;
border: 0;
} }
.table-title { .table-title {
border-right: 1px solid #eee; border-right: 0;
font-size: 0.8em;
} }
</style> </style>
<table class="table table-striped universal-table-show"> <table class="table table-striped universal-table-show">
<tbody data-level="0" data-list="entry"> <tbody data-level="0" data-list="entry">
<tr> <tr>
<td class="col-md-2 table-title">{{title}}</td> <td class="col-sm-12 table-title">{{title}}</td>
<td>{{text}}</td> <td class="col-sm-12 table-txt">{{text}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="view_count pull-right"> <div class="col-sm-12 table-title" style="background-color: #f8f8f8;
<i class="fa fa-eye">{{view_count_head}}:</i> position: relative;
<span class="view-count">{{view_count}}</span> width: 100%;
</div> color: #676767;
padding-top: 1.5em;">相關詞目</div>
<div data-list="related_entries" data-level="0"> <div data-list="related_entries" data-level="0" class="related_entries">
<tbody data-level="1" data-list="related_entry"> <tbody data-level="1" data-list="related_entry">
<tr> <tr>
<td>{{text}}</td> <td>{{text}}</td>
</tr> </tr>
</tbody> </tbody>
</div> </div>
<div class="view_count pull-right">
<i class="fa fa-eye">{{view_count_head}}:</i>
<span class="view-count">{{view_count}}</span>
</div>
<script>
$(document).ready(function () {
const $tableShow = $('.universal-table-show');
if ($tableShow.length > 0) {
const firstText = $tableShow.find('tr:first .table-txt:first').text().trim();
if (firstText) {
const $li = $('<li>').text(firstText);
$('.breadcrumb').append($li);
}
}
});
$(document).ready(function () {
$('.related_entries').each(function () {
const $container = $(this);
const children = $container.contents();
let wrapper = null;
children.each(function () {
const $el = $(this);
if ($el.is('a') && !$el.hasClass('tag')) {
// 開始一個新的 wrapper
wrapper = $('<div class="column_entry_files_wrapper"></div>');
$container.append(wrapper); // 先加到底部
wrapper.append($el); // 把主詞條加進 wrapper
} else if ($el.is('ul.column_entry_files')) {
if (wrapper) wrapper.append($el);
} else if (this.nodeType === Node.TEXT_NODE && this.textContent.trim() !== '') {
if (wrapper) wrapper.append(this);
} else if ($el.is('a.tag')) {
if (wrapper) wrapper.append($el);
}
});
// 第二輪：移除每個 .column_entry_files_wrapper 前的 &nbsp; 空白節點
$container.find('.column_entry_files_wrapper').each(function () {
let prev = this.previousSibling;
while (prev && prev.nodeType === Node.TEXT_NODE) {
if (prev.textContent.trim() === '' || prev.textContent.includes('\u00a0')) {
let toRemove = prev;
prev = prev.previousSibling;
toRemove.parentNode.removeChild(toRemove);
} else {
break;
}
}
});
});
});
</script>