twitter like jandan!
// ==UserScript==
// @name JandanX
// @namespace none
// @description twitter like jandan!
// @version 1.1.0
// @author xianii
// @namespace none
// @exclude none
// @match https://jandan.net/*
// @icon https://raw.githubusercontent.com/Nigh/JandanX/refs/heads/main/jd-logo.png
// @grant GM_addStyle
// @run-at document-start
// @license MIT
// @homepageURL https://github.com/Nigh/JandanX
// ==/UserScript==
(() => {
var __getOwnPropNames = Object.getOwnPropertyNames;
var __esm = (fn, res) => function __init() {
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
};
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
// src/jandanX.css
var jandanX_default;
var init_jandanX = __esm({
"src/jandanX.css"() {
jandanX_default = `:root {
--jd-bg: #000000;
--jd-primary: #ffc107;
--jd-white: #ffffff;
--jd-plain: #cccccc;
--jd-dim: #999999;
--jd-dark: #666666;
--jd-text-dark: #222222;
--jd-bg-dark: #222222;
--jd-bad: #d36969;
--jd-good: #69d3a6;
--jd-border: #41464b;
--jd-nav-left-gap: 0px;
--jd-nav-right-gap: 0px;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: var(--jd-bg) !important;
color: var(--jd-plain);
}
#x-like-layout {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
ul > li {
color: var(--jd-plain) !important;
}
a {
color: var(--jd-primary) !important;
}
a:hover {
color: var(--jd-text-dark) !important;
background-color: var(--jd-primary) !important;
}
.topic-title a,
.post-title a {
color: var(--jd-plain) !important;
}
.topic-title a:hover,
.post-title a:hover,
.logo a:hover {
color: var(--jd-primary) !important;
background-color: transparent !important;
}
.nav-next,
.nav-prev {
left: 0 !important;
}
a.unlike,
.comment-row .xx {
color: var(--jd-bad) !important;
}
.comment-row .oo {
color: var(--jd-primary) !important;
}
div.hot-title {
background-color: var(--jd-bg-dark) !important;
}
div.post-tag > a {
color: var(--jd-text-dark) !important;
}
div.post-excerpt {
color: var(--jd-dim) !important;
}
div.post-comment-count {
display: none !important;
}
.comment-content {
color: var(--jd-plain) !important;
}
h3.nav-header {
color: var(--jd-dark) !important;
}
nav.breadcrumb {
background-color: transparent !important;
}
div.search-form {
background-color: transparent !important;
}
input {
background-color: var(--jd-bg-dark) !important;
color: var(--jd-plain) !important;
border: 1px solid var(--jd-plain);
border-radius: 12px;
padding: 12px 16px !important;
}
div.tucao-hot {
background-color: transparent !important;
color: var(--jd-plain) !important;
border-left: 0.5em solid var(--jd-primary) !important;
}
div.tucao-hot > h3 {
background-color: var(--jd-primary) !important;
color: var(--jd-text-dark) !important;
}
div.tucao-container {
background-color: var(--jd-bg) !important;
color: var(--jd-plain) !important;
border: 1px solid var(--jd-plain);
}
textarea {
background-color: var(--jd-bg-dark) !important;
color: var(--jd-plain) !important;
border-color: var(--jd-primary) !important;
}
ul.hot-tabs > li.current {
background-color: var(--jd-bg-dark) !important;
color: var(--jd-primary) !important;
}
button {
background-color: var(--jd-bg-dark) !important;
color: var(--jd-primary) !important;
border: 1px solid var(--jd-plain) !important;
cursor: pointer;
}
button.active {
background-color: var(--jd-primary) !important;
color: var(--jd-text-dark) !important;
}
.post blockquote {
background-color: var(--jd-bg-dark) !important;
color: var(--jd-plain) !important;
border-left: 4px solid var(--jd-good) !important;
padding: 12px 16px;
}
div.page-navi > a {
background-color: transparent !important;
border: 1px solid var(--jd-plain) !important;
}
.nav-next,
.nav-prev {
font-size: 8em;
position: sticky;
height: fit-content;
top: 40%;
}
@media (min-width: 769px) {
div.nav-next,
div.nav-prev {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
display: flex;
align-items: center;
z-index: 20;
font-size: 8em;
}
div.nav-next {
left: 0 !important;
right: auto !important;
width: max(0px, var(--jd-nav-left-gap)) !important;
}
div.nav-prev {
right: 0 !important;
left: auto !important;
width: max(0px, var(--jd-nav-right-gap)) !important;
}
div.nav-next > a,
div.nav-prev > a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
}
div.nav-next > a {
justify-content: flex-end;
}
div.nav-prev > a {
justify-content: flex-start;
}
}
#header {
color: white;
padding: 12px;
margin-bottom: 32px;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#layout-row {
display: flex;
flex: 1;
max-width: 1250px;
margin: 0 auto;
width: 100%;
gap: 16px;
padding: 16px;
box-sizing: border-box;
}
nav#nav {
background-color: transparent !important;
}
.new-nav {
flex: 0 0 200px;
padding: 16px;
border-radius: 12px;
height: fit-content;
position: sticky;
top: 16px;
}
.member-nav .active {
background-color: transparent !important;
}
.member-nav .active > a,
.member-nav .active > a:hover {
background-color: var(--jd-primary) !important;
color: var(--jd-text-dark) !important;
}
div#navbar {
flex-direction: column !important;
align-items: start;
}
div#navbar > div {
position: relative !important;
}
ul.navbar-nav {
flex: 0 0 200px;
flex-direction: column !important;
}
.main .header-h1 {
background-color: transparent !important;
}
main.main {
flex: 1;
background-color: transparent;
padding: 0px;
border-radius: 0px;
border-left: 1px solid var(--jd-border) !important;
border-right: 1px solid var(--jd-border) !important;
}
aside.sidebar {
flex: 0 0 300px;
background-color: transparent !important;
padding: 16px 0px;
border-radius: 12px;
border: 1px solid var(--jd-border);
height: fit-content;
position: sticky;
}
.row {
margin: 0px !important;
}
.sidebar .nav-header {
border-top: 1px solid var(--jd-border) !important;
}
.main .header-h1,
.post-item {
border-bottom: 1px solid var(--jd-border) !important;
}
#footer {
background-color: #1da1f2;
color: white;
text-align: center;
padding: 12px;
}
@media (max-width: 1080px) {
aside.sidebar {
display: none !important;
}
}
@media (max-width: 768px) {
#layout-row {
flex-direction: column;
}
div.nav-prev,
div.nav-next {
display: none !important;
}
/* Hide .new-nav on mobile devices since we're using mobile menu */
.new-nav {
display: none !important;
}
div.page-nav button.page-nav-prev-btn,
div.page-nav button.page-nav-next-btn {
min-width: 44px;
min-height: 44px;
padding: 10px 14px;
font-size: 22px;
line-height: 1;
}
div.page-nav li:first-child > button[type="button"],
div.page-nav li:last-child > button[type="button"] {
min-width: 44px;
min-height: 44px;
padding: 10px 14px;
font-size: 22px;
line-height: 1;
}
}
.top-nav > div.nav-item {
background-color: transparent !important;
}
.top-nav > div.nav-item.current {
background-color: var(--jd-primary) !important;
}
.top-nav > div.nav-item.current > a {
color: var(--jd-text-dark) !important;
}
.top-nav > div.nav-item > a:hover {
color: var(--jd-text-dark) !important;
background-color: var(--jd-primary) !important;
border-radius: 0px;
}
.navbar {
align-items: stretch;
background-color: transparent !important;
border: 0 solid black;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
list-style: none;
margin: 0px;
min-height: 0px;
min-width: 0px;
padding: 0px;
position: relative;
text-decoration: none;
z-index: 0;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px 0px !important;
background-color: rgba(0, 0, 0, 0);
border: 0 solid black;
box-sizing: border-box;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
list-style: none;
margin: 0px;
min-height: 0px;
min-width: 0px;
position: relative;
text-decoration: none;
z-index: 0;
}
.nav-item > a {
display: flex;
color: var(--jd-plain) !important;
border-radius: 0px;
padding: 12px 20px !important;
cursor: pointer;
font-weight: 1000;
font-size: 18px;
}
.nav-item > a.current {
border-left: 6px solid var(--jd-primary) !important;
border-radius: 0px;
}
.nav-item > a:hover {
background-color: var(--jd-bg-dark) !important;
transition: background-color 0.2s;
}
.nav-icon {
width: 24px !important;
height: 24px !important;
margin-right: 12px;
display: block;
}
.reply-container {
background-color: transparent !important;
}
.topic-author {
color: var(--jd-dim) !important;
}
div#float-window {
display: none !important;
}
.logo {
position: relative;
width: 120px;
height: 50px;
overflow: hidden;
margin: 0px 0px 20px 20px;
}
/* Mobile menu styles */
@media (max-width: 768px) {
/* Hamburger button - now positioned at bottom right */
.hamburger {
display: block;
width: 40px;
height: 40px;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 1000;
border-radius: 50%;
background-color: var(--jd-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.hamburger span {
display: block;
height: 4px;
width: 24px;
background-color: var(--jd-plain);
border-radius: 2px;
position: absolute;
transition: all 0.3s ease;
left: 8px; /* Center the spans */
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 18px;
}
.hamburger span:nth-child(3) {
top: 26px;
}
/* When menu is active, prevent background scrolling */
body.menu-active {
overflow: hidden;
}
/* Hamburger animation when menu is open */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Mobile nav menu */
.mobile-nav-menu {
display: none;
position: fixed;
width: 280px;
background-color: var(--jd-bg);
z-index: 1000;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-menu.active {
display: block;
}
/* Mask layer */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.mask.active {
display: block;
}
.nav-item > a {
padding-left: 16px !important;
}
/* Hide logo when mobile menu is active */
body.menu-active .logo {
display: none !important;
}
}
`;
}
});
// src/jandanX.js
var require_jandanX = __commonJS({
"src/jandanX.js"() {
init_jandanX();
(function() {
"use strict";
const earlyCSS = `
html, body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #000000;
color: #ffc107cf;
}
`;
const nav_icons = {
\u9996\u9875: `M12 2C7.421 2 4 8.072 4 13.5c0 5.084 3.215 8.5 8 8.5s8-3.416 8-8.5C20 8.072 16.579 2 12 2m0 2c2.467 0 4.896 3.124 5.712 6.875L16.5 12.086l-1.5-1.5-1.5 1.5-1.5-1.5-1.5 1.5-1.5-1.5-1.5 1.5-1.212-1.212C7.104 7.124 9.533 4 12 4m0 16c-2.901 0-6-1.708-6-6.5l.003-.083L7.5 14.914l1.5-1.5 1.5 1.5 1.5-1.5 1.5 1.5 1.5-1.5 1.5 1.5 1.497-1.497.003.083c0 4.793-3.099 6.5-6 6.5`,
\u95EE\u7B54: `M15.333 9.5A3.5 3.5 0 0 0 8.8 7.75a1 1 0 0 0 1.733 1 1.5 1.5 0 0 1 1.3-.75 1.5 1.5 0 1 1 0 3h-.003a1 1 0 0 0-.19.039 1 1 0 0 0-.198.04 1 1 0 0 0-.155.105 1 1 0 0 0-.162.11 1 1 0 0 0-.117.174 1 1 0 0 0-.097.144 1 1 0 0 0-.043.212 1 1 0 0 0-.035.176v1l.002.011v.491a1 1 0 0 0 1 .998h.003a1 1 0 0 0 .998-1.002l-.002-.662A3.49 3.49 0 0 0 15.333 9.5m-4.203 6.79a1 1 0 0 0 .7 1.71 1.04 1.04 0 0 0 .71-.29 1.015 1.015 0 0 0 0-1.42 1.034 1.034 0 0 0-1.41 0`,
\u6811\u6D1E: `M20.681 2.588h-17.4c-.881 0-1.594.712-1.594 1.594v10.837c0 .881.712 1.594 1.594 1.594h1.087l-.188 5.475 4.931-5.475H20.68c.881 0 1.594-.712 1.594-1.594V4.181c0-.881-.712-1.594-1.594-1.594`,
\u6BB5\u5B50: `M12 18c4 0 5-4 5-4H7s1 4 5 4m5.555-9.168-1.109-1.664-3 2a1 1 0 0 0 .108 1.727l4 2 .895-1.789-2.459-1.229zm-6.557 1.23a1 1 0 0 0-.443-.894l-3-2-1.11 1.664 1.566 1.044-2.459 1.229.895 1.789 4-2a1 1 0 0 0 .551-.832`,
\u968F\u624B\u62CD: `M21.275 6.475h-2.405c-0.647 0 -1.203 -0.324 -1.573 -0.833l-1.064 -1.619C15.91 3.238 15.124 2.775 14.291 2.775h-4.533c-0.833 0 -1.619 0.463 -1.989 1.249l-1.064 1.619c-0.324 0.509 -0.925 0.833 -1.573 0.833H2.775c-1.018 0 -1.85 0.833 -1.85 1.85v11.1c0 1.018 0.833 1.85 1.85 1.85h18.5c1.018 0 1.85 -0.833 1.85 -1.85V8.325c0 -1.018 -0.833 -1.85 -1.85 -1.85M12.025 18.5c-3.052 0 -5.55 -2.498 -5.55 -5.55s2.498 -5.55 5.55 -5.55 5.55 2.498 5.55 5.55 -2.498 5.55 -5.55 5.55`,
\u65E0\u804A\u56FE: `M21.32 2.665H2.665a1.333 1.333 0 0 0-1.333 1.333v15.99a1.333 1.333 0 0 0 1.333 1.333H21.32a1.333 1.333 0 0 0 1.333-1.333V3.998a1.333 1.333 0 0 0-1.333-1.333M5.943 5.33a1.999 1.999 0 1 1-1.999 1.999A2 2 0 0 1 5.943 5.33M3.998 17.989v-2.732l3.998-4.051a.666.666 0 0 1 .939 0l1.725 1.686-5.117 5.097Zm15.99 0H7.429l4.151-4.151 3.598-3.598a.666.666 0 0 1 .939 0l3.871 3.871Z`,
\u9C7C\u5858: `M14.346 6.005A13 13 0 0 0 14 6c-3.633 0-7.031 2.294-9.46 4.574a21 21 0 0 1-1.716-2.14 1 1 0 1 0-1.648 1.133A23 23 0 0 0 3.133 12c-.813.89-1.48 1.74-1.957 2.434a1 1 0 1 0 1.648 1.133c.41-.596.994-1.345 1.716-2.141C6.97 15.706 10.367 18 14 18q.185 0 .365-.005a11 11 0 0 1-.592-1.732 19 19 0 0 1-.545-3.332c-.167-2.218.022-4.825 1.118-6.926m2.122 11.742q.135-.03.269-.062c2.017-.492 3.559-1.843 4.562-2.985a13.7 13.7 0 0 0 1.47-2.029q.054-.091.082-.143l.023-.042.007-.013.002-.004v-.001l.001-.001-.787-.416.787.415.247-.466-.247-.466-.787.415.787-.416-.001-.002-.002-.005-.007-.012-.023-.042a11 11 0 0 0-.387-.637A14 14 0 0 0 21.3 9.3c-1.003-1.142-2.546-2.493-4.562-2.985l-.27-.062a1 1 0 0 1-.12.278c-1.033 1.648-1.294 4.005-1.125 6.25a17 17 0 0 0 .486 2.978c.226.867.47 1.447.632 1.698q.088.139.128.29zm-5.26-7.04a1 1 0 0 0-1.415-1.414c-.272.271-.47.662-.606 1.015a5.4 5.4 0 0 0-.318 1.32c-.104.928.016 2.172.924 3.08a1 1 0 0 0 1.414-1.415c-.292-.293-.422-.8-.35-1.445.033-.306.11-.594.197-.822.073-.19.134-.286.152-.313q.01-.014.001-.006zM17 11a1 1 0 0 1 1-1h.001a1 1 0 1 1 0 2H18a1 1 0 0 1-1-1`,
\u70ED\u699C: `M16.543 8.028c-.023 1.503-.523 3.538-2.867 4.327.734-1.746.846-3.417.326-4.979-.695-2.097-3.014-3.735-4.557-4.627-.527-.306-1.203.074-1.193.683.02 1.112-.318 2.737-1.959 4.378C4.107 9.994 3 12.251 3 14.517 3 17.362 5 21 9 21c-4.041-4.041-1-7.483-1-7.483C8.846 19.431 12.988 21 15 21c1.711 0 5-1.25 5-6.448 0-3.133-1.332-5.511-2.385-6.899-.347-.458-1.064-.198-1.072.375`,
\u5927\u5410\u69FD: `M21.75 7.875V2.109a1.083 1.083 0 0 0-1.078-.994 1.1 1.1 0 0 0-.928.534c-2.475 2.007-5.588 4.585-10.247 4.585H4.003c-.066 0-.141 0-.206.019h-.028C1.969 6.244.516 7.697.516 9.497s1.453 3.253 3.253 3.253h.028c.066 0 .141.019.206.019h.685l1.566 10.256 4.659-.6-.234-1.894.947-.141-.272-1.8-.919.141-.994-5.981c.459 0 .872.019 1.134.047 4.294.366 7.087 2.822 9.366 4.688.028.028.075.066.112.094.028.019.066.028.075.047.159.094.347.141.534.141.534 0 .994-.394 1.059-.919h.019V11.12c.9 0 1.622-.722 1.622-1.622a1.596 1.596 0 0 0-1.612-1.622m-1.641 7.688c-3.319-2.541-5.747-3.975-8.981-4.341V7.781c3.234-.366 5.672-1.819 8.981-4.378z`,
\u7528\u6237\u4E2D\u5FC3: `M21 20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 6 6 0 0 1 6-6h6a6 6 0 0 1 6 6m-9-8a5 5 0 1 0-5-5 5 5 0 0 0 5 5`
};
const style = document.createElement("style");
style.textContent = earlyCSS;
window.addEventListener("DOMContentLoaded", () => {
document.head.insertBefore(style, document.head.firstChild);
});
window.addEventListener("load", () => {
let pageNavObserver = null;
let optimizePageNavTimer = null;
let navGapTimer = null;
function optimizePageNav() {
const pageNavList = document.querySelectorAll("div.page-nav ul");
if (!pageNavList.length) return;
pageNavList.forEach((pageNav) => {
const items = Array.from(pageNav.querySelectorAll("li"));
let prevLi = null;
let nextLi = null;
items.forEach((li) => {
const btn = li.querySelector('button[type="button"]');
if (!btn) return;
btn.classList.remove("page-nav-prev-btn", "page-nav-next-btn");
const label = btn.textContent?.trim();
if (label === "<") {
prevLi = li;
btn.classList.add("page-nav-prev-btn");
} else if (label === ">") {
nextLi = li;
btn.classList.add("page-nav-next-btn");
}
});
if (prevLi) pageNav.insertBefore(prevLi, pageNav.firstChild);
if (nextLi) pageNav.appendChild(nextLi);
});
}
function scheduleOptimizePageNav(delay = 60) {
if (optimizePageNavTimer) {
window.clearTimeout(optimizePageNavTimer);
}
optimizePageNavTimer = window.setTimeout(() => {
optimizePageNav();
}, delay);
}
function bindPageNavClickFallback() {
document.addEventListener("click", (event) => {
const btn = event.target.closest("div.page-nav button[type='button']");
if (!btn) return;
scheduleOptimizePageNav(30);
scheduleOptimizePageNav(120);
});
}
function observePageNavChanges() {
if (pageNavObserver) pageNavObserver.disconnect();
const root = document.querySelector("main.main") || document.body;
if (!root) return;
pageNavObserver = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type !== "childList") continue;
const hasRelevantChange = Array.from(mutation.addedNodes).some(
(node) => node.nodeType === 1 && (node.matches?.("div.page-nav, div.page-nav ul") || node.querySelector?.("div.page-nav, div.page-nav ul"))
) || Array.from(mutation.removedNodes).some(
(node) => node.nodeType === 1 && (node.matches?.("div.page-nav, div.page-nav ul") || node.querySelector?.("div.page-nav, div.page-nav ul"))
);
if (hasRelevantChange) {
scheduleOptimizePageNav(20);
break;
}
}
});
pageNavObserver.observe(root, {
childList: true,
subtree: true
});
}
function updateSideNavGapVars() {
const root = document.documentElement;
if (!root) return;
if (window.innerWidth <= 768) {
root.style.setProperty("--jd-nav-left-gap", "0px");
root.style.setProperty("--jd-nav-right-gap", "0px");
return;
}
const layoutRow2 = document.getElementById("layout-row");
if (!layoutRow2) return;
const rect = layoutRow2.getBoundingClientRect();
const leftGap = Math.max(0, rect.left);
const rightGap = Math.max(0, window.innerWidth - rect.right);
root.style.setProperty("--jd-nav-left-gap", `${leftGap}px`);
root.style.setProperty("--jd-nav-right-gap", `${rightGap}px`);
}
function scheduleUpdateSideNavGapVars(delay = 0) {
if (navGapTimer) window.clearTimeout(navGapTimer);
navGapTimer = window.setTimeout(updateSideNavGapVars, delay);
}
const nav_div = function(a, svg) {
let nav_item = document.createElement("div");
nav_item.classList.add("nav-item");
console.log("req", svg);
if (nav_icons[svg]) {
console.log("found", svg);
let svg_icon = document.createElement("svg");
let path = document.createElement("path");
svg_icon.setAttribute("class", "nav-icon");
svg_icon.setAttribute("width", "24");
svg_icon.setAttribute("height", "24");
svg_icon.setAttribute("viewBox", "0 0 24 24");
path.setAttribute("d", nav_icons[svg]);
path.setAttribute("style", "fill:#fff");
svg_icon.appendChild(path);
a.innerHTML = svg_icon.outerHTML + a.innerHTML;
}
nav_item.appendChild(a);
return nav_item;
};
const Nav = document.createElement("nav");
Nav.classList.add("navbar");
document.querySelectorAll("ul.main-nav li:not(#nav-more) > a").forEach((a) => {
Nav.appendChild(nav_div(a, a.innerHTML));
});
let member = document.createElement("a");
member.setAttribute("href", "/member");
member.innerHTML = "\u7528\u6237\u4E2D\u5FC3";
Nav.appendChild(nav_div(member, member.innerHTML));
const newLogo = document.createElement("div");
newLogo.classList.add("logo");
const newLogoL = document.createElement("div");
newLogoL.classList.add("logoL");
const newLogoR = document.createElement("div");
newLogoR.classList.add("logoR");
let logoSpiltStyle = "background-image: url(/wp-content/themes/jandan2025/images/logo2025.png);";
logoSpiltStyle += "position: absolute;top: 0; bottom: 0; left: 0; right: 0;";
logoSpiltStyle += "background-size: cover;";
const logoSpiltPercent = "38%";
let logoSpiltStyleL = logoSpiltStyle + "clip-path: inset(0 " + logoSpiltPercent + " 0 0);";
let logoSpiltStyleR = logoSpiltStyle + "clip-path: inset(0 0 0 " + logoSpiltPercent + ");";
newLogoL.setAttribute("style", logoSpiltStyleL);
newLogoR.setAttribute(
"style",
logoSpiltStyleR + "filter: brightness(5);"
);
newLogo.appendChild(newLogoL);
newLogo.appendChild(newLogoR);
const newNav = document.createElement("div");
newNav.classList.add("new-nav");
let hamburger = null;
let mobileMenu = null;
let mask = null;
function closeMobileMenu() {
if (!hamburger || !mobileMenu || !mask) return;
mobileMenu.classList.remove("active");
hamburger.classList.remove("active");
mask.classList.remove("active");
document.body.classList.remove("menu-active");
}
function positionMobileMenu() {
if (!hamburger || !mobileMenu) return;
const rect = hamburger.getBoundingClientRect();
const gap = 8;
mobileMenu.style.top = `${Math.max(8, rect.top - mobileMenu.offsetHeight - gap)}px`;
mobileMenu.style.left = `${Math.max(8, rect.right - mobileMenu.offsetWidth)}px`;
}
function clearMobileMenu() {
if (hamburger) hamburger.remove();
if (mobileMenu) mobileMenu.remove();
if (mask) mask.remove();
hamburger = null;
mobileMenu = null;
mask = null;
document.body.classList.remove("menu-active");
}
function createMobileMenu() {
hamburger = document.createElement("div");
hamburger.classList.add("hamburger");
hamburger.innerHTML = "<span></span><span></span><span></span>";
mobileMenu = document.createElement("div");
mobileMenu.classList.add("mobile-nav-menu");
mobileMenu.appendChild(Nav);
mask = document.createElement("div");
mask.classList.add("mask");
document.body.appendChild(mask);
document.body.appendChild(mobileMenu);
document.body.appendChild(hamburger);
hamburger.addEventListener("click", function() {
mobileMenu.classList.toggle("active");
hamburger.classList.toggle("active");
mask.classList.toggle("active");
if (mobileMenu.classList.contains("active")) {
document.body.classList.add("menu-active");
positionMobileMenu();
} else {
document.body.classList.remove("menu-active");
}
});
mask.addEventListener("click", closeMobileMenu);
}
function renderNavByViewport() {
const isMobile = window.innerWidth <= 768;
if (isMobile) {
if (!mobileMenu) createMobileMenu();
if (newNav.contains(newLogo)) newNav.removeChild(newLogo);
if (newNav.contains(Nav)) newNav.removeChild(Nav);
if (!mobileMenu.contains(Nav)) mobileMenu.appendChild(Nav);
} else {
clearMobileMenu();
if (!newNav.contains(newLogo)) newNav.appendChild(newLogo);
if (!newNav.contains(Nav)) newNav.appendChild(Nav);
}
}
const mainLayout = [
document.querySelector("div.nav-next"),
newNav,
document.querySelector("main.main"),
document.querySelector("aside.sidebar"),
document.querySelector("div.nav-prev")
];
const footer = document.getElementById("footer");
const layout = document.createElement("div");
layout.id = "x-like-layout";
document.body.innerHTML = "";
document.body.appendChild(layout);
const layoutRow = document.createElement("div");
layoutRow.id = "layout-row";
for (let i in mainLayout) {
const item = mainLayout[i];
if (mainLayout[i]) {
layoutRow.appendChild(item);
} else {
console.warn("Item", i, " not found:", item);
}
}
layout.appendChild(layoutRow);
layout.appendChild(footer);
scheduleUpdateSideNavGapVars(0);
optimizePageNav();
observePageNavChanges();
bindPageNavClickFallback();
renderNavByViewport();
window.addEventListener("resize", () => {
renderNavByViewport();
scheduleUpdateSideNavGapVars(0);
if (mobileMenu && mobileMenu.classList.contains("active")) {
positionMobileMenu();
}
});
window.addEventListener("scroll", () => {
scheduleUpdateSideNavGapVars(0);
});
GM_addStyle(jandanX_default);
console.log("jandanX loaded");
});
})();
}
});
require_jandanX();
})();