;(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; var barState = window.localStorage.getItem('barState'); // 把所有的函數都包在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 = $(''); var $caret2 = $(''); 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(''); // $('.mobile-menu2').append(''); // $menu.before(''); // $('.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); } }); } }, hoverEffect:function(){ var pOption = $("#main-nav > li"), move = $('#move'); move.css('width',pOption.eq(0).outerWidth()); pOption.hover(function(){ var NOWPOS = $(this).position().left; move.css({'left':NOWPOS,'opacity':1,'width':$(this).outerWidth()}); },function(){ move.css({'opacity':0}); }); }, menuBg:function() { var menuList = document.querySelectorAll('#main-nav > li'), menuBg = document.querySelector('.menu-bg'),i,max; for(i=0,max=menuList.length;i 1){ thisHeight = this.children[1].clientHeight; menuBg.style.height = thisHeight + 'px'; } } menuList[i].onmouseout = function(){ menuBg.style.height = 0; } } }, extendBar: function() { var $bar = $('#orbit-bar'); var activeCls = 'orbit-bar--active'; var noAnimationCls = 'orbit-bar--no-animation'; var openState = 'open'; var closeState = 'close'; var $body = $(document.body); function createToggle() { var $el = $('
'); $el.on('click', function(e) { e.preventDefault(); $body.removeClass(noAnimationCls); if (!$body.hasClass(activeCls)) { $body.addClass(activeCls); // window.localStorage.setItem('barState', openState); } else { $body.removeClass(activeCls); // window.localStorage.setItem('barState', closeState); } }); $bar.prepend($el); } $body.addClass('has-orbit-bar'); $bar.find('.orbit-bar-inner').show(); createToggle(); }, fixedMenu:function() { var win = $(window),position; win.scroll(function(){ position = $(window).scrollTop(); position > $('.header').height() ? $('body').addClass('fixedMenu') : $('body').removeClass('fixedMenu'); }) } }; // 把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.hoverEffect(); orbit.menuBg(); // orbit.MobileMenu(); // testing // 自適應網頁使用,當網頁載入時,如果視窗寬度小於768,就執行orbit.nav.setDropdown函數 if ($(window).width() < 992) { orbit.nav.setDropdown(); $('aside[data-pp="13"]').insertAfter($('div[data-pp="600"]')); } // 自適應網頁使用,當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數 $(window).resize(function() { if ($(window).width() < 992) { clearTimeout(resizeTimer); resizeTimer = setTimeout(orbit.nav.setDropdown, 500); } else { resizeTimer = setTimeout(orbit.nav.removeDropdown, 500); } }); } // 當文件物件模型(DOM)載入後,執行init函數 $(document).ready(function() { init(); if( $('div[data-pp="1000"]').text() !== ''){ $('.black-screen').addClass('active'); } $('.close-btn').click(function() { $('.black-screen').removeClass('active'); }) }); // 執行 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 = $("
") $(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'); }) }) $(".content_background img").height($(".content_background img").parents(".layout-content").height()); }else{ $(".content_background").css("z-index","1000"); } }) $(window).resize(function(){ $(".content_background img").height($(".content_background img").parents(".layout-content").height()); })