arozos/web/NotepadA/utils/tocasdoc/dist/accordion.js

// Generated by CoffeeScript 2.3.1
(function() {
  // --------------------------------------------------------------
  // 模組註冊
  // --------------------------------------------------------------
  var Accordion;

  ts.register(Accordion = (function() {
    class Accordion {
      // --------------------------------------------------------------
      // 建構子
      // --------------------------------------------------------------
      constructor({
          settings,
          $allModules,
          $module,
          element: element1,
          listener,
          id
        }) {
        // --------------------------------------------------------------
        // 公開方法
        // --------------------------------------------------------------

        // Open 能夠開啟指定的手風琴項目。
        this.Open = this.Open.bind(this);
        // Close 能夠關閉指定的手風琴項目。
        this.Close = this.Close.bind(this);
        // Toggle 能夠切換指定的手風琴項目，當項目是關閉的時候開啟，反之亦然。
        this.Toggle = this.Toggle.bind(this);
        // CloseChildren 能夠關閉指定項目下的所有手風琴項目。
        this.CloseChildren = this.CloseChildren.bind(this);
        // CloseOthers 能夠關閉指定項目以外的所有項目。
        this.CloseOthers = this.CloseOthers.bind(this);
        // CloseAll 會關閉所有項目。
        this.CloseAll = this.CloseAll.bind(this);
        // --------------------------------------------------------------
        // 內部方法
        // --------------------------------------------------------------

        // open 會開啟指定的分頁籤。
        this.open = this.open.bind(this);
        // close 會關閉指定的分頁籤。
        this.close = this.close.bind(this);
        // closeOthers 會關閉指定頁籤以外的所有分頁籤。
        this.closeOthers = this.closeOthers.bind(this);
        
        // Trigger

        // triggerOpen 會呼叫開啟分頁籤時的回呼函式。
        this.triggerOpen = this.triggerOpen.bind(this);
        // triggerClose 會呼叫關閉分頁籤時的回呼函式。
        this.triggerClose = this.triggerClose.bind(this);
        
        // Is

        // isActive 會回傳一個分頁籤是否為開啟的布林值。
        this.isActive = this.isActive.bind(this);
        
        // Set

        // setActive 會將指定的分頁籤設置為 Active 啟用狀態。
        this.setActive = this.setActive.bind(this);
        // setHidden 會將指定的分頁籤設置為 Hidden 隱藏狀態。
        this.setHidden = this.setHidden.bind(this);
        
        // $Get

        // $getContent 會回傳一個 Tocas 包裹的指定分頁籤內容元素。
        this.$getContent = this.$getContent.bind(this);
        
        // Bind

        // bindEvents 會綁定元素事件。
        this.bindEvents = this.bindEvents.bind(this);
        
        // Event

        // eventClick 會監聽手風琴標題的點擊事件，並且切換該手風琴頁籤的展示。
        this.eventClick = this.eventClick.bind(this);
        // --------------------------------------------------------------
        // 生命週期
        // --------------------------------------------------------------

        // beforeCreate 會在模組被初始化之前呼叫。
        this.beforeCreate = this.beforeCreate.bind(this);
        // created 會在模組被初始化之後呼叫。
        this.created = this.created.bind(this);
        // beforeUpdate 會在 DOM 元素有異動時被呼叫。
        this.updated = this.updated.bind(this);
        // beforeDestroy 會在模組被摧毀之前呼叫。
        this.beforeDestroy = this.beforeDestroy.bind(this);
        // destroyed 會在模組被摧毀之後呼叫。
        this.destroyed = this.destroyed.bind(this);
        this.settings = settings;
        this.$allModules = $allModules;
        this.$module = $module;
        this.element = element1;
        this.listener = listener;
        this.id = id;
        // --------------------------------------------------------------
        // 區域變數
        // --------------------------------------------------------------
        this.data = {
          $title: this.$module.find(this.selectors.title),
          $content: this.$module.find(this.selectors.content)
        };
      }

      Open(index) {
        this.open(index);
        return this;
      }

      Close(index) {
        this.close(index);
        return this;
      }

      Toggle(index) {
        if (this.isActive(index)) {
          this.close(index);
        } else {
          this.open(index);
        }
        return this;
      }

      CloseChildren() {
        this.$module.find(this.selectors.accordion).accordion('close all');
        return this;
      }

      CloseOthers(index) {
        this.closeOthers(index);
        return this;
      }

      CloseAll() {
        var i, j, ref;
        for (i = j = 0, ref = this.data.$title.length - 1; (0 <= ref ? j <= ref : j >= ref); i = 0 <= ref ? ++j : --j) {
          this.close(i);
        }
        return this;
      }

      open(index) {
        this.setActive(index);
        this.triggerOpen(index);
        if (this.settings.exclusive) {
          return this.closeOthers(index);
        }
      }

      close(index) {
        this.setHidden(index);
        return this.triggerClose(index);
      }

      closeOthers(index) {
        var i, j, ref;
        for (i = j = 0, ref = this.data.$title.length - 1; (0 <= ref ? j <= ref : j >= ref); i = 0 <= ref ? ++j : --j) {
          if (i !== index) {
            this.close(i);
          }
        }
        return this;
      }

      triggerOpen(index) {
        var $content;
        $content = this.$getContent(index);
        this.listener.trigger(this.events.open, $content);
        return this.listener.trigger(this.events.change, $content);
      }

      triggerClose(index) {
        var $content;
        $content = this.$getContent(index);
        this.listener.trigger(this.events.close, $content);
        return this.listener.trigger(this.events.change, $content);
      }

      isActive(index) {
        return this.data.$title.eq(index).hasClass(this.classNames.active);
      }

      setActive(index) {
        this.data.$title.eq(index).addClass(this.classNames.active);
        return this.data.$content.eq(index).addClass(this.classNames.active);
      }

      setHidden(index) {
        this.data.$title.eq(index).removeClass(this.classNames.active);
        return this.data.$content.eq(index).removeClass(this.classNames.active);
      }

      $getContent(index) {
        return this.data.$content.eq(index);
      }

      bindEvents() {
        return this.listener.on(this.events.click, this.selectors.title, this.eventClick);
      }

      eventClick(element) {
        var index;
        index = this.data.$title.indexOf(element);
        if (this.isActive(index)) {
          if (this.settings.collapsible) {
            return this.close(index);
          }
        } else {
          return this.open(index);
        }
      }

      beforeCreate() {}

      created() {
        return this.bindEvents();
      }

      updated() {}

      beforeDestroy() {}

      destroyed() {}

    };

    // --------------------------------------------------------------
    // 變數與常數設置
    // --------------------------------------------------------------

    // 模組設定。
    Accordion.prototype.settings = {
      // 是否僅允許單個手風琴只有一個分頁能被打開。
      exclusive: true,
      // 展開的手風琴是否可以被關閉。
      collapsible: true,
      // 當手風琴被關閉時，是否一同閉合子手風琴。
      closeNested: true,
      // 當手風琴正在展開時所會呼叫的函式。
      onOpening: () => {},
      // 當手風琴展開時所會呼叫的函式。
      onOpen: () => {},
      // 當手風琴正在關閉時所會呼叫的函式。
      onClosing: () => {},
      // 當手風琴關閉時所會呼叫的函式。
      onClose: () => {},
      // 當手風琴被切換開關時所會呼叫的函式。
      onChange: () => {}
    };

    // 事件名稱。
    Accordion.prototype.events = {
      opening: 'opening',
      open: 'open',
      closing: 'closing',
      close: 'close',
      change: 'change',
      click: 'click'
    };

    // 樣式名稱。
    Accordion.prototype.classNames = {
      active: 'active'
    };

    // 選擇器名稱。
    Accordion.prototype.selectors = {
      title: '.title',
      content: '.content',
      accordion: '.ts.accordion',
      activeContent: '.active.content',
      active: '.active'
    };

    return Accordion;

  }).call(this));

}).call(this);