fix: initTooltip과 bootstrap-vue-3 충돌 문제 해결

- 기타 data-bs 안붙은거 마저 수정

hwe/templates/hallOfFrame.php

@@ -7,7 +7,7 @@
     </div>
     <div class="hall_img"><img width="64" height="64" class='generalIcon' src="<?=$general['pictureFullPath']?>"></div>
     <?php if(key_exists("serverName",$general)): ?>
-    <div class="hall_server obj_tooltip" data-bs-toggle="tooltip" data-placement="top"><?=$general['serverName']?><?=$general['serverIdx']?>기
+    <div class="hall_server obj_tooltip" data-bs-toggle="tooltip" data-bs-placement="top"><?=$general['serverName']?><?=$general['serverIdx']?>기
         <span class="tooltiptext">
             <?=$general['scenarioName']?><br>
             <?=substr($general['startTime'], 0, 10)?> ~ <?=substr($general['unitedTime'], 0, 10)?>

hwe/templates/map.php

@@ -1,5 +1,5 @@
 <div class="world_map map_theme_<?= $mapTheme ?> draw_required">
-    <div class="map_title obj_tooltip" data-bs-toggle="tooltip" data-placement="top" data-tooltip-class="map_title_tooltiptext">
+    <div class="map_title obj_tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip-class="map_title_tooltiptext">
         <span class="map_title_text ">
         </span>
         <span class="tooltiptext"></span>

hwe/templates/tooltip.php

@@ -1,4 +1,4 @@
-<span class="obj_tooltip <?=(isset($copyable_info)&&$copyable_info)?'tooltip_copyable_info':''?>" data-bs-toggle="tooltip" data-placement="top"
+<span class="obj_tooltip <?=(isset($copyable_info)&&$copyable_info)?'tooltip_copyable_info':''?>" data-bs-toggle="tooltip" data-bs-placement="top"
     ><span <?=isset($style)?"style=\"$style\"":''?>><?=$text??''?></span
     ><span class="tooltiptext"
         ><span class="hidden_but_copyable">[</span><?=$info??''?><span class="hidden_but_copyable">]</span

hwe/ts/common_deprecated.ts

@@ -1,5 +1,7 @@
 import { exportWindow } from "@util/exportWindow";
-import { activateFlip, errUnknown, initTooltip } from "@/common_legacy";
+import { errUnknown } from "@/common_legacy";
+import { initTooltip } from "@/legacy/initTooltip";
+import { activateFlip } from "@/legacy/activateFlip";
 import { isBrightColor } from "@util/isBrightColor";
 import { getIconPath } from "@util/getIconPath";
 import { mb_strwidth } from "@util/mb_strwidth";

hwe/ts/common_legacy.ts

