chiu
/
AsiaV2c
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
AsiaV2c/assets/javascripts/app.js

511 lines
20 KiB
JavaScript
Raw Normal View History

first commit
2021-04-19 03:12:24 +00:00
;(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裡面
}
});
},
},
// MobileMenu: function(els) {
// var $menu = $('[data-menu-level="0"]');
// $menu.find('ul[data-menu-level="1"]').parent().addClass('mobile-menu1');
// $menu.find('ul[data-menu-level="2"]').parent().addClass('mobile-menu2');
// $('.mobile-menu1').append('<span class="menu-drop"><i class="fa fa-chevron-down"></i></span>');
// $('.mobile-menu2').append('<span class="menu-drop"><i class="fa fa-chevron-down"></i></span>');
// $menu.before('<div class="menu-toggle"><div class="toggle"><span>MENU</span><i class="fa fa-bars"></i></div></div>');
// $('.menu_toggle').click(function(){
// $menu.slideToggle();
// $('.mobile-menu1 > ul').slideUp(100);
// $('.mobile-menu1 > .menu-drop').removeClass('opened');
// $('.mobile-menu2 > ul').slideUp(100);
// $('.mobile-menu2 > .menu-drop').removeClass('opened');
// })
// $('.mobile-menu1 > .menu-drop').click(function(){
// var $that = $(this);
// var opencheck1 = $that.hasClass('opened');
// if ( opencheck1 == 0 ) {
// $('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(100);
// $('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
// $('.mobile-menu2 > ul').slideUp(100);
// $('.mobile-menu2 > .menu-drop').removeClass('opened');
// $that.siblings('ul').slideDown(100);
// $that.addClass('opened');
// }else if (opencheck1 == 1) {
// $that.siblings('ul').slideUp(100);
// $('.mobile-menu2 > ul').slideUp(100);
// $('.mobile-menu2 > .menu-drop').removeClass('opened');
// $that.removeClass('opened');
// }
// })
// $('.mobile-menu2 > .menu-drop').click(function(){
// var $that = $(this);
// var opencheck2 = $that.hasClass('opened');
// if ( opencheck2 == 0 ) {
// $('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(100);
// $('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
// $that.siblings('ul').slideDown(100);
// $that.addClass('opened');
// }else if (opencheck2 == 1) {
// $that.siblings('ul').slideUp(100);
// $that.removeClass('opened');
// }
// })
// },
// 網站次選單設定，如果次選單有第三層就新增下拉選單的圖示及加上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);
}
});
}
}
};
// 把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.MobileMenu();
// testing
// 自適應網頁使用，當網頁載入時，如果視窗寬度小於768，就執行orbit.nav.setDropdown函數
if ($(window).width() < 768) {
orbit.nav.setDropdown();
//$('.box').before($('.banner'));
$('.banner').after($('.box'));
}else{
$('[data-pp="30"]').appendTo('#layout-navigation');
}
// 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
$(window).resize(function() {
if ($(window).width() < 768) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(orbit.nav.setDropdown, 500);
//$('.box').before($('.banner'));
$('.banner').after($('.box'));
} else {
resizeTimer = setTimeout(orbit.nav.removeDropdown, 500);
$('[data-pp="30"]').appendTo('#layout-navigation');
}
});
/* 幫有連結目的之所有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標籤加上title */
/* 刪除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');
};
/* 刪除banner-slide的空連結和空連結目標 */
/* 幫無標題之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');
};
/* 幫無標題之iframe加上title */
/* 刪除空的檔案室 */
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) {
e.stopPropagation();
$(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();
/* tab按鍵選到menu,會顯示下層的menu(為了符合無障礙) */
}
// 當文件物件模型(DOM)載入後，執行init函數
$(document).ready(function() {
if(location.href.search('editmode=on') != -1){
$('.background').css('z-index','unset');
} else {
$('.background').css('z-index','-1');
};
//F&Q
$('.index-faqs.index2 .index-content h4').each(function(){
$(this).click(function(){
$(this).siblings().toggle(500)
})
})
init();
Fix bug
2021-08-06 03:32:27 +00:00
if( $('div[data-pp="1000"]').length != 0 && $('div[data-pp="1000"]').html().trim() !== ''){
Add light box.
2021-06-16 08:00:40 +00:00
$('.black-screen').addClass('active');
}
$('.close-btn').click(function() {
$('.black-screen').removeClass('active');
})
first commit
2021-04-19 03:12:24 +00:00
});
// 執行 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');
})
})
};
})