Added Accordion module coffeescript, test with the module pug file

src/Components/Accordion/Accordion.coffee

@@ -0,0 +1,223 @@
+# --------------------------------------------------------------
+# 模組註冊
+# --------------------------------------------------------------
+
+ts.register class Accordion
+
+    # --------------------------------------------------------------
+    # 變數與常數設置
+    # --------------------------------------------------------------
+
+    # 模組設定。
+    settings:
+        # 是否僅允許單個手風琴只有一個分頁能被打開。
+        exclusive  : true
+        # 展開的手風琴是否可以被關閉。
+        collapsible: true
+        # 當手風琴被關閉時，是否一同閉合子手風琴。
+        closeNested: true
+        # 當手風琴正在展開時所會呼叫的函式。
+        onOpening: =>
+        # 當手風琴展開時所會呼叫的函式。
+        onOpen   : =>
+        # 當手風琴正在關閉時所會呼叫的函式。
+        onClosing: =>
+        # 當手風琴關閉時所會呼叫的函式。
+        onClose  : =>
+        # 當手風琴被切換開關時所會呼叫的函式。
+        onChange : =>
+
+    # 事件名稱。
+    events:
+        opening: 'opening'
+        open   : 'open'
+        closing: 'closing'
+        close  : 'close'
+        change : 'change'
+        click  : 'click'
+
+    # 樣式名稱。
+    classNames:
+        active: 'active'
+
+    # 選擇器名稱。
+    selectors:
+        title        : '.title'
+        content      : '.content'
+        accordion    : '.ts.accordion'
+        activeContent: '.active.content'
+        active       : '.active'
+
+    # --------------------------------------------------------------
+    # 建構子
+    # --------------------------------------------------------------
+
+    constructor: ({@settings, @$allModules, @$module, @element, @listener, @id}) ->
+
+        # --------------------------------------------------------------
+        # 區域變數
+        # --------------------------------------------------------------
+
+        @data =
+            $title  : @$module.find @selectors.title
+            $content: @$module.find @selectors.content
+
+    # --------------------------------------------------------------
+    # 公開方法
+    # --------------------------------------------------------------
+
+    # Open 能夠開啟指定的手風琴項目。
+    Open: (index) =>
+        @open index
+        return @
+
+    # Close 能夠關閉指定的手風琴項目。
+    Close: (index) =>
+        @close index
+        return @
+
+    # Toggle 能夠切換指定的手風琴項目，當項目是關閉的時候開啟，反之亦然。
+    Toggle: (index) =>
+        if @isActive index
+            @close index
+        else
+            @open index
+        return @
+
+    # CloseChildren 能夠關閉指定項目下的所有手風琴項目。
+    CloseChildren: =>
+        @$module
+            .find      @selectors.accordion
+            .accordion 'close all'
+        return @
+
+    # CloseOthers 能夠關閉指定項目以外的所有項目。
+    CloseOthers: (index) =>
+        @closeOthers index
+        return @
+
+    # CloseAll 會關閉所有項目。
+    CloseAll: =>
+        @close i for i in [0..@data.$title.length-1]
+        return @
+
+    # --------------------------------------------------------------
+    # 內部方法
+    # --------------------------------------------------------------
+
+    # open 會開啟指定的分頁籤。
+    open: (index) =>
+        @setActive   index
+        @triggerOpen index
+
+        if @settings.exclusive
+            @closeOthers index
+
+    # close 會關閉指定的分頁籤。
+    close: (index) =>
+        @setHidden    index
+        @triggerClose index
+
+    # closeOthers 會關閉指定頁籤以外的所有分頁籤。
+    closeOthers: (index) =>
+        for i in [0..@data.$title.length-1]
+            if i isnt index
+                @close i
+        return @
+
+    #
+    # Trigger
+    #
+
+    # triggerOpen 會呼叫開啟分頁籤時的回呼函式。
+    triggerOpen: (index) =>
+        $content = @$getContent index
+        @listener.trigger @events.open  , $content
+        @listener.trigger @events.change, $content
+
+    # triggerClose 會呼叫關閉分頁籤時的回呼函式。
+    triggerClose: (index) =>
+        $content = @$getContent index
+        @listener.trigger @events.close , $content
+        @listener.trigger @events.change, $content
+
+    #
+    # Is
+    #
+
+    # isActive 會回傳一個分頁籤是否為開啟的布林值。
+    isActive: (index) =>
+        @data.$title
+            .eq       index
+            .hasClass @classNames.active
+
+    #
+    # Set
+    #
+
+    # setActive 會將指定的分頁籤設置為 Active 啟用狀態。
+    setActive: (index) =>
+        @data.$title
+            .eq       index
+            .addClass @classNames.active
+        @data.$content
+            .eq       index
+            .addClass @classNames.active
+
+    # setHidden 會將指定的分頁籤設置為 Hidden 隱藏狀態。
+    setHidden: (index) =>
+        @data.$title
+            .eq          index
+            .removeClass @classNames.active
+        @data.$content
+            .eq          index
+            .removeClass @classNames.active
+
+    #
+    # $Get
+    #
+
+    # $getContent 會回傳一個 Tocas 包裹的指定分頁籤內容元素。
+    $getContent: (index) =>
+        @data.$content.eq index
+
+    #
+    # Bind
+    #
+
+    # bindEvents 會綁定元素事件。
+    bindEvents: =>
+        @listener.on @events.click, @selectors.title, @eventClick
+
+    #
+    # Event
+    #
+
+    # eventClick 會監聽手風琴標題的點擊事件，並且切換該手風琴頁籤的展示。
+    eventClick: (element) =>
+        index = @data.$title.indexOf element
+        if @isActive index
+            if @settings.collapsible
+                @close index
+        else
+            @open index
+
+    # --------------------------------------------------------------
+    # 生命週期
+    # --------------------------------------------------------------
+
+    # beforeCreate 會在模組被初始化之前呼叫。
+    beforeCreate: =>
+
+    # created 會在模組被初始化之後呼叫。
+    created: =>
+        @bindEvents()
+
+    # beforeUpdate 會在 DOM 元素有異動時被呼叫。
+    updated: =>
+
+    # beforeDestroy 會在模組被摧毀之前呼叫。
+    beforeDestroy: =>
+
+    # destroyed 會在模組被摧毀之後呼叫。
+    destroyed: =>

