diff --git a/CascadingStyleSheets/General/Copyright.css b/CascadingStyleSheets/General/Copyright.css
deleted file mode 100644
index e69de29..0000000
diff --git a/CascadingStyleSheets/General/footer.css b/CascadingStyleSheets/General/footer.css
new file mode 100644
index 0000000..d7e69fa
--- /dev/null
+++ b/CascadingStyleSheets/General/footer.css
@@ -0,0 +1,13 @@
+
+#box_footerArea {
+
+ background: var(--bg-color);
+
+ width: 100vw;
+ height: 100vh;
+
+ position: relative;
+ margin: auto;
+
+ z-index: 999;
+}
\ No newline at end of file
diff --git a/CascadingStyleSheets/General/global.css b/CascadingStyleSheets/General/global.css
index 5a78689..d3c63ff 100644
--- a/CascadingStyleSheets/General/global.css
+++ b/CascadingStyleSheets/General/global.css
@@ -22,6 +22,7 @@
/* Font face */
--fontface-title: "PPAcma-Black", "YeZiGongChangTangYingHei-2";
--fontface-title-2: "GenJyuuGothic-Normal";
+ --fontface-title-3: "GenJyuuGothic-Normal";
--fontface-content: "unifontdianzhenhei";
--fontface-content-2: "bailufeiyunshouxieti";
diff --git a/CascadingStyleSheets/General/navigation.css b/CascadingStyleSheets/General/navigation.css
index baa58e0..36afee2 100644
--- a/CascadingStyleSheets/General/navigation.css
+++ b/CascadingStyleSheets/General/navigation.css
@@ -17,7 +17,7 @@
--nav-navShow-ul-top: 0.5em;
- --nav-ul-li-width: calc(100% / 5);
+ --nav-ul-li-width: calc(100% / 6);
--nav-ul-li-height: 1em;
--nav-ul-li-hover-top: -0.25em;
diff --git a/CascadingStyleSheets/home/home.css b/CascadingStyleSheets/home/home.css
index 307eb71..e79e8fb 100644
--- a/CascadingStyleSheets/home/home.css
+++ b/CascadingStyleSheets/home/home.css
@@ -7,6 +7,12 @@
--home-my-status-margin: 3em;
--home-content-title-margin: 1em;
+
+ --home-section-title-top: 1em;
+ --home-section-second-title-top: 1em;
+
+ --home-timeline-content-width: 80vw;
+ --home-timeline-content-day-border: 0.15em solid #888;
}
@media screen and (max-width: 750px) {
@@ -19,6 +25,8 @@
--home-my-status-margin: 1.2em;
--home-content-title-margin: .5em;
+
+ --home-timeline-content-width: 85vw;
}
}
@@ -38,6 +46,20 @@
}
+@keyframes home_entrance_2 {
+
+ from {
+
+ padding-left: 0;
+ }
+
+ to {
+
+ padding-left: calc(2 * var(--font-size-2_5em));
+ }
+
+}
+
#box_HomePage > div:first-child {
margin-bottom: calc(2 * var(--home-my-name-margin));
@@ -88,27 +110,155 @@
animation-timeline: view(85% 0);
}
+#box_HomePage .home_toSticky {
+ background: #d8dad7DD;
+}
+
#box_HomePage .home_ContentSection {
+
position: relative;
+
+ width: 90%;
+ margin: auto;
}
#box_HomePage .home_SectionTitle {
font-size: var(--font-size-3em);
font-family: var(--fontface-title-2);
- margin-left: var(--home-content-title-margin);
- margin-top: var(--home-content-title-margin);
+ margin: var(--home-content-title-margin) auto 0;
color: var(--font-color-light-normal);
+
+ width: 100%;
+ border-bottom: 0.15em solid #888;
+ top: var(--home-section-title-top);
+
+ z-index: 10;
}
#box_HomePage .home_ContentSectionAnimation {
animation: home_entrance_1 1s linear;
- animation-timeline: view(85% 0);
+ animation-timeline: view(70% 0);
}
#box_HomePage p.home_SectionTitle_Sticky {
position: sticky;
- top: 1em;
}
+
+#box_HomePage p.home_SectionSecondTitle {
+
+ font-size: var(--font-size-2_5em);
+ font-family: var(--fontface-title-3);
+ color: var(--font-color-light-normal);
+ top: var(--home-section-second-title-top);
+
+ width: 95%;
+ margin: auto;
+ box-sizing: border-box;
+
+ z-index: 8;
+}
+
+#box_HomePage p.home_SectionSecondTitle2 {
+
+ padding-left: 0;
+
+ transition: padding 0.5s, border 0.5s, width 0.5s;
+
+ background: #d8dad790;
+
+ z-index: 9;
+}
+
+#box_HomePage p.home_ContentSectionTitle2_Month {
+ padding-left: calc(2 * var(--font-size-2_5em));
+
+ /* width: auto; */
+ box-shadow: 0 4px 2px -2px gray;
+}
+
+#box_HomePage .home_ContentSection .home_Timeline_Content {
+
+ position: relative;
+
+ margin: auto;
+ margin-top: var(--font-size-2_5em);
+ width: var(--home-timeline-content-width);
+
+ text-align: center;
+}
+
+#box_HomePage .home_ContentSection .home_Timeline_Content .day {
+
+ position: absolute;
+
+ font-size: var(--font-size-2em);
+ right: var(--home-content-title-margin);
+ font-family: var(--fontface-title-3);
+ color: var(--font-color-light-normal);
+ padding: var(--home-my-name-margin);
+
+ border-radius: 1.5em .5em 1.5em .5em;
+ border: var(--home-timeline-content-day-border);
+
+ background: rgba(255, 255, 255, 0.5);
+
+ width: auto;
+
+ text-align: right;
+
+ z-index: 1;
+
+ animation: home_entrance_1 1s linear;
+ animation-timeline: view(75% 0);
+}
+
+#box_HomePage .home_ContentSection .home_Timeline_Content img {
+ max-height: 45vh;
+ max-width: 80%;
+
+ margin: auto;
+
+ animation: home_entrance_1 1s linear;
+ animation-timeline: view(70% 0);
+
+ transition: filter 0.5s;
+}
+
+#box_HomePage .home_ContentSection .home_Timeline_Content img:hover {
+ filter: opacity(0.2);
+}
+
+#box_HomePage .home_ContentSection .home_Timeline_Content img:hover ~ .description {
+
+ transform: scale(1.5);
+ opacity: 1;
+}
+
+#box_HomePage .home_ContentSection .home_Timeline_Content .description {
+
+ position: absolute;
+
+ color: var(--font-color-normal);
+ padding: var(--font-size-2_5em) 0;
+ font-size: var(--font-color-normal);
+ font-family: var(--fontface-content-3);
+
+ text-align: center;
+ display: inline-block;
+
+ width: 60%;
+ left: 0;
+ right: 0;
+ bottom: var(--font-size-2em);
+ margin: auto;
+
+ transform: scale(1);
+ opacity: 0;
+
+ transition: all 0.5s;
+
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/File/Image/MyTimeline/20000806-01.avif b/File/Image/MyTimeline/20000806-01.avif
new file mode 100644
index 0000000..94e84bf
Binary files /dev/null and b/File/Image/MyTimeline/20000806-01.avif differ
diff --git a/File/Image/MyTimeline/20200901-01.avif b/File/Image/MyTimeline/20200901-01.avif
new file mode 100644
index 0000000..89d8eba
Binary files /dev/null and b/File/Image/MyTimeline/20200901-01.avif differ
diff --git a/File/Image/MyTimeline/20231202-01.avif b/File/Image/MyTimeline/20231202-01.avif
new file mode 100644
index 0000000..a0de330
Binary files /dev/null and b/File/Image/MyTimeline/20231202-01.avif differ
diff --git a/File/Image/MyTimeline/20240630-01.avif b/File/Image/MyTimeline/20240630-01.avif
new file mode 100644
index 0000000..ad39f69
Binary files /dev/null and b/File/Image/MyTimeline/20240630-01.avif differ
diff --git a/JavaScript/General/Copyright.js b/JavaScript/General/Copyright.js
deleted file mode 100644
index e0ca4e4..0000000
--- a/JavaScript/General/Copyright.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-import { createElement, render, patch, vNodeDiff } from "../General/VirtualDOM.js";
-
-export function renderCopyright() {}
diff --git a/JavaScript/General/VirtualDOM.js b/JavaScript/General/VirtualDOM.js
index 150a1e3..2b83871 100644
--- a/JavaScript/General/VirtualDOM.js
+++ b/JavaScript/General/VirtualDOM.js
@@ -1,114 +1,145 @@
-export function vNodeCreate(tag, props, children) {
- return {
- tag,
- props: props || {},
- children: children || []
- };
-}
-
-export function vNodeRender(vNode) {
-
- if (typeof vNode === "string") {
- return document.createTextNode(vNode);
- }
-
- const el = document.createElement(vNode.tag);
- for (const [ key, value ] of Object.entries(vNode.props)) {
- el.setAttribute(key, value);
- }
-
- vNode.children.forEach(child => {
- el.appendChild(vNodeRender(child));
- });
+export const vDom = {
- return el;
-}
+ Create: (
+ Layout,
+ LanguageFile = {}
+ ) => {
-export function vNodeDiff(oldNode, newNode) {
+ const { tag, props = {}, children = [] } = Layout;
- const patches = [];
- if (oldNode === undefined || newNode === undefined) {
+ return vDom.CreateElement(
+ tag,
+ props,
+ children.length === 1 && typeof children[0] === "string"
+ ? [LanguageFile[children[0]] || children[0]]
+ : children.map(child => vDom.Create(child, LanguageFile))
+ );
+ },
- if (newNode !== undefined) {
- patches.push({ type: "ADD", newNode });
- } else if (oldNode !== undefined) {
- patches.push({ type: "REMOVE" });
+ CreateElement: (
+ tag,
+ props,
+ children
+ ) => {
+
+ return {
+ tag,
+ props: props || {},
+ children: children || []
}
- }
-
- else if (typeof oldNode === "string" && typeof newNode === "string") {
+ },
- if (oldNode !== newNode) {
- patches.push({ type: "TEXT", text: newNode });
+ Render: (
+ vNode
+ ) => {
+ if (typeof vNode === "string") {
+ return document.createTextNode(vNode);
}
- }
- else if (oldNode.tag !== newNode.tag) {
- patches.push({ type: "REPLACE", newNode });
- }
-
- else {
- const propPatches = [];
- for (const [ key, value ] of Object.entries(newNode.props)) {
- if (oldNode.props[key] !== value) {
- propPatches.push({ key, value });
+ const el = document.createElement(vNode.tag);
+ for (const [ key, value ] of Object.entries(vNode.props)) {
+ el.setAttribute(key, value);
+ }
+
+ vNode.children.forEach(child => {
+ el.appendChild(vDom.Render(child));
+ });
+
+ return el;
+ },
+
+ Diff: (
+ oldNode,
+ newNode
+ ) => {
+ const patches = [];
+ if (oldNode === undefined || newNode === undefined) {
+
+ if (newNode !== undefined) {
+ patches.push({ type: "ADD", newNode });
+ } else if (oldNode !== undefined) {
+ patches.push({ type: "REMOVE" });
}
}
- for (const key in oldNode.props) {
- if (!(key in newNode.props)) {
- propPatches.push({ key });
+ else if (typeof oldNode === "string" && typeof newNode === "string") {
+
+ if (oldNode !== newNode) {
+ patches.push({ type: "TEXT", text: newNode });
}
}
-
- if (propPatches.length > 0) {
- patches.push({ type: "PROPS", props: propPatches })
+
+ else if (oldNode.tag !== newNode.tag) {
+ patches.push({ type: "REPLACE", newNode });
}
- const childPatch = []
- const maxChildrenLength = Math.max(oldNode.children.length, newNode.children.length);
- for (let i = 0; i < maxChildrenLength; i++) {
- childPatch.push(vNodeDiff(oldNode.children[i], newNode.children[i]));
- }
- patches.push({ type: "CHILDREN", children: childPatch });
- }
+ else {
+ const propPatches = [];
+ for (const [ key, value ] of Object.entries(newNode.props)) {
+ if (oldNode.props[key] !== value) {
+ propPatches.push({ key, value });
+ }
+ }
- return patches;
-}
+ for (const key in oldNode.props) {
+ if (!(key in newNode.props)) {
+ propPatches.push({ key });
+ }
+ }
+
+ if (propPatches.length > 0) {
+ patches.push({ type: "PROPS", props: propPatches })
+ }
-export function vNodePatch(parent, patches, index = 0) {
-
- const el = parent.children[index];
-
- patches.forEach(patch => {
- switch(patch.type) {
- case "ADD":
- parent.appendChild(vNodeRender(patch.newNode));
- break;
- case "REMOVE":
- parent.removeChild(el);
- break;
- case "TEXT":
- el.textContent = patch.text;
- break;
- case "REPLACE":
- parent.replaceChild(vNodeRender(patch.newNode), el);
- break;
- case "PROPS":
- patch.props.forEach(({ key, value }) => {
- if (value === undefined){
- el.removeAttribute(key);
- } else {
- el.setAttribute(key, value);
- }
- });
- break;
- case "CHILDREN":
- patch.children.forEach((childPatch, i) => {
- vNodePatch(el, childPatch, i);
- });
- break;
+ const childPatch = []
+ const maxChildrenLength = Math.max(oldNode.children.length, newNode.children.length);
+ for (let i = 0; i < maxChildrenLength; i++) {
+ childPatch.push(vDom.Diff(oldNode.children[i], newNode.children[i]));
+ }
+ patches.push({ type: "CHILDREN", children: childPatch });
}
- });
+
+ return patches;
+ },
+
+ Patch: (
+ parent,
+ patches,
+ index = 0
+ ) => {
+
+ const el = parent.children[index];
+
+ patches.forEach(patch => {
+ switch(patch.type) {
+ case "ADD":
+ parent.appendChild(vDom.Render(patch.newNode));
+ break;
+ case "REMOVE":
+ parent.removeChild(el);
+ break;
+ case "TEXT":
+ el.textContent = patch.text;
+ break;
+ case "REPLACE":
+ parent.replaceChild(vDom.Render(patch.newNode), el);
+ break;
+ case "PROPS":
+ patch.props.forEach(({ key, value }) => {
+ if (value === undefined){
+ el.removeAttribute(key);
+ } else {
+ el.setAttribute(key, value);
+ }
+ });
+ break;
+ case "CHILDREN":
+ patch.children.forEach((childPatch, i) => {
+ vDom.Patch(el, childPatch, i);
+ });
+ break;
+ }
+ });
+ }
}
diff --git a/JavaScript/General/deepCopy.js b/JavaScript/General/deepCopy.js
deleted file mode 100644
index 9222fc4..0000000
--- a/JavaScript/General/deepCopy.js
+++ /dev/null
@@ -1,26 +0,0 @@
-
-export function deepCopy(obj) {
- if (obj === null || typeof obj !== 'object') {
- return obj;
- }
-
- if (obj instanceof Date) {
- return new Date(obj);
- }
-
- if (Array.isArray(obj)) {
- const arrCopy = [];
- for (let i = 0; i < obj.length; i++) {
- arrCopy[i] = deepCopy(obj[i]);
- }
- return arrCopy;
- }
-
- const objCopy = {};
- for (const key in obj) {
- if (obj.hasOwnProperty(key)) {
- objCopy[key] = deepCopy(obj[key]);
- }
- }
- return objCopy;
-}
diff --git a/JavaScript/General/footer.js b/JavaScript/General/footer.js
new file mode 100644
index 0000000..1a7b8e3
--- /dev/null
+++ b/JavaScript/General/footer.js
@@ -0,0 +1,7 @@
+
+export function renderFooter() {}
+
+export function scrollToFooter() {
+
+
+}
\ No newline at end of file
diff --git a/JavaScript/General/getJson.js b/JavaScript/General/getJson.js
deleted file mode 100644
index 71a59f5..0000000
--- a/JavaScript/General/getJson.js
+++ /dev/null
@@ -1,34 +0,0 @@
-
-export function getJson(url){
- if (window.fetch) {
- return fetch(url)
- .then(response => {
- if (!response.ok) {
- throw new Error(`HTTP Error! Status: ${response.status}`);
- }
- return response.json();
- });
- } else {
- return new Promise(function(resolve, reject) {
- var xhr = new XMLHttpRequest();
- xhr.open("GET", url, true);
-
- xhr.onreadystatechange = function() {
- if (xhr.readyState === 4) {
- if (xhr.status >= 200 && xhr.status < 300) {
- try {
- var data = JSON.parse(xhr.responseText);
- resolve(data);
- } catch (e) {
- reject(e);
- }
- } else {
- reject(new Error(`HTTP Error! Status: ${xhr.status}`));
- }
- }
- };
-
- xhr.send();
- });
- }
-}
\ No newline at end of file
diff --git a/JavaScript/General/loading.js b/JavaScript/General/loading.js
index 512be65..4c154e5 100644
--- a/JavaScript/General/loading.js
+++ b/JavaScript/General/loading.js
@@ -1,74 +1,70 @@
-import { deepCopy } from "./deepCopy.js";
-import { vNodeCreate, vNodeRender, vNodeDiff, vNodePatch } from "./VirtualDOM.js";
+export const SeeChen_Loading = {
-export function initLoading() {
- return vNodeCreate("div", {}, [
- vNodeCreate("p", {}, [window.location.host]),
- vNodeCreate("ol", {
- start: "0"
- }, [
- vNodeCreate("li", {
- class: "waiting_to_insert"
- }, ["Hello World!"]),
+ init: async () => {
+ let loadingLayout = await window.myTools.getJson("/Layout/Webpages/General/Loading.json");
+ loadingLayout.children[0].children[0] = window.location.host;
+ return vDom.Create(loadingLayout);
+ },
- vNodeCreate("p", {
- id: "progressBar"
- }, ["0%"]),
- ]),
- ]);
-}
+ updateProgress: (
+ progress
+ ) => {
+ document.querySelector("#progressBar").innerText = progress;
+ },
-export function loadingMessage(boxLoading, loadingContent, message, delay) {
- return new Promise(resolve => {
- setTimeout(() => {
- var oldLoadingContent = deepCopy(loadingContent);
- delete loadingContent.children[1].children.slice(-2)[0].props.class;
- loadingContent.children[1].children.splice(-1, 0, vNodeCreate("li", {
- class: "waiting_to_insert"
- }, [message]));
- vNodePatch(boxLoading, vNodeDiff(oldLoadingContent, loadingContent));
- resolve(loadingContent);
- }, delay);
- });
-}
+ pageLoadingMessage: async (
+ boxLoading,
+ layoutLoading,
+ message,
+ delay
+ ) => {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ var oldLoadingContent = window.myTools.deepCopy(layoutLoading);
+ delete layoutLoading.children[1].children.slice(-2)[0].props.class;
+ layoutLoading.children[1].children.splice(-1, 0, window.vDom.CreateElement("li", {
+ class: "waiting_to_insert"
+ }, [message]));
+ window.vDom.Patch(boxLoading, window.vDom.Diff(oldLoadingContent, layoutLoading));
+ resolve(layoutLoading);
+ }, delay);
+ });
+ },
-export function updateProgress(progress) {
- document.getElementById("progressBar").innerText = progress;
-}
+ pageLoading: async () => {
-export async function pageLoading() {
+ const boxLoading = document.querySelector("#box_loading");
+ var layoutLoading = await SeeChen_Loading.init();
- const boxLoading = document.getElementById("box_loading");
+ boxLoading.appendChild(window.vDom.Render(layoutLoading));
- var loadingContent = initLoading();
- boxLoading.appendChild(vNodeRender(loadingContent));
+ const updateMessage = [
+ "你好，世界！",
+ "",
+ "Loading ...",
+ "加载中 。。。",
+ "0%"
+ ];
- const message = [
- "你好，世界！",
- "",
- "Loading ...",
- "加载中 。。。",
- "0%"
- ];
- for (const msg of message) {
- loadingContent = await loadingMessage(boxLoading, loadingContent, msg, 500);
- }
+ for (const msg of updateMessage) {
+ layoutLoading = await SeeChen_Loading.pageLoadingMessage(boxLoading, layoutLoading, msg, 500);
+ }
- updateProgress("10%");
-}
+ SeeChen_Loading.updateProgress("10%");
+ },
-export function pageLoaded() {
+ pageLoaded: () => {
- const boxLoading = document.getElementById("box_loading");
- const childLoading = boxLoading.querySelector("div");
- updateProgress("100%");
- boxLoading.classList.add("hide");
+ const boxLoading = document.querySelector("#box_loading");
+ const childLoading = boxLoading.querySelector("div");
+ SeeChen_Loading.updateProgress("100%");
+ boxLoading.classList.add("hide");
- document.querySelector("#box_navBar").classList.remove("navHide");
+ document.querySelector("#box_navBar").classList.remove("navHide");
- setTimeout(() => {
- boxLoading.removeChild(childLoading);
- console.log(window.globalValues.currentVDom);
- }, 1000);
+ setTimeout(() => {
+ boxLoading.removeChild(childLoading);
+ }, 1000);
+ },
}
diff --git a/JavaScript/General/navigation.js b/JavaScript/General/navigation.js
index 1833891..7de72c7 100644
--- a/JavaScript/General/navigation.js
+++ b/JavaScript/General/navigation.js
@@ -1,53 +1,43 @@
-import { route } from "./route.js";
-import { vNodeCreate, vNodeRender } from "./VirtualDOM.js";
-
-export function renderNavigation() {
-
- const navigationContent = window.globalValues.translateData.navigation[window.globalValues.language];
- console.log(navigationContent);
-
- let domNav = vNodeCreate("div", {}, [
-
- vNodeCreate("p", {}, [window.globalValues.translateData.index[window.globalValues.language]._title_]),
-
- vNodeCreate("ul", {}, [
- vNodeCreate("li", {
- onclick: "window.clickEvent.navigationMenuClick(this, '/')",
- class: "selected"
- }, [navigationContent._home_]),
-
- vNodeCreate("li", {
- onclick: "window.clickEvent.navigationMenuClick(this, '/travel')",
- }, [navigationContent._travel_]),
-
- vNodeCreate("li", {
- onclick: "window.clickEvent.navigationMenuClick(this, '/lens')",
- }, [navigationContent._lens_]),
-
- vNodeCreate("li", {
- onclick: "window.clickEvent.navigationMenuClick(this, '/projects')",
- }, [navigationContent._projects_]),
-
- vNodeCreate("li", {
- onclick: "window.clickEvent.navigationMenuClick(this, '/about')",
- }, [navigationContent._about_]),
- ]),
- ]);
-
- document.getElementById("box_navBar").appendChild(vNodeRender(domNav));
+export const SeeChen_Navigation = {
+
+ render: async () => {
+
+ var homePageLayout = await window.myTools.getJson("/Layout/Webpages/General/Navigation.json");
+
+ let LanguageFile = window.globalValues.translateData.navigation[window.globalValues.language];
+ LanguageFile["_title_"] = window.globalValues.translateData.index[window.globalValues.language]._title_;
+ document.querySelector("#box_navBar").appendChild(
+ window.vDom.Render(
+ window.vDom.Create(homePageLayout, LanguageFile)
+ )
+ );
+ },
+
+ clearUp: () => {
+
+ // Navigation never Clear Up.
+ console.log("Never Clearup.");
+ }
}
-export function navigationMenuClick(obj, path) {
+export const SeeChen_Navigation_Click = {
- document.querySelector(".selected").classList.remove("selected");
- obj.classList.add("selected");
+ clickMenu: (
+ obj,
+ path
+ ) => {
- route(path);
-}
+ document.querySelector(".selected").classList.remove("selected");
+ obj.classList.add("selected");
+
+ window.router.route(path);
+ },
-export function navigationMenuExpand(obj) {
-
- obj.classList.toggle("nav_MenuClick");
- document.querySelector("#box_navBar").classList.toggle("nav_MenuExpand");
+ expandMenu: (
+ obj
+ ) => {
+ obj.classList.toggle("nav_MenuClick");
+ document.querySelector("#box_navBar").classList.toggle("nav_MenuExpand");
+ }
}
diff --git a/JavaScript/General/route.js b/JavaScript/General/route.js
index 73a9352..167eb31 100644
--- a/JavaScript/General/route.js
+++ b/JavaScript/General/route.js
@@ -1,31 +1,82 @@
window.addEventListener("popstate", () => {
+ router.route(window.location.pathname);
+});
- route(window.location.pathname);
+document.addEventListener("DOMContentLoaded", () => {
+ router.route(window.location.pathname);
});
const routes = {
- "/": function() {
-
+ "/": function () {
document.title = "HOME";
},
- "/home": function() {
-
- document.title = "home";
+ "/post/:id": function (params) {
+ document.title = `ID: ${params.id}`;
}
}
-export function route(path) {
+export const router = {
- if (routes[path]) {
+ route: (
+ path
+ ) => {
+ const routeMatch = router.matchRoute(path);
+
+ if (routeMatch) {
+ const params = routeMatch.params;
+ routeMatch.handler(params);
+ } else {
+ document.title = "404 Page Not Found!";
+ }
+
+ window.history.pushState({}, path, window.location.origin + path);
+ },
- routes[path]();
- } else {
+ matchRoute: (
+ path
+ ) => {
- document.title = "404 Pages Not Found!";
- }
+ for (const route in routes) {
+ const routeRegex = router.pathToRegex(route);
+ const match = path.match(routeRegex);
+
+ if (match) {
+ return {
+ handler: routes[route],
+ params: router.extractParams(route, match)
+ };
+ }
+ }
+ return null;
+ },
- window.history.pushState({}, path, window.location.origin + path);
-}
\ No newline at end of file
+ pathToRegex: (
+ route
+ ) => {
+
+ const keys = [];
+ const regex = route.replace(/:([a-zA-Z]+)/g, (full, key) => {
+ keys.push(key);
+ return "([^/]+)";
+ });
+ return new RegExp(`^${regex}$`);
+ },
+
+ extractParams: (
+ route,
+ match
+ ) => {
+ const keys = [];
+ route.replace(/:([a-zA-Z]+)/g, (full, key) => {
+ keys.push(key);
+ });
+ const params = {};
+ keys.forEach((key, index) => {
+ params[key] = match[index + 1];
+ });
+ return params;
+ }
+}
diff --git a/JavaScript/General/scroll.js b/JavaScript/General/scroll.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/JavaScript/General/scroll.js
@@ -0,0 +1 @@
+
diff --git a/JavaScript/General/tools.js b/JavaScript/General/tools.js
new file mode 100644
index 0000000..37249b7
--- /dev/null
+++ b/JavaScript/General/tools.js
@@ -0,0 +1,81 @@
+
+export const tools = {
+
+ deepCopy: (
+ obj
+ ) => {
+
+ if (obj === null || typeof obj !== 'object') {
+ return obj;
+ }
+
+ if (obj instanceof Date) {
+ return new Date(obj);
+ }
+
+ if (Array.isArray(obj)) {
+ const arrCopy = [];
+ for (let i = 0; i < obj.length; i++) {
+ arrCopy[i] = tools.deepCopy(obj[i]);
+ }
+ return arrCopy;
+ }
+
+ const objCopy = {};
+ for (const key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ objCopy[key] = tools.deepCopy(obj[key]);
+ }
+ }
+ return objCopy;
+ },
+
+ getJson: async (
+ url
+ ) => {
+ if (window.fetch) {
+ return fetch(url)
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP Error! Status: ${response.status}`);
+ }
+ return response.json();
+ });
+ } else {
+ return new Promise(function(resolve, reject) {
+ var xhr = new XMLHttpRequest();
+ xhr.open("GET", url, true);
+
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState === 4) {
+ if (xhr.status >= 200 && xhr.status < 300) {
+ try {
+ var data = JSON.parse(xhr.responseText);
+ resolve(data);
+ } catch (e) {
+ reject(e);
+ }
+ } else {
+ reject(new Error(`HTTP Error! Status: ${xhr.status}`));
+ }
+ }
+ };
+
+ xhr.send();
+ });
+ }
+ },
+
+ getTranslate: async () => {
+ try {
+ var translateIndex = await tools.getJson("/Language/Index/index.json");
+ window.globalValues.translateData.index = translateIndex;
+
+ var translateNavigation = await tools.getJson("/Language/General/navigation.json");
+ window.globalValues.translateData.navigation = translateNavigation;
+ } catch (err) {
+ console.error(err);
+ }
+ },
+
+}
diff --git a/JavaScript/Home/home.js b/JavaScript/Home/home.js
index c1d6969..a0fa4bf 100644
--- a/JavaScript/Home/home.js
+++ b/JavaScript/Home/home.js
@@ -1,11 +1,24 @@
+export const SeeChen_HomePage = {
+
+ render: () => {
+
+ console.log("Home Page Render.");
+ },
+
+ clearUp: () => {
+
+ // Clear Up memory.
+ }
+}
+
+
export function homeScroll() {
const homeContent = document.querySelector("#contentArea");
- console.log(homeContent);
homeContent.addEventListener("scroll", function(event) {
- const homeSectionTitleTag = document.querySelectorAll(".home_SectionTitle");
+ const homeSectionTitleTag = document.querySelectorAll(".home_toSticky");
homeSectionTitleTag.forEach(target => {
const rect = target.getBoundingClientRect();
const isInViewport = rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
@@ -21,8 +34,28 @@ export function homeScroll() {
}
});
+ const homeMonth = document.querySelectorAll(".home_SectionSecondTitle2");
+ homeMonth.forEach(target => {
+ const rect = target.getBoundingClientRect();
+ if (`${rect.top}` <= parseInt(document.documentElement.style.getPropertyValue("--home-section-second-title-top"))) {
+ target.classList.add("home_ContentSectionTitle2_Month");
+ } else {
+ target.classList.remove("home_ContentSectionTitle2_Month");
+ }
+ });
+
if (event.target.scrollTop >= document.querySelector("#box_navBar div p").clientHeight) {
document.querySelector("#box_navBar").classList.add("navShow");
+ document.documentElement.style.setProperty(
+ "--home-section-second-title-top",
+ `${document.querySelector(".home_SectionTitle").clientHeight
+ + document.querySelector("#box_navBar div p").clientHeight
+ + 5}px`
+ );
+ document.documentElement.style.setProperty(
+ "--home-section-title-top",
+ `${document.querySelector("#box_navBar div p").clientHeight}px`
+ );
} else if (event.target.scrollTop <= document.querySelector("#box_navBar div p").clientHeight) {
document.querySelector("#box_navBar").classList.remove("navShow");
}
@@ -34,50 +67,3 @@ export function homeScroll() {
}
});
}
-
-// export function homeSectionTitlePosition() {
-
-// const homeSectionTitleTag = document.querySelectorAll(".home_ContentSectionAnimation");
-
-// const intersectionObserver = new IntersectionObserver((entries, observer) => {
-// entries.forEach(entry => {
-// if (entry.isIntersecting) {
-// trackPosition(entry.target);
-// } else {
-// stopTrackingPosition(entry.target);
-// }
-// });
-// }, {
-// threshold: 0.2
-// });
-
-// homeSectionTitleTag.forEach(target => {
-// intersectionObserver.observe(target);
-// });
-
-// const homeSectionPosition = new Map();
-// function trackPosition(element) {
-
-// if (homeSectionPosition.has(element)) return;
-
-// function updatePosition() {
-
-// const rect = element.getBoundingClientRect();
-// console.log(element);
-// console.log(`Element ${element} Position -> Top: ${rect.top}, Left: ${rect.left}`);
-
-// if (element.isConnected) {
-// homeSectionPosition.set(element, requestAnimationFrame(updatePosition));
-// }
-// }
-
-// homeSectionPosition.set(element, requestAnimationFrame(updatePosition));
-// }
-
-// function stopTrackingPosition(element) {
-// if (homeSectionPosition.has(element)) {
-// cancelAnimationFrame(homeSectionPosition.get(element));
-// homeSectionPosition.delete(element);
-// }
-// }
-// }
\ No newline at end of file
diff --git a/JavaScript/Index/index.js b/JavaScript/Index/index.js
index ce88176..5b101c7 100644
--- a/JavaScript/Index/index.js
+++ b/JavaScript/Index/index.js
@@ -1,12 +1,21 @@
-import { route } from "../General/route.js";
-import { getJson } from "../General/getJson.js";
+import { vDom } from "../General/VirtualDOM.js";
+import { tools } from "../General/tools.js";
+import { router } from "../General/route.js";
import { userLanguage } from "../General/language.js";
-// import { createElement, render, vDOMPatch, vNodeDiff } from "../General/VirtualDOM.js";
-import { navigationMenuClick, navigationMenuExpand, renderNavigation } from "../General/navigation.js";
-import { pageLoaded, pageLoading } from "../General/loading.js";
-import { homeScroll } from "../Home/home.js";
+import { SeeChen_Loading } from "../General/loading.js";
+import { SeeChen_Navigation, SeeChen_Navigation_Click } from "../General/navigation.js";
+
+import { homeScroll, SeeChen_HomePage } from "../Home/home.js";
+
+window.vDom = vDom;
+window.router = router;
+window.myTools = tools;
+
+window.clickEvent = {
+ navigation: SeeChen_Navigation_Click,
+}
window.globalValues = {
@@ -16,35 +25,34 @@ window.globalValues = {
language: ""
}
-window.clickEvent = {}
-window.webWorker = {}
+window.webpages = {
+ loadingPage: SeeChen_Loading,
+ navigationPage: SeeChen_Navigation,
-window.addEventListener("DOMContentLoaded", () => {
+ currentPages: {}
+}
- let PathName = window.location.pathname;
- console.log(PathName);
-});
+window.webWorker = {}
window.onload = async function() {
- pageLoading();
+ window.webpages.loadingPage.pageLoading();
+
+ window.webpages.currentPages = SeeChen_HomePage;
- window.route = route;
window.globalValues.language = new userLanguage().getLanguage();
- await getData();
+ await window.myTools.getTranslate();
+ await window.webpages.navigationPage.render();
+
+ window.webpages.currentPages.render();
document.title = window.globalValues.translateData.index[window.globalValues.language]._title_;
- window.clickEvent.navigationMenuExpand = navigationMenuExpand;
- window.clickEvent.navigationMenuClick = navigationMenuClick;
-
- renderNavigation();
-
// Home
homeScroll();
await testLoad();
- pageLoaded();
+ window.webpages.loadingPage.pageLoaded();
}
async function testLoad() {
@@ -55,15 +63,3 @@ async function testLoad() {
});
}
-async function getData() {
- try {
- var translateIndex = await getJson("/Language/Index/index.json");
- window.globalValues.translateData.index = translateIndex;
-
- var translateNavigation = await getJson("/Language/General/navigation.json");
- window.globalValues.translateData.navigation = translateNavigation;
- } catch (err) {
- console.error(err);
- }
-}
-
diff --git a/Language/General/navigation.json b/Language/General/navigation.json
index 837c927..ce0e843 100644
--- a/Language/General/navigation.json
+++ b/Language/General/navigation.json
@@ -3,6 +3,7 @@
"_home_": "我的主页",
"_travel_": "我的旅行",
"_lens_": "我的方框",
+ "_post_": "我的发癫",
"_projects_": "我的项目",
"_about_": "关于我的"
},
@@ -11,6 +12,7 @@
"_home_": "Home",
"_travel_": "Travel",
"_lens_": "Lens",
+ "_post_": "Post",
"_projects_": "Projects",
"_about_": "About"
}
diff --git a/Layout/Webpages/General/Loading.json b/Layout/Webpages/General/Loading.json
new file mode 100644
index 0000000..3363abd
--- /dev/null
+++ b/Layout/Webpages/General/Loading.json
@@ -0,0 +1,27 @@
+{
+ "tag": "div",
+ "props": {},
+ "children": [{
+ "tag": "p",
+ "props": {},
+ "children": ["seechen.github.io"]
+ }, {
+ "tag": "ol",
+ "props": {
+ "start": "0"
+ },
+ "children": [{
+ "tag": "li",
+ "props": {
+ "class": "waiting_to_insert"
+ },
+ "children": ["Hello World!"]
+ }, {
+ "tag": "p",
+ "props": {
+ "id": "progressBar"
+ },
+ "children": ["0%"]
+ }]
+ }]
+}
\ No newline at end of file
diff --git a/Layout/Webpages/General/Navigation.json b/Layout/Webpages/General/Navigation.json
new file mode 100644
index 0000000..d501ea0
--- /dev/null
+++ b/Layout/Webpages/General/Navigation.json
@@ -0,0 +1,57 @@
+{
+ "tag": "div",
+ "props": {},
+ "children": [{
+ "tag": "p",
+ "props": {},
+ "children": ["_title_"]
+ }, {
+
+ "tag": "ul",
+ "props": {},
+ "children": [{
+
+ "tag": "li",
+ "props": {
+ "onclick": "window.clickEvent.navigation.clickMenu(this, '/')",
+ "class": "selected"
+ },
+ "children": ["_home_"]
+ }, {
+
+ "tag": "li",
+ "props": {
+ "onclick": "window.clickEvent.navigation.clickMenu(this, '/travel')"
+ },
+ "children": ["_travel_"]
+ }, {
+
+ "tag": "li",
+ "props": {
+ "onclick": "window.clickEvent.navigation.clickMenu(this, '/lens')"
+ },
+ "children": ["_lens_"]
+ }, {
+
+ "tag": "li",
+ "props": {
+ "onclick": "window.clickEvent.navigation.clickMenu(this, '/post')"
+ },
+ "children": ["_post_"]
+ }, {
+
+ "tag": "li",
+ "props": {
+ "onclick": "window.clickEvent.navigation.clickMenu(this, '/projects')"
+ },
+ "children": ["_projects_"]
+ }, {
+
+ "tag": "li",
+ "props": {
+ "onclick": "window.clickEvent.navigation.clickMenu(this, '/about')"
+ },
+ "children": ["_about_"]
+ }]
+ }]
+}
\ No newline at end of file
diff --git a/_index.html b/_index.html
index 0d18330..31396f1 100644
--- a/_index.html
+++ b/_index.html
@@ -19,6 +19,8 @@
+
+
@@ -28,7 +30,7 @@
-
+
@@ -45,7 +47,7 @@