Merge pull request #2524 from openNAMU/dev

접기 펼치기 수정

route/tool/func_render_namumark.py

@@ -1418,7 +1418,7 @@ class class_do_render_namumark:
                         # include link func
                         include_link = ''
                         if include_set_data == 'use':
-                            include_link = '<div><a href="/w/' + url_pas(include_name) + '">(' + include_name_org + ')</a></div>'
+                            include_link = '<a href="/w/' + url_pas(include_name) + '">(' + include_name_org + ')</a><br>'
 
                         include_data = ''
                         if self.parent:
@@ -1431,16 +1431,11 @@ class class_do_render_namumark:
 
                             include_data = include_data_tmp[0] + '<script>window.addEventListener("DOMContentLoaded", function() {' + include_data_tmp[1] + '});</script>'
 
-                        include_sub_name = self.doc_set['doc_include'] + 'opennamu_include_' + str(include_num)
-                        data_name = self.get_tool_data_storage('' + \
-                            include_link + \
-                            '<div id="' + include_sub_name + '"></div>' + \
-                        '', include_data, match_org)
+                        data_name = self.get_tool_data_storage(include_link + include_data, '', match_org)
                     else:
                         self.data_backlink[include_name]['no'] = ''
 
-                        include_link = '<div><a class="opennamu_not_exist_link" href="/w/' + url_pas(include_name) + '">(' + include_name_org + ')</a></div>'
-
+                        include_link = '<a class="opennamu_not_exist_link" href="/w/' + url_pas(include_name) + '">(' + include_name_org + ')</a>'
                         data_name = self.get_tool_data_storage(include_link, '', match_org)
 
                     self.render_data = re.sub(include_regex, '<' + data_name + '></' + data_name + '>' + match[1], self.render_data, 1)
@@ -2554,6 +2549,9 @@ class class_do_render_namumark:
         self.render_data = re.sub(r'<a fn_target="([^"]+)"', do_render_last_footnote, self.render_data)
 
         self.render_data_js += '''
+            document.querySelectorAll('details').forEach((el) => {
+                new Accordion(el);
+            });
             if(window.location.hash !== '' && document.getElementById(window.location.hash.replace(/^#/, ''))) {
                 document.getElementById(window.location.hash.replace(/^#/, '')).focus();
             }\n

version.json

@@ -1,6 +1,6 @@
 {
-    "r_ver" : "v3.6.0-v13",
-    "c_ver" : "20250323",
+    "r_ver" : "v3.6.0-v14",
+    "c_ver" : "20250324",
     "s_ver" : "20240426",
     "bin_link" : "https://github.com/openNAMU/GopenNAMU/releases/download/v2025-03-21-v2/"
 }

views/main_css/js/func/render.js

@@ -1,5 +1,83 @@
 "use strict";
 
+// https://css-tricks.com/how-to-animate-the-details-element/
+class Accordion {
+    constructor(el) {
+        this.el = el;
+        this.summary = el.querySelector('summary');
+        this.content = el.querySelector('.opennamu_folding');
+    
+        this.animation = null;
+        this.isClosing = false;
+        this.isExpanding = false;
+        this.summary.addEventListener('click', (e) => this.onClick(e));
+    }
+  
+    onClick(e) {
+        e.preventDefault();
+        this.el.style.overflow = 'hidden';
+        if(this.isClosing || !this.el.open) {
+            this.open();
+        } else if(this.isExpanding || this.el.open) {
+            this.shrink();
+        }
+    }
+  
+    shrink() {
+        this.isClosing = true;
+        
+        const startHeight = `${this.el.offsetHeight}px`;
+        const endHeight = `${this.summary.offsetHeight}px`;
+        
+        if(this.animation) {
+            this.animation.cancel();
+        }
+        
+        this.animation = this.el.animate({
+            height: [startHeight, endHeight]
+        }, {
+            duration: 200,
+            easing: 'ease-out'
+        });
+        
+        this.animation.onfinish = () => this.onAnimationFinish(false);
+        this.animation.oncancel = () => this.isClosing = false;
+    }
+  
+    open() {
+        this.el.style.height = `${this.el.offsetHeight}px`;
+        this.el.open = true;
+        window.requestAnimationFrame(() => this.expand());
+    }
+  
+    expand() {
+        this.isExpanding = true;
+        const startHeight = `${this.el.offsetHeight}px`;
+        const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
+        
+        if(this.animation) {
+            this.animation.cancel();
+        }
+        
+        this.animation = this.el.animate({
+            height: [startHeight, endHeight]
+        }, {
+            duration: 200,
+            easing: 'ease-out'
+        });
+        this.animation.onfinish = () => this.onAnimationFinish(true);
+        this.animation.oncancel = () => this.isExpanding = false;
+    }
+  
+    onAnimationFinish(open) {
+        this.el.open = open;
+        this.animation = null;
+        this.isClosing = false;
+        this.isExpanding = false;
+        this.el.style.height = this.el.style.overflow = '';
+    }
+}
+
 function opennamu_heading_folding(data, element = '') {
     let fol = document.getElementById(data);
     if(fol.style.display === '' || fol.style.display === 'inline-block' || fol.style.display === 'block') {