@kangsicj/dcinsideenhancer 1.2.2 → 1.3.0

package/README.en.md

@@ -64,7 +64,8 @@ One userscript for DCInside on mobile and PC: smart blocking, endless lists, ima
 - Come back from a post and you're **right where you left off**
 - Cleaner read-post colors and a back-to-top button
 - Keyboard shortcuts on PC: **J/K** next/previous post, Enter to open, P to preview, S to scrap, / to search
-- On PC, hover a title to **preview the whole post** — blocked images and words stay hidden there too
+- On PC, **press and hold** a title to preview the whole post, iPhone-style — blocked images and words stay hidden there too
+- **Pin the order** of recently visited galleries — it stays put wherever you go
 
 </td>
 </tr>

package/README.md

@@ -64,7 +64,8 @@
 - 글을 보고 돌아오면 **보던 위치 그대로**
 - 읽은 글 색 정리, 맨 위로 버튼
 - PC 키보드 단축키: **J/K** 다음·이전 글, Enter 열기, P 미리보기, S 스크랩, / 검색
-- PC는 제목에 마우스를 올리면 **글 전체 미리보기** — 차단 이미지·단어는 미리보기에서도 가림
+- PC는 아이폰처럼 제목을 **길게 누르면 글 전체 미리보기** — 차단 이미지·단어는 미리보기에서도 가림
+- 최근 방문 갤러리 **순서 고정** — 어디를 가도 정한 순서 그대로
 
 </td>
 </tr>

package/dist/DCInsideEnhancer.meta.js

@@ -2,7 +2,7 @@
 // @name         DCInside Enhancer
 // @name:ko      디시 인핸서
 // @namespace    https://github.com/kangsicj/DCInsideEnhancer
-// @version      1.2.2
+// @version      1.3.0
 // @description  DCInside filter & enhancer — mobile & PC. Block users/words/heads/notices/images & GIFs across posts, infinite list, zoom viewer, theme sync, encrypted multi-device sync.
 // @description:ko 디시인사이드 차단·편의 기능 (모바일·PC) - 유저·단어(제목/본문)·말머리·공지 차단, 같은/비슷한 이미지·움짤 모든 글 차단, 디시콘 제거, 차단 미디어 데이터 절약, 목록 자동 보충·무한 스크롤·뒤로 가기 위치 복원, 스크랩, 이미지 확대뷰 개선, 야간모드 자동 연동, 암호화 기기 간 동기화
 // @author       kangsicj

package/dist/DCInsideEnhancer.user.js

@@ -2,7 +2,7 @@
 // @name         DCInside Enhancer
 // @name:ko      디시 인핸서
 // @namespace    https://github.com/kangsicj/DCInsideEnhancer
-// @version      1.2.2
+// @version      1.3.0
 // @description  DCInside filter & enhancer — mobile & PC. Block users/words/heads/notices/images & GIFs across posts, infinite list, zoom viewer, theme sync, encrypted multi-device sync.
 // @description:ko 디시인사이드 차단·편의 기능 (모바일·PC) - 유저·단어(제목/본문)·말머리·공지 차단, 같은/비슷한 이미지·움짤 모든 글 차단, 디시콘 제거, 차단 미디어 데이터 절약, 목록 자동 보충·무한 스크롤·뒤로 가기 위치 복원, 스크랩, 이미지 확대뷰 개선, 야간모드 자동 연동, 암호화 기기 간 동기화
 // @author       kangsicj
@@ -75,7 +75,7 @@
     // 0. 설정·상수
     // =========================================================
 
-    const SCRIPT_VERSION = '1.2.2';
+    const SCRIPT_VERSION = '1.3.0';
     const PROJECT_URL = 'https://github.com/kangsicj/DCInsideEnhancer';
     const DONATE_URL = 'https://fairy.hada.io/@jinny#support';
 
@@ -106,6 +106,7 @@
         syncLock: 'dc_sync_lock',
         syncRt: 'dc_sync_rt',
         recent: 'dc_recent_galls',