src/Components/Accordion/Accordion.module.html

@@ -0,0 +1,44 @@
+
+	 <html> 
+	 <head> 
+	 <title> Accordion.module </title> 
+	 <link rel="stylesheet" href="../../../dist/tocas.css">  <meta charset="utf-8"> 
+	 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+	 <style type="text/css"> 
+	.ts.panes .ts.button {
+		text-align   : left;
+		margin-bottom: 8px;
+	}
+	 </style> 
+	 </head> 
+	 <body> 
+		 <div class="ts panes"> 
+			 <div class="two block vertically scrollable padded pane"> 
+				 <div class="ts form"> 
+					 <fieldset> 
+						 <legend> Core </legend> 
+						 <a href="#Accordion" class="ts fluid button"> Accordion </a>  <a href="#Vertical+Menu" class="ts fluid button"> Vertical Menu </a>  <a href="#Segmented" class="ts fluid button"> Segmented </a>  <a href="#Field" class="ts fluid button"> Field </a> 
+					 </fieldset> 
+					 <fieldset> 
+						 <legend> Module </legend> 
+						 <script> function action0(){ts('.accordion').accordion()
+} </script>  <a href="#!" class="ts fluid button" onclick="action0"> Accordion </a>  <script> function action1(){ts('.accordion').accordion({
+    exclusive: false
+})
+} </script>  <a href="#!" class="ts fluid button" onclick="action1"> Not Exclusive </a>  <script> function action2(){ts('.accordion').accordion('open', 1)
+} </script>  <a href="#!" class="ts fluid button" onclick="action2"> Open 1 </a>  <script> function action3(){ts('.accordion').accordion('open', 2)
+} </script>  <a href="#!" class="ts fluid button" onclick="action3"> Open 2 </a>  <script> function action4(){ts('.accordion').accordion('close', 1)
+} </script>  <a href="#!" class="ts fluid button" onclick="action4"> Close 1 </a>  <script> function action5(){ts('.accordion').accordion('toggle', 1)
+} </script>  <a href="#!" class="ts fluid button" onclick="action5"> Toggle 1 </a>  <script> function action6(){ts('.accordion').accordion('close others', 1)
+} </script>  <a href="#!" class="ts fluid button" onclick="action6"> Close Others 1 </a>  <script> function action7(){ts('.accordion').accordion('close all')
+} </script>  <a href="#!" class="ts fluid button" onclick="action7"> Close All </a>  <script> function action8(){ts('.accordion').accordion('destroy')} </script>  <a href="#!" class="ts fluid button" onclick="action8"> Destroy </a> 
+					 </fieldset> 
+				 </div> 
+			 </div> 
+			 <div class="stretched vertically scrollable padded pane"> 
+				 <br>  <br>  <!-- + Accordion -->  <h1 id="Accordion"> Accordion </h1>  <div class="ts accordion">  <div class="title">  <i class="dropdown icon">  </i>  這是什麼鳥？ </div>  <div class="content">  <p> 這不是鳥，是他媽的蝴蝶。 </p>  </div>  <div class="title">  <i class="dropdown icon">  </i>  可是他為什麼看起來這麼大？ </div>  <div class="content">  <p> 那是因為它離你很近。 </p>  </div>  <div class="title">  <i class="dropdown icon">  </i>  我為什麼要相信你？ </div>  <div class="content">  <p> 因為信我者得永生。 </p>  </div>  </div>  <br>  <br>  <!-- + Vertical Menu -->  <h1 id="Vertical+Menu"> Vertical Menu </h1>  <div class="ts vertical accordion menu">  <div class="item">  <a class="header title" href="#!">  <i class="dropdown icon">  </i>  Size </a>  <div class="content">  <div class="menu">  <a class="item" href="#!"> Rails </a>  <a class="item" href="#!"> Python </a>  <a class="item" href="#!"> PHP </a>  </div>  </div>  </div>  <div class="item">  <a class="header title" href="#!">  <i class="dropdown icon">  </i>  Hosting </a>  <div class="content">  <div class="menu">  <a class="item" href="#!"> Shared </a>  <a class="item" href="#!"> Dedicated </a>  </div>  </div>  </div>  </div>  <br>  <br>  <!-- + Segmented -->  <h1 id="Segmented"> Segmented </h1>  <div class="ts segmented accordion">  <div class="title">  <i class="dropdown icon">  </i>  這是什麼鳥？ </div>  <div class="content">  <p> 這不是鳥，是他媽的蝴蝶。 </p>  </div>  <div class="title">  <i class="dropdown icon">  </i>  可是他為什麼看起來這麼大？ </div>  <div class="content">  <p> 那是因為它離你很近。 </p>  </div>  <div class="title">  <i class="dropdown icon">  </i>  我為什麼要相信你？ </div>  <div class="content">  <p> 因為信我者得永生。 </p>  </div>  </div>  <br>  <br>  <!-- + Field -->  <h1 id="Field"> Field </h1>  <div class="ts segment">  <div class="ts fluid form">  <div class="two fields">  <div class="field">  <label> 姓氏 </label>  <input placeholder="姓氏" type="text"/>  </div>  <div class="field">  <label> 名稱 </label>  <input placeholder="名稱" type="text"/>  </div>  </div>  <div class="ts accordion field">  <div class="title active">  <i class="icon dropdown">  </i>  選填資料 </div>  <div class="content field active">  <label class="transition visible"> 中間名 </label>  <input placeholder="中間名" type="text"/>  </div>  </div>  <div class="ts inverted submit button"> 註冊 </div>  </div>  </div> 
+			 </div> 
+		 </div> 
+
+	 </body> 
+	 </html> 

