more compact mode

x94fujo6rpg · Jul 3, 2022 · afabb27 · afabb27
1 parent 839f911
commit afabb27
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,14 @@ Generate shareable text codes or links.
   - [fleetdata version](#fleetdata-version)
 
 ## Update  
+**2022-07-04**
+- more compact mode
+  - 0: default
+  - 1: smaller gap
+  - 2: outer gap only
+  - 3: 0 gap
+- fix some ui issue
+
 **2022-07-03**
 - compact mode
   - `Settings > Detail Info > Compact Mode`

diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
     <link rel="prefetch" href="js/ship_data.min.js?v=7bc441ebdf1b" as="script">
     <link rel="prefetch" href="js/equip_data.min.js?v=c92015757f11" as="script">
     <link rel="prefetch" href="js/sp_weapon_data.min.js?v=afdbc7eee9b5" as="script">
-    <link rel="prefetch" href="js/main-v2.min.js?v=6cd95a4e1da8" as="script">
+    <link rel="prefetch" href="js/main-v2.min.js?v=758e5a143600" as="script">
     <style>
         body {
             color: white;
@@ -426,10 +426,11 @@
             }
         }
 
+        .btn {
+            white-space: normal !important;
+        }
+
         @media only screen and (max-width: 1300px) {
-            .btn {
-                white-space: normal;
-            }
             .w-25 {
                 width: 50% !important;
             }
@@ -452,6 +453,14 @@
             }
         }
 
+        .compact_m0 {
+            margin: 0 !important;
+        }
+
+        .compact_m01 {
+            margin: 0.1rem !important;
+        }
+
         .compact_item_container {
             height: unset !important;
             margin: -3px -3px !important;
@@ -535,8 +544,16 @@ <h1>Azur Lane Fleet Tool</h1>
                             <button class="btn btn-outline-secondary line-3-item border-left border-right" type="button" id="display_info_base" onclick="app.option.setInfo(this)">Base</button>
                             <button class="btn btn-outline-secondary line-3-item border-left" type="button" id="display_info_cd" onclick="app.option.setInfo(this)">CD</button>
                         </div>
+                    </div>
+                    <button id="compact_mode" class="btn btn-outline-info d-flex mx-auto my-2 justify-content-center" type="button" data-toggle="collapse" data-target="#compact_mode_expand" aria-expanded="false" aria-controls="compact_mode_expand">
+                        ⮟ Compact Mode
+                    </button>
+                    <div id="compact_mode_expand" class="collapse">
                         <div class="btn-group d-flex my-3 mx-auto w-100" id="option_box_5">
-                            <button class="btn btn-outline-secondary w-100" type="button" id="compact_mode" onclick="app.option.compactMode(this)">Compact Mode</button>
+                            <button class="btn btn-outline-secondary line-4-item" type="button" id="compact_mode1" onclick="app.option.compactMode(this, 0)">0</button>
+                            <button class="btn btn-outline-secondary line-4-item" type="button" id="compact_mode2" onclick="app.option.compactMode(this, 1)">1</button>
+                            <button class="btn btn-outline-secondary line-4-item" type="button" id="compact_mode3" onclick="app.option.compactMode(this, 2)">2</button>
+                            <button class="btn btn-outline-secondary line-4-item" type="button" id="compact_mode4" onclick="app.option.compactMode(this, 3)">3</button>
                         </div>
                     </div>
                     <button id="tech_data_title" onclick="app.util.dumpTechData()" class="btn btn-outline-info d-flex mx-auto my-2 justify-content-center" type="button" data-toggle="collapse" data-target="#tech_data_area_expand" aria-expanded="false" aria-controls="tech_data_area_expand">
@@ -869,7 +886,7 @@ <h4 class="modal-title m-auto text-center line-3-item" ui_id="select_spweapon">S
     <script src='js/ship_data.min.js?v=7bc441ebdf1b'></script>
     <script src='js/equip_data.min.js?v=c92015757f11'></script>
     <script src='js/sp_weapon_data.min.js?v=afdbc7eee9b5'></script>
-    <script src="js/main-v2.min.js?v=6cd95a4e1da8"></script>
+    <script src="js/main-v2.min.js?v=758e5a143600"></script>
 </body>
 
 </html>
diff --git a/js/main-v2.js b/js/main-v2.js
@@ -26,7 +26,7 @@ const
         { id: "display_info_efficiency", en: "Efficiency", jp: "補正", tw: "效率" },
         { id: "display_info_base", en: "Base", jp: "武器数", tw: "底座數" },
         { id: "display_info_cd", en: "CD", jp: "攻速", tw: "射速" },
-        { id: "compact_mode", en: "Compact Mode", jp: "コンパクトモード", tw: "緊湊模式" },
+        { id: "compact_mode", en: "⮟ Compact Mode", jp: "⮟ コンパクトモード", tw: "⮟ 緊湊模式" },
 
         { id: "add_fleet", en: "Save Current", jp: "現在の艦隊をセーブ", tw: "儲存目前艦隊", },
         { id: "select_fleet", en: "Select Fleet", jp: "艦隊を選択", tw: "選擇艦隊", },
@@ -712,21 +712,53 @@ const
                 ALF.ui_settings[key] = is_active;
                 if (ele instanceof HTMLElement) LS.userSetting.set(settingKey[key], is_active);
             },