+        recentOrder: 'dc_recent_order',
         recentNative: 'dc_recent_native',
         searchHistory: 'dc_search_history',
         blockHits: 'dc_block_hits',
@@ -221,11 +222,13 @@
         hideAdSlots: true,
         hideNewsRows: true,
         hideCommentAds: true,
+        hideCommentFab: true,
         hideSilbeAlarm: true,
         alarmBubble: true,
         alarmKeepPolling: true,
         keyboardShortcuts: true,
         hoverPreview: true,
+        previewHover: false,
         alarmSystemNotify: false,
         pcFitWidth: true,
         autoHideScrollbar: true,
@@ -474,7 +477,17 @@
             html.dc-pc-fit .dcwrap :is(.cmt_info, .reply_info) > .fr { flex: 0 0 auto; float: none !important; margin-left: 10px; }
 
             html.dc-pc-fit .dcwrap .writing_view_box { float: none !important; width: auto !important; }
-            html.dc-pc-fit .dcwrap .writing_view_box .write_div { width: auto !important; }
+            html.dc-pc-fit .dcwrap .writing_view_box .write_div {
+                width: auto !important;
+                max-width: min(100%, 900px) !important;
+                margin-left: auto !important;
+                margin-right: auto !important;
+            }
+            html.dc-pc-fit .dcwrap .writing_view_box .write_div :is(img, video, iframe) { margin-left: auto; margin-right: auto; }
+            html.dc-pc-fit .dcwrap .writing_view_box .write_div img { display: block; height: auto; }
+
+            html.dc-pc-fit .dcwrap .comment_count { display: flow-root; }
+            html.dc-pc-fit .dcwrap :is(.cmt_list, .comment_box) { clear: both; }
 
             html.dc-pc-fit .dcwrap .bottom_paging_wrap {
                 display: flex !important;
@@ -507,6 +520,7 @@
         html.dc-ad-slots-off .dcwrap :is(.stickyunit, .rightbanner, .rightbanner1, .banner_box, .ad_bottom_list, #ad_floating, .kakao_ad_area, .ad_top, .view_ad_wrap, .power_link, .con_banner.writing_banbox, #ad_nv_slot, ins.adsbygoogle),
         html.dc-ad-slots-off :is(.adv-group, li.adv-inner, section.grid.clkhigh, #home-ad, .kakao_ad_area) { display: none !important; }
         html.dc-news-rows-off :is(table.gall_list tr.ub-content[data-type="icon_fnews"], .gall-detail-lst > li:has(.sp-lst-fnews)) { display: none !important; }
+        html.dc-comment-fab-off :is(#cmt_fab, .fab-wrap:has(> #cmt_fab)) { display: none !important; }
         html.dc-comment-ads-off :is(.comment_box li.ub-content.dory, .comment_box li.cmt_pw_ad, .all-comment-lst > li.dc-comment-boy) { display: none !important; }
         html.dc-silbe-alarm-off :is(.alarm-popup.silbe-alarm, .rtbAlarmPopup) { display: none !important; }
         html.dc-alarm-bubble :is(.alarm-popup.alarm-default, .alarmPopup) { display: none !important; }
@@ -1223,6 +1237,9 @@
         #dc-custom-modal .dc-btn.mini.id-type { color: var(--dc-type-id); }
         #dc-custom-modal .dc-btn.mini.nick-type { color: var(--dc-text-dim); }
 
+        #dc-custom-modal .dc-btn:disabled { opacity: .35; cursor: default; }
+        #dc-custom-modal .dc-btn.on-state { background: var(--dc-success); }
+
         #dc-custom-modal .dc-btn.mini.on {
             border-color: var(--dc-danger);
             background: var(--dc-danger);
@@ -2030,6 +2047,25 @@
             font-weight: 700;
         }
 
+        #dc-preview-backdrop {
+            position: fixed;
+            inset: 0;
+            z-index: 99996;
+            background: rgba(0,0,0,.18);
+            -webkit-backdrop-filter: blur(14px) saturate(1.1);
+            backdrop-filter: blur(14px) saturate(1.1);
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity .2s ease, visibility 0s linear .2s;
+        }
+
+        html.dc-dark #dc-preview-backdrop { background: rgba(0,0,0,.4); }
+        #dc-preview-backdrop.show { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
+
+        #dc-preview.dc-pv-peek { transform: var(--dc-pv-from, translate(-50%, -50%) scale(.9)); transition: opacity .18s ease, transform .32s cubic-bezier(.2,.9,.3,1.15), visibility 0s linear .32s; }
+        #dc-preview.dc-pv-peek.show { transform: translate(-50%, -50%); transition: opacity .18s ease, transform .32s cubic-bezier(.2,.9,.3,1.15), visibility 0s; }
+        #dc-preview.dc-pv-peek { box-shadow: 0 24px 80px rgba(0,0,0,.35); }
+
         .dc-pv-anchor { text-decoration: underline !important; text-decoration-color: var(--dc-accent-ink) !important; }
 
         .dc-key-cursor { outline: 2px solid var(--dc-accent-ink) !important; outline-offset: -2px; background: var(--dc-accent-soft) !important; }
@@ -3158,6 +3194,7 @@
         root.classList.toggle('dc-ad-slots-off', settings.hideAdSlots !== false);
         root.classList.toggle('dc-news-rows-off', settings.hideNewsRows !== false);
         root.classList.toggle('dc-comment-ads-off', settings.hideCommentAds !== false);
+        root.classList.toggle('dc-comment-fab-off', settings.hideCommentFab !== false);
         root.classList.toggle('dc-silbe-alarm-off', settings.hideSilbeAlarm !== false);
         root.classList.toggle('dc-alarm-bubble', settings.alarmBubble !== false);
         root.classList.toggle('dc-hide-scrollbar', settings.autoHideScrollbar !== false && root.classList.contains('dc-classic-scrollbar'));
@@ -9507,7 +9544,10 @@
                 link.addEventListener('click', () => closeBlockModal());
                 actionsEl.appendChild(link);
             } else {
-                actionsEl.appendChild(makeButton(action.label, `mini ${action.className || ''}`, action.onClick));
+                const btn = makeButton(action.label, `mini ${action.className || ''}`, action.onClick);
+
+                btn.disabled = !!action.disabled;
+                actionsEl.appendChild(btn);
             }
         });
 