@@ -1,6 +1,3 @@
-import $ from "jquery";
-import { Tooltip } from "bootstrap";
-import { trim } from "lodash";
 
 /**
  * object의 array를 id를 key로 삼는 object로 재 변환
@@ -63,20 +60,6 @@ declare global {
         linkifyStr: (v: string, k?: Record<string, string | number>) => string;
     }
 }
-export function activateFlip($obj?: JQuery<HTMLElement>): void {
-    let $result: JQuery<HTMLElement>;
-    if ($obj === undefined) {
-        $result = $('img[data-flip]');
-    } else {
-        $result = $obj.find('img[data-flip]');
-    }
-
-    $result.each(function () {
-        activeFlipItem($(this));
-    });
-
-}
-
 export function combineObject<K extends string, V>(item: V[], columnList: K[]): Record<K, V> {
     const newItem: Record<string, V> = {};
     for (const columnIdx in columnList) {
@@ -95,33 +78,6 @@ export function combineArray<K extends string, V>(array: V[][], columnList: K[])
     return result;
 }
 
-export function activeFlipItem($img: JQuery<HTMLElement>): void {
-    const imageList = [];
-    imageList.push($img.attr('src'));
-    $.each($img.data('flip').split(','), function (idx, value) {
-        value = $.trim(value);
-        if (!value) {
-            return true;
-        }
-        imageList.push(value);
-    });
-    if (imageList.length <= 1) {
-        return;
-    }
-    $img.data('computed_flip_array', imageList);
-    $img.data('computed_flip_idx', 0);
-
-    $img.click(function () {
-        const arr = $img.data('computed_flip_array');
-        let idx = $img.data('computed_flip_idx');
-        idx = (idx + 1) % (arr.length);
-        $img.attr('src', arr[idx]);
-        $img.data('computed_flip_idx', idx);
-    });
-    $img.css('cursor', 'pointer');
-}
-
-
 
 export function errUnknown(): void {
     alert('작업을 실패했습니다.');
@@ -142,44 +98,3 @@ export function getNpcColor(npcType: number): 'cyan' | 'skyblue' | null {
     }
     return null;
 }
-
-export function initTooltip($obj?: JQuery<HTMLElement>): void {
-    if ($obj === undefined) {
-        $obj = $('.obj_tooltip');
-    } else if (!$obj.hasClass('obj_tooltip')) {
-        $obj = $obj.find('.obj_tooltip');
-    }
-
-    $obj.each(function () {
-        const $target = $(this);
-
-        if ($target.data('installHandler')) {
-            return;
-        }
-        $target.data('installHandler', true);
-
-        $target.mouseover(function () {
-            const $objTooltip = $(this);
-            if ($objTooltip.data('setObjTooltip')) {
-                return;
-            }
-
-            let tooltipClassText = $objTooltip.data('tooltip-class');
-            if (!tooltipClassText) {
-                tooltipClassText = '';
-            }
-            const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`;
-
-            const oTooltip = Tooltip.getOrCreateInstance(this, {
-                title: function(){
-                    return trim(this.querySelector('.tooltiptext')?.innerHTML);
-                },
-                template: template,
-                html: true
-            });
-            oTooltip.show();
-
-            $objTooltip.data('setObjTooltip', true);
-        });
-    });
-}

hwe/ts/dipcenter.ts

@@ -4,7 +4,7 @@ import 'summernote/dist/summernote-bs4';
 import 'summernote/dist/summernote-bs4.css';
 import '@/summernote-image-flip';
 import '@/summernote-ko-KR';
-import { activateFlip } from '@/common_legacy';
+import { activateFlip } from "@/legacy/activateFlip";
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 declare const editable: boolean;

hwe/ts/gateway/entrance.ts

@@ -2,7 +2,7 @@ import { exportWindow } from '@util/exportWindow';
 import $ from 'jquery';
 exportWindow($, '$');
 import axios from 'axios';
-import { initTooltip } from '@/common_legacy';
+import { initTooltip } from "@/legacy/initTooltip";
 import { TemplateEngine } from '@util/TemplateEngine';
 import { InvalidResponse } from '@/defs';
 import { getDateTimeNow } from '@util/getDateTimeNow';
@@ -14,7 +14,7 @@ declare const isAdmin: boolean;
 
 const serverListTemplate = "\
 <tr class='server_item bg0 server_name_<%name%>' data-server='<%name%>'>\
-    <td class='server_name obj_tooltip' data-bs-toggle='tooltip' data-placement='bottom'>\
+    <td class='server_name obj_tooltip' data-bs-toggle='tooltip' data-bs-placement='bottom'>\
         <span style='font-weight:bold;font-size:1.4em;color:<%color%>'><%korName%>섭</span><br>\
         <span class='n_country'></span>\
         <span class='tooltiptext server_date'></span>\

hwe/ts/hallOfFame.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { stringifyUrl } from 'query-string';
-import { initTooltip } from '@/common_legacy';
+import { initTooltip } from "@/legacy/initTooltip";
 import 'bootstrap';
 
 $(function ($) {

hwe/ts/legacy/activateFlip.ts

@@ -0,0 +1,42 @@
+import $ from "jquery";
+
+export function activateFlip($obj?: JQuery<HTMLElement>): void {
+    let $result: JQuery<HTMLElement>;
+    if ($obj === undefined) {
+        $result = $('img[data-flip]');
+    } else {
+        $result = $obj.find('img[data-flip]');
+    }
+
+    $result.each(function () {
+        activeFlipItem($(this));
+    });
+
+}
+
+
+export function activeFlipItem($img: JQuery<HTMLElement>): void {
+    const imageList = [];
+    imageList.push($img.attr('src'));
+    $.each($img.data('flip').split(','), function (idx, value) {
+        value = $.trim(value);
+        if (!value) {
+            return true;
+        }
+        imageList.push(value);
+    });
+    if (imageList.length <= 1) {
+        return;
+    }
+    $img.data('computed_flip_array', imageList);
+    $img.data('computed_flip_idx', 0);
+
+    $img.click(function () {
+        const arr = $img.data('computed_flip_array');
+        let idx = $img.data('computed_flip_idx');
+        idx = (idx + 1) % (arr.length);
+        $img.attr('src', arr[idx]);
+        $img.data('computed_flip_idx', idx);
+    });
+    $img.css('cursor', 'pointer');
+}

hwe/ts/legacy/initTooltip.ts

@@ -0,0 +1,46 @@
+import Tooltip from "bootstrap/js/dist/tooltip";
+//HACK: 이유는 잘 모르겠지만 bootstrap-vue3에서 bootstrap 호출하는 것과 충돌하여 우회 중
+import $ from "jquery";
+import { trim } from "lodash";
+
+export function initTooltip($obj?: JQuery<HTMLElement>): void {
+    if ($obj === undefined) {
+        $obj = $('.obj_tooltip');
+    } else if (!$obj.hasClass('obj_tooltip')) {
+        $obj = $obj.find('.obj_tooltip');
+    }
+
+    $obj.each(function () {
+        const $target = $(this);
+
+        if ($target.data('installHandler')) {
+            return;
+        }
+        $target.data('installHandler', true);
+
+        $target.on('mouseover', function () {
+            const $objTooltip = $(this);
+            if ($objTooltip.data('setObjTooltip')) {
+                return;
+            }
+
+            let tooltipClassText = $objTooltip.data('tooltip-class');
+            if (!tooltipClassText) {
+                tooltipClassText = '';
+            }
+            const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`;
+
+            const oTooltip = new Tooltip(this, {
+                title: function () {
+                    return trim(this.querySelector('.tooltiptext')?.innerHTML);
+                },
+                template: template,
+                html: true
+            });
+            oTooltip.show();
+
+            $objTooltip.data('setObjTooltip', true);
+        });
+    });
+
+}

hwe/ts/legacy/main.ts

@@ -1,29 +1,43 @@
-import $ from 'jquery';
+import jQuery from 'jquery';
-import { activateFlip, initTooltip } from '@/common_legacy';
+import { activateFlip } from "@/legacy/activateFlip";
+import { unwrap } from '@util/unwrap';
+import { htmlReady } from '@util/htmlReady';
+import { initTooltip } from './initTooltip';
+import { exportWindow } from '@/util/exportWindow';
+
 import '@/msg.ts';
 import '@/map.ts';
 
-import '@scss/main.scss';
+exportWindow(jQuery, '$');
-import { unwrap } from '@util/unwrap';
+
-import { htmlReady } from '@util/htmlReady';
 
 htmlReady(() => {
-    $('.refreshPage').click(function () {
+    document.querySelector('.refreshPage')?.addEventListener('click', function () {
         document.location.reload();
         return false;
     });
 
-    $('.open-window').on('click', function (e) {
+    document.querySelector('.open-window')?.addEventListener('click', function (e) {
         e.preventDefault();
-        let target = $(e.target as HTMLAnchorElement);
+        let target: HTMLElement | null = e.target as HTMLElement;
-        while (target.attr('href') === undefined) {
+        while (target !== null) {
-            target = target.parent('a');
+            target = target.parentElement;
-            if (target.length == 0) {
+            if (target === null) {
                 return;
             }
+            if (target.tagName != 'a') {
+                continue;
+            }
+            if ((target as HTMLAnchorElement).href !== undefined) {
+                break;
+            }
         }
-        const href = target.attr('href');
+
-        window.open(href);
+        if (!target) {
+            return;
+        }
+
+        window.open((target as HTMLAnchorElement).href);
     });
 
     activateFlip();

hwe/ts/select_general_from_pool.ts

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import axios from 'axios';
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { InvalidResponse } from '@/defs';
-import { initTooltip } from '@/common_legacy';
+import { initTooltip } from "@/legacy/initTooltip";
 import { getIconPath } from "@util/getIconPath";
 import { convertFormData } from '@util/convertFormData';
 import { unwrap_any } from '@util/unwrap_any';
@@ -64,7 +64,7 @@ const templateGeneralCard = '<div class="general_card">\
 </div>';
 
 const templateSpecial =
-    '<span class="obj_tooltip" data-bs-toggle="tooltip" data-placement="top"><%text%>\
+    '<span class="obj_tooltip" data-bs-toggle="tooltip" data-bs-placement="top"><%text%>\
     <span class="tooltiptext">\
         <%info%>\
     </span>\

hwe/ts/select_npc.ts

@@ -104,7 +104,7 @@ const templateGeneralCard =
 </div>';
 
 const templateSpecial =
-    '<span class="obj_tooltip" data-bs-toggle="tooltip" data-placement="top"><%text%>\
+    '<span class="obj_tooltip" data-bs-toggle="tooltip" data-bs-placement="top"><%text%>\
     <span class="tooltiptext">\
         <%info%>\
     </span>\

hwe/ts/v_main.ts

@@ -1,8 +1,6 @@
-
 import $ from 'jquery';
 
 exportWindow(scrollHardTo, 'scrollHardTo');
-exportWindow($, '$');
 
 import { exportWindow } from '@util/exportWindow';
 import { scrollHardTo } from '@util/scrollHardTo';
@@ -15,6 +13,8 @@ import Multiselect from 'vue-multiselect';
 import "@/legacy/main";
 import { auto500px } from './util/auto500px';
 
+import '@scss/main.scss';
+
 setAxiosXMLHttpRequest();
 
 createApp(ReservedCommand).use(BootstrapVue3).component('v-multiselect', Multiselect).mount('#reservedCommandList');

package.json

@@ -27,6 +27,7 @@
     "async-validator": "^4.0.7",
     "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
+    "bootstrap-vue-3": "^0.1.0",
     "core-js": "^3.19.3",
     "date-fns": "^2.27.0",
     "downloadjs": "^1.4.7",
@@ -58,7 +59,6 @@
     "@vue/eslint-config-typescript": "^9.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-modern-browsers": "^15.0.2",
-    "bootstrap-vue-3": "^0.1.0",
     "bootswatch": "^5.1.3",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.5.1",