참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 오페라: Ctrl-F5를 입력.
(function () {
    'use strict';

    var ROOT_SELECTOR = '.clbi-nations-panel-stack, .clbi-nations-globe-window, .nation-list-manager, .doc-panel, .doc-tab-bar';

    function keyOf(event) {
        return String(event && event.key || '').toLowerCase();
    }

    function hasCtrlOrMeta(event) {
        return !!(event && (event.ctrlKey || event.metaKey));
    }

    function isEditableTarget(target) {
        var tag;

        if (!target) return false;
        if (target.isContentEditable) return true;
        if (target.closest && target.closest('[contenteditable="true"]')) return true;

        tag = String(target.tagName || '').toUpperCase();
        return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
    }

    function clickElement(element) {
        if (!element || element.disabled) return false;
        element.click();
        return true;
    }

    function prevent(event) {
        event.preventDefault();
        event.stopPropagation();
        if (event.stopImmediatePropagation) event.stopImmediatePropagation();
    }


    function findNationListManagerSave(target) {
        var root = target && target.closest ? target.closest('.nation-list-manager') : null;

        if (!root) root = document.querySelector('.nation-list-manager');
        if (!root) return null;

        return root.querySelector('.nation-list-save');
    }

    function findWikiEditSave() {
        return document.querySelector('#wpSave, input[name="wpSave"], button[name="wpSave"]');
    }

    function handleSaveShortcut(event) {
        var saveButton;

        if (!hasCtrlOrMeta(event) || event.shiftKey || event.altKey || keyOf(event) !== 's') return false;

        saveButton = findNationListManagerSave(event.target) || findWikiEditSave();
        if (!saveButton) return false;

        prevent(event);
        clickElement(saveButton);
        return true;
    }

    function setActiveButton(buttons, activeButton, activeClass) {
        buttons.forEach(function (button) {
            var isActive = button === activeButton;
            var cls = activeClass || 'is-active';

            if (button.classList.contains(cls) !== isActive) {
                button.classList.toggle(cls, isActive);
            }
            if (button.getAttribute('aria-selected') !== (isActive ? 'true' : 'false')) {
                button.setAttribute('aria-selected', isActive ? 'true' : 'false');
            }
            if (button.getAttribute('tabindex') !== (isActive ? '0' : '-1')) {
                button.setAttribute('tabindex', isActive ? '0' : '-1');
            }
        });
    }

    function showMatchingPanels(panels, attrName, value, activeClass) {
        panels.forEach(function (panel) {
            var isActive = panel.getAttribute(attrName) === value;
            var persistentContinent = attrName === 'data-continent-panel' &&
                panel.closest &&
                panel.closest('.clbi-nations-tabpanel.clbi-nations-continent-cache');

            if (panel.classList.contains(activeClass || 'is-active') !== isActive) {
                panel.classList.toggle(activeClass || 'is-active', isActive);
            }

            if (persistentContinent) {
                if (panel.hasAttribute('hidden')) panel.removeAttribute('hidden');
                if (panel.getAttribute('aria-hidden') !== (isActive ? 'false' : 'true')) {
                    panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
                }
                if (panel.getAttribute('data-clbi-panel-warm') !== '1') {
                    panel.setAttribute('data-clbi-panel-warm', '1');
                }
                return;
            }

            if (isActive) {
                if (panel.hasAttribute('hidden')) panel.removeAttribute('hidden');
                if (panel.getAttribute('aria-hidden') !== 'false') panel.setAttribute('aria-hidden', 'false');
            } else {
                if (!panel.hasAttribute('hidden')) panel.setAttribute('hidden', 'hidden');
                if (panel.getAttribute('aria-hidden') !== 'true') panel.setAttribute('aria-hidden', 'true');
            }
        });
    }

    function clearNationContinentKeyboardHover(tabPanel) {
        if (!tabPanel) return;

        tabPanel.classList.remove('is-keyboard-switching');
        tabPanel.removeAttribute('data-clbi-hover-suppress-continent');
    }

    function getStaleNationContinentTab(tabPanel, activeTab) {
        var hoveredTabs = [];
        var focusedTab;

        if (!tabPanel || !tabPanel.querySelectorAll) return null;

        try {
            hoveredTabs = Array.from(tabPanel.querySelectorAll('.clbi-nations-tabpanel-tab[data-continent]:hover'));
        } catch (error) {
            hoveredTabs = [];
        }

        hoveredTabs = hoveredTabs.filter(function (tab) {
            return tab !== activeTab &&
                tabPanel.contains(tab) &&
                !(tab.classList.contains('is-active') || tab.getAttribute('aria-selected') === 'true');
        });

        if (hoveredTabs.length) return hoveredTabs[hoveredTabs.length - 1];

        focusedTab = document.activeElement && document.activeElement.closest ?
            document.activeElement.closest('.clbi-nations-tabpanel-tab[data-continent]') : null;

        if (focusedTab &&
            focusedTab !== activeTab &&
            tabPanel.contains(focusedTab) &&
            !(focusedTab.classList.contains('is-active') || focusedTab.getAttribute('aria-selected') === 'true')) {
            return focusedTab;
        }

        return null;
    }

    function markNationContinentKeyboardHover(tabPanel, activeTab) {
        var staleTab = getStaleNationContinentTab(tabPanel, activeTab);
        var continent;

        if (!staleTab) {
            clearNationContinentKeyboardHover(tabPanel);
            return;
        }

        continent = staleTab.getAttribute('data-continent') || '';

        tabPanel.classList.add('is-keyboard-switching');
        if (continent) {
            tabPanel.setAttribute('data-clbi-hover-suppress-continent', continent);
        } else {
            tabPanel.removeAttribute('data-clbi-hover-suppress-continent');
        }
    }

    function isHiddenByState(element, stopAt) {
        var node = element;
        var style;

        while (node && node !== document && node.nodeType === 1) {
            if (node.hasAttribute('hidden') || node.getAttribute('aria-hidden') === 'true') return true;

            if (window.getComputedStyle) {
                style = window.getComputedStyle(node);
                if (style && (style.display === 'none' || style.visibility === 'hidden')) return true;
            }

            if (node === stopAt) break;
            node = node.parentElement;
        }

        return false;
    }

    function getActiveNationEraScope() {
        var stack = document.querySelector('.clbi-nations-panel-stack');
        var currentEra;
        var contents;
        var content;

        if (!stack) return document;

        currentEra = stack.getAttribute('data-nations-current-era') || stack.getAttribute('data-era') || '';
        contents = Array.from(stack.querySelectorAll('.clbi-nations-era-content[data-era-content]'));

        if (currentEra) {
            content = contents.find(function (panel) {
                return panel.getAttribute('data-era-content') === currentEra && !isHiddenByState(panel, stack);
            });
            if (content) return content;
        }

        content = contents.find(function (panel) {
            return panel.classList.contains('is-active') && !isHiddenByState(panel, stack);
        });
        if (content) return content;

        content = contents.find(function (panel) {
            return !isHiddenByState(panel, stack);
        });

        return content || stack;
    }

    function findVisibleDescendant(root, selector) {
        var items = Array.from((root || document).querySelectorAll(selector));
        var visible = items.find(function (item) {
            return !isHiddenByState(item, root || document);
        });

        return visible || items[0] || null;
    }

    function switchNationHistoryYear(direction) {
        var scope = getActiveNationEraScope();
        var historyPanel = findVisibleDescendant(scope, '.clbi-nations-history-panel');
        var queryRoot = historyPanel || scope;
        var buttons = Array.from(queryRoot.querySelectorAll('.clbi-nations-history-year-button[data-year]'));
        var panels = Array.from(queryRoot.querySelectorAll('.clbi-nations-history-page[data-year-panel]'));
        var activeIndex;
        var nextIndex;
        var nextButton;
        var year;

        if (!buttons.length || !panels.length) return false;

        activeIndex = buttons.findIndex(function (button) {
            return button.classList.contains('is-active') || button.getAttribute('aria-selected') === 'true';
        });
        if (activeIndex < 0) activeIndex = 0;

        nextIndex = (activeIndex + direction + buttons.length) % buttons.length;
        nextButton = buttons[nextIndex];
        year = nextButton.getAttribute('data-year');

        setActiveButton(buttons, nextButton, 'is-active');
        showMatchingPanels(panels, 'data-year-panel', year, 'is-active');
        return true;
    }

    function switchNationContinent(direction) {
        var scope = getActiveNationEraScope();
        var tabPanel = findVisibleDescendant(scope, '.clbi-nations-tabpanel[data-clbi-nations-simple], .clbi-nations-tabpanel');
        var queryRoot = tabPanel || scope;
        var tabs = Array.from(queryRoot.querySelectorAll('.clbi-nations-tabpanel-tab[data-continent]'));
        var panels = Array.from(queryRoot.querySelectorAll('.clbi-nations-tabpanel-continent[data-continent-panel]'));
        var activeIndex;
        var nextIndex;
        var nextTab;
        var continent;

        if (!tabs.length || !panels.length) return false;

        activeIndex = tabs.findIndex(function (tab) {
            return tab.classList.contains('is-active') || tab.getAttribute('aria-selected') === 'true';
        });
        if (activeIndex < 0) activeIndex = 0;

        nextIndex = (activeIndex + direction + tabs.length) % tabs.length;
        nextTab = tabs[nextIndex];
        continent = nextTab.getAttribute('data-continent');

        if (window.CLBI_NATIONS_PANEL && typeof window.CLBI_NATIONS_PANEL.cancelPanelHoverFocus === 'function') {
            window.CLBI_NATIONS_PANEL.cancelPanelHoverFocus(tabPanel);
        }

        setActiveButton(tabs, nextTab, 'is-active');
        showMatchingPanels(panels, 'data-continent-panel', continent, 'is-active');
        markNationContinentKeyboardHover(tabPanel, nextTab);
        return true;
    }

    function isVisibleElement(element) {
        var rect;
        var style;

        if (!element || !element.getClientRects || !element.getClientRects().length) return false;

        style = window.getComputedStyle ? window.getComputedStyle(element) : null;
        if (style && (style.display === 'none' || style.visibility === 'hidden')) return false;

        rect = element.getBoundingClientRect();
        return rect.width > 0 && rect.height > 0;
    }

    function switchNationEra(direction) {
        var selector;
        var buttons;
        var visibleButton;

        if (window.CLBI_NATIONS_PANEL && typeof window.CLBI_NATIONS_PANEL.previewMoveEra === 'function') {
            if (window.CLBI_NATIONS_PANEL.previewMoveEra(direction)) return true;
        }

        if (window.CLBI_NATIONS_PANEL && typeof window.CLBI_NATIONS_PANEL.moveEra === 'function') {
            if (window.CLBI_NATIONS_PANEL.moveEra(direction)) return true;
        }

        selector = direction < 0 ? '.clbi-nations-era-side-button-left' : '.clbi-nations-era-side-button-right';
        buttons = Array.from(document.querySelectorAll(selector));

        if (!buttons.length) return false;

        visibleButton = buttons.find(function (button) {
            return isVisibleElement(button);
        });

        if (!visibleButton) visibleButton = buttons[0];
        return clickElement(visibleButton);
    }

    function switchDocTab(direction) {
        var bar = document.querySelector('.doc-tab-bar');
        var tabs;
        var panel;
        var display;
        var activeIndex;
        var nextIndex;
        var nextTab;
        var ref;
        var source;

        if (!bar) return false;

        tabs = Array.from(bar.querySelectorAll('.doc-tab'));
        if (!tabs.length) return false;

        panel = bar.closest('.doc-panel');
        display = panel ? panel.querySelector('.doc-display') : null;
        if (!display) display = document.getElementById('doc-main-display');
        if (!display) return false;

        activeIndex = tabs.findIndex(function (tab) {
            return tab.classList.contains('active');
        });
        if (activeIndex < 0) activeIndex = 0;

        nextIndex = (activeIndex + direction + tabs.length) % tabs.length;
        nextTab = tabs[nextIndex];

        tabs.forEach(function (tab, index) {
            tab.classList.toggle('active', index === nextIndex);
        });

        ref = nextTab.dataset ? nextTab.dataset.ref : '';
        source = ref ? document.getElementById(ref) : null;
        display.innerHTML = source ? source.innerHTML : (nextTab.dataset ? (nextTab.dataset.content || '') : '');
        return true;
    }

    function handleNationsShortcuts(event) {
        var key = keyOf(event);
        var direction;
        var handled = false;

        if (isEditableTarget(event.target)) return false;
        if (key !== 'q' && key !== 'e') return false;

        direction = key === 'q' ? -1 : 1;

        if (event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
            handled = switchNationHistoryYear(direction);
        } else if (hasCtrlOrMeta(event) && !event.shiftKey && !event.altKey) {
            handled = switchNationContinent(direction);
        } else if (!event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
            handled = switchNationEra(direction);
        }

        if (!handled) return false;

        prevent(event);
        return true;
    }

    function handleDocTabShortcuts(event) {
        var key = keyOf(event);
        var direction;

        if (isEditableTarget(event.target)) return false;
        if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return false;
        if (key !== 'q' && key !== 'e') return false;

        direction = key === 'q' ? -1 : 1;
        if (!switchDocTab(direction)) return false;

        prevent(event);
        return true;
    }

    function handleNationsShortcutKeyup(event) {
        var key = keyOf(event);

        if (isEditableTarget(event.target)) return false;
        if (key !== 'q' && key !== 'e') return false;
        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return false;
        if (!window.CLBI_NATIONS_PANEL || typeof window.CLBI_NATIONS_PANEL.commitEraPreview !== 'function') return false;

        return window.CLBI_NATIONS_PANEL.commitEraPreview();
    }

    function handleKeydown(event) {
        if (handleSaveShortcut(event)) return;
        if (handleNationsShortcuts(event)) return;
        handleDocTabShortcuts(event);
    }

    function handleKeyup(event) {
        if (handleNationsShortcutKeyup(event)) {
            prevent(event);
        }
    }

    document.addEventListener('keydown', handleKeydown, true);
    document.addEventListener('keyup', handleKeyup, true);

    window.Shortcuts = window.Shortcuts || {};
    window.Shortcuts.version = '20260706-seamless-layer-focus-cache';
    window.Shortcuts.scope = ROOT_SELECTOR;
}());