refactor

Author: geckotang

example/cg.md

@@ -134,7 +134,7 @@ Grid Layout Moduleの理解を深めるには、そこに登場する用語を
     - reset.css
     - space.css
     - ...
-  - components/
+  - **components/**
     - layout/
       - PageLayout.Astro
       - ...
@@ -154,7 +154,7 @@ Grid Layout Moduleの理解を深めるには、そこに登場する用語を
     - **reset.css**
     - space.css
     - ...
-  - **components/**
+  - ~~components/~~
     - layout/
       - PageLayout.Astro
       - ...

example/rendered.html

@@ -103,7 +103,7 @@ <h1>コラム</h1>
 <p>タイトルのないデモ</p>
 <section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label"></div><div class="CG2-livecode__nav"><ul><li><a href="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html" data-deferred></iframe></div></section>
 <p>見出しのないファイルツリー</p>
-<div class="FileTree">
+<div class="Tree">
 <ul>
 <li class="directory"><details open="true"><summary>src/
 </summary><ul>
@@ -116,7 +116,7 @@ <h1>コラム</h1>
 <li data-file-type="css" class="file">space.css</li>
 <li data-file-type class="file">...</li>
 </ul></details></li>
-<li class="directory"><details open="true"><summary>components/
+<li class="directory"><details open="true"><summary><strong>components/</strong>
 </summary><ul>
 <li class="directory"><details open="true"><summary>layout/
 </summary><ul>
@@ -131,7 +131,7 @@ <h1>コラム</h1>
 
 </div>
 <p>見出しのあるファイルツリー</p>
-<div class="FileTree">
+<div class="Tree">
 <h3>CSSとテンプレートの構成</h3>
 <ul>
 <li class="directory"><details open="true"><summary>src/
@@ -145,7 +145,7 @@ <h3>CSSとテンプレートの構成</h3>
 <li data-file-type="css" class="file">space.css</li>
 <li data-file-type class="file">...</li>
 </ul></details></li>
-<li class="directory"><details open="true"><summary><strong>components/</strong>
+<li class="directory"><details open="true"><summary><del>components/</del>
 </summary><ul>
 <li class="directory"><details open="true"><summary>layout/
 </summary><ul>

lib/renderer/cgmd/tree.js

@@ -1,7 +1,7 @@
 "use strict";
 var util = require("util");
 
-var template = "" + '<div class="FileTree">\n' + "%s\n" + "</div>\n";
+var template = "" + '<div class="Tree">\n' + "%s\n" + "</div>\n";
 
 /**
  * cg:tree をレンダリングする

lib/transformer/tree.js

@@ -1,58 +1,60 @@
 "use strict";
 
 /**
- * div.FileTreeを整形する
+ * div.Treeを整形する
  *
  * @param {HTMLDocument} $
  *   cheerio
  */
 module.exports = function ($) {
-  $(".FileTree").each(function () {
+  $(".Tree").each(function () {
     var $tree = $(this);
     $tree.find("li").each(function (idx, el) {
       var $li = $(el);
       var $ul = $li.find("> ul");
-      var $liTextNode = $li.contents().filter(function () {
-        return this.nodeType === 3 || $(this).is("strong");
-      });
-      var liText = $li.text().trim();
+      var $label = $li.contents().not("ul");
+      var labelText = $label.text().trim();
 
       // ディレクトリを示す場合は末尾に/がある
-      var isDirectory = /\/\s*$/.test(liText);
+      var isDirectory = labelText.endsWith("/");
+      var hasChildren = $ul.length > 0;
 
-      if ($ul.length > 0) {
+      // 中身のあるディレクトリの場合は、details/summaryを使う
+      // - details要素でulを囲む
+      // - summary要素には、li内のul以外の要素をラベルとして入れる
+      if (isDirectory && hasChildren) {
         var $details = $("<details>");
         var $summary = $("<summary>");
 
-        // - details要素でulを囲む
-        // - summaryにli直下の、テキストまたはstrongで囲まれたテキストを入れる
         $details.append($ul);
         $details.attr("open", "true");
         $details.prepend($summary);
-        $summary.append($liTextNode);
+        $summary.append($label);
 
         $li.prepend($details);
         $li.addClass("directory");
-      } else {
-        if (isDirectory) {
-          // ディレクトリを示すが、中身がない場合は、ファイルが大量にあることを
-          // 省略していることを意味するため、中身は ... とする
-          var $details = $("<details>");
-          var $summary = $("<summary>");
-          var $emptyContent = $('<ul><li class="file">...</li></ul>');
-          $details.append($emptyContent);
-          $details.prepend($summary);
-          $summary.append($liTextNode);
-
-          $li.prepend($details);
-          $li.addClass("directory");
-        } else {
-          // ファイルを示す場合は、拡張子をdata属性に持たせ、CSS側で利用する
-          var fileExtension = liText.split(".").pop();
-          $li.attr("data-file-type", fileExtension);
-          $li.addClass("file");
-        }
+        return;
       }
+
+      // ディレクトリを示すが、中身がない場合は、ファイルが大量にあることを
+      // 省略していることを意味するため、中身は ... とする
+      if (isDirectory && !hasChildren) {
+        var $details = $("<details>");
+        var $summary = $("<summary>");
+        var $emptyContent = $('<ul><li class="file">...</li></ul>');
+        $details.append($emptyContent);
+        $details.prepend($summary);
+        $summary.append($label);
+
+        $li.prepend($details);
+        $li.addClass("directory");
+        return;
+      }
+
+      // ファイルを示す場合は、拡張子をdata属性に持たせ、CSS側で利用する
+      var fileExtension = labelText.split(".").pop();
+      $li.attr("data-file-type", fileExtension);
+      $li.addClass("file");
     });
   });
 };

test/cgmd/renderer/cgmd/tree.js

@@ -8,7 +8,7 @@ describe("CodeGridMarkdown - Renderer - cgmd", function () {
   describe("#tree", function () {
     it("レンダリングできること", function () {
       var res = renderTree("foo", renderer);
-      var expect = '<div class="FileTree">\n<p>foo</p>\n\n</div>\n';
+      var expect = '<div class="Tree">\n<p>foo</p>\n\n</div>\n';
       assert.equal(res, expect);
     });
   });

test/cgmd/transformer/tree.js

@@ -0,0 +1,25 @@
+"use strict";
+var assert = require("power-assert");
+var Transformer = require("../../../lib/transformer");
+
+describe("CodeGridMarkdown - Transformer - Tree", function () {
+  describe("#tree", function () {
+    it("レンダリングされること: 中身のあるディレクトリ", function () {
+      var res = Transformer.transform(
+        '<div class="Tree"><h3>見出し</h3><ul><li>directory/<ul><li>file1.ext</li></ul></li><li>file2.ext</li></ul></div>'
+      );
+      var expect =
+        '<div class="Tree"><h3>見出し</h3><ul><li class="directory"><details open="true"><summary>directory/</summary><ul><li data-file-type="ext" class="file">file1.ext</li></ul></details></li><li data-file-type="ext" class="file">file2.ext</li></ul></div>';
+      assert.equal(res, expect);
+    });
+
+    it("レンダリングされること: 中身のないディレクトリ", function () {
+      var res = Transformer.transform(
+        '<div class="Tree"><h3>見出し</h3><ul><li>directory/<ul><li>file1.ext</li></ul></li><li>file2.ext</li><li>a-lot-of-files/</li></ul></div>'
+      );
+      var expect =
+        '<div class="Tree"><h3>見出し</h3><ul><li class="directory"><details open="true"><summary>directory/</summary><ul><li data-file-type="ext" class="file">file1.ext</li></ul></details></li><li data-file-type="ext" class="file">file2.ext</li><li class="directory"><details><summary>a-lot-of-files/</summary><ul><li class="file">...</li></ul></details></li></ul></div^';
+      assert.equal(res, expect);
+    });
+  });
+});