From dfb10c1b44fd4d1049b3b88c6d520b5ce35c4970 Mon Sep 17 00:00:00 2001 From: hide_d Date: Sat, 11 Dec 2021 11:37:41 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20initTooltip=EA=B3=BC=20bootstrap-vue-3?= =?UTF-8?q?=20=EC=B6=A9=EB=8F=8C=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= =?UTF-8?q?=20-=20=EA=B8=B0=ED=83=80=20data-bs=20=EC=95=88=EB=B6=99?= =?UTF-8?q?=EC=9D=80=EA=B1=B0=20=EB=A7=88=EC=A0=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hwe/templates/hallOfFrame.php | 2 +- hwe/templates/map.php | 2 +- hwe/templates/tooltip.php | 2 +- hwe/ts/common_deprecated.ts | 4 +- hwe/ts/common_legacy.ts | 85 ------------------------------ hwe/ts/dipcenter.ts | 2 +- hwe/ts/gateway/entrance.ts | 4 +- hwe/ts/hallOfFame.ts | 2 +- hwe/ts/legacy/activateFlip.ts | 42 +++++++++++++++ hwe/ts/legacy/initTooltip.ts | 46 ++++++++++++++++ hwe/ts/legacy/main.ts | 40 +++++++++----- hwe/ts/select_general_from_pool.ts | 4 +- hwe/ts/select_npc.ts | 2 +- hwe/ts/v_main.ts | 4 +- package.json | 2 +- 15 files changed, 131 insertions(+), 112 deletions(-) create mode 100644 hwe/ts/legacy/activateFlip.ts create mode 100644 hwe/ts/legacy/initTooltip.ts diff --git a/hwe/templates/hallOfFrame.php b/hwe/templates/hallOfFrame.php index 57fa9b0c..a43f25de 100644 --- a/hwe/templates/hallOfFrame.php +++ b/hwe/templates/hallOfFrame.php @@ -7,7 +7,7 @@
-
기 +
기
~ diff --git a/hwe/templates/map.php b/hwe/templates/map.php index 23c2397f..5c87c14c 100644 --- a/hwe/templates/map.php +++ b/hwe/templates/map.php @@ -1,5 +1,5 @@
-
+
diff --git a/hwe/templates/tooltip.php b/hwe/templates/tooltip.php index 57964ee9..38b45c58 100644 --- a/hwe/templates/tooltip.php +++ b/hwe/templates/tooltip.php @@ -1,4 +1,4 @@ ->[]) => string; } } -export function activateFlip($obj?: JQuery): void { - let $result: JQuery; - if ($obj === undefined) { - $result = $('img[data-flip]'); - } else { - $result = $obj.find('img[data-flip]'); - } - - $result.each(function () { - activeFlipItem($(this)); - }); - -} - export function combineObject(item: V[], columnList: K[]): Record { const newItem: Record = {}; for (const columnIdx in columnList) { @@ -95,33 +78,6 @@ export function combineArray(array: V[][], columnList: K[]) return result; } -export function activeFlipItem($img: JQuery): 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): 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 = ``; - - const oTooltip = Tooltip.getOrCreateInstance(this, { - title: function(){ - return trim(this.querySelector('.tooltiptext')?.innerHTML); - }, - template: template, - html: true - }); - oTooltip.show(); - - $objTooltip.data('setObjTooltip', true); - }); - }); -} \ No newline at end of file diff --git a/hwe/ts/dipcenter.ts b/hwe/ts/dipcenter.ts index 4fbf508f..3fd91d7b 100644 --- a/hwe/ts/dipcenter.ts +++ b/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; diff --git a/hwe/ts/gateway/entrance.ts b/hwe/ts/gateway/entrance.ts index dc94cce6..2c35bc48 100644 --- a/hwe/ts/gateway/entrance.ts +++ b/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 = "\ \ - \ + \ <%korName%>섭
\ \ \ diff --git a/hwe/ts/hallOfFame.ts b/hwe/ts/hallOfFame.ts index 7c487bd1..eb6fefd8 100644 --- a/hwe/ts/hallOfFame.ts +++ b/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 ($) { diff --git a/hwe/ts/legacy/activateFlip.ts b/hwe/ts/legacy/activateFlip.ts new file mode 100644 index 00000000..93821e37 --- /dev/null +++ b/hwe/ts/legacy/activateFlip.ts @@ -0,0 +1,42 @@ +import $ from "jquery"; + +export function activateFlip($obj?: JQuery): void { + let $result: JQuery; + if ($obj === undefined) { + $result = $('img[data-flip]'); + } else { + $result = $obj.find('img[data-flip]'); + } + + $result.each(function () { + activeFlipItem($(this)); + }); + +} + + +export function activeFlipItem($img: JQuery): 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'); +} diff --git a/hwe/ts/legacy/initTooltip.ts b/hwe/ts/legacy/initTooltip.ts new file mode 100644 index 00000000..81f73c7e --- /dev/null +++ b/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): 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 = ``; + + const oTooltip = new Tooltip(this, { + title: function () { + return trim(this.querySelector('.tooltiptext')?.innerHTML); + }, + template: template, + html: true + }); + oTooltip.show(); + + $objTooltip.data('setObjTooltip', true); + }); + }); + +} diff --git a/hwe/ts/legacy/main.ts b/hwe/ts/legacy/main.ts index f1d6424e..e3a5782f 100644 --- a/hwe/ts/legacy/main.ts +++ b/hwe/ts/legacy/main.ts @@ -1,29 +1,43 @@ -import $ from 'jquery'; -import { activateFlip, initTooltip } from '@/common_legacy'; +import jQuery from 'jquery'; +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'; -import { unwrap } from '@util/unwrap'; -import { htmlReady } from '@util/htmlReady'; +exportWindow(jQuery, '$'); + 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); - while (target.attr('href') === undefined) { - target = target.parent('a'); - if (target.length == 0) { + let target: HTMLElement | null = e.target as HTMLElement; + while (target !== null) { + target = target.parentElement; + 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(); diff --git a/hwe/ts/select_general_from_pool.ts b/hwe/ts/select_general_from_pool.ts index 54a9058a..f194fd4c 100644 --- a/hwe/ts/select_general_from_pool.ts +++ b/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 = '
\
'; const templateSpecial = - '<%text%>\ + '<%text%>\ \ <%info%>\ \ diff --git a/hwe/ts/select_npc.ts b/hwe/ts/select_npc.ts index e124806f..092eca73 100644 --- a/hwe/ts/select_npc.ts +++ b/hwe/ts/select_npc.ts @@ -104,7 +104,7 @@ const templateGeneralCard =
'; const templateSpecial = - '<%text%>\ + '<%text%>\ \ <%info%>\ \ diff --git a/hwe/ts/v_main.ts b/hwe/ts/v_main.ts index 07325edb..8a8aed66 100644 --- a/hwe/ts/v_main.ts +++ b/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'); diff --git a/package.json b/package.json index 97a318d0..d1b8245b 100644 --- a/package.json +++ b/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",