init

AonaSuzutsuki · Aug 19, 2020 · 18fdb5d · 18fdb5d
commit 18fdb5d
Show file tree

Hide file tree

Showing 7 changed files with 351 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 AonaSuzutsuki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LICENSE.jquery.txt b/LICENSE.jquery.txt
@@ -0,0 +1,20 @@
+Copyright OpenJS Foundation and other contributors, https://openjsf.org/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# AutoContentsMenuJS
+
+
+# Dependency library
+jQuery.js: Copyright JS Foundation and other contributors, https://js.foundation/
diff --git a/sample/AutoMenu.css b/sample/AutoMenu.css
@@ -0,0 +1,4 @@
+
+ol > li {
+    list-style-type: none;
+}
diff --git a/sample/AutoMenu.html b/sample/AutoMenu.html
@@ -0,0 +1,81 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>AutoMenu Sample</title>
+    <link rel="stylesheet" type="text/css" href="AutoMenu.css" />
+</head>
+
+<body>
+
+    <div id="menu-container"></div>
+
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+
+    <span class="title title-container">グループ1</span>
+    <h1>見出し</h1>
+    <h2 id="サブ">サブ</h2>
+    <h2>サブ</h2>
+    <h3>サブサブ</h3>
+    <h4>サブサブ</h4>
+    <h4>サブサブ</h4>
+    <h5>サブサブ</h5>
+    <h6>サブサブ</h6>
+    <h6>サブサブ</h6>
+    <h5>サブサブ</h5>
+    <h3>サブサブ</h3>
+    <h2>サブ</h2>
+    <h2>サブ</h2>
+    <h3>サブサブ</h3>
+    <h3>サブサブ</h3>
+    <h3>サブサブ</h3>
+    <h1>見出し</h1>
+    <h2>サブ</h2>
+
+
+    <span class="title">グループ2</span>
+    <h1>見出し</h1>
+    <p>
+        テスト
+    </p>
+
+    <h1>見出し</h1>
+    <div>
+        <h2>サブ</h2>
+        <p>
+            テスト
+        </p>
+
+        <div>
+            <h3>サブサブ</h3>
+            <p>
+                テスト
+            </p>
+        </div>
+
+        <h2>サブ</h2>
+        <p>
+            テスト
+        </p>
+    </div>
+    <h1>見出し</h1>
+
+    <script type="text/javascript" src="scripts/jquery.js"></script>
+    <script type="text/javascript" src="../src/AutoMenu.js"></script>
+    <script type="text/javascript">
+        $(function () {
+            let menu = new AutoMenu();
+            menu.registerGroup("span.title");
+            menu.registerGroupClass("arrow box_arrow");
+            menu.registerContainerClass("h2_body");
+            menu.drawContentsMenu("#menu-container", true);
+        });
+    </script>
+</body>
+
+</html>
diff --git a/sample/scripts/jquery.js b/sample/scripts/jquery.js
diff --git a/src/AutoMenu.js b/src/AutoMenu.js
@@ -0,0 +1,218 @@
+/*! 
+    AutoMenu    Copyright (C) AonaSuzutsuki 2020.
+    MIT License
+
+    Includes jQuery.js
+    Copyright JS Foundation and other contributors, https://js.foundation/
+*/
+
+function Stack() {
+    const array = [];
+
+    const push = (item) => array.push(item);
+
+    this.push = (item) => push(item);
+
+    this.pop = () => array.length <= 0 ? null : array.pop();
+
+    this.each = (func) => array.forEach((value, index) => func(value));
+}
+
+function Queue() {
+    const array = [];
+
+    const enqueue = (item) => array.push(item);
+
+    this.enqueueRange = (items) => {
+        for (let [_key, value] of Object.entries(items)) {
+            enqueue(value);
+        }
+    }
+
+    this.enqueue = (item) => enqueue(item);
+
+    this.dequeue = () => array.length <= 0 ? null : array.shift();
+
+    this.get = () => item = array.length < 0 ? null : array[0];
+}
+
+function AutoMenu() {
+    const _hierarchyMap = { "H1": 0, "H2": 1, "H3": 2, "H4": 3, "H5": 4, "H6": 5 };
+    let _className = null;
+    let _ignoreClassNmae = null;
+    let _addedClassName = "";
+    let _containerClassName = "";
+
+    const createContentName = () => $(`<h3 class="${_addedClassName}">`).text("目次");
+
+    const createLink = (href, text) => {
+        const link = $("<a>");
+        link.attr("href", href);
+        link.text(text);
+        return link;
+    }
+
+    const createParentString = (parentStringStack) => {
+        let parentString = "";
+        parentStringStack.each((item) => {
+            parentString += item;
+        });
+        return parentString;
+    }
+
+    //
+    // 見出し要素配列から自動メニュー生成
+    //
+    const appendMenuElements = (elements, containerStack, parentStringStack, isShowNumber) => {
+        const item = containerStack.pop();
+        const container = item[0];
+        let number = item[1];
+        const element = elements.dequeue();
+
+        const parentString = createParentString(parentStringStack);
+
+        const list = $("<li>");
+        const id = $(element).attr("id");
+        const text = isShowNumber ? `${parentString}${number} ${$(element).text()}` : $(element).text();
+        list.append(createLink(`#${id}`, text));
+        container.append(list);
+        containerStack.push([container, number + 1]);
+
+        const next = elements.get();
+        if (next != null) {
+            const nextHierarchy = _hierarchyMap[next.tagName];
+            const currentHierarchy = _hierarchyMap[element.tagName];
+            if (nextHierarchy > currentHierarchy) {
+                const _container = $("<ol>");
+                containerStack.push([_container, 1]);
+                container.append(_container);
+                parentStringStack.push(`${number}.`);
+                appendMenuElements(elements, containerStack, parentStringStack, isShowNumber);
+            }
+            else if (nextHierarchy === currentHierarchy) {
+                appendMenuElements(elements, containerStack, parentStringStack, isShowNumber);
+            }
+            else {
+                const loop = currentHierarchy - nextHierarchy;
+                for (let i = 0; i < loop; i++) {
+                    containerStack.pop();
+                    parentStringStack.pop();
+                }
+                appendMenuElements(elements, containerStack, parentStringStack, isShowNumber);
+            }
+        }
+    }
+
+    //
+    // idが振られていないものを自動で降る
+    //
+    const allocHeadId = (headers) => {
+        const map = {};
+
+        $("*").each((index, value) => {
+            const id = $(value).attr("id");
+            if (id !== void 0)
+                map[id] = id in map ? map[id] + 1 : 0;
+        });
+
+        headers.each((index, elem) => {
+            if (elem.tagName in _hierarchyMap) {
+                const element = $(elem);
+                const id = element.attr("id");
+                if (id === void 0) {
+                    const text = element.text();
+                    if (text in map) {
+                        let index = map[text];
+                        element.attr("id", `${text}_${++index}`);
+                        map[text] = index;
+                    }
+                    else {
+                        element.attr("id", text);
+                        map[text] = 0;
+                    }
+                }
+                else {
+                    map[id] = id in map ? map[id] + 1 : 0;
+                }
+            }
+        });
+    }
+
+    //
+    // span.titleに応じてグループ分け
+    //
+    const separateGroup = (headers) => {
+        const containerArray = [];
+        let array = [];
+
+        headers.each((index, header) => {
+            if (header.tagName in _hierarchyMap) {
+                array.push(header);
+            }
+            else {
+                array = [];
+                containerArray[containerArray.length] = [header, array];
+            }
+        });
+
+        if (containerArray.length == 0)
+            containerArray[0] = [null, array];
+
+        return containerArray;
+    }
+
+    //
+    // 見出しのメニューを自動生成
+    //
+    const createContentsMenu = (isShowNumber) => {
+        let headers = $(`${_className}, h1, h2, h3, h4, h5, h6`);
+        if (_ignoreClassNmae)
+            headers = headers.not(_ignoreClassNmae);
+
+        allocHeadId(headers);
+        const groups = separateGroup(headers);
+
+        const container = $(`<div class="${_containerClassName}">`);
+        let titleNumber = 1;
+        for (let [_key, value] of Object.entries(groups)) {
+            const key = value[0];
+            if (key != null) {
+                let title = $("<div>").text($(key).text());
+                title.addClass("content-title");
+                title.addClass("title-" + String(titleNumber++));
+                container.append(title);
+            }
+
+            const ol = $("<ol>");
+            const containers = new Stack();
+            containers.push([ol, 1]);
+
+            const elements = new Queue();
+            elements.enqueueRange(value[1]);
+
+            const numberStack = new Stack();
+            numberStack.push("");
+
+            appendMenuElements(elements, containers, numberStack, isShowNumber);
+            container.append(ol);
+        }
+
+
+        return container;
+    };
+
+    this.drawContentsMenu = (exportId, isShowNumber = false) => {
+        const container = createContentsMenu(isShowNumber);
+
+        $(exportId).append(createContentName());
+        $(exportId).append(container);
+    };
+
+    this.registerGroup = (name) => _className = name;
+
+    this.ignoreGroupClass = (name) => _ignoreClassNmae = name;
+
+    this.registerGroupClass = (className) => _addedClassName = className;
+
+    this.registerContainerClass = (className) => _containerClassName = className;
+}