566 lines
20 KiB
JavaScript
566 lines
20 KiB
JavaScript
;(function($, win, undefined) {
|
||
// ECMAScript 5 嚴格模式
|
||
'use strict';
|
||
|
||
// 初始函數: 把所有的程式碼都包在init裡面，方便在之後的jQuery ready 函數裡一次呼叫
|
||
function init() {
|
||
// 快取一些常用的變數
|
||
var doc = document;
|
||
var lang = doc.documentElement.lang;
|
||
var pageModule = doc.body.getAttribute('data-module');
|
||
var resizeTimer = -1;
|
||
// 把所有的函數都包在orbit這個物件裡並按模組做簡單的分類
|
||
var orbit = {
|
||
|
||
// 工具函數，裡面包含可以重覆使用的函數
|
||
utils: {
|
||
// 字數限制函數, 因為系統預設沒有，所以使用JS來做
|
||
// els = 元素, maxLen = 限制長度
|
||
truncateText: function(els, maxLen) {
|
||
var els = doc.querySelectorAll(els);
|
||
var newTitle = '';
|
||
var i = -1;
|
||
var elsLen = els.length;
|
||
|
||
for (i = 0; i < elsLen; i++) {
|
||
if (els[i].firstChild !== null) {
|
||
if (els[i].firstChild.length > maxLen) {
|
||
newTitle = els[i].firstChild.textContent;
|
||
els[i].textContent = newTitle.substring(0, maxLen) + '...';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 外掛，所有的外掛都可以放到這個物件裡
|
||
plugins: {
|
||
// 自適應圖片裁切，Ray的外掛
|
||
bullEye: function() {
|
||
$('.bullseye').bullseye({
|
||
fadeEffect: false
|
||
});
|
||
}
|
||
},
|
||
|
||
nav: {
|
||
// 自適應使用的下拉選單
|
||
setDropdown: function() {
|
||
var $caret1 = $('<i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i>');
|
||
var $caret2 = $('<i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i>');
|
||
var $li = null;
|
||
var $this = null;
|
||
var cls = 'active';
|
||
var iconDown = 'fa-chevron-down';
|
||
var iconUp = 'fa-chevron-up';
|
||
|
||
// 如果有第二層選單，新增對應的類別到parent元素上
|
||
$('.nav-level-1')
|
||
.parent('li')
|
||
.addClass('has-dropdown level-1');
|
||
|
||
// 檢查是否已經有dropdown-toggle-icon這個元素，才不會在resize事件中重覆新增
|
||
if ($('.has-dropdown.level-1 > .dropdown-toggle-icon').length < 1) {
|
||
$caret1.appendTo('.has-dropdown.level-1');
|
||
|
||
// 如果有第三層選單，新增對應的類別到parent元素上
|
||
$('.nav-level-2')
|
||
.parent('li')
|
||
.addClass('has-dropdown level-2');
|
||
$caret2.appendTo('.has-dropdown.level-2');
|
||
}
|
||
|
||
// 綁定事件到第二、三層下拉選單的按鈕上
|
||
$('.dropdown-toggle-icon.level-1, .dropdown-toggle-icon.level-2').on('vclick', function(e) {
|
||
e.preventDefault();
|
||
$this = $(this);
|
||
$li = $this.parent('li');
|
||
|
||
// 拿掉所有選項除了目前點選的選項的 active class 並把icon換成預設的
|
||
$li
|
||
.siblings('li')
|
||
.removeClass(cls)
|
||
.find('.' + iconUp)
|
||
.removeClass(iconUp)
|
||
.addClass(iconDown);
|
||
|
||
|
||
// 換掉目前選項的icon
|
||
$li
|
||
.find('> i')
|
||
.removeClass(iconDown)
|
||
.addClass(iconUp);
|
||
|
||
// 折疊已打開的選項
|
||
if ( $li.hasClass(cls) ){
|
||
$li.removeClass(cls);
|
||
$this.removeClass(iconUp).addClass(iconDown);
|
||
}
|
||
else{
|
||
$li.addClass(cls)
|
||
$this.removeClass(iconDown).addClass(iconUp);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 移除行動版下拉選單
|
||
removeDropdown: function() {
|
||
var $nav = $('#main-nav');
|
||
|
||
$nav
|
||
.find('.dropdown-toggle-icon')
|
||
.remove();
|
||
$nav
|
||
.find('.active')
|
||
.removeClass('active');
|
||
}
|
||
},
|
||
|
||
member: {
|
||
// 欄位相同高度，小心這個函數沒有計算到圖片高度，所以可能要搭配 jQuery load函數使用，或是之後使用更好的方式例如 CSS3 flexbox
|
||
equalHeight: function(el) {
|
||
var bigbrother = -1;
|
||
var $el = $(el);
|
||
$el.each(function(i) {
|
||
bigbrother = bigbrother > $el.eq(i).height() ? bigbrother : $el.eq(i).height();
|
||
});
|
||
|
||
$el.height(bigbrother);
|
||
},
|
||
|
||
// 把沒有完成資料的表格列藏起來, 因為後台不管有沒有資料都會輸出項目，所以需要在前台藏起來…
|
||
removeEmptyRow: function() {
|
||
// index 頁面項目
|
||
$('.i-member-profile-item .i-member-value').each(function() {
|
||
if ($(this).text().trim() === '' || $(this).text().trim() === ':') {
|
||
$(this).parent().addClass('hide');
|
||
}
|
||
});
|
||
|
||
// show 頁面項目
|
||
$('.show-member .member-data th, .show-member .member-data td').each(function() {
|
||
if ($(this).text().trim() === '') {
|
||
$(this).parent('tr').addClass('hide');
|
||
}
|
||
});
|
||
},
|
||
},
|
||
|
||
archives: {
|
||
// 把沒有文字內容的標題藏起來，因為就算是標題裡沒有文字系統仍然會輸出，這樣會造成一些多餘的CSS margins, paddings，或許之後也可以使用 CSS3 :empty selector 處理
|
||
// el = 要移除的元素
|
||
removeEmptyTitle: function(el) {
|
||
var $el = $(el);
|
||
var $els = $el.children();
|
||
|
||
$.each($els, function(i, val) {
|
||
if ($els.eq(i).text().trim() === '') {
|
||
$els.eq(i).addClass('hide');
|
||
}
|
||
});
|
||
|
||
$.each($el, function(i, val) {
|
||
if ($el.eq(i).children('.hide').length >= 2) {
|
||
$el.eq(i).addClass('hide');
|
||
}
|
||
});
|
||
},
|
||
|
||
// bootstarp panel 功能擴充，因為原本的功能不支援多個panel
|
||
extendPanel: function() {
|
||
var len = $('.i-archive .panel-title').length;
|
||
var i = -1;
|
||
if (len > 0) {
|
||
// 新增數字到要對應的panel按鈕id及href上面
|
||
for (i = 0; i < len; i++) {
|
||
$('.panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
|
||
$('.panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
adBanner: {
|
||
// 讓AD banner 的圖片可以點選，因為系統預設輸出的圖片是沒有連結的
|
||
// els = 要可以點選的元素(需要配合有data-link這個參數及data-targe才能使用)
|
||
addLinkOnADBanner: function(els) {
|
||
$.each(els, function() {
|
||
if ($(this).data('link') !== '' && !$(this).hasClass('youtube')) {
|
||
$(this).on('click', function() {
|
||
var target = $(this).data('target');
|
||
var link = $(this).data('link');
|
||
|
||
// 設定頁面打開的方式，記得要加上data-target在HTML裡面
|
||
if (target === '_blank') {
|
||
window.open(link, target);
|
||
} else {
|
||
window.location.href = link;
|
||
}
|
||
}).addClass('cursor'); // cursor類別樣式定義在CSS裡面
|
||
}
|
||
});
|
||
},
|
||
|
||
},
|
||
|
||
|
||
// 網站次選單設定，如果次選單有第三層就新增下拉選單的圖示及加上bootstrap class
|
||
// els = 選單元素
|
||
sitemenuDropdown: function(els) {
|
||
var els = doc.querySelectorAll('.sitemenu-list.level-2');
|
||
var len = els.length;
|
||
var i = -1;
|
||
var caret = null;
|
||
|
||
for (i = 0; i < len; i++) {
|
||
if (els[i].children.length) {
|
||
caret = doc.createElement('span');
|
||
caret.className = 'sitemenu-dropdown-toggle fa fa-caret-down';
|
||
caret.setAttribute('data-toggle', 'dropdown');
|
||
|
||
els[i].parentNode.insertBefore(caret, els[i]);
|
||
els[i].className += ' dropdown-menu';
|
||
}
|
||
}
|
||
},
|
||
|
||
// 回到頁面最頂端，動態產生DOM
|
||
// txt = 按鈕的文字, speed = 捲動時的速度
|
||
goBackTop: function(txt, speed) {
|
||
var top = document.createElement('div');
|
||
top.className = 'go-back-top no-print';
|
||
top.textContent = txt || 'top';
|
||
doc.body.appendChild(top);
|
||
|
||
// 判斷是否顯示按鈕
|
||
$(window).scroll(function() {
|
||
if ($(this).scrollTop() !== 0) {
|
||
$('.go-back-top').fadeIn();
|
||
} else {
|
||
$('.go-back-top').fadeOut();
|
||
}
|
||
});
|
||
|
||
// 捲動效果
|
||
$('.go-back-top').on('click', function() {
|
||
$('body, html').animate({
|
||
scrollTop: 0
|
||
}, speed || 300);
|
||
return false;
|
||
});
|
||
},
|
||
|
||
// Multi-column layout, passing ID or class string as parameters and a
|
||
// Bootstrap col class for full width, eg: col-md-12
|
||
setColumn: function(leftCol, rightCol, columnCls) {
|
||
var $leftCol = $(leftCol);
|
||
var $rightCol = $(rightCol);
|
||
var columnCls = columnCls || 'col-sm-12';
|
||
|
||
if ($leftCol.length && $rightCol.length) {
|
||
$.each([$leftCol, $rightCol], function() {
|
||
if ($(this).is(':empty')) {
|
||
$(this)
|
||
.addClass('empty-column')
|
||
.siblings()
|
||
.removeClass(function(index, css) {
|
||
return (css.match(/(^|\s)col-\S+/g) || []).join(' ');
|
||
})
|
||
.addClass(columnCls);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
anncSlider:function(){
|
||
if(!document.querySelector('.pages img')){
|
||
return;
|
||
}
|
||
var pages = document.querySelectorAll('.pages'),
|
||
imgW = document.querySelector('.pages img').clientWidth,
|
||
imgH = document.querySelector('.pages img').clientHeight,
|
||
img = document.querySelectorAll('.pages img'),
|
||
adb = document.querySelector('.annc-box'),
|
||
width = window.innerWidth,
|
||
timeout = adb.getAttribute('timeout'),
|
||
speed = adb.getAttribute('speed') * 0.001,
|
||
allHeight,
|
||
minHeight,
|
||
ads,
|
||
index = 0,
|
||
i,
|
||
TT,
|
||
max,
|
||
totalh = [],
|
||
style = document.createElement("style");
|
||
if(!img){
|
||
return;
|
||
}
|
||
style.appendChild(document.createTextNode(".ltr_in {left: 0;animation: left-in "+ speed +"s ;animation-fill-mode:forwards;}.ltr_out{animation: left-out "+ speed +"s;animation-fill-mode:forwards;}.rtl_in{left:0;animation: right-in "+ speed +"s;animation-fill-mode:forwards;}.rtl_out{animation: right-out "+ speed +"s;animation-fill-mode:forwards;}"));
|
||
document.head.appendChild(style);
|
||
setTimeout(function(){
|
||
for(i=0,max=img.length;i<max;i++){
|
||
allHeight = img[i].clientHeight;
|
||
|
||
totalh.push(allHeight);
|
||
minHeight = Math.min.apply(null, totalh);
|
||
|
||
adb.style.height = minHeight + 'px';
|
||
img[i].parentElement.style.height = minHeight + 'px';
|
||
}
|
||
},1000);
|
||
|
||
|
||
if(!pages[0]){
|
||
return;
|
||
}
|
||
pages[0].classList.add('active');
|
||
function getChildren(n, skipMe1,skipMe2,hide){
|
||
var r = [],i,max;
|
||
if(typeof hide !=='function'){
|
||
hide = false;
|
||
}
|
||
for (i =0,max=n.length; i<max; i++) {
|
||
|
||
if ( n[i].className.indexOf('pages') > -1 && n[i] != skipMe1 && n[i] != skipMe2)
|
||
{
|
||
|
||
if(hide){
|
||
hide(n[i]);
|
||
}
|
||
r.push( n[i] );
|
||
}
|
||
}
|
||
return r;
|
||
};
|
||
|
||
function getSiblings(n1,n2) {
|
||
var hide = function(sib){
|
||
sib.classList.remove('rtl_in');
|
||
sib.classList.remove('rtl_out');
|
||
sib.classList.remove('ltr_in');
|
||
sib.classList.remove('ltr_out');
|
||
}
|
||
var sib = getChildren(n1.parentNode.children, n1,n2,hide);
|
||
}
|
||
|
||
function adPrev(event){
|
||
|
||
pages[0].classList.remove('active');
|
||
for(i=0,max=pages.length;i<max;i++){
|
||
pages[i].classList.remove('rtl_in');
|
||
pages[i].classList.remove('rtl_out');
|
||
}
|
||
if(index <= 0){
|
||
index=pages.length-1;
|
||
pages[pages.length-1].classList.add('ltr_in');
|
||
pages[pages.length-1].classList.remove('ltr_out');
|
||
pages[0].classList.add('ltr_out');
|
||
pages[0].classList.remove('ltr_in');
|
||
|
||
ads = getSiblings(pages[0],pages[pages.length-1]);
|
||
|
||
}else{
|
||
index--;
|
||
pages[index].classList.add('ltr_in');
|
||
pages[index].classList.remove('ltr_out');
|
||
pages[index+1].classList.add('ltr_out');
|
||
pages[index+1].classList.remove('ltr_in');
|
||
|
||
|
||
ads = getSiblings(pages[index],pages[index+1]);
|
||
|
||
}
|
||
}
|
||
|
||
|
||
function adNext(event){
|
||
|
||
pages[0].classList.remove('active');
|
||
for(i=0,max=pages.length;i<max;i++){
|
||
pages[i].classList.remove('ltr_in');
|
||
pages[i].classList.remove('ltr_out');
|
||
}
|
||
if(index >= (pages.length-1)){
|
||
index=0;
|
||
|
||
pages[index].classList.add('rtl_in');
|
||
pages[index].classList.remove('rtl_out');
|
||
pages[pages.length-1].classList.add('rtl_out');
|
||
pages[pages.length-1].classList.remove('rtl_in');
|
||
|
||
ads = getSiblings(pages[index],pages[pages.length-1]);
|
||
|
||
}else{
|
||
index++;
|
||
pages[index].classList.add('rtl_in');
|
||
pages[index].classList.remove('rtl_out');
|
||
pages[index-1].classList.add('rtl_out');
|
||
pages[index-1].classList.remove('rtl_in');
|
||
|
||
ads = getSiblings(pages[index],pages[index-1]);
|
||
|
||
}
|
||
}
|
||
|
||
|
||
if(pages.length<=1){
|
||
return;
|
||
}
|
||
else{
|
||
|
||
TT = setInterval(adNext,timeout);
|
||
}
|
||
}
|
||
|
||
};
|
||
|
||
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
|
||
win.ORBITFRONT = orbit;
|
||
|
||
// 在switch裡測試頁面模組後執行對應的函數
|
||
switch (pageModule) {
|
||
case 'home':
|
||
break;
|
||
case 'member':
|
||
orbit.member.removeEmptyRow();
|
||
break;
|
||
case 'archive':
|
||
orbit.archives.removeEmptyTitle('.i-archive__category-item');
|
||
orbit.archives.extendPanel();
|
||
break;
|
||
case 'gallery':
|
||
orbit.utils.truncateText('.show-description', 15);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
// 在所有的頁面(包含首頁)執行下面這幾個函數
|
||
orbit.sitemenuDropdown();
|
||
orbit.goBackTop('top', 800);
|
||
orbit.plugins.bullEye();
|
||
orbit.setColumn('.left-column', '.right-column');
|
||
orbit.anncSlider();
|
||
// orbit.MobileMenu();
|
||
// testing
|
||
// 自適應網頁使用，當網頁載入時，如果視窗寬度小於768，就執行orbit.nav.setDropdown函數
|
||
if ($(window).width() < 768) {
|
||
orbit.nav.setDropdown();
|
||
}
|
||
|
||
// 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
|
||
$(window).resize(function() {
|
||
if ($(window).width() < 768) {
|
||
clearTimeout(resizeTimer);
|
||
resizeTimer = setTimeout(orbit.nav.setDropdown, 500);
|
||
} else {
|
||
resizeTimer = setTimeout(orbit.nav.removeDropdown, 500);
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
|
||
// 當文件物件模型(DOM)載入後，執行init函數
|
||
$(document).ready(function() {
|
||
$(".page-home .content-boxL2 img[src='/assets/announcement-default.jpg']").attr("src","/assets/announcement-default2.jpg");
|
||
$(".page-home .content-boxL3 img[src='/assets/announcement-default.jpg']").attr("src","/assets/announcement-default3.jpg");
|
||
|
||
$(".page-home .content-boxL1 .L11 img[src='/assets/announcement-default.jpg']").attr("src","/assets/announcement-default4.jpg");
|
||
$(".page-home .content-boxL2 .L22 img[src='/assets/announcement-default2.jpg']").attr("src","/assets/announcement-default5.jpg");
|
||
$(".page-home .content-boxL3 .L33 img[src='/assets/announcement-default3.jpg']").attr("src","/assets/announcement-default6.jpg");
|
||
init();
|
||
|
||
});
|
||
window.onload = function(){
|
||
var mask = document.querySelector('.mask'),
|
||
menuLi = document.querySelectorAll('#main-nav > li > ul'),i,max;
|
||
mask.classList.add('active');
|
||
setTimeout(function(){
|
||
var borderWidth = document.querySelector('.layout-content').clientWidth,
|
||
borderHeight = document.querySelector('.layout-content').clientHeight;
|
||
mask.style.cssText = 'border-left:'+ borderWidth/2 +'px solid rgba(0,0,0,.5);border-right:'+ borderWidth/2 +'px solid rgba(0,0,0,.5);border-top:'+ borderHeight/2 +'px solid rgba(0,0,0,.5);border-bottom:'+ borderHeight/2 +'px solid rgba(0,0,0,.5);';
|
||
},1000);
|
||
|
||
for(i=0,max=menuLi.length;i<max;i++){
|
||
menuLi[i].parentElement.onmouseover = function(){
|
||
mask.classList.remove('active');
|
||
}
|
||
menuLi[i].parentElement.onmouseout = function(){
|
||
mask.classList.add('active');
|
||
}
|
||
}
|
||
}
|
||
$(document).ready(function() {
|
||
var url = window.location.search;
|
||
if (url == "?editmode=on") {
|
||
$(".boxB-info1 .boxB-info2 .boxB-info3 .boxB-info4").show();
|
||
return false;
|
||
}
|
||
|
||
//$(".B_news").hide();
|
||
$(".boxB-info1").fadeIn().show();
|
||
$(".h2-title1").addClass("focusClass");
|
||
|
||
$(".h2-title1").click(function() {
|
||
$(".h2-title1").addClass("focusClass");
|
||
$(".boxB-info1").fadeIn().show();
|
||
$(".boxB-info2").fadeOut().hide();
|
||
$(".boxB-info3").fadeOut().hide();
|
||
$(".h2-title2").removeClass("focusClass");
|
||
$(".h2-title3").removeClass("focusClass");
|
||
});
|
||
|
||
$(".h2-title2").click(function() {
|
||
$(".h2-title2").addClass("focusClass");
|
||
$(".boxB-info2").fadeIn().show();
|
||
$(".boxB-info1").fadeOut().hide();
|
||
$(".boxB-info3").fadeOut().hide();
|
||
$(".h2-title1").removeClass("focusClass");
|
||
$(".h2-title3").removeClass("focusClass");
|
||
});
|
||
|
||
$(".h2-title3").click(function() {
|
||
$(".h2-title3").addClass("focusClass");
|
||
$(".boxB-info3").fadeIn().show();
|
||
$(".boxB-info2").fadeOut().hide();
|
||
$(".boxB-info1").fadeOut().hide();
|
||
$(".h2-title2").removeClass("focusClass");
|
||
$(".h2-title1").removeClass("focusClass");
|
||
});
|
||
|
||
});
|
||
|
||
|
||
|
||
|
||
// 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
|
||
// $(window).load(function() {
|
||
// if ($('.index-member-3').length && $(window).width() > 992) {
|
||
// ORBITFRONT.member.equalHeight('.i-member-item-inner');
|
||
// }
|
||
// });
|
||
|
||
}(jQuery, window));
|
||
$(document).ready(function(){
|
||
if(window.location.search.indexOf('editmode=on') == -1){
|
||
$(".nav-tabs").each(function(i,v){
|
||
$(v).nextAll("*").not("script").addClass("tab-pane fade");
|
||
$(v).nextAll("*").not("script").eq(0).addClass("active in");
|
||
var tab_content = $("<div class=\"tab-content\"></div>")
|
||
$(v).nextAll("*").not("script").appendTo(tab_content);
|
||
$(v).after(tab_content);
|
||
$(v).find("li").off('click').click(function(){
|
||
$(this).parent().nextAll(".tab-content").eq(0).find(".tab-pane").removeClass("active in");
|
||
$(this).parent().nextAll(".tab-content").eq(0).find(".tab-pane").eq($(this).index()).addClass("active in");
|
||
$(this).addClass('active');
|
||
$(this).siblings('li').removeClass('active');
|
||
})
|
||
})
|
||
}
|
||
$("[data-subpart-id]").each(function(i,el){
|
||
var h3 = $(el).find("h3");
|
||
if(h3.length != 0 && h3.text().trim() == "")
|
||
h3.css("display","none");
|
||
})
|
||
}) |