'refresh'

This commit is contained in:
kenlee 2025-03-24 17:47:50 +08:00
parent b4f980a312
commit da471e58d2
76 changed files with 1593 additions and 288 deletions

View File

@ -1,6 +1,7 @@
;(function($, win, undefined) {
// ECMAScript 5 嚴格模式
'use strict';
//header fixed在上方
function initdata1() {
if ( $('.homebanner').length != 0) {
@ -54,14 +55,14 @@
},
// 外掛,所有的外掛都可以放到這個物件裡
plugins: {
// 自適應圖片裁切Ray的外掛
bullEye: function() {
$('.bullseye').bullseye({
fadeEffect: false
});
}
},
// plugins: {
// // 自適應圖片裁切Ray的外掛
// bullEye: function() {
// $('.bullseye').bullseye({
// fadeEffect: false
// });
// }
// },
// nav: {
// 自適應使用的下拉選單
@ -410,7 +411,7 @@
initdata1();
orbit.sitemenuDropdown();
orbit.goBackTop('top', 800);
orbit.plugins.bullEye();
// orbit.plugins.bullEye();
orbit.setColumn('.left-column', '.right-column');
// 自適應網頁使用當網頁載入時如果視窗寬度小於769就執行orbit.nav.setDropdown函數
@ -464,83 +465,344 @@
// $('.header-buttom').appendTo($('.dropdowns'));
// }
function forFreeGo() {
if (document.documentElement.lang === 'zh_tw') {
document.documentElement.lang = 'zh-Hant';
}
//tab鍵按下
$(document).on('keydown', function(e) {
if (e.key === "Tab" || e.keyCode === 9) {
$('.header-nav, .dropdowns').css('display', 'block');
}
});
//li被hover
$('li').hover(
function() {
$(this).children('ul').addClass('show');
},
function() {
$(this).children('ul').removeClass('show');
}
);
//刪除空的h1
$('h1').each(function() {
if ($(this).text().trim() === '') {
$(this).remove();
}
});
//
// $('.epaper-index2-container h4 a').each(function() {
// var $this = $(this);
// // 取得 a 內部的純文字內容,移除前後空白
// var textContent = $this.text().trim();
// // 檢查 a 內部是否所有子元素都是 display: none
// var hasVisibleContent = $this.children().filter(function() {
// return $(this).css('display') !== 'none';
// }).length > 0;
// // 如果 a 內部沒有純文字,且內部所有元素都是 display: none則刪除該 a
// if (textContent === '' || !hasVisibleContent) {
// $this.remove();
// }
// });
//refresh_btn加上aria-label
$('#refresh_btn').each(function() {
var $this = $(this);
// 如果 button 尚未有 aria-label則新增
if (!$this.attr('aria-label')) {
$this.attr('aria-label', '重新整理');
}
});
//無障礙會員表格刪除沒有顯示的th
$('.i-member-tr-head').each(function() {
if ($(this).css('display') === 'none') {
$(this).remove();
}
});
//無障礙公告a是空的
$('.w-annc__subtitle').each(function () {
var $this = $(this);
var $link = $this.find('a');
// 檢查 a 是否存在,且去除空白後是否為空字串
if ($link.length && $link.text().trim() === '') {
$this.remove(); // 移除外層 .w-annc__subtitle
}
});
//無障礙單位轉換
$("[style*='font-size']").each(function() {
var fontSize = $(this).css("font-size");
if (fontSize.includes("px")) {
var pxValue = parseFloat(fontSize); // 取得數值
var emValue = pxValue / 16; // 假設 1em = 16px
$(this).css("font-size", emValue + "em");
}
});
$("[style*='font-size']").each(function() {
var fontSize = $(this).css("font-size");
if (fontSize.includes("pt")) {
var ptValue = parseFloat(fontSize); // 取得數值
var emValue = ptValue / 12; // 1em = 12pt一般轉換標準
$(this).css("font-size", emValue + "em");
}
});
$("table").each(function() {
$(this).find("tr").each(function(rowIndex) {
$(this).find("th").each(function(colIndex) {
if (rowIndex === 0) {
// 第一列的 th適用於該欄
$(this).attr("scope", "col");
} else if (colIndex === 0) {
// 其他列的第一個 th適用於該行
$(this).attr("scope", "row");
}
});
});
});
$(".banner-pager button").addClass('banner-pagerbtn');
$(".banner-pager button").attr("type","button");
$(".banner-pager button").append('<span style="display: none;">下一張</span>');
$("button").attr("role", "button");
$("select").attr("title","選擇類別");
$(".jarallax-video-audio").attr("role", "button");
$('button').each(function() {
var $this = $(this);
if (!$this.attr('title') || $this.attr('title').trim() === '') {
$this.attr('title', '按鈕');
}
});
$('img').each(function() {
var $this = $(this);
if (!$this.attr('alt') || $this.attr('alt').trim() === '') {
$this.attr('alt', '這是一張圖片');
}
});
$('img').each(function() {
var $this = $(this);
if (!$this.attr('title') || $this.attr('title').trim() === '') {
$this.attr('title', '這是一張圖片');
}
});
$(".w-annc__img-wrap a").each(function () {
var $this = $(this);
// 確保 <a> 內沒有文字節點 (避免重複添加)
if ($this.text().trim() === "") {
$this.append('<span class="sr-only">公告圖片</span>');
}
});
$(".widget-link__widget-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">公告標題</span>');
}
});
$(".sitemenu-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">次選單</span>');
}
});
$(".annc-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">內頁公告標題</span>');
}
});
$(".event-annc-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">內頁活動公告標題</span>');
}
});
$(".show-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">內頁活動公告標題</span>');
}
});
$(".w-annc__widget-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">公告標題</span>');
}
});
$(".widget-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">網路資源標題</span>');
}
});
$(".widget-title").each(function () {
if ($(this).text().trim() === "") {
$(this).append('<span class="sr-only">網路資源標題</span>');
}
});
$('input').each(function() {
var $this = $(this);
if (!$this.attr('title') || $this.attr('title').trim() === '') {
$this.attr('title', '網內搜尋');
}
});
$('.rucaptcha-image').each(function() {
var $button = $(this).next('button'); // 取得緊接在 .rucaptcha-image 之後的 button
if ($button.length && !$button.attr('aria-label')) {
$button.attr('aria-label', '播放驗證碼語音');
}
});
// 幫有連結目的之所有a標籤加上aria-label
$('a').each(function() {
var $this = $(this);
// 如果 <a> 已經有 aria-label則跳過
if ($this.attr('aria-label')) return;
var href = $this.attr('href');
if (!href) return; // 如果沒有 href則跳過
var ariaLabel = "";
// 加入開啟方式
if ($this.attr('target') === '_self') {
ariaLabel += '在本視窗開啟 ';
} else if ($this.attr('target') === '_blank') {
ariaLabel += '在新視窗開啟 ';
}
// 取得 <a> 的文字內容
var linkText = $this.text().trim();
if (linkText) {
ariaLabel += linkText;
} else if ($this.children('span').length === 1) {
ariaLabel += $this.children('span').text().trim();
}
// 如果包含 <i> 圖示,標示為 icon
if ($this.find('i').length) {
ariaLabel = "這是 icon";
}
// 如果是圖片連結,標示為照片
if ($this.find('img').length) {
ariaLabel = "這是一張照片";
}
// 設定 aria-label
if (ariaLabel) {
$this.attr('aria-label', ariaLabel);
}
});
// 幫有連結目的之所有a標籤加上title
for(var i=0;i<$('a').length;i++){
if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){
var titlestr="";
if($('a').eq(i).attr('target')=='_self')
titlestr += '在本視窗開啟 ';
else if($('a').eq(i).attr('target') == '_blank')
titlestr += '在新視窗開啟 ';
if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('</') == -1)
titlestr += $('a').eq(i).html().trim();
else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined && $('a').eq(i).find('>span').length==1)
titlestr += $('a').eq(i).find('>span').html().trim();
else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){
try{
if($('a').eq(i).html().trim().split('>').length==2)
titlestr += $('a').eq(i).html().trim().split('>')[1].trim();
else if($('a').eq(i).html().trim().split('>').length==3)
titlestr += $('a').eq(i).html().trim().split('>')[2].trim();
}catch(e){};
}
else
titlestr += $('a').eq(i).attr('title');
if(titlestr.search('<img') != -1)
titlestr = "這是一張照片";
if(titlestr != "")
$('a').eq(i).attr('title',titlestr);
};
};
$('a').each(function() {
var $this = $(this);
var href = $this.attr('href');
if (!href) return; // 沒有 href 就跳過
// 如果 <a> 已經有 title 屬性,則不進行修改
if ($this.attr('title')) return;
var titlestr = "";
// 加入開啟方式
if ($this.attr('target') == '_self') {
titlestr += '在本視窗開啟 ';
} else if ($this.attr('target') == '_blank') {
titlestr += '在新視窗開啟 ';
}
// 決定 title 內容
var linkText = $this.text().trim();
if (linkText) {
titlestr += linkText;
} else if ($this.children('span').length == 1) {
titlestr += $this.children('span').text().trim();
}
// 如果是圖片連結,標示為照片
if ($this.find('img').length) {
titlestr = "這是一張照片";
}
// 設定 title
if (titlestr) {
$this.attr('title', titlestr);
}
});
// for(var i=0;i<$('a').length;i++){
// if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){
// var titlestr="";
// if($('a').eq(i).attr('target')=='_self')
// titlestr += '在本視窗開啟 ';
// else if($('a').eq(i).attr('target') == '_blank')
// titlestr += '在新視窗開啟 ';
// if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('</') == -1)
// titlestr += $('a').eq(i).html().trim();
// else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined && $('a').eq(i).find('>span').length==1)
// titlestr += $('a').eq(i).find('>span').html().trim();
// else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){
// try{
// if($('a').eq(i).html().trim().split('>').length==2)
// titlestr += $('a').eq(i).html().trim().split('>')[1].trim();
// else if($('a').eq(i).html().trim().split('>').length==3)
// titlestr += $('a').eq(i).html().trim().split('>')[2].trim();
// }catch(e){};
// }
// else
// titlestr += $('a').eq(i).attr('title');
// if(titlestr.search('<img') != -1)
// titlestr = "這是一張照片";
// if(titlestr != "")
// $('a').eq(i).attr('title',titlestr);
// };
// };
// 刪除banner-slide的空連結和空連結目標
for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
$('.w-ba-banner__slide a').eq(i).removeAttr('href');
if($('.w-ba-banner__slide a').eq(i).attr('target') == "")
$('.w-ba-banner__slide a').eq(i).removeAttr('target');
};
// 幫無標題之iframe加上title
for(var i=0;i<$('iframe').length;i++)
if($('iframe').eq(i).attr('title')=="" || $('iframe').eq(i).attr('title')== undefined ){
if($('iframe').eq(i).attr('src').search('facebook') != -1 )
$('iframe').eq(i).attr('title','facebook');
else if($('iframe').eq(i).attr('src').search('google') != -1 )
$('iframe').eq(i).attr('title','google');
else if($('iframe').eq(i).attr('src').search('youtube') != -1 )
$('iframe').eq(i).attr('title','youtube');
else if($('iframe').eq(i).attr('src').search('twitframe') != -1 )
$('iframe').eq(i).attr('title','twitter');
else
$('iframe').eq(i).attr('title','unknown');
};
// 刪除空的檔案室
var archievelen = $('dd a.i-archive-files-item').length;
for(i=archievelen-1;i>=0;i--)
if($('dd a.i-archive-files-item').eq(i).html().trim()=="")
$('dd a.i-archive-files-item').eq(i).parent('dd').remove();
for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
$('.w-ba-banner__slide a').eq(i).removeAttr('href');
if($('.w-ba-banner__slide a').eq(i).attr('target') == "")
$('.w-ba-banner__slide a').eq(i).removeAttr('target');
};
// 幫無標題之iframe加上title
for(var i=0;i<$('iframe').length;i++)
if($('iframe').eq(i).attr('title')=="" || $('iframe').eq(i).attr('title')== undefined ){
if($('iframe').eq(i).attr('src').search('facebook') != -1 )
$('iframe').eq(i).attr('title','facebook');
else if($('iframe').eq(i).attr('src').search('google') != -1 )
$('iframe').eq(i).attr('title','google');
else if($('iframe').eq(i).attr('src').search('youtube') != -1 )
$('iframe').eq(i).attr('title','youtube');
else if($('iframe').eq(i).attr('src').search('twitframe') != -1 )
$('iframe').eq(i).attr('title','twitter');
else
$('iframe').eq(i).attr('title','unknown');
};
//button是空的就加上內容
$('button').each(function() {
var $this = $(this);
var titleText = $this.attr('title') || '';
// 檢查 button 是否是空的(沒有可見文字或子元素)
if ($this.text().trim() === '' && !$this.children().length && titleText) {
// 新增隱藏的 span內容為 title
$this.append('<span class="sr-only">' + titleText + '</span>');
}
});
// 刪除空的檔案室
var archievelen = $('dd a.i-archive-files-item').length;
for(i=archievelen-1;i>=0;i--)
if($('dd a.i-archive-files-item').eq(i).html().trim()=="")
$('dd a.i-archive-files-item').eq(i).parent('dd').remove();
// 刪除具有空連結欄位的橫列
for(var i = 0;i < $('*[data-list] tr td a').length ; i++)
if($('*[data-list] tr td a').eq(i).html().trim()=="")
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
$('.nav-level-0>li>a').focus(function(e) {
for(var i = 0;i < $('*[data-list] tr td a').length ; i++)
if($('*[data-list] tr td a').eq(i).html().trim()=="")
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
$('.nav-level-0>li>a').focus(function(e) {
e.stopPropagation();
$(this).parent().focus();
$(this).parent().focus();
if ($(this).parent().find('.nav-level-1').hasClass('show')) {
} else {
$('.nav-level-1').removeClass('show');
$(this).parent().find('.nav-level-1').addClass('show');
}
});
$('.nav-level-1>li>a').focus(function(e) {
e.stopPropagation();
if ($(this).parent().find('.nav-level-2').hasClass('show')) {
}else{
$('.nav-level-2').removeClass('show');
$(this).parent().find('.nav-level-2').addClass('show');
}
});
$('show').parent('li').focus();
$('.nav-level-1>li>a').focus(function(e) {
e.stopPropagation();
if ($(this).parent().find('.nav-level-2').hasClass('show')) {
}else{
$('.nav-level-2').removeClass('show');
$(this).parent().find('.nav-level-2').addClass('show');
}
});
$('show').parent('li').focus();
}
forFreeGo();
@ -548,9 +810,9 @@
//header banner setting
if ( location.href.search('editmode=on') != -1 ) {
$('.header-banner').css('z-index','2');
} else {
$('.header-banner').css({
$('.header-banner').css('z-index','2');
} else {
$('.header-banner').css({
'position': 'relative',
'top': '0',
'z-index': '-2',
@ -630,19 +892,126 @@ extendPanelWidget();
}
$(document).ready(function () {
if ($(".main-content .video_detail").length > 0) {
$('.videopagenone').css("display","none");
$('.videopage').css('display', 'block');
$('.sitemenu').css("display","none");
$('span img[alt="HD"]').parent().hide();
$('span img[alt="觀看人數"]').remove();
$(".video_detail .view_info span").each(function () {
var text = $(this).text().trim(); // 取得 <span> 裡的文字,去掉前後空格
var number = text.replace(/\D/g, ""); // 只保留數字部分
if (number) {
$(this).text(`・觀看次數:${number}`); // 更新內容格式
}
});
$(".movie_desc").before('<div class="movietitle"><h4>單元介紹</h4></div>');
$(".movie_desc").each(function () {
var decodedHtml = $("<div/>").html($(this).text()).html(); // 轉換轉義的 HTML
$(this).html(decodedHtml); // 設置為真正的 HTML
});
$(".video_group_time").each(function () {
var $this = $(this); // 當前 .video_group_time
// 找到對應的 <q>,並移動到 .video_group_time 內部
var $q = $this.closest(".imglst_desc").find(".movie_desc q");
if ($q.length) {
$this.append($q.clone()); // 將 <q> 複製並添加到 .video_group_time
$q.remove(); // 移除 .movie_desc 裡的 <q>
}
// 移動 .view_info 到 .video_group_time 的內部
$this.append($this.siblings(".view_info"));
// 取得內容並移除 "SystemAdmin | " 前綴
var text = $this.text().trim();
var newText = text.replace(/^.*\|\s*/, ""); // 移除 "SystemAdmin | "
$this.text(newText); // 更新內容
$(this).insertBefore($(this).closest(".imglst_desc").siblings("h3"));
});
$(".main-content").css({
"max-width": "920px",
"margin": "auto"
});
$(".video_box_wrap").css("padding-bottom", "56%");
$(".video_detail .video_yt_box").insertBefore(".video_detail .video_group_time");
};
function getYouTubeThumbnail() {
var $ytThumb = $(".ytp-cued-thumbnail-overlay-image");
if ($ytThumb.length) {
var imageUrl = $ytThumb.css("background-image");
// 檢查背景圖格式url("https://...")
var urlMatch = imageUrl.match(/url\(["']?(.*?)["']?\)/);
var extractedUrl = urlMatch ? urlMatch[1] : null;
if (extractedUrl) {
// console.log("成功獲取縮圖:", extractedUrl);
$(".background").css("background-image", `url("${extractedUrl}")`);
} else {
// console.log("背景圖格式不對,改用影片 ID 生成縮圖");
setThumbnailFromVideoId();
}
} else {
// console.log("找不到 .ytp-cued-thumbnail-overlay-image改用影片 ID 生成縮圖");
setThumbnailFromVideoId();
}
}
function setThumbnailFromVideoId() {
var $iframe = $("iframe[src*='youtube.com/embed']");
if ($iframe.length) {
var src = $iframe.attr("src");
var videoIdMatch = src.match(/youtube\.com\/embed\/([^?]+)/);
var videoId = videoIdMatch ? videoIdMatch[1] : null;
if (videoId) {
var fallbackImageUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
// console.log("透過影片 ID 取得縮圖:", fallbackImageUrl);
$(".background").css("background-image", `url("${fallbackImageUrl}")`);
}
}
}
// 嘗試多次加載
var interval = setInterval(function () {
if ($(".ytp-cued-thumbnail-overlay-image").length || $("iframe[src*='youtube.com/embed']").length) {
getYouTubeThumbnail();
clearInterval(interval);
}
}, 1000);
});
// 當文件物件模型(DOM)載入後執行init函數
$(document).ready(function() {
//背景widget設定
if ( location.href.search('editmode=on') != -1 ) {
$('.background').css('z-index','2');
$('.background').css('position','relative');
} else {
$('.background').css('z-index','-1');
$('.background').css('position','fixed');
};
// 綁定滑動事件
$(".cycle-slideshow").swipe({
swipeLeft: function () {
$(this).cycle("next"); // 向左滑動,切換到下一張
},
swipeRight: function () {
$(this).cycle("prev"); // 向右滑動,切換到上一張
},
threshold: 50, // 滑動靈敏度(數值越小越敏感)
});
//改變日期格式
$(".video_group_time").each(function () {
var $this = $(this);
var originalText = $this.text().trim();
// 把 YYYY-MM-DD 轉換成 M月D日
var formattedText = originalText.replace(/(\d{4})-(\d{2})-(\d{2})/g, function (match, year, month, day) {
return parseInt(month, 10) + "月" + parseInt(day, 10) + "日";
});
// 找到對應的 <q>,並複製
var $q = $this.closest(".video_data").find(".video_desc q").clone();
// 更新內容並加上 <q>
$this.html(formattedText).append($q);
});
//常用到的js
// $('.').after($('.'));
// $('.').before($('.'));
// $('.').append($('.'));
// if($('.show-announcement').hasClass('show-announcement')) {
// $('.').css('', '');
// }
$(".mybooking").append('<i class="fa-solid fa-circle-user"></i>');
//內頁dattpp移位
$('.i-annc__page-title').after($('.sitemenu-wrap2'));
$('.i-archive-title').after($('.sitemenu-wrap2'));
$('.page-module-title').after($('.sitemenu-wrap2'));
@ -653,34 +1022,37 @@ extendPanelWidget();
$(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)"));
$(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child"));
//常用到的js
// $('.').after($('.'));
// $('.').before($('.'));
// $('.').append($('.'));
// if($('.show-announcement').hasClass('show-announcement')) {
// $('.').css('', '');
// }
//檔案室手風琴
$('.panel-title>.collapsed').click(function(){
$(this).find('.fa').toggleClass("fa-chevron-down");
$(this).find('.fa').toggleClass("fa-chevron-up");
});
//背景widget設定
if ( location.href.search('editmode=on') != -1 ) {
$('.background').css('z-index','2');
$('.background').css('position','relative');
} else {
$('.background').css('z-index','-1');
$('.background').css('position','fixed');
};
//公告類別顏色
$(".w-annc .w-annc__category-wrap").each(function() {
var SaveCategory = $(this).find(".w-annc__category").text();
// console.log(SaveCategory);
$(this).addClass(SaveCategory);
})
$(".w-annc__item ").each(function() {
var SaveCategory2 = $(this).find(".w-annc__category").text();
// console.log(SaveCategory);
$(this).addClass(SaveCategory2);
})
// $(".w-annc .w-annc__category-wrap").each(function() {
// var SaveCategory = $(this).find(".w-annc__category").text();
// $(this).addClass(SaveCategory);
// })
// $(".w-annc__item ").each(function() {
// var SaveCategory2 = $(this).find(".w-annc__category").text();
// $(this).addClass(SaveCategory2);
// })
$(".i-annc__item .i-annc__category-wrap").each(function() {
var SaveCategory = $(this).find(".i-annc__category").text();
// console.log(SaveCategory);
$(this).addClass(SaveCategory);
})
$(".i-annc__item ").each(function() {
var SaveCategory2 = $(this).find(".i-annc__category").text();
// console.log(SaveCategory);
$(this).addClass(SaveCategory2);
})
@ -725,7 +1097,7 @@ extendPanelWidget();
$("nav ul").toggleClass('hidden');
});
$('.morebken').click(function(){
$('.list-unstyled>li:nth-child(n+16)').slideToggle();
$('.list-unstyled>li:nth-child(n+5)').slideToggle();
$(".morebken .fa-chevron-down").toggleClass("rotate");
$(".openmorebken").toggleClass("closemorebken");
@ -740,6 +1112,7 @@ extendPanelWidget();
headerH();
$(window).resize(function() {
if ($(window).width() <769) {
$('.modules-menu-level-0').after($('.header-nav'));
}else{
$('.outdropdowns').before($('.header-nav'));
@ -769,8 +1142,11 @@ extendPanelWidget();
// $('.outdropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
// }
// });
$('.navbar-brand h2').replaceWith(function () {
return "<h1>" +$(this).html() + "</h1>";
$('.navbar-brand h2').replaceWith(function() {
return $("<h1>", {
class: this.className,
html: $(this).html()
});
});
$('#search'). attr('title', '另開新視窗');
$(window).scroll(function() {
@ -830,15 +1206,15 @@ extendPanelWidget();
// // //選單
// $(document).ready(function() {
//
// //drop down menu
// $(".dropdown-toggle").hover(function() {
// $('.modules-menu-level-1').addClass('display-on');
// });
// $(".dropdown-toggle").mouseleave(function() {
// $('.modules-menu-level-1').removeClass('display-on');
// });
// //drop down menu
// $(".dropdown-toggle").hover(function() {
// $('.modules-menu-level-1').addClass('display-on');
// });
// $(".dropdown-toggle").mouseleave(function() {
// $('.modules-menu-level-1').removeClass('display-on');
// });
//
// });
// });
// $(document).ready(function() {
//
// "use strict";

View File

@ -25,6 +25,7 @@
outline: 0.3125em auto -webkit-focus-ring-color !important;
}
.layout-header {
z-index: 2;
position: relative;
margin-bottom: 0;
border: none;

View File

@ -5,7 +5,7 @@
.layout-slide {
position: relative;
overflow: hidden;
z-index: 1;
z-index: 0;
.w-ad-banner {
margin: auto;
}

View File

@ -29,7 +29,10 @@
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
</div>
<ul class="controlplay"><a role="button" href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>

View File

@ -32,7 +32,10 @@
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
</div>
<ul class="controlplay"><a role="button" href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>

View File

@ -26,7 +26,10 @@
</div>
<div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
<div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
<ul class="controlplay"><a role="button" href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>

View File

@ -27,7 +27,10 @@
</div>
</div>
<ul class="w-ba-banner__pager-3 banner-pager banner_caption_{{subpart-id}}"></ul>
<ul class="controlplay"><a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<button class="prev-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></button>
<button class="next-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></button>

View File

@ -34,7 +34,10 @@
</div>
</div>
<div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
<ul class="controlplay"><a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>

View File

@ -32,7 +32,10 @@
<div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
</div>
<ul class="controlplay"><a role="button" class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>

View File

@ -32,7 +32,10 @@
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
</div>
<ul class="controlplay"><a role="button" href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
@ -69,13 +72,6 @@
.w-ba-banner .controlplay{
width: auto;
}
.w-ba-banner .button-mid{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.next-button,.prev-button{
cursor: pointer;
}

View File

@ -29,7 +29,10 @@
</div>
<div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
<div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
<ul class="controlplay"><a role="button" href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
<ul class="controlplay">
<a role="button" class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a>
<a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>

View File

@ -6,7 +6,7 @@
<li class="w-annc__item">
<div class="w-annc__img-wrap ">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</div>

View File

@ -26,7 +26,7 @@
data-cycle-slides=".w-annc__item" >
<li class="w-annc__item " >
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" style="">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>

View File

@ -5,8 +5,8 @@
</h3>
<div class="slide-button">
<button class="cycle-prev btn btn-warning"> <i class="fa fa-angle-left"></i></button>
<button class="cycle-next btn btn-warning"> <i class="fa fa-angle-right"></i></button>
<button class="cycle-prev btn btn-warning" title="上一張" aria-label="上一張"> <i class="fa fa-angle-left"></i></button>
<button class="cycle-next btn btn-warning" title="下一張" aria-label="下一張"> <i class="fa fa-angle-right"></i></button>
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多+" : "More NEWS" %></a>
</div>

View File

@ -6,11 +6,11 @@
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<ul class="w-annc__list row" data-level="0" data-list="announcements">
<li class="w-annc__item col-md-4">
<li class="w-annc__item col-sm-4">
<div class="w-annc__img-wrap">
<a href="{{link_to_show}}" title="{{title}}">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</a>
</div>
<div class="w-annc__content-wrap">
<h4 class="w-annc__entry-title">

View File

@ -26,7 +26,7 @@
data-cycle-slides=".w-annc__item" >
<li class="w-annc__item ">
<div class="w-annc__content-wrap" style="position:relative">
<a href="{{link_to_show}}" style="">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<div class="w-annc__meta">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
<span class="w-annc__status label {{status-class}}">{{status}}</span>

View File

@ -5,7 +5,7 @@
<ul class="w-annc__list" data-level="0" data-list="announcements">
<li class="w-annc__item row">
<div class="w-annc__img-wrap col-sm-4 bullseye">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</div>

View File

@ -8,7 +8,7 @@
<ul class="w-annc__list row" data-level="0" data-list="announcements">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>

View File

@ -26,7 +26,7 @@
data-cycle-slides=".w-annc__item" >
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>

View File

@ -0,0 +1,33 @@
<div class="w-annc widget-announcement-23">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<ul class="w-annc__list" data-level="0" data-list="announcements">
<li class="w-annc__item">
<div class="w-annc__img-wrap ">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</div>
<div class="w-annc__meta">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
</span>
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
<span class="w-annc__postdate">{{postdate}}</span>
</span>
<span class="w-annc__category-wrap">
<span class="w-annc__category">{{category}}</span>
</span>
</div>
<h4 class="w-annc__entry-title">
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="w-annc__subtitle"><a href="{{link_to_show}}">{{subtitle}}</a></p>
</li>
</ul>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
</div>

View File

@ -0,0 +1,111 @@
<div class="w-annc widget-announcement-24">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<ul class="w-annc__list row" data-level="0" data-list="announcements">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>
<div class="w-annc__content-wrap card">
<div class="w-annc__meta">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
<span class="w-annc__status label {{status-class}}">{{status}}</span>
</span>
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
<i class="fa fa-calendar-o"></i>
<span class="w-annc__postdate">{{postdate}}</span>
</span>
<span class="w-annc__category-wrap">
<i class="fa fa-tasks"></i>
<span class="w-annc__category">{{category}}</span>
</span>
</div>
<h4 class="w-annc__entry-title">
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
</li>
</ul>
</div>
<style type="text/css">
[data-subpart-id="{{subpart-id}}"] .bullseye{
overflow: hidden;
}
</style>
<script>
function combineul_{{subpart-id}}(){
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
parents.each(function(i,v){
for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
var ullength = $(v).find('ul.w-annc__list').length;
for(var i = 1;i < ullength;i++)
$(v).find('ul.w-annc__list').eq(-1).remove();
})
};
var num;
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
function reorganize_{{subpart-id}}(num){
combineul_{{subpart-id}}();
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
parents.each(function(i,v){
var lilength = $(v).find('li.w-annc__item').length;
var ul_length = Math.ceil(lilength/num);
for(var ii=1;ii< ul_length;ii++){
var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
clone_ul.empty();
clone_ul.removeClass("active");
clone_ul.css("display","");
$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
var lihtml="";
if(ii != (ul_length-1)){
for(var j=0;j<num;j++){
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
};
}else{
for(var j=0;j< lilength - num *(ul_length-1) ;j++){
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
};
};
$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
}
if(ul_length != 1 )
for(var i=0;i< lilength -num ; i++)
$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
})
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/20+'em)'); //20px=>li的margin
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
};
$(window).resize(function(){
if($(window).width()>1024){
reorganize_{{subpart-id}}(4);
num=3;
}else if($(window).width()>576){
reorganize_{{subpart-id}}(4);
num=2;
}else{
reorganize_{{subpart-id}}(4);
num=1;
}
})
$(document).ready(function(){
if($(window).width()>1024){
reorganize_{{subpart-id}}(4);
num=3;
}else if($(window).width()>576){
reorganize_{{subpart-id}}(4);
num=2;
}else{
reorganize_{{subpart-id}}(4);
num=1;
}
})
</script>

View File

@ -8,7 +8,7 @@
<ul class="w-annc__list row" data-level="0" data-list="announcements">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" style="">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>

View File

@ -24,6 +24,12 @@
</li>
</div>
{{pagination_goes_here}}
<style>
.i-annc__postdate{
display:flex;
}
</style>
<script>
function transdate(){
var n=document.getElementsByClassName('i-annc__postdate').length;
@ -94,4 +100,4 @@
};
});
</script>
</script>

View File

@ -31,7 +31,7 @@ function postdate() {
var date = $('.i-annc__postdate');
for (let i=0; i<len; i++) {
newDate = date[i].innerText.slice(9,10)
newDate = date[i].innerText.slice(8,10)
newYear = date[i].innerText.slice(0,7 )
date[i].innerHTML= '';
date[i].append(newYear)
@ -44,4 +44,4 @@ function postdate() {
}
postdate();
</script>
</script>

View File

@ -346,6 +346,22 @@
"en": "18. 3-Column Standard Image + Text Lite (widget-title, title, subtitle(only display 15 words))"
},
"thumbnail": "annc_widget18_thumbs.png"
},
{
"filename": "annc_widget23",
"name": {
"zh_tw": "23.二四欄圖文型態 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
"en": "23. 2-4-Column Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
},
"thumbnail": "annc_widget23_thumbs.png"
},
{
"filename": "annc_widget24",
"name": {
"zh_tw": "24. 長短兩欄圖文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
"en": "24. longshort2-Column Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
},
"thumbnail": "annc_widget24_thumbs.png"
}
]
}

View File

@ -11,9 +11,15 @@
.s-annc__sub-img.pull-left {
margin-right: 2em;
}
.show-announcement{
max-width: 800px;
margin: auto;
z-index: 1;
position: relative;
}
</style>
<article class="s-annc show-announcement">
<h1 class="s-annc__show-title">{{title}}</h1>
<h3 class="s-annc__show-title annc-title" aria-label="內頁公告標題">{{title}}</h3>
<ul class="s-annc__meta-wrap list-unstyled no-print">
<li class="s-annc__date-wrap s-annc__meta--item">

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -40,3 +40,6 @@
}
</style>
</div>
<script>
</script>

View File

@ -3,13 +3,13 @@
<div class="btn-toolbar" id="navigation">
<div id="calendar-nav">
<div class="btn-group">
<button class="btn btn-default btn-sm" id="prev_month_btn">
<button class="btn btn-default btn-sm" id="prev_month_btn" aria-label="上一個月">
<i class="icon-chevron-left"></i>
</button>
<button class="btn btn-default btn-sm" id="next_month_btn">
<button class="btn btn-default btn-sm" id="next_month_btn" aria-label="下一個月">
<i class="icon-chevron-right"></i>
</button>
<button class="btn btn-default btn-sm" id="today_btn"><%=t('calendar.today')%></button>
<button class="btn btn-default btn-sm" id="today_btn" aria-label="今天"><%=t('calendar.today')%></button>
</div>
</div>
</div>
@ -18,10 +18,10 @@
<div id='sec3' class="btn-toolbar">
<div class="btn-group calendar_mode">
<div data-list="modes_info" data-level="0">
<button class="btn btn-default mode_switch btn-sm {{active_class}}" data-mode="{{mode}}" >{{trans}}</button>
<button class="btn btn-default mode_switch btn-sm {{active_class}}" data-mode="{{mode}}" aria-label="模式轉換">{{trans}}</button>
</div>
</div>
<button id="refresh_btn" class="btn btn-default btn-sm">
<button id="refresh_btn" class="btn btn-default btn-sm" aria-label="重新整理">
<i class="icons-cycle"></i>
</button>
</div>

View File

@ -1,6 +1,6 @@
<!-- <div class="latest_slider" data-list="categories" data-level="0">
<div class="category_title" data-list="topics" data-level="1">
<h3><a href="{{category_link}}">{{category_title}}</a></h3>
<h3><a href="{{category_link}}" class="btn btn-primary pull-right">{{category_title}}</a></h3>
<div>
</div>
</div> -->
@ -13,7 +13,7 @@
<img src="{{img_url_thumb}}" alt="{{title}}">
</div>
<div class="epaper-rightContent col-lg-7 col-xs-12" >
<h4><a href="{{link_to_show}}">{{title}}</a></h4>
<h4><a href="{{link_to_show}}" aria-label="前往{{title}}" title="{{title}}" class="btn btn-primary pull-right">{{title}}</a></h4>
<div class="epaper-description">{{description}}</div>
</div>

View File

@ -1,6 +1,6 @@
<!-- <div class="latest_slider" data-list="categories" data-level="0">
<div class="category_title" data-list="topics" data-level="1">
<h3><a href="{{category_link}}">{{category_title}}</a></h3>
<h3><a href="{{category_link}}" class="btn btn-primary pull-right">{{category_title}}</a></h3>
<div>
</div>
</div> -->
@ -9,14 +9,14 @@
<div class="epaper-index2" data-list="topics" data-level="0">
<!-- <div class="banner-Container "> </div> -->
<div class="epaper-index2-container row">
<h4><a href="{{link_to_show}}">{{title}}</a>
<a href="{{link_to_show}}"><span>{{category_title}}</span></a>
<h4><a href="{{link_to_show}}" aria-label="前往{{title}}" title="{{title}}">{{title}}</a>
<a href="{{link_to_show}}" aria-label="前往{{title}}" title="{{title}}"><span>{{category_title}}</span></a>
</h4>
<div class="epaper-leftimg col-lg-5 col-xs-12">
<img src="{{img_url_thumb}}" alt="{{title}}">
</div>
<div class="epaper-rightContent col-lg-7 col-xs-12" >
<div class="epaper-description"><a href="{{link_to_show}}">{{description}}</a></div>
<div class="epaper-description"><a href="{{link_to_show}} aria-label="前往{{title}}" title="{{title}}"" class="btn btn-primary pull-right">{{description}}</a></div>
</div>
</div>
</div>

View File

@ -5,7 +5,7 @@
<ul class="w-annc__list" data-level="0" data-list="event_news">
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</div>

View File

@ -1,10 +1,7 @@
<div class="w-annc widget-announcement-4 widget-announcement-15 event-news-15" style="position:relative;">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= t("event_news.more") %></a>
</div>
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div style="position: absolute;top: 58%;width:100%;z-index:101;">
<div style="">
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;color: #ffffff;
@ -26,7 +23,7 @@
data-cycle-slides=".w-annc__item" >
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" alt="{{img_description}}" title="{{img_description}}">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>
@ -52,6 +49,10 @@
</div>
</li>
</ul>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= t("event_news.more") %></a>
</div>
</div>
<!-- <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>

View File

@ -5,7 +5,9 @@
<ul class="w-annc__list" data-level="0" data-list="event_news">
<li class="w-annc__item row">
<div class="w-annc__img-wrap col-sm-4 bullseye">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap col-sm-8">
<div class="w-annc__meta">

View File

@ -1,14 +1,11 @@
<div class="w-annc widget-announcement-20">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<ul class="w-annc__list row" data-level="0" data-list="event_news">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>
@ -34,6 +31,10 @@
</div>
</li>
</ul>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
</div>
<script>
function combineul_{{subpart-id}}(){

View File

@ -1,10 +1,7 @@
<div class="w-annc widget-announcement-4 w-annc event-news-21">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div style="position: absolute;top: 62%;width:100%; z-index: 101;">
<div style="">
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;color: #ffffff;
@ -26,7 +23,7 @@
data-cycle-slides=".w-annc__item" >
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>
@ -52,4 +49,7 @@
</div>
</li>
</ul>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
</div>

View File

@ -20,7 +20,7 @@
<ul class="w-annc__list row" data-level="0" data-list="event_news">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</a>
</div>

View File

@ -8,7 +8,7 @@
<ul class="w-annc__list row" data-level="0" data-list="event_news">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" style="">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</a>

View File

@ -1,5 +1,5 @@
<article class="s-annc show-annc">
<h3 class="s-annc__show-title s-annc-title">{{title}}</h3>
<h3 class="s-annc__show-title event-annc-title" aria-label="內頁活動公告標題">{{title}}</h3>
<ul class="s-annc__meta-wrap list-unstyled no-print">
<li class="s-annc__date-wrap s-annc__meta--item">

View File

@ -1,5 +1,5 @@
<article class="s-annc show-annc2">
<h3 class="s-annc__show-title">{{title}}</h3>
<h3 class="s-annc__show-title event-annc-title" aria-label="內頁活動公告標題">{{title}}</h3>
<ul class="s-annc__meta-wrap list-unstyled no-print">
<li class="s-annc__tag-wrap s-annc__meta--item ">

View File

@ -9,6 +9,7 @@
<span data-list="statuses" data-level="1">
<span class="label status {{status-class}}">{{status}}</span>
</span>
<i class="fa-solid fa-chevron-right" style="float:right;"></i>
</h4>
<section class="post">
<p>{{answer}}</p>
@ -22,15 +23,19 @@
<script>
$('.index-faqs.index2 .index-content .index-content-title-wrap').click(function(){
$('section.post').slideUp(200);
$(this).removeClass('open');
if($("+section",this).css("display")=="none"){
$("+section",this).slideDown(300);
$(this).addClass("open");
}
if( $('.index-content-title-wrap').hasClass('open') ) {
$(".index-content-title-wrap").attr("aria-expanded","true");
$(".open>.fa-chevron-right").addClass("rotate");
$(".index-content-title-wrap").attr("aria-expanded","true");
}
else {
$(".fa-chevron-right").removeClass("rotate");
$(".index-content-title-wrap").attr("aria-expanded","false");
}
})

View File

@ -4,19 +4,20 @@
</h3>
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content col-sm-3">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-content-inner">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
<section class="index-part">
</a>
<div class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
</h4>
<div class="index-img-description">{{album-description}}</div>
</section>
</div>
</div>
</a>
</div>
</div>
</div>

View File

@ -5,17 +5,18 @@
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content">
<div class="index-content-inner clearfix row">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-pic col-xs-5 col-sm-2">
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
<section class="index-part col-xs-7 col-sm-10">
</a>
<div class="index-part col-xs-7 col-sm-10">
<h4 class="index-content-title">
<a href="{{link_to_show}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
</h4>
<div class="index-img-description">{{album-description}}</div>
</section>
</a>
</div>
</div>
</div>
</div>

View File

@ -4,18 +4,19 @@
</h3>
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content col-sm-3">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-content-inner">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
<section class="index-part">
</a>
<div class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
</h4>
</section>
</div>
</a>
</div>
</div>
</div>
</div>

View File

@ -5,16 +5,17 @@
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content">
<div class="index-content-inner clearfix row">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-pic col-xs-5 col-sm-2">
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
<section class="index-part col-xs-7 col-sm-10">
<h4 class="index-content-title">
<a href="{{link_to_show}}">{{album-name}}</a>
</h4>
</section>
</a>
<div class="index-part col-xs-7 col-sm-10">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
</h4>
</div>
</div>
</div>
</div>

View File

@ -5,29 +5,31 @@
<link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
<div class="row" data-level="0" data-list="albums">
<div class="card card-flip h-100">
<a href="{{link_to_show}}">
<div class="card-front">
<div class="card-body" style="padding:0;">
<img
src="{{thumb-src}}"
alt="{{alt_title}}"
>
<div class="card-footer">
<h3 class="card-title">{{album-name}}</h3>
<div class="card-front">
<div class="card-body" style="padding:0;">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<img src="{{thumb-src}}"alt="{{alt_title}}">
</a>
<div class="card-footer">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<h3 class="card-title">{{album-name}}</h3>
</a>
</div>
</div>
</div>
</div>
<div class="card-back">
<div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
<h3 class="card-title">{{album-name}}</h3>
<div class="card-button-group">
<a href="{{link_to_show}}" class="btn btn-secondary view ">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}" class="btn btn-secondary view ">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
</div>

View File

@ -4,18 +4,20 @@
</h3>
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content col-sm-3">
<a href="{{link_to_show}}">
<div class="index-content-inner">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
</a>
<section class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
</h4>
</section>
</div>
</a>
</div>
</div>
</div>

View File

@ -47,6 +47,14 @@
"en" : "6. Search Table List (category title and customized profile data)"
},
"thumbnail" : "member_index1_thumb.png"
},
{
"filename" : "member_index7",
"name" : {
"zh_tw" : "7. 三欄名片式 ( 類別標題, 個人照片, 個人資料等自訂欄位 )",
"en" : "7. three Columns (category title, photo and customized profile data)"
},
"thumbnail" : "member_index5_thumb.png"
}
]
}

View File

@ -8,7 +8,7 @@
<div class="i-member-item-inner clearfix">
<div class="i-member-pic-wrap col-sm-3">
<a href="{{link_to_show}}" title="{{name}}">
<img class="i-member-pic img-thumbnail" src="{{image}}" alt="{{name}}" title="{{name}}">
<img class="i-member-pic img-thumbnail" src="{{image}}" title="{{name}}">
</a>
</div>
<div class="i-member-profile-data-wrap col-sm-9">

View File

@ -8,7 +8,7 @@
<div class="i-member-item-inner clearfix">
<div class="i-member-pic-wrap col-sm-4 col-xs-4">
<a href="{{link_to_show}}" title="{{name}}">
<img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
<img class="i-member-pic" src="{{image}}" title="{{name}}">
</a>
</div>
<div class="i-member-profile-data-wrap col-sm-8 col-xs-8">

View File

@ -8,7 +8,7 @@
<div class="i-member-item-inner clearfix">
<div class="i-member-pic-wrap">
<a href="{{link_to_show}}" title="{{name}}">
<img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
<img class="i-member-pic" src="{{image}}" title="{{name}}">
</a>
</div>
<div class="i-member-profile-data-wrap">

View File

@ -0,0 +1,38 @@
<div class="i-member index-member-5">
<div data-list="roles" data-level="0">
<div class="i-member-section">
<div data-level="1" data-list="status-list">
<h3 class="i-member-status-title">{{status-title}}</h3>
<div class="i-member-list row" data-level="2" data-list="members">
<div class="i-member-item col-sm-4" href="{{link_to_show}}">
<div class="i-member-item-inner clearfix">
<div class="i-member-pic-wrap">
<a href="{{link_to_show}}" title="{{name}}">
<img class="i-member-pic" src="{{image}}" title="{{name}}">
</a>
</div>
<div class="i-member-profile-data-wrap">
<ul class="i-member-profile-list" data-list="profile_data" data-level="3">
<li class="i-member-profile-item">
<span class="i-member-title {{title_class}}">{{title}}</span>
<span class="i-member-value {{value_class}}">{{value}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{pagination_goes_here}}
<script>
for(var i = 0;i < $('.i-member img').length ; i++){
if($('.i-member img').eq(i).attr('alt')=="" ){
$('.i-member img').eq(i).attr('alt','noname');
$('.i-member img').eq(i).attr('title','noname');
$('.i-member img').eq(i).parent().attr('title','noname');
}
}
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -0,0 +1,66 @@
<select name="property-selector" id="property-selector" data-list="filterprops" data-level="0">
<option value="{{id}}&reserve=false">{{title}}</option>
</select>
<div id="orbit_calendar" class="col-lg-0">
<div id="sec1">
<div class="btn-toolbar" id="navigation">
<div id="calendar-nav">
<div class="btn-group">
<button class="btn btn-default btn-sm" id="today_btn" aria-label="今天" title="今天">{{today}}</button>
</div>
</div>
</div>
<div class="form-inline" id="range_selection"></div>
</div>
<div id='sec3' class="btn-toolbar">
<div class="btn-group calendar_mode">
<button class="btn btn-default mode_switch btn-sm" data-mode="timeGridDay" aria-label="日模式" title="日模式">{{day}}</button>
<button class="btn btn-default mode_switch btn-sm" data-mode="timeGridWeek" aria-label="周模式" title="周模式">{{week}}</button>
<button class="btn btn-default active mode_switch btn-sm" data-mode="dayGridMonth" aria-label="月模式" title="月模式">{{month}}</button>
</div>
<button id="refresh_btn" class="btn btn-default btn-sm">
<i class="icons-cycle"></i>
</button>
</div>
<div class="pull-right">
<button class="btn btn-default btn-sm" id="prev_month_btn" aria-label="上一個月" title="上一個月">
<i class="icon-chevron-left"></i>
</button>
<button class="btn btn-default btn-sm" id="next_month_btn" aria-label="下一個月" title="下一個月">
<i class="icon-chevron-right"></i>
</button>
</div>
<div class="clearfix"></div>
<div id="view_holder">
<h3 id="current_title" class="current_day_title"></h3>
<div id="calendar"></div>
<div id="calendar_agenda"></div>
</div>
<div id="calendar-loading"></div>
<table class="table table-striped">
<thead>
<tr data-list="headers" data-level="0">
<th>{{column}}</th>
</tr>
</thead>
<tbody data-list="properties" data-level="0">
<tr>
<td><a href="{{url_to_show}}">{{title}}</a></td>
<td><img width="150" src="{{image-thumb}}" alt="property image"></td>
<td>{{location}}</td>
<td data-list="actions" data-level="1">
<a href="{{link}}" class="btn {{btn-class}}">{{text}}</a>
</td>
</tr>
</tbody>
</table>
{{pagination_goes_here}}
<script type="text/javascript">
var calendar = new Calendar("#calendar", "{{first_property_id}}",{},"",false, "{{language}}");
$("#property-selector").on("change",function () {
calendar = new Calendar("#calendar", $(this).val(),{},"",false, "{{language}}");
})
$("#property-selector").prop('selectedIndex', 0);
</script>

View File

@ -1,5 +1,13 @@
{
"frontend": [
{
"filename" : "index_calendar",
"name" : {
"zh_tw" : "0. 有日曆列表",
"en" : "0.calendar List"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "index",
"name" : {
@ -35,4 +43,4 @@
"thumbnail" : "thumb.png"
}
]
}
}

View File

@ -3,7 +3,7 @@
<ul class="i-annc__list" data-level="0" data-list="publications">
<li class="i-annc__item row">
<div class="i-annc__img-wrap col-sm-4">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{title}}" title="{{title}}">
<img class="i-annc__img" src="{{cover}}" alt="{{cover_description}}" title="{{cover_description}}">
</a>
</div>

View File

@ -2,7 +2,7 @@
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="i-annc__list row" data-level="0" data-list="publications">
<li class="i-annc__item col-md-4">
<a href="{{link_to_show}}">
<a href="{{link_to_show}}" aria-label="前往{{title}}" title="{{title}}">
<div class="i-annc__img-wrap">
<img class="i-annc__img" src="{{cover}}" alt="{{cover_description}}" title="{{cover_description}}">
</div>

View File

@ -94,9 +94,9 @@
<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>
<a href="{{sort-url}}" class="{{sort}}" title="前往分類連結"><i class="universal-th-icon fa fa-{{sort-class}}"></i><span class="sr-only">前往分類連結</span></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">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>

View File

@ -72,9 +72,9 @@
<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>
<a href="{{sort-url}}" class="{{sort}}" title="前往分類連結"><i class="universal-th-icon fa fa-{{sort-class}}"></i><span class="sr-only">前往分類連結</span></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">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>

View File

@ -1,29 +1,31 @@
<div class="w-video_data video_data-widget-1">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper3">
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h5>{{video_title}}</h5></div>
<div class="video_desc">{{video_desc}}</div>
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<!-- <span><img src="{{hd_icon_url}}" alt="HD"></span> -->
<span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_keyword">{{video_keyword}}</div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</a>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_data_wrap{
display: flex;
flex-wrap: wrap;
}
.video_title h5{
@extend .i-title;
display: -webkit-box;
@ -40,3 +42,6 @@
}
</style>
</div>
<script>
</script>

View File

@ -0,0 +1,59 @@
<div class="w-video_data video_data-widget-2">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
<a href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper2">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
</a>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_keyword">{{video_keyword}}</div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
<style>
.video_title h5{
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.view_info{
float: right;
}
.view_info img{
margin-right: 5px;
}
</style>
<script>
# $(document).ready(function () {
# $(".video_keyword").each(function () {
# $(this).insertAfter($(this).siblings(".video_tag").find(".video_tags2"));
# });
# });
</script>

View File

@ -0,0 +1,129 @@
<div class="w-video_data video_data-widget-3">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<div class="btnwrapper" style="position: absolute;top: 50%;width:100%; z-index: 101;">
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;
color: #909090;
background: #fff;
border-radius: 50%;
border: none; z-index: 2;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
<button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;
color: #909090;
background: #fff;
border-radius: 50%;
border: none; z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
</div>
<ul class="video_data_wrap col-sm-12 cycle-slideshow" data-list="videos" data-level="0" data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-carousel-visible="3"
data-cycle-carousel-fluid="true"
data-cycle-next="#next-{{subpart-id}}"
data-cycle-prev="#prev-{{subpart-id}}"
data-cycle-slides=".video_data"
>
<li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
<a href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper3">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
</a>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_keyword">{{video_keyword}}</div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_title h5{
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.view_info{
float: right;
}
.view_info img{
margin-right: 5px;
}
.Video__Player{
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
height: 100%;
.Video__PlayerButton{
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
border-radius: 50%;
border: 0px;
background-color: rgb(255, 81, 0);
background: url(/assets/btn-play.svg) no-repeat;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
transition: 0.5s;
width: 60px;
height: 60px;
&:hover{
width: 80px;
height: 80px;
}
}
}
.view_info{
max-height: 100%;
border-radius: 2px;
font-size: 0.875rem;
font-weight: normal;
letter-spacing: 0.3px;
text-align: center;
display: flex;
-webkit-box-align: center;
align-items: center;
position: absolute;
padding: 0px 8px;
background-color: #000000cc;
color: rgb(255, 255, 255);
z-index: 10;
top: 10px;
left: 10px;
border: 1px solid transparent;
line-height: 1.45;
span{
color:#fff;
}
&:before{
content: "";
display: inline-block;
margin-right: 5px;
width: 14px;
height: 10px;
background: url(/assets/icon-view@2x.png) no-repeat;
position: relative;
background-size: contain;
}
}
</style>
</div>
<script>
</script>

View File

@ -0,0 +1,47 @@
<div class="w-video_data video_data-widget-4" style=" background: #f0f0f0;">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<ul class="video_data_wrap row container" data-list="videos" data-level="0">
<li class="video_data col-xs-12 col-sm-3" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper10">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_keyword">{{video_keyword}}</div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</a>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_title h5{
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.view_info{
float: right;
}
.view_info img{
margin-right: 5px;
}
</style>
</div>
<script>
</script>

View File

@ -0,0 +1,176 @@
<div class="w-video_data video_data-widget-5 row">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<ul class="video_data_wrap col-sm-8 cycle-slideshow"
data-list="videos"
data-level="0"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-slides=".video_data"
data-cycle-pager="#pager-{{subpart-id}}"
data-cycle-next="#next-{{subpart-id}}"
data-cycle-prev="#prev-{{subpart-id}}"
data-cycle-pager-template="<a href='#' class='pager-item' data-slide-num=''><h5></h5></a>">
<li class="video_data col-xs-12 col-sm-12" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" data-title="{{video_title}}">
<a href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper5">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
</a>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</li>
</ul>
<div id="pager-{{subpart-id}}" class="cycle-pager col-sm-4"></div>
<div class="clearfix"></div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
$(".w-video_data").each(function () {
var $container = $(this);
var videoDataItems = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的複製元素
var videoData = videoDataItems.map(function () {
return {
title: $(this).attr("data-title"),
date: $(this).find(".video_group_time").text().trim() // 取得日期
};
}).get();
// 只影響「當前」輪播的 Pager Items
$container.find(".cycle-pager .pager-item").slice(0, videoData.length).each(function (index) {
var { title, date } = videoData[index];
$(this).attr("data-slide-num", index);
// 先移除舊的日期標籤,避免重複
$(this).find(".video-date").remove();
// 插入日期作為獨立的 <span>,放在 h5 之前
if (date) {
$("<span class='video-date'></span>").text(date + " ").prependTo(this);
}
$(this).find("h5").text(title);
});
// 只讓「當前」的 Pager 綁定點擊事件
$container.find(".cycle-pager").on("click", ".pager-item", function (e) {
e.preventDefault();
var index = $(this).attr("data-slide-num");
// 只影響「當前」輪播的 .cycle-slideshow
$container.find(".cycle-slideshow").cycle("goto", index);
});
});
}, 300); // 延長時間確保 DOM 生成
setTimeout(function () {
$(".w-video_data.video_data-widget-5").each(function () { //限制只影響 .video_data-widget-5
var $container = $(this);
var $items = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的元素
var $pager = $container.find(".cycle-pager"); // 取得 Pager 容器
var totalItems = $items.length;
var itemsPerPage = 5;
var currentIndex = 0;
// 取得所有 video_data 的標題與日期
var videoData = $items.map(function () {
return {
title: $(this).attr("data-title"),
date: $(this).find(".video_group_time").text().trim()
};
}).get();
// 生成對應的 .pager-item
var pagerHTML = "";
videoData.forEach(function ({ title, date }, index) {
pagerHTML += `<a href="#" class="pager-item" data-slide-num="${index}">`;
if (date) {
pagerHTML += `<span class="video-date">${date} </span>`;
}
pagerHTML += `<h5>${title}</h5></a>`;
});
$pager.html(pagerHTML); // 插入新的 Pager
var $pagerItems = $pager.find(".pager-item"); // 重新抓取 .pager-item
$pagerItems.hide(); // 先全部隱藏
// 插入按鈕(確保不會重複)
if ($pager.next(".pager-controls").length === 0) {
$pager.after(`
<div class="pager-controls">
<button class="prev-btn"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
<button class="next-btn"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
</div>
`);
}
var $prevBtn = $pager.next(".pager-controls").find(".prev-btn");
var $nextBtn = $pager.next(".pager-controls").find(".next-btn");
// 更新顯示的 pager-item 和 video_data
function updateVisibleItems() {
var firstVisibleIndex = currentIndex; // 取得當前顯示的第一個 Index
var lastVisibleIndex = Math.min(currentIndex + itemsPerPage, totalItems);
// 隱藏所有
$items.hide().removeClass("cycle-slide-active");
$pagerItems.hide().removeClass("cycle-pager-active");
// 顯示當前的 3 個 pager-item
var visiblePagerItems = $pagerItems.slice(firstVisibleIndex, lastVisibleIndex).show();
// 加上 `cycle-pager-active` 到第一個
var firstPagerItem = visiblePagerItems.first().addClass("cycle-pager-active");
// 取得對應的 video_data
var firstPagerIndex = firstPagerItem.data("slide-num");
var $firstVideoItem = $items.eq(firstPagerIndex).show().addClass("cycle-slide-active");
}
// 綁定 Pager 點擊事件
$pager.on("click", ".pager-item", function (e) {
e.preventDefault();
var index = $(this).data("slide-num"); // 獲取對應 index
$pagerItems.removeClass("cycle-pager-active");
$(this).addClass("cycle-pager-active");
$items.hide().removeClass("cycle-slide-active").eq(index).show().addClass("cycle-slide-active");
});
// 綁定上一頁按鈕
$prevBtn.off("click").on("click", function () {
if (currentIndex > 0) {
currentIndex -= itemsPerPage;
updateVisibleItems();
}
});
// 綁定下一頁按鈕
$nextBtn.off("click").on("click", function () {
if (currentIndex + itemsPerPage < totalItems) {
currentIndex += itemsPerPage;
updateVisibleItems();
}
});
// 初始化顯示
updateVisibleItems();
});
}, 300); // 延長時間確保 DOM 生成
});
</script>

View File

@ -9,6 +9,42 @@
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_widget2",
"force_cover": "true",
"name" : {
"zh_tw" : "2. 影片列表2 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "2. Video List 2 ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_widget3",
"force_cover": "true",
"name" : {
"zh_tw" : "3. 影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "3.carousel-Video List ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_widget4",
"force_cover": "true",
"name" : {
"zh_tw" : "4. 四欄影片列表 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "4. 4col-Video List 1 ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_widget5",
"force_cover": "true",
"name" : {
"zh_tw" : "5. 大圖影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "5.bigcarousel-Video List ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_widget_jqcloud1",
"force_cover": "true",
@ -51,8 +87,8 @@
"filename" : "video_pro_index3",
"force_cover": "true",
"name" : {
"zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
"en" : "3. Video List 2 + Modal window ( snapshot, video info)"
"zh_tw" : "3. 三欄 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
"en" : "3. 3col-Video List 2 + Modal window ( snapshot, video info)"
},
"thumbnail" : "thumb.png"
},
@ -60,8 +96,17 @@
"filename" : "video_pro_index_post_agency1",
"force_cover": "true",
"name" : {
"zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
"en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
"zh_tw" : "4. 三欄 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
"en" : "4. 3col-Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_index4",
"force_cover": "true",
"name" : {
"zh_tw" : "4. 四欄影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "4. 4col-Video List 1 + Category filter + Search ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
}

View File

@ -3,17 +3,17 @@
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-sm-12 row" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class=" video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper3 col-sm-3">
<div class="video_linkwrapper3 col-sm-4">
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="col-sm-9 video_info">
<div class="col-sm-8 video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h5>{{video_title}}</h5></div>
<div class="video_desc">{{video_desc}}</div>
<div class="view_info">
<!-- <span><img src="{{hd_icon_url}}" alt="HD"></span> -->
<span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
<span>x {{view_count}}</span>
</div>
</div>
</a>
@ -21,6 +21,7 @@
</ul>
<div class="clearfix"></div>
<style>
.video_data-index-1{
.video_desc{
height:auto!important;
}
@ -83,6 +84,8 @@
border-bottom: 2px solid #1a1b20;
padding-bottom: 0.5em;
}
}
</style>
</div>
{{pagination_goes_here}}

View File

@ -46,13 +46,7 @@
}
.video_data{
margin-bottom: 1em;
padding: 0 0.5em;
.video_link{
background: #f3f3f3;
position: relative;
display: block;
padding: 1em;
}
padding: 0 0.5em;
}
.video_info {
margin: 1em 0;

View File

@ -47,12 +47,6 @@
.video_data{
padding: 0 0.5em;
margin-bottom: 1em;
.video_link{
background: #f3f3f3;
position: relative;
display: block;
padding: 1em;
}
}
.video_info {
margin: 1em 0;

View File

@ -14,7 +14,7 @@
</div>
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-sm-6" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
<div class="video_snapshot_wrap video_linkwrapper2">
<img class="video_snapshot" src="{{snapshot_url}}"/>
@ -32,13 +32,7 @@
<style>
.video_data{
margin-bottom: 1em;
padding: 0 0.5em;
.video_link{
background: #f3f3f3;
position: relative;
display: block;
padding: 1em;
}
padding: 0 0.5em;
}
.video_info{
margin: 1em 0;

View File

@ -0,0 +1,162 @@
<div class="i-video_data video_data-index-4">
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper2">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info">
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</a>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_group_time{
display: flex;
align-items: center;
}
.video_tag{
margin: 0.5em 0.5em 0.5em 0;
}
.video_data{
margin-bottom: 1em;
padding: 0 0.5em;
}
.video_info {
margin: 1em 0;
}
.video_data_wrap{
display: flex;
flex-wrap: wrap;
}
.video_filter_area {
margin-bottom: 20px;
}
#filter_category_box {
width: 100%;
line-height: 50px;
height: 50px;
max-width: none;
border: none;
padding: 0 1em;
}
.category_box {
padding: 0;
}
.search_box {
padding-right: 0;
}
@media (max-width: 767px){
.search_box {
padding: 0;
margin-top: 0.5em;
}
}
.search_keyword {
margin-right: 50px;
}
.search_input input[type=text] {
padding: 0 1em;
line-height: 50px;
}
.search_input input {
max-width: none;
width: 100%;
height: 50px;
border: none;
}
.search_submit {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
}
.search_input input[type=submit] {
background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
font-size: 0;
}
.video_tablist {
overflow: hidden;
letter-spacing: 0.1em;
margin-bottom: 15px;
padding: 0;
}
.video_tablist>li, .album_tablist>li {
width: 50%;
float: left;
}
.video_tablist li.now_view a {
background-color: #c47f27;
}
.video_tablist a {
display: block;
padding: 10px 0;
text-align: center;
background-color: #8d681e;
color: #fff;
text-decoration: none;
font-size: 120%;
}
.video_title h5 {
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.view_info {
float: right;
}
.view_info img {
margin-right: 5px;
}
</style>
<script>
$(document).ready(function () {
var $select = $("#filter_category_box"); // 取得 select
var $categoryBox = $(".category_box"); // 取得分類框
// 創建按鈕並插入
$select.find("option").each(function () {
var value = $(this).val();
var text = $(this).text();
// 只處理有值的選項
if (value) {
var $btn = $('<button class="category-btn" data-value="' + value + '">' + text + '</button>');
$categoryBox.append($btn);
}
});
// 點擊按鈕時,更新 select 並觸發變更事件
$(".category-btn").on("click", function () {
var selectedValue = $(this).data("value");
$select.val(selectedValue).trigger("change"); // 設定 select 值並觸發變更事件
});
// 隱藏原本的 select
$select.hide();
$('#filter_category_box').on('change', function(){
$(this).prop('form').submit();
})
});
</script>
</div>
{{pagination_goes_here}}

View File

@ -22,7 +22,7 @@
<div class="video_desc">{{video_desc}}</div>
<div class="view_info">
<span><img src="{{hd_icon_url}}" alt="HD"></span>
<span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
<span>x {{view_count}}</span>
</div>
</div>
</a>
@ -32,12 +32,6 @@
<style>
.video_data{
margin-bottom: 1em;
.video_link{
background: #f3f3f3;
position: relative;
display: block;
padding: 1em;
}
}
.video_info {
margin: 1em 0;

View File

@ -15,6 +15,7 @@
</a>
</li>
</ul>
<div class="morebken">more<i class="fa-solid fa-chevron-down"></i></div>
</div>
<style type="text/css">
.widget-content-horizontal{

View File

@ -13,10 +13,6 @@
</div>
</li>
</ul>
<div style="position: absolute;top: 55%;bottom: 50%;width:100%;">
<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/link-left.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: -1%;"></button>
<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/link-right.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: -2%;"></button>
</div>
<a class="btn-primary widget-link__more btn" href="{{more_url}}"><%= t("web_link.more") %></a>
</div>