파일 이식(0.31.1)

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/escapeHtml.ts

@@ -0,0 +1,19 @@
+/**
+ * <>& 등을 html에서도 그대로 보이도록 escape주는 함수
+ * @see https://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
+ */
+const entityMap: { [v: string]: string } = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+    '`': '&#x60;',
+    '=': '&#x3D;'
+};
+export function escapeHtml(string: string): string{
+    return String(string).replace(/[&<>"'`=/]/g, function (s: string) {
+        return entityMap[s];
+    });
+}

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

@@ -0,0 +1,99 @@
+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 { reloadWorldMap } from '@/map';
+import { refreshMsg } from '@/msg';
+
+exportWindow(jQuery, '$');
+
+
+htmlReady(() => {
+    for(const refreshBtn of document.querySelectorAll('.refreshPage')){
+        refreshBtn.addEventListener('click', function () {
+            document.location.reload();
+            return false;
+        })
+    }
+
+    for(const openWindowBtn of document.querySelectorAll('.open-window')){
+        openWindowBtn.addEventListener('click', function (e) {
+            e.preventDefault();
+            console.log(e);
+            let target: HTMLElement | null = e.target as HTMLElement;
+            while (target !== null) {
+                if(target.tagName != 'a' && (target as HTMLAnchorElement).href){
+                    break;
+                }
+                target = target.parentElement;
+            }
+
+            if (!target) {
+                return;
+            }
+
+            window.open((target as HTMLAnchorElement).href);
+        });
+    }
+
+    activateFlip();
+    initTooltip();
+
+    void reloadWorldMap({
+        hrefTemplate: 'b_currentCity.php?citylist={0}',
+        useCachedMap: true
+    });
+
+    setInterval(function() {
+        void refreshMsg();
+    }, 5000);
+});
+
+(() => {
+
+    let finInit = false;
+
+    let nationMsgBox!: HTMLElement;
+    let nationMsg!: HTMLElement;
+    let nationMsgHeight: number | undefined = undefined;
+
+    function init() {
+        if (finInit) {
+            return false;
+        }
+        const _nationMsgBox = document.getElementById('nation-msg-box');
+        if (!_nationMsgBox) {
+            return false;
+        }
+        finInit = true;
+
+        nationMsgBox = _nationMsgBox;
+        nationMsg = unwrap(document.getElementById('nation-msg'));
+    }
+
+    function onScroll() {
+        if (!finInit && !init()) return;
+
+        if (nationMsgBox.offsetWidth < nationMsg.offsetWidth) {
+            if (nationMsgHeight === undefined) {
+                nationMsgHeight = nationMsgBox.offsetHeight;
+                nationMsgBox.style.height = `${nationMsgHeight / 2}px`;
+            }
+        }
+        else {
+            if (nationMsgBox.style.height) {
+                nationMsgHeight = undefined;
+                nationMsgBox.style.height = '';
+            }
+        }
+    }
+
+    htmlReady(() => {
+        init();
+        onScroll();
+        window.addEventListener('scroll', onScroll, true);
+        window.addEventListener('orientationchange', onScroll, true);
+    });
+})();