@@ -10405,6 +10445,14 @@
             off: '댓글돌이를 그대로 보여 줍니다.',
             refresh: 'root'
         },
+        {
+            group: 'clean',
+            key: 'hideCommentFab',
+            name: "떠 있는 '댓글로 이동' 버튼 숨기기 (모바일)",
+            on: '글 화면 오른쪽 아래에 떠 있는 댓글 버튼을 숨깁니다. 본문 아래 [댓글] 링크와 차단 관리 버튼은 그대로입니다.',
+            off: '댓글로 이동 버튼을 보여 줍니다.',
+            refresh: 'root'
+        },
         {
             group: 'clean',
             key: 'hideAdSlots',
@@ -10490,9 +10538,18 @@
         {
             group: 'list',
             key: 'hoverPreview',
-            name: '제목에 마우스를 올리면 글 미리보기 (PC)',
-            on: '목록 제목 위에 잠깐 머무르면 글 전체를 옆 창에 보여 줍니다. 창 안에서 스크롤해 읽고, 스크랩·작성자 차단도 바로 할 수 있습니다. 차단한 이미지·단어는 미리보기에서도 가립니다. 키보드로 고른 글은 P 로 엽니다.',
-            off: '제목을 눌러야 글을 봅니다.',
+            name: '제목을 길게 누르면 글 미리보기 (PC)',
+            on: '아이폰처럼 목록 제목을 길게 누르면 화면이 흐려지며 글 전체가 가운데에 떠오릅니다. 짧게 누르면 평소처럼 글로 갑니다. 창에서 본문을 누르면 글로 이동, 바깥을 누르거나 Esc 로 닫습니다. 스크랩·작성자 차단도 바로 할 수 있고, 차단한 이미지·단어는 미리보기에서도 가립니다. 키보드로 고른 글은 P 로 엽니다.',
+            off: '미리보기를 쓰지 않습니다.',
+            refresh: 'root'
+        },
+        {
+            group: 'list',
+            key: 'previewHover',
+            parent: 'hoverPreview',
+            name: '마우스를 올려 멈춰도 미리보기 (PC)',
+            on: '제목 위에 마우스를 잠시 멈추면 누르지 않아도 미리보기가 뜹니다. 창 밖으로 마우스가 나가면 닫힙니다.',
+            off: '길게 눌렀을 때만 미리보기가 뜹니다.',
             refresh: 'root'
         },
         {
@@ -11759,7 +11816,7 @@
         { key: 'words', label: '단어', fields: ['keywords', 'titles'] },
         { key: 'heads', label: '말머리', fields: ['heads'] },
         { key: 'scraps', label: '스크랩', fields: ['scraps'] },
-        { key: 'recent', label: '최근 갤러리', fields: ['recent'] },
+        { key: 'recent', label: '최근 갤러리', fields: ['recent', 'recentOrder'] },
         { key: 'search', label: '검색 기록', fields: ['search'] },
         { key: 'settings', label: '설정', fields: ['settings'] }
     ];
@@ -11929,6 +11986,7 @@
         scraps: scraps.map(item => ({ ...item })),
         settings: syncedSettings(),
         recent: collectRecentForSync(),
+        recentOrder: collectRecentOrderForSync(),
         search: collectSearchForSync(),
         hits: collectHitsForSync()
     });
