folding 스타일 변경

https://github.com/openNAMU/openNAMU/issues/1940

route/tool/func.py

@@ -1355,7 +1355,8 @@ def render_set(doc_name = '', doc_data = '', data_type = 'view', data_in = '', d
 
                             .opennamu_render_complete summary {
                                 list-style: none !important;
-                                font-weight: bold;
+                                
+                                font-weight: bold !important;
                             }
                         </style>
                     ''' + get_class_render[0]

route/tool/func_render_namumark.py

@@ -1812,9 +1812,9 @@ class class_do_render_namumark:
                         wiki_data_end = self.do_inter_render(wiki_data, self.doc_include + 'opennamu_folding_' + str(folding_count))
 
                         middle_data_pass = wiki_data_folding
-                        data_name = self.get_tool_data_storage('<details><summary>', '</summary>', middle_data_org)
+                        data_name = self.get_tool_data_storage('<details><summary>', '</summary><div class="opennamu_folding">', middle_data_org)
 
-                        data_name_2 = self.get_tool_data_storage('', '</details>', '')
+                        data_name_2 = self.get_tool_data_storage('', '</div></details>', '')
                         middle_data_add = '<' + data_name_2 + '>' + wiki_data_end + '</' + data_name_2 + '>'
 
                         folding_count += 1

views/main_css/css/main.css

@@ -45,14 +45,14 @@ td {
     }
 }
 
-summary {
+/* 폴딩 */
+details summary {
     cursor: pointer;
     user-select: none;
     
     display: list-item;
-    list-style: inside disclosure-closed;
 }
-    
+
 /* list */
 .opennamu_ul {
     padding-left: 20px;
@@ -382,6 +382,7 @@ s:hover, strike:hover, del:hover {
     list-style: none;
 }
 
+/* 이 부분 이하로는 레거시 */
 #topic_color {
     background: #bbeabb;
 }

views/main_css/js/func/func.js

@@ -1,5 +1,125 @@
 "use strict";
 
+// https://css-tricks.com/how-to-animate-the-details-element/
+class Accordion {
+    constructor(el) {
+        // Store the <details> element
+        this.el = el;
+        // Store the <summary> element
+        this.summary = el.querySelector('summary');
+        // Store the <div class="content"> element
+        this.content = el.querySelector('.opennamu_folding');
+    
+        // Store the animation object (so we can cancel it if needed)
+        this.animation = null;
+        // Store if the element is closing
+        this.isClosing = false;
+        // Store if the element is expanding
+        this.isExpanding = false;
+        // Detect user clicks on the summary element
+        this.summary.addEventListener('click', (e) => this.onClick(e));
+    }
+  
+    onClick(e) {
+        // Stop default behaviour from the browser
+        e.preventDefault();
+        // Add an overflow on the <details> to avoid content overflowing
+        this.el.style.overflow = 'hidden';
+        // Check if the element is being closed or is already closed
+        if (this.isClosing || !this.el.open) {
+            this.open();
+        // Check if the element is being openned or is already open
+        } else if (this.isExpanding || this.el.open) {
+            this.shrink();
+        }
+    }
+  
+    shrink() {
+        // Set the element as "being closed"
+        this.isClosing = true;
+        
+        // Store the current height of the element
+        const startHeight = `${this.el.offsetHeight}px`;
+        // Calculate the height of the summary
+        const endHeight = `${this.summary.offsetHeight}px`;
+        
+        // If there is already an animation running
+        if (this.animation) {
+            // Cancel the current animation
+            this.animation.cancel();
+        }
+        
+        // Start a WAAPI animation
+        this.animation = this.el.animate({
+        // Set the keyframes from the startHeight to endHeight
+            height: [startHeight, endHeight]
+        }, {
+            duration: 200,
+            easing: 'ease-out'
+        });
+        
+        // When the animation is complete, call onAnimationFinish()
+        this.animation.onfinish = () => this.onAnimationFinish(false);
+        // If the animation is cancelled, isClosing variable is set to false
+        this.animation.oncancel = () => this.isClosing = false;
+    }
+  
+    open() {
+      // Apply a fixed height on the element
+      this.el.style.height = `${this.el.offsetHeight}px`;
+      // Force the [open] attribute on the details element
+      this.el.open = true;
+      // Wait for the next frame to call the expand function
+      window.requestAnimationFrame(() => this.expand());
+    }
+  
+    expand() {
+        // Set the element as "being expanding"
+        this.isExpanding = true;
+        // Get the current fixed height of the element
+        const startHeight = `${this.el.offsetHeight}px`;
+        // Calculate the open height of the element (summary height + content height)
+        const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
+        
+        // If there is already an animation running
+        if (this.animation) {
+            // Cancel the current animation
+            this.animation.cancel();
+        }
+        
+        // Start a WAAPI animation
+        this.animation = this.el.animate({
+        // Set the keyframes from the startHeight to endHeight
+            height: [startHeight, endHeight]
+        }, {
+            duration: 200,
+            easing: 'ease-out'
+        });
+        // When the animation is complete, call onAnimationFinish()
+        this.animation.onfinish = () => this.onAnimationFinish(true);
+        // If the animation is cancelled, isExpanding variable is set to false
+        this.animation.oncancel = () => this.isExpanding = false;
+    }
+  
+    onAnimationFinish(open) {
+      // Set the open attribute based on the parameter
+      this.el.open = open;
+      // Clear the stored animation
+      this.animation = null;
+      // Reset isClosing & isExpanding
+      this.isClosing = false;
+      this.isExpanding = false;
+      // Remove the overflow hidden and the fixed height
+      this.el.style.height = this.el.style.overflow = '';
+    }
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('details').forEach((el) => {
+        new Accordion(el);
+    });
+});
+
 function opennamu_do_id_check(data) {
     if(data.match(/\.|\:/)) {
         return 0;