css操作を減らす

[S--Minecraft]

.hide() .show()をtoggleClass("hidden")などで置き換える

• [x] .hide() / .show()
• [x] .fadeIn() / .fadeOut()
• [x] .slideUp() / .slideDown()

[S--Minecraft]

  .slide {
    &.slideDown {
      max-height: 500px;
    }
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease-in-out;
  }

.slideDown()の処理がcss3では再現できない max-height分動いてしまうのでheightを取得して使用する必要性

[S--Minecraft]

Accordion.ts

///<reference path="../../typings/globals/jquery/index.d.ts" />

namespace UI {
  "use strict";

  export class Accordion {
    element: HTMLElement;
    $element: JQuery;

    constructor (element: HTMLElement) {
      var accordion: Accordion;

      this.element = element;
      this.$element = $(element);

      accordion = this;

      this.$element.addClass("accordion");

      this.$element.find(".accordion_open").removeClass(".accordion_open");

      this.$element.on("click", "> :header", function () {
        if (this.classList.contains("accordion_open")) {
          accordion.close(this);
        }
        else {
          accordion.open(this);
        }
      });
    }

    update (): void {
      this.$element
        .find(".accordion_open + *")
          .addClass("slideDown")
        .end()
        .find(":header:not(.accordion_open) + *")
          .removeClass("slideDown");
    }

    open (header: HTMLElement): void {
      var accordion: Accordion;

      accordion = this;

      $(header)
        .addClass("accordion_open")
        .next()
          .addClass("slideDown")
        .end()
        .siblings(".accordion_open")
          .each(function () {
            accordion.close(this);
          });
    }

    close (header: HTMLElement): void {
      $(header)
        .removeClass("accordion_open")
        .next()
          .finish()
          .removeClass("slideDown")
    }
  }
}

sidemenu.coffee

app.boot "/view/sidemenu.html", ["bbsmenu"], (BBSMenu) ->
  new app.view.PaneContentView(document.documentElement)

  $view = $(document.documentElement)
  accordion = new UI.SelectableAccordion(document.body)
  $view.data("accordion", accordion)
  $view.data("selectableItemList", accordion)

  board_to_li = (board) ->
    li = document.createElement("li")
    a = document.createElement("a")
    a.className = "open_in_rcrx"
    a.title = board.title
    a.textContent = board.title
    a.href = app.safe_href(board.url)
    li.appendChild(a)
    li

  entry_to_li = (entry) ->
    li = board_to_li(entry)
    li.classList.add("bookmark")
    li

  #スレタイ検索ボックス
  $view
    .find(".search")
      .on "keydown", (e) ->
        if e.which is 27 #Esc
          @q.value = ""
        return

      .on "submit", (e) ->
        e.preventDefault()
        app.message.send("open", {url: "search:#{@q.value}", new_tab: true})
        @q.value = ""
        return

  #ブックマーク関連
  do ->
    #初回ブックマーク表示構築
    app.bookmarkEntryList.ready.add ->
      frag = document.createDocumentFragment()

      for entry in app.bookmarkEntryList.getAllBoards()
        frag.appendChild(entry_to_li(entry))

      $view.find("ul:first-of-type").append(frag)
      accordion.update()
      accordion.open($view[0].querySelector("h3"), 0)
      return

    #ブックマーク更新時処理
    app.message.add_listener "bookmark_updated", (message) ->
      return if message.entry.type isnt "board"

      switch message.type
        when "added"
          if $view.find("li.bookmark > a[href=\"#{message.entry.url}\"]").length is 0
            $view
              .find("ul:first-of-type")
                .append(entry_to_li(message.entry))
        when "removed"
          $view
            .find("li.bookmark > a[href=\"#{message.entry.url}\"]")
              .parent()
                .remove()
        when "title"
          $view
            .find("li.bookmark > a[href=\"#{message.entry.url}\"]")
              .text(message.entry.title)

  #板覧関連
  do ->
    load = ->
      $view.addClass("loading")
      BBSMenu.get (res) ->
        $view.find("h3:not(:first-of-type), ul:not(:first-of-type)").remove()

        if res.message?
          app.message.send("notify", {
            message: res.message
            background_color: "red"
          })

        if res.data?
          frag = document.createDocumentFragment()
          for category in res.data
            h3 = document.createElement("h3")
            h3.textContent = category.title
            frag.appendChild(h3)

            ul = document.createElement("ul")
            ul.classList.add("slide")
            for board in category.board
              ul.appendChild(board_to_li(board))
            frag.appendChild(ul)

        $view.find("body").append(frag)
        accordion.update()
        accordion.open($view[0].querySelector("h3"), 0)
        $view.removeClass("loading")
        return
      return

    $view.on "request_reload", ->
      load()
      return

    load()
    return
  return

sidemenu.haml

!!! 5
%html.view.view_sidemenu(data-app-version="#{MANIFEST["version"]}")
  %head
    %meta(charset="utf-8")
    %meta(name="referrer" content="never")
    %title sidemenu
    %link(rel="stylesheet" href="/ui.css?v=#{MANIFEST["version"]}")
    %link(rel="stylesheet" href="sidemenu.css?v=#{MANIFEST["version"]}")
    %script(src="/lib/jquery/jquery.min.js?v=#{MANIFEST["version"]}")
    %script(src="/ui.js?v=#{MANIFEST["version"]}")
    %script(src="/app.js?v=#{MANIFEST["version"]}")
    %script(src="module.js?v=#{MANIFEST["version"]}")
    %script(src="sidemenu.js?v=#{MANIFEST["version"]}")
  %body.content(tabindex="0")
    %form.search
      %input(type="text" name="q" placeholder="スレッド検索")
      %input(type="submit" value="")
    %h3 read.crx
    %ul.slide
      %li
        %a(class="open_in_rcrx" data-href="bookmark" title="ブックマーク") ブックマーク
      %li
        %a(class="open_in_rcrx" data-href="history" title="閲覧履歴") 閲覧履歴
      %li
        %a(class="open_in_rcrx" data-href="writehistory" title="書込履歴") 書込履歴
      %li
        %a(class="open_in_rcrx" data-href="inputurl" title="URL指定で開く") URL指定で開く
      %li
        %a(class="open_in_rcrx" data-href="config" title="設定") 設定
    .loading_message Loading

[S--Minecraft]

9c294f8 7c6d325 で.hide() .show() .fadeIn() .fadeOut()については実装

[S--Minecraft]

dcf9189 で.slideUp() .slideDown()も実装