Merge version_4 into main #3
@@ -3,15 +3,19 @@ import { Plus_Jakarta_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
import { Poppins } from "next/font/google";
|
||||
|
||||
const plusJakartaSans = Plus_Jakarta_Sans({
|
||||
variable: "--font-plus-jakarta-sans", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Champion's Journey | Professional Tennis Player", description: "Witness the inspiring career of a professional tennis player. Explore training excellence, career highlights, and upcoming tournaments with exclusive insights into grand slam glory.", keywords: ["professional tennis", "tennis player", "grand slam", "training regimen", "sports career"]
|
||||
};
|
||||
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins",
|
||||
subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
@@ -20,9 +24,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${plusJakartaSans.variable} antialiased`}
|
||||
>
|
||||
<body className={`${poppins.variable} antialiased`}>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
@@ -267,9 +269,7 @@ export default function RootLayout({
|
||||
const getElementInfo = (element, assignId = false) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const tagName = element.tagName.toLowerCase();
|
||||
const selector = getUniqueSelector(element, assignId);
|
||||
const sectionId = getSectionId(element);
|
||||
|
||||
|
||||
let className = undefined;
|
||||
try {
|
||||
if (element.className) {
|
||||
@@ -297,8 +297,7 @@ export default function RootLayout({
|
||||
};
|
||||
|
||||
if (tagName === 'img') {
|
||||
const originalSrc = extractOriginalUrl(element.src);
|
||||
info.imageData = {
|
||||
info.imageData = {
|
||||
src: originalSrc,
|
||||
alt: element.alt || undefined,
|
||||
naturalWidth: element.naturalWidth,
|
||||
@@ -309,8 +308,7 @@ export default function RootLayout({
|
||||
|
||||
if (tagName === 'video') {
|
||||
const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
|
||||
const resolvedSrc = extractOriginalUrl(rawSrc);
|
||||
info.imageData = {
|
||||
info.imageData = {
|
||||
src: resolvedSrc,
|
||||
alt: element.getAttribute('aria-label') || undefined,
|
||||
isBackground: false,
|
||||
@@ -323,8 +321,7 @@ export default function RootLayout({
|
||||
if (backgroundImage && backgroundImage !== 'none') {
|
||||
const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
|
||||
if (urlMatch) {
|
||||
const originalBgSrc = extractOriginalUrl(urlMatch[1]);
|
||||
if (tagName !== 'img') {
|
||||
if (tagName !== 'img') {
|
||||
info.imageData = {
|
||||
src: originalBgSrc,
|
||||
isBackground: true
|
||||
@@ -336,8 +333,7 @@ export default function RootLayout({
|
||||
}
|
||||
}
|
||||
|
||||
const elementType = getElementType(element);
|
||||
info.elementType = elementType;
|
||||
info.elementType = elementType;
|
||||
|
||||
if (elementType === 'Button') {
|
||||
const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
|
||||
@@ -430,13 +426,11 @@ export default function RootLayout({
|
||||
};
|
||||
|
||||
const isTextElement = (element) => {
|
||||
const elementType = getElementType(element);
|
||||
return elementType === 'Text';
|
||||
return elementType === 'Text';
|
||||
};
|
||||
|
||||
const isButtonElement = (element) => {
|
||||
const elementType = getElementType(element);
|
||||
return elementType === 'Button';
|
||||
return elementType === 'Button';
|
||||
};
|
||||
|
||||
const updateButtonText = (element, newText) => {
|
||||
@@ -511,8 +505,7 @@ export default function RootLayout({
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
const elementInfo = getElementInfo(element);
|
||||
let currentText = element.textContent;
|
||||
let currentText = element.textContent;
|
||||
|
||||
// Ensure there's always at least a space to keep the element editable
|
||||
if (currentText === '' || currentText === null || currentText.length === 0) {
|
||||
@@ -625,8 +618,7 @@ export default function RootLayout({
|
||||
}, '*');
|
||||
|
||||
if (save && originalContent !== element.textContent) {
|
||||
const elementInfo = getElementInfo(element);
|
||||
let finalText = element.textContent;
|
||||
let finalText = element.textContent;
|
||||
|
||||
// Trim the final text and convert space-only to empty string for saving
|
||||
if (finalText === ' ' || finalText.trim() === '') {
|
||||
@@ -755,7 +747,7 @@ export default function RootLayout({
|
||||
lastMouseX = e.clientX;
|
||||
lastMouseY = e.clientY;
|
||||
|
||||
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
|
||||
|| e.target;
|
||||
|
||||
if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
|
||||
return;
|
||||
@@ -787,8 +779,7 @@ export default function RootLayout({
|
||||
hoverOverlay = createHoverOverlay(target);
|
||||
}
|
||||
|
||||
const elementType = getElementType(target);
|
||||
showElementTypeLabel(target, elementType);
|
||||
showElementTypeLabel(target, elementType);
|
||||
|
||||
window.parent.postMessage({
|
||||
type: 'webild-element-hover',
|
||||
@@ -830,7 +821,7 @@ export default function RootLayout({
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
|
||||
|| e.target;
|
||||
if (!isValidElement(target)) return;
|
||||
|
||||
if (selectedElement && selectedElement !== target) {
|
||||
@@ -875,8 +866,7 @@ export default function RootLayout({
|
||||
hoveredElement = null;
|
||||
}
|
||||
|
||||
const elementInfo = getElementInfo(target, true);
|
||||
selectedElement.dataset.webildSelector = elementInfo.selector;
|
||||
selectedElement.dataset.webildSelector = elementInfo.selector;
|
||||
showElementTypeLabel(target, elementInfo.elementType);
|
||||
|
||||
window.parent.postMessage({
|
||||
@@ -959,8 +949,7 @@ export default function RootLayout({
|
||||
isScrolling = false;
|
||||
|
||||
if (lastMouseX > 0 && lastMouseY > 0) {
|
||||
const target = getMostSpecificElement(lastMouseX, lastMouseY);
|
||||
if (target && isValidElement(target) && target !== selectedElement) {
|
||||
if (target && isValidElement(target) && target !== selectedElement) {
|
||||
hoveredElement = target;
|
||||
|
||||
const computedStyle = window.getComputedStyle(target);
|
||||
@@ -974,8 +963,7 @@ export default function RootLayout({
|
||||
hoveredElement.classList.add(hoverClass);
|
||||
hoverOverlay = createHoverOverlay(target);
|
||||
|
||||
const elementType = getElementType(target);
|
||||
showElementTypeLabel(target, elementType);
|
||||
showElementTypeLabel(target, elementType);
|
||||
|
||||
window.parent.postMessage({
|
||||
type: 'webild-element-hover',
|
||||
@@ -998,8 +986,7 @@ export default function RootLayout({
|
||||
|
||||
const saveChangeToStorage = (change) => {
|
||||
try {
|
||||
const storageKey = getStorageKey();
|
||||
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
||||
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
||||
|
||||
const filteredChanges = existingChanges.filter(c => {
|
||||
return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
|
||||
@@ -1019,8 +1006,7 @@ export default function RootLayout({
|
||||
|
||||
const clearLocalChanges = () => {
|
||||
try {
|
||||
const storageKey = getStorageKey();
|
||||
localStorage.removeItem(storageKey);
|
||||
localStorage.removeItem(storageKey);
|
||||
window.parent.postMessage({
|
||||
type: 'webild-local-changes-cleared',
|
||||
data: {}
|
||||
@@ -1069,8 +1055,7 @@ export default function RootLayout({
|
||||
|
||||
if (e.data.type === 'webild-cancel-changes') {
|
||||
try {
|
||||
const storageKey = getStorageKey();
|
||||
const savedChanges = localStorage.getItem(storageKey);
|
||||
const savedChanges = localStorage.getItem(storageKey);
|
||||
if (savedChanges) {
|
||||
const changes = JSON.parse(savedChanges);
|
||||
changes.forEach(change => {
|
||||
@@ -1092,8 +1077,7 @@ export default function RootLayout({
|
||||
if (isBackground) {
|
||||
element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
|
||||
} else {
|
||||
const oldMediaType = getMediaTypeFromUrl(change.oldValue);
|
||||
if (revertTag === 'video' && oldMediaType === 'image') {
|
||||
if (revertTag === 'video' && oldMediaType === 'image') {
|
||||
swapMediaElement(element, 'img', change.oldValue);
|
||||
} else if (revertTag === 'img' && oldMediaType === 'video') {
|
||||
swapMediaElement(element, 'video', change.oldValue);
|
||||
@@ -1141,8 +1125,7 @@ export default function RootLayout({
|
||||
const el = textElements[i];
|
||||
if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
|
||||
element = el;
|
||||
const newSelector = getUniqueSelector(element, true);
|
||||
if (newSelector) {
|
||||
if (newSelector) {
|
||||
element.dataset.webildSelector = newSelector;
|
||||
}
|
||||
break;
|
||||
@@ -1233,10 +1216,8 @@ export default function RootLayout({
|
||||
replaced = true;
|
||||
} else if (element.tagName.toLowerCase() === 'img') {
|
||||
oldValue = element.src;
|
||||
const newMediaType = getMediaTypeFromUrl(newSrc);
|
||||
if (newMediaType === 'video' && allowMediaTypeSwap) {
|
||||
const swapped = swapMediaElement(element, 'video', newSrc);
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
if (newMediaType === 'video' && allowMediaTypeSwap) {
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
element = swapped;
|
||||
} else {
|
||||
element.src = newSrc;
|
||||
@@ -1244,11 +1225,9 @@ export default function RootLayout({
|
||||
replaced = true;
|
||||
} else if (element.tagName.toLowerCase() === 'video') {
|
||||
oldValue = element.src || element.currentSrc || '';
|
||||
const newMediaType = getMediaTypeFromUrl(newSrc);
|
||||
const sources = element.querySelectorAll('source');
|
||||
const sources = element.querySelectorAll('source');
|
||||
if (newMediaType === 'image' && allowMediaTypeSwap) {
|
||||
const swapped = swapMediaElement(element, 'img', newSrc);
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
element = swapped;
|
||||
} else {
|
||||
if (sources.length > 0) {
|
||||
@@ -1270,8 +1249,7 @@ export default function RootLayout({
|
||||
}
|
||||
|
||||
if (replaced) {
|
||||
const elementInfo = getElementInfo(element);
|
||||
|
||||
|
||||
let cleanOldValue = oldValue;
|
||||
if (oldValue.includes('url(')) {
|
||||
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
|
||||
@@ -1342,13 +1320,7 @@ export default function RootLayout({
|
||||
}
|
||||
}, true);
|
||||
|
||||
const urlCheckInterval = setInterval(() => {
|
||||
if (lastPathname !== window.location.pathname) {
|
||||
lastPathname = window.location.pathname;
|
||||
notifyPageChange();
|
||||
}
|
||||
}, 500);
|
||||
|
||||
|
||||
notifyPageChange();
|
||||
|
||||
window.webildCleanup = () => {
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-font-family: var(--font-plus-jakarta-sans), sans-serif;), sans-serif;
|
||||
font-family: var(--font-poppins), sans-serif;), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-font-family: var(--font-plus-jakarta-sans), sans-serif;), sans-serif;
|
||||
font-family: var(--font-poppins), sans-serif;), sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user