링고 스킨 가변폭 옵션 도입

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

lang/en-US.json

@@ -215,7 +215,7 @@
         "topic_acl_setting" : "Discussion ACL setting",
         "topic_acl" : "Discussion ACL",
         "delete_admin_group": "Delete admin group",
-        "main_skin_set" : "Main skin setting(s)",
+        "main_skin_set" : "Main skin settings",
         "reset_backlink" : "Reset backlink",
         "link_in_this" : "Links in this document",
         "star_doc" : "Document(s) of interest",

views/ringo/index.html

@@ -12,7 +12,7 @@
         <script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
         <script src="/views/ringo/js/main.js.cache_v2"></script>
         <script src="/views/ringo/js/sidebar.js.cache_v1"></script>
-        <script src="/views/ringo/js/skin_set.js.cache_v3"></script>
+        <script src="/views/ringo/js/skin_set.js.cache_v4"></script>
         <link rel="stylesheet" href="/views/ringo/css/main.css.cache_v6">
         {% if request.cookies.get('main_css_darkmode', '') == '1' %}
             <link rel="stylesheet" href="/views/main_css/css/sub/dark.css.cache_v1">
@@ -231,7 +231,7 @@
                 </article>
             </footer>
         </section>
-        <div class="aside_width">A</div>
+        <div class="aside_width">　</div>
         <aside class="do_fixed">
             <button id="side_button_1" class="side_button selected">{{'edit'|load_lang}}</button><!--
          --><button id="side_button_2" class="side_button">{{'discussion'|load_lang}}</button><!--

views/ringo/info.json

@@ -1,5 +1,5 @@
 {
     "name" : "Ringo",
-    "skin_ver" : "v1.0.9",
+    "skin_ver" : "v1.1.0",
     "require_ver" : "3500112"
 }

views/ringo/js/skin_set.js

@@ -24,6 +24,13 @@ function ringo_get_post() {
         document.cookie = 'main_css_off_sidebar=0; path=/';
     }
 
+    const check_4 = document.getElementById('fixed_width');
+    if(check_4.options[check_4.selectedIndex].value) {
+        document.cookie = 'main_css_fixed_width=' + check_4.options[check_4.selectedIndex].value + '; path=/';
+    } else {
+        document.cookie = 'main_css_fixed_width=; path=/';
+    }
+
     history.go(0);
 }
 
@@ -39,7 +46,7 @@ function ringo_do_skin_set() {
     }
 
     if(cookies.match(ringo_do_regex_data('main_css_off_sidebar')) && cookies.match(ringo_do_regex_data('main_css_off_sidebar'))[1] === '1') {
-        document.getElementById('ringo_add_style').innerHTML = `
+        document.getElementById('ringo_add_style').innerHTML += `
             section {
                 width: auto;
                 display: block;
@@ -55,6 +62,15 @@ function ringo_do_skin_set() {
             }
         `;
     }
+
+    if(cookies.match(ringo_do_regex_data('main_css_fixed_width')) && cookies.match(ringo_do_regex_data('main_css_fixed_width'))[1] !== '') {
+        let fixed_width_data = cookies.match(ringo_do_regex_data('main_css_fixed_width'))[1];
+        document.getElementById('ringo_add_style').innerHTML += `
+            article.main {
+                max-width: ` + fixed_width_data + `px;
+            }
+        `;
+    }
 }
 
 function ringo_load_skin_set() {
@@ -67,11 +83,15 @@ function ringo_load_skin_set() {
                 "darkmode" : "Darkmode",
                 "use_sys_darkmode" : "Use system darkmode set",
                 "off_sidebar" : "Turn off sidebar",
+                "fixed_width" : "Fixed width",
+                'default' : 'Default',
             }, "ko-KR" : {
                 "save" : "저장",
                 "darkmode" : "다크모드",
                 "use_sys_darkmode" : "시스템 다크모드 설정 사용",
                 "off_sidebar" : "사이드바 끄기",
+                "fixed_width" : "고정폭",
+                'default' : '기본값',
             }
         }
 
@@ -99,6 +119,28 @@ function ringo_load_skin_set() {
             set_data["off_sidebar"] = "checked";
         }
 
+        let fixed_width_data = '';
+        if(cookies.match(ringo_do_regex_data('main_css_fixed_width'))) {
+            fixed_width_data = cookies.match(ringo_do_regex_data('main_css_fixed_width'))[1];
+        }
+
+        let select_fixed_width = [set_language[language]['default'], '800', '900', '1000', '1100', '1200', '1300', '1500', '1600'];
+        let select_fixed_width_html = '<select name="fixed_width" id="fixed_width">';
+        for(let for_a = 0; for_a < select_fixed_width.length; for_a++) {
+            let for_a_data = select_fixed_width[for_a];
+            if(for_a_data === set_language[language]['default']) {
+                for_a_data = '';
+            }
+
+            let selected = '';
+            if(fixed_width_data === for_a_data) {
+                selected = 'selected';
+            }
+
+            select_fixed_width_html += '<option value="' + for_a_data + '" ' + selected + '>' + select_fixed_width[for_a] + '</option>';
+        }
+        select_fixed_width_html += '</select>';
+
         document.getElementById("main_skin_set").innerHTML = ' \
             <input ' + set_data["use_sys_darkmode"] + ' type="checkbox" id="use_sys_darkmode" name="use_sys_darkmode" value="use_sys_darkmode"> ' + set_language[language]['use_sys_darkmode'] + ' \
             <hr class="main_hr"> \
@@ -106,6 +148,8 @@ function ringo_load_skin_set() {
             <hr class="main_hr"> \
             <input ' + set_data["off_sidebar"] + ' type="checkbox" id="off_sidebar" name="off_sidebar" value="off_sidebar"> ' + set_language[language]['off_sidebar'] + ' \
             <hr class="main_hr"> \
+            ' + select_fixed_width_html + ' \
+            <hr class="main_hr"> \
             <button onclick="ringo_get_post();">' + set_language[language]['save'] + '</button> \
         ';
     }