@@ -12038,6 +12096,7 @@
             scraps: mergeScraps(local.scraps, base && base.scraps, remote && remote.scraps),
             settings: mergeSettings(local.settings, base && base.settings, remote && remote.settings),
             recent: mergeRecent(local.recent, base && base.recent, remote && remote.recent),
+            recentOrder: mergeRecentOrder(local.recentOrder, remote && remote.recentOrder),
             search: mergeSearchHistory(local.search, base && base.search, remote && remote.search),
             hits: mergeBlockHits(local.hits, remote && remote.hits)
         };
@@ -12093,6 +12152,7 @@
         const data = collectSyncData();
 
         delete data.recent;
+        delete data.recentOrder;
         delete data.search;
         delete data.hits;
 
@@ -12100,6 +12160,7 @@
     };
 
     const applySyncData = data => {
+        const orderChanged = data && 'recentOrder' in data ? applyRecentOrderFromSync(data.recentOrder) : false;
         const recentChanged = data && 'recent' in data ? applyRecentFromSync(data.recent) : false;
         const searchChanged = data && 'search' in data ? applySearchFromSync(data.search) : false;
         const hitsChanged = data && 'hits' in data ? applyHitsFromSync(data.hits) : false;
@@ -12157,7 +12218,7 @@
             refreshAfterBlockChange();
         }
 
-        return changed || recentChanged || searchChanged || hitsChanged;
+        return changed || recentChanged || orderChanged || searchChanged || hitsChanged;
     };
 
     const saveSyncUndo = (before, incoming, summary, from) => {
@@ -13401,6 +13462,38 @@
         };
     };
 
+    const readRecentOrder = () => {
+        const stored = readObject(STORAGE.recentOrder);
+
+        return {
+            fixed: stored.fixed === true,
+            keys: Array.isArray(stored.keys) ? stored.keys.filter(key => typeof key === 'string').slice(0, 200) : [],
+            at: Number(stored.at) || 0
+        };
+    };
+
+    let recentOrder = readRecentOrder();
+
+    const saveRecentOrder = patch => {
+        recentOrder = { ...recentOrder, ...patch, at: Date.now() };
+        writeJson(STORAGE.recentOrder, recentOrder);
+    };
+
+    const orderRecent = list => {
+        const byTime = [...list].sort((a, b) => b.at - a.at);
+
+        if (!recentOrder.fixed) {
+            return byTime;
+        }
+
+        const index = new Map(recentOrder.keys.map((key, i) => [key, i]));
+        const known = byTime.filter(item => index.has(recentKeyOf(item))).sort((a, b) => index.get(recentKeyOf(a)) - index.get(recentKeyOf(b)));
+
+        const fresh = byTime.filter(item => !index.has(recentKeyOf(item))).reverse();
+
+        return [...known, ...fresh];
+    };
+
     const tidyRecent = list => {
         const best = new Map();
 
@@ -13413,7 +13506,62 @@
             }
         });
 
