AsiaV5/assets/javascripts/app.js

;(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();
    }

    // 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫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() {
    init();
    if( $('div[data-pp="1000"]').length != 0 && $('div[data-pp="1000"]').html().trim() !== ''){
      $('.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 = $("<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');
            })
        })
    }
  })