+ const latestPatch = data.at(-1); + const linkUpdate = document.querySelector(".link_update"); + const patchInfo = document.getElementById("patch_info"); + + if (linkUpdate) linkUpdate.insertAdjacentHTML("afterbegin", `Обновление: ${latestPatch.patch_date} | Патч: ${latestPatch.patch_version} `); + if (patchInfo) + patchInfo.insertAdjacentHTML( + "afterbegin", + `Все описания основаны на активных умениях и бонусах, полученных на 100 уровне.
Более подробную информацию об изменениях в активных и пассивных умениях можно найти - в примечаниях к патчноутам.` - ); + в примечаниях к патчноутам.` + ); }) - .catch((err) => console.error("Ошибка загрузки UpdatesPatch.json", err)); + .catch((err) => console.error("Ошибка загрузки changelog.json", err)); const year = new Date().getFullYear(); - $(".footer_info").html(` + const footerInfo = document.querySelector(".footer_info"); + if (footerInfo) { + footerInfo.innerHTML = ` FINAL FANTASY XIV © 2010–${year} SQUARE ENIX CO., LTD. All Rights Reserved. FFXIV JobGuide RU © 2024–${year} · MIT License and CC BY-NC-SA 4.0 All images on the site are the property of SQUARE ENIX© and are used under the Materials Usage License. - `); + `; + } - // --- UI Взаимодействия --- - $(".nav_floating_icon").click(() => $(".nav_floating_list").fadeToggle()); + const navFloatingIcon = document.querySelector(".nav_floating_icon"); + const navFloatingList = document.querySelector(".nav_floating_list"); - const $topBtn = $(".nome_app_top"); - const $searchBtn = $("#floatingSearchBtn"); + if (navFloatingIcon && navFloatingList) { + navFloatingIcon.addEventListener("click", () => { + jsFadeToggle(navFloatingList, 250); + }); + } - $(window).on("scroll", () => { - const showTop = $(window).scrollTop() >= 200; - showTop ? $topBtn.fadeIn() : $topBtn.fadeOut(); - $searchBtn.toggleClass("move-up", showTop); - }); + const topBtn = document.querySelector(".nome_app_top"); + const searchBtn = document.getElementById("floatingSearchBtn"); - $topBtn.on("click", (e) => { - e.preventDefault(); - $("html, body").animate({scrollTop: 0}, 1000); + window.addEventListener("scroll", () => { + const showTop = window.scrollY >= 200; + if (topBtn) { + if (showTop) { + jsFadeIn(topBtn, 250); + } else { + jsFadeOut(topBtn, 250); + } + } + if (searchBtn) searchBtn.classList.toggle("move-up", showTop); }); - // Табы - const activateTab = (id) => { - $(".js-tab-trigger").each(function () { - $(this).toggleClass("active", $(this).data("tab") === id); - }); - $(".js-tab-content").each(function () { - $(this).toggleClass("active", $(this).data("tab") === id); + if (topBtn) { + topBtn.addEventListener("click", (e) => { + e.preventDefault(); + window.scrollTo({top: 0, behavior: "smooth"}); }); + } - const url = new URL(window.location); - //url.searchParams.delete("skill"); - url.hash = id; - history.replaceState(null, null, url.toString()); - }; - - $(".js-tab-trigger").on("click", function (e) { - e.preventDefault(); - activateTab($(this).data("tab")); + // Tabs + document.querySelectorAll(".js-tab-trigger").forEach((trigger) => { + trigger.addEventListener("click", function (e) { + e.preventDefault(); + activateTab(this.dataset.tab); + }); }); - $("a[href*='#']:not([href='#'])").click(function (e) { - e.preventDefault(); - const target = $($(this).attr("href")); - if (target.length) { - $("html, body").animate({scrollTop: target.offset().top - 48}, 500); + // Dynamic Job Menu + const menuContainer = document.querySelector("[data-menu-type]"); + + if (menuContainer) { + const menuType = menuContainer.dataset.menuType; + if (menuType === "MenuDoWDoM" || menuType === "MenuDoHDoL") { + fetch(JSON_URLS.MENU) + .then((res) => res.json()) + .then((menuData) => { + let menuArray = menuData[menuType]; + if (!menuArray) return console.error(`Меню для типа "${menuType}" не найдено.`); + if (menuData.Links && Array.isArray(menuData.Links)) menuArray = [...menuArray, ...menuData.Links]; + + let menuHTML = ``; + }); + menuHTML += ``; + + menuContainer.insertAdjacentHTML("beforeend", menuHTML); + }) + .catch(() => console.error("Ошибка: Menu.json не был загружен.")); } - }); - - // --- Динамическое Job Меню --- - const $menuContainer = $("[data-menu-type]"); - const menuType = $menuContainer.data("menu-type"); - - if (menuType === "MenuDoWDoM" || menuType === "MenuDoHDoL") { - $.getJSON(JSON_URLS.MENU, (menuData) => { - let menuArray = menuData[menuType]; - if (!menuArray) return console.error(`Меню для типа "${menuType}" не найдено.`); - if (menuData.Links && Array.isArray(menuData.Links)) menuArray = [...menuArray, ...menuData.Links]; - - const $menuList = $(''); - menuArray.forEach((category) => { - const $category = $('').append(``); - const $subMenu = $(''); - - category.jobs.forEach((job) => { - const $job = $(`
${job.name}
`); - $subMenu.append($job); - }); - $category.append($subMenu); - $menuList.append($category); - }); - $menuContainer.append($menuList); - }).fail(() => console.error("Ошибка: Menu.json не был загружен.")); } - - // --- Система Предупреждений --- - const WarningEnabled = false; - if (WarningEnabled) { - const setCookie = (name, value, days) => { - const date = new Date(); - date.setTime(date.getTime() + days * 86400000); - document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`; - }; - const getCookie = (name) => - document.cookie - .split("; ") - .find((c) => c.startsWith(`${name}=`)) - ?.split("=")[1] || null; - - const showErrorInfo = (info) => { - $(".job_skil_list, .warn_info").prepend(`Важная информация!
✖${info}
", {class: "icon_search"}).append($("![]()
", {src: `https://cdn.ff14jobguide.ru/data/icons/${skill.icon}`, alt: skill.skill, class: "skill-icon"}));
- const $text = $("
")
- .text(`${skill.skill} `)
- .append($("").text(`[${skill.jobName}: ${skill.level}]`));
-
- return $li.append($copy, $link.append($icon, $text));
+
+ return `
+
+ 
+
+ 
+
+ `;
};
- const doSearch = ($input, $list) => {
- const value = $input.val().trim().toLowerCase();
- $list.empty();
- if (!value || !flatSkillsData.length) return $list.hide();
+ const doSearch = (inputEl, listEl) => {
+ const value = inputEl.value.trim().toLowerCase();
+ listEl.innerHTML = "";
+
+ if (!value || !flatSkillsData.length) {
+ listEl.style.display = "none";
+ return;
+ }
const results = flatSkillsData.filter((skill) => skill._search.includes(value));
if (results.length === 0) {
- $list.append($("").text("Ничего не найдено")).show();
+ listEl.innerHTML = " Ничего не найдено ";
+ listEl.style.display = "block";
return;
}
- const $items = results.map((skill) => createItem(skill));
- $list.append($items).show();
+ listEl.innerHTML = results.map(createItemHTML).join("");
+ listEl.style.display = "block";
};
const initGlobalSearch = (inputSelector, resultSelector) => {
- const $input = $(inputSelector);
- if ($input.length)
- $input.on(
+ const inputEl = document.querySelector(inputSelector);
+ const listEl = document.querySelector(resultSelector);
+ if (inputEl && listEl) {
+ inputEl.addEventListener(
"input",
- debounce(() => doSearch($input, $(resultSelector)), 300)
+ debounce(() => doSearch(inputEl, listEl), 300)
);
+ }
};
- if ($("#floatingSearchBtn").length) {
+ const floatingSearchBtn = document.getElementById("floatingSearchBtn");
+ if (floatingSearchBtn) {
const popupHTML = `
`;
- $("#floatingSearchBtn").after(popupHTML);
+ floatingSearchBtn.insertAdjacentHTML("afterend", popupHTML);
- const $popup = $("#searchPopup"),
- $input = $("#searchPopupInput"),
- $results = $("#searchPopupResults");
+ const popup = document.getElementById("searchPopup");
+ const input = document.getElementById("searchPopupInput");
+ const results = document.getElementById("searchPopupResults");
+ const closeSearchPopup = document.getElementById("closeSearchPopup");
const closePopup = () => {
- $popup.fadeOut(200);
- $input.val("");
- $results.empty().hide();
+ popup.style.display = "none";
+ input.value = "";
+ results.innerHTML = "";
+ results.style.display = "none";
unlockScroll();
};
- $("#floatingSearchBtn").on("click", (e) => {
+ floatingSearchBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
lockScroll();
- $popup.fadeIn(200, () => $input.focus());
+ popup.style.display = "flex";
+ input.focus();
});
- $("#closeSearchPopup").on("click", closePopup);
- $popup.on("click", function (e) {
+ if (closeSearchPopup) closeSearchPopup.addEventListener("click", closePopup);
+
+ popup.addEventListener("click", function (e) {
if (e.target === this) closePopup();
});
- $(document).on("keydown", (e) => {
- if (e.key === "Escape" && $popup.is(":visible")) closePopup();
+
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "Escape" && popup.style.display !== "none") closePopup();
});
initGlobalSearch("#searchPopupInput", "#searchPopupResults");
}
- $(document).on("click", ".copy-link", function (e) {
- e.preventDefault();
- e.stopPropagation();
- navigator.clipboard.writeText($(this).data("url")).then(() => {
- const $msg = $("").addClass("copy-tooltip").text("Скопировано!");
- $(this).after($msg);
- setTimeout(() => $msg.fadeOut(200, () => $msg.remove()), 1000);
- });
+ document.addEventListener("click", (e) => {
+ const copyBtn = e.target.closest(".copy-link");
+ if (copyBtn) {
+ e.preventDefault();
+ e.stopPropagation();
+ navigator.clipboard.writeText(copyBtn.dataset.url).then(() => {
+ const msg = document.createElement("span");
+ msg.className = "copy-tooltip";
+ msg.textContent = "Скопировано!";
+ copyBtn.insertAdjacentElement("afterend", msg);
+
+ // Аналог fadeOut и remove
+ setTimeout(() => {
+ msg.style.opacity = "0";
+ msg.style.transition = "opacity 0.2s ease";
+ setTimeout(() => msg.remove(), 200);
+ }, 1000);
+ });
+ }
});
initGlobalSearch("#search", "#results");
-
- // --- Debug ---
- const isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
-
- const fixSingleLink = (el) => {
- const $el = $(el);
- const href = $el.attr("href");
- if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.includes(".html") || href.endsWith("/")) return;
-
- const [urlPart, hashPart] = href.split("#");
- const [path, query] = urlPart.split("?");
-
- if (path && !path.endsWith(".html")) {
- $el.attr("href", `${path}.html${query ? "?" + query : ""}${hashPart ? "#" + hashPart : ""}`);
+}
+// Footer Overlap
+function initFooterOverlap() {
+ const topButton = document.querySelector(".nome_app_top");
+ const footer = document.querySelector(".footer_info");
+
+ function preventFooterOverlap() {
+ if (!footer) return;
+
+ const footerRect = footer.getBoundingClientRect();
+ const windowHeight = window.innerHeight;
+ const moveUpButton = document.querySelector(".move-up");
+ const topBtnBase = 20;
+ const moveUpBase = 80;
+
+ if (footerRect.top < windowHeight) {
+ const overlap = windowHeight - footerRect.top;
+ if (topButton) topButton.style.bottom = `${overlap + topBtnBase}px`;
+ if (moveUpButton) moveUpButton.style.bottom = `${overlap + moveUpBase}px`;
+ } else {
+ if (topButton) topButton.style.bottom = "";
+ if (moveUpButton) moveUpButton.style.bottom = "";
}
- };
-
- if (ENABLE_DEBUG && isLocal) {
- $("a").each(function () {
- fixSingleLink(this);
- });
-
- const observer = new MutationObserver((mutations) => {
- mutations.forEach((mutation) =>
- mutation.addedNodes.forEach((node) => {
- if (node.nodeType === 1) {
- if (node.nodeName === "A") fixSingleLink(node);
- $(node)
- .find("a")
- .each(function () {
- fixSingleLink(this);
- });
- }
- })
- );
- });
- observer.observe(document.body, {childList: true, subtree: true});
-
- $("tr").each(function () {
- const attrs = ["db-skill", "db-role-action", "db-skill-passive", "db-role-traits", "db-skill-pvp"];
- const titleText = attrs
- .map((attr) => $(this).attr(attr))
- .filter(Boolean)
- .join(", ");
- if (titleText) $(this).attr("title", titleText);
- });
- }
- // Preloader
- function hidePreloader() {
- setTimeout(() => {
- const $preloader = $("#page-preloader");
- if ($preloader.length && !$preloader.hasClass("done")) {
- $preloader.addClass("done");
- $("body").css({
- "overflow-y": "visible",
- "padding-right": "0px",
- });
- }
- const hash = location.hash.substring(1);
- if (hash) activateTab(hash);
- }, 1200);
}
- if (document.readyState === "complete") {
- hidePreloader();
- } else {
- $(window).on("load", hidePreloader);
- }
-});
-// ============================================================================
-// ГОЛД СОРСЕР МЕНЮ
-// ============================================================================
-document.addEventListener("DOMContentLoaded", () => {
+ window.addEventListener("scroll", preventFooterOverlap);
+ window.addEventListener("resize", preventFooterOverlap);
+}
+// Gold Saucer Menu
+function initGSMenu() {
const mahjongMenu = document.querySelector(".gs_menu_nav");
if (!mahjongMenu) return;
@@ -521,4 +470,165 @@ document.addEventListener("DOMContentLoaded", () => {
}
}
});
+}
+// DEBUG
+function initDEBUG() {
+ if (!ENABLE_DEBUG) return;
+
+ const fixSingleLink = (el) => {
+ const href = el.getAttribute("href");
+ if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.includes(".html") || href.endsWith("/")) return;
+
+ const [urlPart, hashPart] = href.split("#");
+ const [path, query] = urlPart.split("?");
+
+ if (path && !path.endsWith(".html")) {
+ el.setAttribute("href", `${path}.html${query ? "?" + query : ""}${hashPart ? "#" + hashPart : ""}`);
+ }
+ };
+
+ document.querySelectorAll("a").forEach(fixSingleLink);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) =>
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === 1) {
+ if (node.nodeName === "A") fixSingleLink(node);
+ node.querySelectorAll("a").forEach(fixSingleLink);
+ }
+ })
+ );
+ });
+ observer.observe(document.body, {childList: true, subtree: true});
+
+ document.querySelectorAll("tr").forEach((row) => {
+ const attrs = ["db-skill", "db-role-action", "db-skill-passive", "db-role-traits", "db-skill-pvp"];
+ const titleText = attrs
+ .map((attr) => row.getAttribute(attr))
+ .filter(Boolean)
+ .join(", ");
+ if (titleText) row.setAttribute("title", titleText);
+ });
+}
+// WARNING
+function initWARNING() {
+ if (!ENABLE_WARNING) return;
+ const setCookie = (name, value, days) => {
+ const date = new Date();
+ date.setTime(date.getTime() + days * 86400000);
+ document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
+ };
+ const getCookie = (name) =>
+ document.cookie
+ .split("; ")
+ .find((c) => c.startsWith(`${name}=`))
+ ?.split("=")[1] || null;
+
+ const showErrorInfo = (info) => {
+ const warnHTML = ``;
+ document.querySelectorAll(".job_skil_list, .warn_info").forEach((el) => el.insertAdjacentHTML("afterbegin", warnHTML));
+
+ const warnInfoEl = document.getElementById("warnInfo");
+ const closeInfoEl = document.getElementById("closeInfo");
+
+ if (getCookie("warnInfoHidden") === "true" && warnInfoEl) warnInfoEl.classList.add("hidden");
+
+ if (closeInfoEl && warnInfoEl) {
+ closeInfoEl.addEventListener("click", () => {
+ warnInfoEl.classList.add("hidden");
+ setCookie("warnInfoHidden", "true", 7);
+ });
+ }
+ };
+ showErrorInfo("Error");
+}
+// For the new year
+function Snowfall() {
+ const canvas = document.createElement("canvas");
+ canvas.id = "snowCanvas";
+ Object.assign(canvas.style, {
+ position: "fixed",
+ top: 0,
+ left: 0,
+ width: "100%",
+ height: "100%",
+ pointerEvents: "none",
+ zIndex: 1000,
+ });
+ document.body.prepend(canvas);
+
+ const ctx = canvas.getContext("2d");
+ let width = window.innerWidth;
+ let height = window.innerHeight;
+ canvas.width = width;
+ canvas.height = height;
+
+ window.addEventListener(
+ "resize",
+ () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ },
+ {passive: true}
+ );
+
+ const flakeCount = 69;
+ const flakes = Array.from({length: flakeCount}, () => createFlake());
+
+ function createFlake() {
+ return {
+ x: Math.random() * width,
+ y: Math.random() * height,
+ size: 8 + Math.random() * 12,
+ speed: 0.3 + Math.random() * 0.9,
+ wind: -0.2 + Math.random() * 0.4,
+ opacity: 0.3 + Math.random() * 0.4,
+ rotation: Math.random() * Math.PI * 2,
+ rotationSpeed: (Math.random() - 0.5) * 0.02,
+ };
+ }
+
+ const svgString = `
+
+ `;
+ const snowflakeImg = new Image();
+ snowflakeImg.src = URL.createObjectURL(new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}));
+
+ function animate() {
+ ctx.clearRect(0, 0, width, height);
+ flakes.forEach((flake) => {
+ flake.y += flake.speed;
+ flake.x += flake.wind;
+ flake.rotation += flake.rotationSpeed;
+ if (flake.y > height + 30) Object.assign(flake, createFlake(), {y: -30});
+ if (flake.x > width + 30) flake.x = -30;
+ if (flake.x < -30) flake.x = width + 30;
+
+ ctx.save();
+ ctx.translate(flake.x, flake.y);
+ ctx.rotate(flake.rotation);
+ ctx.globalAlpha = flake.opacity;
+ ctx.drawImage(snowflakeImg, -flake.size / 2, -flake.size / 2, flake.size, flake.size);
+ ctx.restore();
+ });
+ requestAnimationFrame(animate);
+ }
+ snowflakeImg.onload = animate;
+}
+// Сlick Link
+document.addEventListener("click", function (e) {
+ const link = e.target.closest("a[href*='#']:not([href='#'])");
+ if (!link) return;
+
+ const href = link.getAttribute("href");
+ const targetElement = document.querySelector(href);
+
+ if (targetElement) {
+ e.preventDefault();
+ const targetPos = targetElement.getBoundingClientRect().top + window.scrollY - 48;
+ window.scrollTo({top: targetPos, behavior: "smooth"});
+ }
});
diff --git a/Assets/scss/modules/_main_app.scss b/Assets/scss/modules/_main_app.scss
index 11fa390c..972c438a 100644
--- a/Assets/scss/modules/_main_app.scss
+++ b/Assets/scss/modules/_main_app.scss
@@ -100,6 +100,7 @@
display: flex;
align-items: baseline;
transition: transform 0.2s ease;
+ cursor: pointer;
&:hover {
transform: translateX(5px);
diff --git a/Assets/scss/modules/_search.scss b/Assets/scss/modules/_search.scss
index fd8cbf93..d08c5e71 100644
--- a/Assets/scss/modules/_search.scss
+++ b/Assets/scss/modules/_search.scss
@@ -198,6 +198,7 @@
#floatingSearchBtn.move-up {
bottom: 80px;
+ transition: bottom 0.1s ease-out;
}
.search-popup-overlay {
diff --git a/Assets/scss/style.scss b/Assets/scss/style.scss
index f8357ac6..5750e631 100644
--- a/Assets/scss/style.scss
+++ b/Assets/scss/style.scss
@@ -122,6 +122,7 @@ input {
right: 20px;
position: fixed;
z-index: 99;
+ transition: bottom 0.1s ease-out;
}
.app_top {
@@ -1924,3 +1925,15 @@ table {
.recast {
text-align: center !important;
}
+
+.fade-element {
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.3s ease,
+ visibility 0.3s ease;
+ &.visible {
+ opacity: 1;
+ visibility: visible;
+ }
+}
diff --git a/CraftingGatheringGuide.html b/CraftingGatheringGuide.html
index 3828a7bc..061e42dc 100644
--- a/CraftingGatheringGuide.html
+++ b/CraftingGatheringGuide.html
@@ -20,7 +20,6 @@
-
+
+
+ ${skill.skill} [${skill.jobName}: ${skill.level}]
+
+ 
Поиск по умениямВажная информация!
✖${info}