Merge pull request #1052 from dddjava/codex/package-glossary-link

パッケージ概要から用語集にリンクで飛べるようにする

Author: irof

jig-core/src/main/resources/templates/assets/package.js

@@ -450,6 +450,19 @@ function buildPackageTableRowElement(spec, applyFilter, applyRelatedFilterForRow
     nameTd.textContent = spec.name;
     tr.appendChild(nameTd);
 
+    const glossaryTd = document.createElement('td');
+    glossaryTd.className = 'glossary-cell';
+    const glossaryLink = document.createElement('a');
+    glossaryLink.className = 'glossary-link-icon';
+    glossaryLink.href = `glossary.html#${encodeURIComponent(spec.fqn)}`;
+    glossaryLink.setAttribute('aria-label', '用語集');
+    const glossaryText = document.createElement('span');
+    glossaryText.className = 'screen-reader-only';
+    glossaryText.textContent = '用語集';
+    glossaryLink.appendChild(glossaryText);
+    glossaryTd.appendChild(glossaryLink);
+    tr.appendChild(glossaryTd);
+
     const classCountTd = document.createElement('td');
     classCountTd.textContent = String(spec.classCount);
     classCountTd.className = 'number';

jig-core/src/main/resources/templates/assets/style.css

@@ -351,6 +351,21 @@ label {
 .package-list button.related-icon:hover {
     background-color: #f5f5f5;
 }
+.package-list a.glossary-link-icon {
+    display: inline-block;
+    width: 1.8em;
+    height: 1.8em;
+    box-sizing: border-box;
+    border-radius: 999px;
+    border: 1px solid #999;
+    background: #fff no-repeat center;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M4 4v15.5A2.5 2.5 0 0 0 6.5 22H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5V4A2.5 2.5 0 0 1 6.5 2z'/></svg>");
+    text-decoration: none;
+    vertical-align: middle;
+}
+.package-list a.glossary-link-icon:hover {
+    background-color: #f5f5f5;
+}
 .package-list .mutual-dependencies {
     margin: 12px 0 16px 0;
     padding: 8px 12px;
@@ -378,6 +393,12 @@ label {
 .package-list table .col-action {
     width: 2.5em;
 }
+.package-list table .col-glossary {
+    width: 2.5em;
+}
+.package-list td.glossary-cell {
+    text-align: center;
+}
 .package-list table th.no-sort {
     cursor: default;
 }

jig-core/src/main/resources/templates/package.html

@@ -82,6 +82,7 @@ <h1>パッケージ概要</h1>
             <col class="col-action">
             <col class="col-fqn">
             <col class="col-name">
+            <col class="col-glossary">
             <col class="col-number">
             <col class="col-number">
             <col class="col-number">
@@ -92,6 +93,7 @@ <h1>パッケージ概要</h1>
             <th class="no-sort"><span class="screen-reader-only">関連のみ表示</span></th>
             <th>完全修飾名</th>
             <th>名称</th>
+            <th class="no-sort"><span class="screen-reader-only">用語集</span></th>
             <th>クラス数</th>
             <th>関連数（依存元）</th>
             <th>関連数（依存先）</th>

jig-core/src/test/js/package.test.js

@@ -234,6 +234,10 @@ function setupDiagramEnvironment(doc, context) {
     const mutual = doc.createElement('div');
     mutual.id = 'mutual-dependency-list';
     doc.elementsById.set('mutual-dependency-list', mutual);
+    const transitiveReductionToggle = doc.createElement('input');
+    transitiveReductionToggle.id = 'transitive-reduction-toggle';
+    transitiveReductionToggle.type = 'checkbox';
+    doc.elementsById.set('transitive-reduction-toggle', transitiveReductionToggle);
     global.window = {
         mermaid: {
             initialize() {
@@ -652,9 +656,9 @@ test.describe('package.js', () => {
 
                 assert.equal(tbody.children.length, 2);
                 assert.equal(tbody.children[0].children[3].textContent, 'A');
-                assert.equal(tbody.children[0].children[4].textContent, '2');
-                assert.equal(tbody.children[0].children[5].textContent, '0');
-                assert.equal(tbody.children[0].children[6].textContent, '2');
+                assert.equal(tbody.children[0].children[5].textContent, '2');
+                assert.equal(tbody.children[0].children[6].textContent, '0');
+                assert.equal(tbody.children[0].children[7].textContent, '2');
             });
         });
     });