-        return [...best.values()].sort((a, b) => b.at - a.at).slice(0, RECENT_LIMIT);
+        const kept = [...best.values()].sort((a, b) => b.at - a.at).slice(0, RECENT_LIMIT);
+        const ordered = orderRecent(kept);
+
+        if (recentOrder.fixed) {
+            const keys = ordered.map(recentKeyOf);
+
+            if (JSON.stringify(keys) !== JSON.stringify(recentOrder.keys.filter(key => keys.includes(key)))) {
+                recentOrder = { ...recentOrder, keys };
+                writeJson(STORAGE.recentOrder, recentOrder);
+            }
+        }
+
+        return ordered;
+    };
+
+    const setRecentFixed = fixed => {
+        saveRecentOrder({ fixed, keys: recentGalls.map(recentKeyOf) });
+        recentGalls = tidyRecent(recentGalls);
+        writeJson(STORAGE.recent, recentGalls);
+        exportNativeRecent();
+        reorderNativeRecentDom();
+    };
+
+    const moveRecent = (item, step) => {
+        const list = [...recentGalls];
+        const from = list.indexOf(item);
+        const to = Math.max(0, Math.min(list.length - 1, from + step));
+
+        if (from < 0 || from === to) {
+            return;
+        }
+
+        list.splice(to, 0, ...list.splice(from, 1));
+        saveRecentOrder({ fixed: true, keys: list.map(recentKeyOf) });
+        recentGalls = tidyRecent(list);
+        writeJson(STORAGE.recent, recentGalls);
+        exportNativeRecent();
+        reorderNativeRecentDom();
+    };
+
+    const reorderNativeRecentDom = () => {
+        if (!IS_PC_SITE || !recentOrder.fixed) {
+            return;
+        }
+
+        const index = new Map(recentGalls.map((item, i) => [item.id, i]));
+
+        document.querySelectorAll('#visit_history .vst_listbox, .visit_tablist .under_listbox, #visit_history_lyr .vst_list').forEach(box => {
+            const items = [...box.children].filter(li => li.tagName === 'LI');
+            const idOf = li => li.querySelector('[data-id]')?.getAttribute('data-id') || (/lately_gall_(\S+)/.exec(li.className) || [])[1] || '';
+            const sorted = [...items].sort((a, b) => (index.has(idOf(a)) ? index.get(idOf(a)) : 999) - (index.has(idOf(b)) ? index.get(idOf(b)) : 999));
+
+            if (sorted.some((li, i) => li !== items[i])) {
+                sorted.forEach(li => box.appendChild(li));
+            }
+        });
     };
 
     let recentGalls = tidyRecent(readArray(STORAGE.recent));
@@ -13636,6 +13784,31 @@
         saveRecent();
     };
 