-            compactMode(ele) {
+            _last_compact_mode: undefined,
+            compactMode(ele, index) {
                 let is_active,
-                    list = {
-                        item_container: "compact_item_container",
-                        fleet_side_box: "compact_side_box",
-                        item_name: "compact_item_name",
-                    };
+                    list = [
+                        { // default
+                            fleet_box_i: "compact_m01",
+                            item_container: "compact_item_container",
+                            fleet_side_box: "compact_side_box",
+                            item_name: "compact_item_name",
+                        },
+                        { // smaller gap
+                            fleet_box_i: "compact_m0",
+                            item_container: "compact_item_container",
+                            fleet_side_box: "compact_m01",
+                            item_name: "compact_item_name",
+                        },
+                        { // only outer gap
+                            fleet_box_i: "compact_m01",
+                            item_container: "compact_item_container",
+                            fleet_side_box: "compact_m0",
+                            item_name: "compact_item_name",
+                        },
+                        { // no gap
+                            fleet_box_i: "compact_m0",
+                            item_container: "compact_item_container",
+                            fleet_side_box: "compact_m0",
+                            item_name: "compact_item_name",
+                        },
+                    ],
+                    eles = document.querySelectorAll("#compact_mode_expand button");
                 $(ele).button("toggle");
                 is_active = ele.classList.contains("active") ? 1 : 0;
                 if (is_active) {
-                    updateClass(list, addClass);
+                    console.log(`compact_mode ${index}`);
+                    if (this._last_compact_mode != undefined) updateClass(list[this._last_compact_mode], subClass);
+                    updateClass(list[index], addClass);
+                    this._last_compact_mode = index;
                 } else {
-                    updateClass(list, subClass);
+                    updateClass(list[this._last_compact_mode], subClass);
                 }
-                if (ele instanceof HTMLElement) LS.userSetting.set(settingKey.compactMode, is_active);
+                if (ele instanceof HTMLElement) LS.userSetting.set(settingKey.compactMode, is_active ? ++index : 0);
+                eles.forEach(_ele => {
+                    if (_ele.id != ele.id) {
+                        _ele.classList.remove("active");
+                        _ele.setAttribute("aria-pressed", false);
+                    }
+                });
 
                 function updateClass(list, method) {
                     let current_layout = ALF.class_data.current;
@@ -770,18 +802,19 @@ const
                 LS.userSetting.set(settingKey.layout, layout_list[ele.textContent]);
 
                 function setLayout(current, next) {
-                    changeClass(same ? current : next);
-                    ele.textContent = layout_list[same ? current : next];
-                    ALF.class_data.current = current;
+                    let layout = same ? current : next;
+                    changeClass(layout);
+                    ele.textContent = layout_list[layout];
+                    ALF.class_data.current = layout;
                 }
 
-                function changeClass(classKey = "") {
-                    for (let key in appClassData) {
-                        if (key == "app_box") {
+                function changeClass(layout = "") {
+                    for (let target in appClassData) {
+                        if (target == "app_box") {
                             // non vue
-                            document.querySelector(".app_box").className = `${appClassData.app_box[classKey]} app_box`;
+                            document.querySelector(".app_box").className = `${appClassData.app_box[layout]} app_box`;
                         } else {
-                            ALF.class_data[key] = appClassData[key][classKey];
+                            ALF.class_data[target] = appClassData[target][layout];
                         }
                     }
                 }
@@ -832,40 +865,37 @@ const
             displayBorder(ele) {
                 $(ele).button("toggle");
                 let layoutKey = layout_list[document.querySelector("#layout_setting").textContent],
-                    display = ele.classList.contains("active");
-                if (display) {
-                    const border = {
-                        fleet_box_o: {
-                            h: "fleet_box_o d-grid justify-content-center",
-                            v: "fleet_box_o d-grid border border-secondary",
-                            v2: "fleet_box_o flex-row"
-                        },
-                        fleet_box_i: {
-                            h: "fleet_box_i row m-2 border border-secondary", // p-1 py-2
-                            v: "fleet_box_i col p-0", // m-2
-                            v2: "fleet_box_i col p-0 border border-secondary" // m-2
-                        }
+                    display = ele.classList.contains("active"),
+                    border_class = ["border", "border-secondary"],
+                    list = {
+                        fleet_box_o: ["v"],
+                        fleet_box_i: ["h", "v2"],
                     };
-                    for (let key in border) {
-                        appClassData[key] = border[key];
-                        ALF.class_data[key] = appClassData[key][layoutKey];
+                if (display) {
+                    for (let target in list) {
+                        let layout_list = list[target],
+                            class_data = appClassData[target];
+                        layout_list.forEach(layout => {
+                            appClassData[target][layout] =
+                                class_data[layout]
+                                    .split(" ")
+                                    .concat(border_class)
+                                    .join(" ");
+                            if (layout == ALF.class_data.current) ALF.class_data[target] = appClassData[target][layout];
+                        });
                     }
                 } else {
-                    const noborder = {
-                        fleet_box_o: {
-                            h: "fleet_box_o d-grid justify-content-center",
-                            v: "fleet_box_o d-grid",
-                            v2: "fleet_box_o flex-row"
-                        },
-                        fleet_box_i: {
-                            h: "fleet_box_i row m-2",
-                            v: "fleet_box_i col p-0", // m-2
-                            v2: "fleet_box_i col p-0" // m-2
-                        }
-                    };
-                    for (let key in noborder) {
-                        appClassData[key] = noborder[key];
-                        ALF.class_data[key] = appClassData[key][layoutKey];
+                    for (let target in list) {
+                        let layout_list = list[target],
+                            class_data = appClassData[target];
+                        layout_list.forEach(layout => {
+                            appClassData[target][layout] =
+                                class_data[layout]
+                                    .split(" ")
+                                    .filter(_class => !(border_class.includes(_class)))
+                                    .join(" ");
+                            if (layout == ALF.class_data.current) ALF.class_data[target] = appClassData[target][layout];
+                        });
                     }
                 }
                 LS.userSetting.set(settingKey.fleetBorder, display ? 1 : 0);
@@ -2861,7 +2891,7 @@ const
             step("add search", 0); add_search_event();
             //step("split button group [ship nation]"); splitButtonGroup("shipnation", 6, filter_btn_class.replace("line-5-item", "line-6-item"));
             //step("split button group [equip nation]"); splitButtonGroup("eq_nation", 6, filter_btn_class.replace("line-5-item", "line-6-item"));
-            step("add resize event", 0); addWindowSizeEvent();
+            //step("add resize event", 0); addWindowSizeEvent();
             step("load user setting", 0); await loadUserSetting();
             step("load fleet storage", 0); await loadStorage();
             step("set slider", 0); setSlider();
@@ -3627,8 +3657,8 @@ const
                     app.action.loadOwnedSetting();
                 }
 
-                if (setting[settingKey.compactMode] == 1) {
-                    setTimeout(() => document.getElementById("compact_mode").click());
+                if (setting[settingKey.compactMode] >= 1) {
+                    setTimeout(() => document.getElementById(`compact_mode${setting[settingKey.compactMode]}`).click());
                 }
 
                 if (setting[settingKey.thickFrame] == 1) {
@@ -3980,7 +4010,7 @@ const
     appClassData = {
         app_box: {
             h: "app_box d-flex flex-column w-100 m-auto", // container mw-100 / d-flex flex-column w-100 m-auto
-            v: "app_box row justify-content-center py-1 px-5 m-auto d-grid grid-2item", // app_box row justify-content-center py-1 px-5 m-0
+            v: "app_box d-grid grid-2item m-auto", // app_box row justify-content-center py-1 px-5 m-0
             v2: "app_box d-table justify-content-center m-auto"
         },
         fleet_box_o: {

diff --git a/js/main-v2.min.js b/js/main-v2.min.js