src/Components/Accordion/Accordion.module.pug

@@ -0,0 +1,112 @@
+// + Accordion
+.ts.accordion
+    .title
+        i.dropdown.icon
+        |  這是什麼鳥？
+    .content
+        p 這不是鳥，是他媽的蝴蝶。
+    .title
+        i.dropdown.icon
+        |  可是他為什麼看起來這麼大？
+    .content
+        p 那是因為它離你很近。
+    .title
+        i.dropdown.icon
+        |  我為什麼要相信你？
+    .content
+        p 因為信我者得永生。
+
+// + Vertical Menu
+.ts.vertical.accordion.menu
+    .item
+        a.header.title(href='#!')
+            i.dropdown.icon
+            |  Size
+        .content
+            .menu
+                a.item Rails
+                a.item Python
+                a.item PHP
+    .item
+        a.header.title(href='#!')
+            i.dropdown.icon
+            |  Hosting
+        .content
+            .menu
+                a.item Shared
+                a.item Dedicated
+
+// + Segmented
+.ts.segmented.accordion
+    .title
+        i.dropdown.icon
+        |  這是什麼鳥？
+    .content
+        p 這不是鳥，是他媽的蝴蝶。
+    .title
+        i.dropdown.icon
+        |  可是他為什麼看起來這麼大？
+    .content
+        p 那是因為它離你很近。
+    .title
+        i.dropdown.icon
+        |  我為什麼要相信你？
+    .content
+        p 因為信我者得永生。
+
+// + Field
+.ts.segment
+    .ts.fluid.form
+        .two.fields
+            .field
+                label 姓氏
+                input(placeholder='姓氏', type='text')
+            .field
+                label 名稱
+                input(placeholder='名稱', type='text')
+        .ts.accordion.field
+            .title.active
+                i.icon.dropdown
+                |  選填資料
+            .content.field.active
+                label.transition.visible 中間名
+                input(placeholder='中間名', type='text')
+        .ts.inverted.submit.button 註冊
+
+// - Accordion
+script.
+    ts('.accordion').accordion()
+
+// - Not Exclusive
+script.
+    ts('.accordion').accordion({
+        exclusive: false
+    })
+
+// - Open 1
+script.
+    ts('.accordion').accordion('open', 1)
+
+// - Open 2
+script.
+    ts('.accordion').accordion('open', 2)
+
+// - Close 1
+script.
+    ts('.accordion').accordion('close', 1)
+
+// - Toggle 1
+script.
+    ts('.accordion').accordion('toggle', 1)
+
+// - Close Others 1
+script.
+    ts('.accordion').accordion('close others', 1)
+
+// - Close All
+script.
+    ts('.accordion').accordion('close all')
+
+// - Destroy
+script.
+    ts('.accordion').accordion('destroy')