+    const watchNativeRecentDom = () => {
+        if (!IS_PC_SITE) {
+            return;
+        }
+
+        const target = document.getElementById('visit_history');
+
+        if (!target) {
+            return;
+        }
+
+        let timer = null;
+
+        new MutationObserver(() => {
+            if (!recentOrder.fixed) {
+                return;
+            }
+
+            clearTimeout(timer);
+            timer = setTimeout(reorderNativeRecentDom, 60);
+        }).observe(target, { childList: true, subtree: true });
+
+        reorderNativeRecentDom();
+    };
+
     const initRecentEarly = () => {
         importNativeRecent();
         exportNativeRecent();
@@ -13645,10 +13818,12 @@
         importNativeRecent();
         recordGalleryVisit();
         exportNativeRecent();
+        watchNativeRecentDom();
 
         const follow = () => {
-            if (document.visibilityState === 'visible' && importNativeRecent()) {
+            if (document.visibilityState === 'visible' && (importNativeRecent() || recentOrder.fixed)) {
                 exportNativeRecent();
+                reorderNativeRecentDom();
             }
         };
 
@@ -13658,6 +13833,31 @@
 
     const collectRecentForSync = () => recentGalls.map(item => ({ ...item }));
 
+    const collectRecentOrderForSync = () => ({ ...recentOrder, keys: [...recentOrder.keys] });
+
+    const mergeRecentOrder = (local, remote) => {
+        if (!remote || typeof remote !== 'object' || !Array.isArray(remote.keys)) {
+            return local;
+        }
+
+        return (Number(remote.at) || 0) > (Number(local && local.at) || 0) ? remote : local;
+    };
+
+    const applyRecentOrderFromSync = data => {
+        if (!data || typeof data !== 'object' || !Array.isArray(data.keys) || (Number(data.at) || 0) <= recentOrder.at) {
+            return false;
+        }
+
+        recentOrder = { fixed: data.fixed === true, keys: data.keys.filter(key => typeof key === 'string').slice(0, 200), at: Number(data.at) };
+        writeJson(STORAGE.recentOrder, recentOrder);
+        recentGalls = tidyRecent(recentGalls);
+        writeJson(STORAGE.recent, recentGalls);
+        exportNativeRecent();
+        reorderNativeRecentDom();
+
+        return true;
+    };
+
     const mergeRecent = (local = [], base, remote) => {
         if (!Array.isArray(remote)) {
             return tidyRecent(local || []);
@@ -14246,18 +14446,35 @@
             return;
         }
 
+        const orderRow = h('div', 'dc-btn-row');
+
+        orderRow.appendChild(makeButton(recentOrder.fixed ? '📌 순서 고정 중 · 끄기' : '📌 지금 순서로 고정', recentOrder.fixed ? 'wide on-state' : 'wide', () => {
+            setRecentFixed(!recentOrder.fixed);
+            showToast(recentOrder.fixed ? '📌 최근 방문 순서를 고정했습니다 · ↑↓ 로 바꿀 수 있어요' : '최근 방문 순서 고정을 풀었습니다 (방문한 순서로)');
+            rerenderModal();
+        }));
+        area.appendChild(orderRow);
+
+        if (recentOrder.fixed) {
+            area.appendChild(makeNote('고정한 순서는 디시 화면의 최근 방문 목록에도 그대로 보이고, 어느 갤러리를 가도 바뀌지 않습니다. 처음 가는 갤러리는 맨 뒤에 붙습니다.'));
+        }
+
         const filterRow = makeFilterRow(recentGalls.length);
 
         if (filterRow) {
             area.appendChild(filterRow);
         }
 
-        recentGalls.forEach(item => {
+        recentGalls.forEach((item, i) => {
             area.appendChild(makeRow({
                 title: item.n || item.id,
                 chip: RECENT_KIND_LABEL[item.k] || '',
                 meta: [item.id, item.at ? timeAgo(item.at) : ''].filter(Boolean).join(' · '),
                 actions: [
+                    ...(recentOrder.fixed ? [
+                        { label: '↑', className: 'dc-icon-btn', onClick: () => { moveRecent(item, -1); rerenderModal(); }, disabled: i === 0 },
+                        { label: '↓', className: 'dc-icon-btn', onClick: () => { moveRecent(item, 1); rerenderModal(); }, disabled: i === recentGalls.length - 1 }
+                    ] : []),
                     { label: '열기', href: recentUrl(item) },
                     {
                         label: '지우기',
@@ -14525,7 +14742,7 @@
 
     // =========================================================
 
-    const CLEANUP_IDLE_DAYS = 60;
+    const CLEANUP_IDLE_DAYS = 7;
 
     const cleanupSuggestions = () => {
         flushBlockHits();
@@ -14762,7 +14979,11 @@
             '</div>' +
             '<div class="dc-pv-body"></div>';
         previewEl.addEventListener('mouseenter', () => clearTimeout(previewCloseTimer));
-        previewEl.addEventListener('mouseleave', () => schedulePreviewClose());
+        previewEl.addEventListener('mouseleave', () => {
+            if (previewMode === 'hover') {
+                schedulePreviewClose();
+            }
+        });
         document.body.appendChild(previewEl);
 
         return previewEl;
@@ -14780,6 +15001,7 @@
 
         clearTimeout(previewCloseTimer);
         stopPreviewTheme();
+        previewBackdrop?.classList.remove('show');
 
         if (previewEl) {
             previewEl.classList.remove('show');
@@ -14957,6 +15179,20 @@
         doc.getElementById('dc-pv-css').textContent = previewFrameCss();
         doc.body.appendChild(doc.importNode(body, true));
 
+        doc.querySelectorAll('img').forEach(img => {
+            let tries = 0;
+            const original = img.getAttribute('src') || '';
+
+            img.addEventListener('error', () => {
+                if (tries >= 4 || !/dcinside\.(com|co\.kr)\//.test(original)) {
+                    return;
+                }
+
+                tries += 1;
+                setTimeout(() => img.setAttribute('src', `${original}&${tries + 1}`), 250 * tries);
+            });
+        });
+
         doc.querySelectorAll('video[data-src]').forEach(video => {
             const gif = video.getAttribute('data-src');
             let swapped = false;
@@ -15220,18 +15456,135 @@
         }
     };
 
+    const PREVIEW_HOLD_MS = 350;
+    let previewMode = 'peek';
+    let previewBackdrop = null;
+
+    const ensurePreviewBackdrop = () => {
+        if (previewBackdrop && previewBackdrop.isConnected) {
+            return previewBackdrop;
+        }
+
+        previewBackdrop = h('div', 'dc-ui');
+        previewBackdrop.id = 'dc-preview-backdrop';
+        previewBackdrop.addEventListener('mousedown', event => {
+            event.preventDefault();
+            event.stopPropagation();
+            closePreview();
+        });
+        document.body.appendChild(previewBackdrop);
+
+        return previewBackdrop;
+    };
+
+    const openPreview = (anchor, mode) => {
+        previewMode = mode;
+
+        const el = ensurePreviewEl();
+
+        el.classList.toggle('dc-pv-peek', mode === 'peek');
+
+        try {
+            const r = anchor.getBoundingClientRect();
+            const ox = Math.round(r.left + Math.min(r.width, 240) / 2 - window.innerWidth / 2);
+            const oy = Math.round(r.top + r.height / 2 - window.innerHeight / 2);
+
+            el.style.setProperty('--dc-pv-from', `translate(calc(-50% + ${ox}px), calc(-50% + ${oy}px)) scale(.35)`);
+        } catch {
+            el.style.removeProperty('--dc-pv-from');
+        }
+
+        if (mode === 'peek') {
+            ensurePreviewBackdrop().classList.add('show');
+        } else {
+            previewBackdrop?.classList.remove('show');
+        }
+
+        showPreviewFor(anchor);
+    };
+
     const initHoverPreview = () => {
         if (!IS_PC_SITE) {
             return;
         }
 
+        const hoverOn = () => previewEnabled() && settings.previewHover === true;
+
         let hoverAnchor = null;
         let pressedAnchor = null;
+        let holdTimer = null;
+        let holdStart = null;
+        let swallowClick = null;
+
+        document.addEventListener('mousedown', event => {
+            const anchor = event.target instanceof Element ? event.target.closest(PREVIEW_TITLE_SELECTOR) : null;
+
+            if (!anchor || anchor.closest('.dc-ui')) {
+                if (previewOpen() && !(event.target instanceof Node && previewEl.contains(event.target))) {
+                    closePreview();
+                }
+
+                return;
+            }
+
+            pressedAnchor = anchor;
+            clearTimeout(previewHoverTimer);
+
+            if (!previewEnabled() || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+                return;
+            }
+
+            holdStart = { x: event.clientX, y: event.clientY };
+            clearTimeout(holdTimer);
+            holdTimer = setTimeout(() => {
+                holdTimer = null;
+                swallowClick = anchor;
+
+                window.getSelection?.()?.removeAllRanges?.();
+                openPreview(anchor, 'peek');
+            }, PREVIEW_HOLD_MS);
+        }, true);
+
+        document.addEventListener('mousemove', event => {
+            if (holdTimer && holdStart && Math.hypot(event.clientX - holdStart.x, event.clientY - holdStart.y) > 8) {
+                clearTimeout(holdTimer);
+                holdTimer = null;
+            }
+        }, { passive: true, capture: true });
+
+        const cancelHold = () => {
+            clearTimeout(holdTimer);
+            holdTimer = null;
+        };
+
+        document.addEventListener('mouseup', cancelHold, true);
+        document.addEventListener('dragstart', event => {
+            if (swallowClick || holdTimer) {
+                event.preventDefault();
+            }
+
+            cancelHold();
+        }, true);
+
+        document.addEventListener('click', event => {
+            if (!swallowClick) {
+                return;
+            }
+
+            const anchor = event.target instanceof Element ? event.target.closest(PREVIEW_TITLE_SELECTOR) : null;
+
+            if (anchor === swallowClick) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+
+            swallowClick = null;
+        }, true);
 
         const armHover = anchor => {
             clearTimeout(previewHoverTimer);
 
-            if (!previewEnabled() || anchor === pressedAnchor) {
+            if (!hoverOn() || anchor === pressedAnchor || (previewOpen() && previewMode === 'peek')) {
                 return;
             }
 
@@ -15243,18 +15596,14 @@
                 }
 
                 clearTimeout(previewCloseTimer);
-                showPreviewFor(anchor);
+                openPreview(anchor, 'hover');
             }, switching ? PREVIEW_SWITCH_DELAY : PREVIEW_DELAY);
         };
 
         document.addEventListener('mouseover', event => {
             const anchor = event.target instanceof Element ? event.target.closest(PREVIEW_TITLE_SELECTOR) : null;
 
-            if (!anchor || anchor.closest('.dc-ui')) {
-                return;
-            }
-
-            if (anchor === hoverAnchor) {
+            if (!anchor || anchor.closest('.dc-ui') || anchor === hoverAnchor) {
                 return;
             }
 
@@ -15265,7 +15614,7 @@
                 return;
             }
 
-            if (previewOpen()) {
+            if (previewOpen() && previewMode === 'hover') {
                 clearTimeout(previewCloseTimer);
             }
 
@@ -15282,15 +15631,6 @@
             }
         }, { passive: true });
 
-        document.addEventListener('mousedown', event => {
-            const anchor = event.target instanceof Element ? event.target.closest(PREVIEW_TITLE_SELECTOR) : null;
-
-            if (anchor) {
-                pressedAnchor = anchor;
-                clearTimeout(previewHoverTimer);
-            }
-        }, true);
-
         document.addEventListener('mouseout', event => {
             const anchor = event.target instanceof Element ? event.target.closest(PREVIEW_TITLE_SELECTOR) : null;
 
@@ -15308,19 +15648,13 @@
 
             clearTimeout(previewHoverTimer);
 
-            if (previewOpen() && !(event.relatedTarget instanceof Node && previewEl.contains(event.relatedTarget))) {
+            if (previewOpen() && previewMode === 'hover' && !(event.relatedTarget instanceof Node && previewEl.contains(event.relatedTarget))) {
                 schedulePreviewClose();
             }
         });
 
-        document.addEventListener('mousedown', event => {
-            if (previewOpen() && !(event.target instanceof Node && previewEl.contains(event.target))) {
-                closePreview();
-            }
-        }, true);
-
         window.addEventListener('scroll', () => {
-            if (previewOpen() && !previewEl.matches(':hover')) {
+            if (previewOpen() && previewMode === 'hover' && !previewEl.matches(':hover')) {
                 closePreview();
             }
         }, { passive: true });
@@ -15356,7 +15690,7 @@
             return false;
         }
 
-        showPreviewFor(anchor);
+        openPreview(anchor, 'peek');
         return true;
     };
     // =========================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kangsicj/dcinsideenhancer",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "DCInside filter & enhancer userscript for mobile and PC (디시인사이드 차단·편의 유저스크립트)",
   "license": "MIT",
   "author": "kangsicj",