Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeeChen
SeeChen committed Nov 29, 2024
1 parent 66589a3 commit 11edfc2
Show file tree
Hide file tree
Showing 8 changed files with 843 additions and 5 deletions.
562 changes: 559 additions & 3 deletions CascadingStyleSheets/Projects/projects.css
View file

Large diffs are not rendered by default.

Binary file added File/Icon/ico_company.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added File/Icon/ico_location.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added File/Icon/ico_school.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added File/Icon/ico_website.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions File/Projects/seechen.github.io/intro.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
fdsafjni
fdalmsfkldjakfdafd
fdksafmnkjfnjk
100 changes: 99 additions & 1 deletion JavaScript/Projects/projects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ export const SeeChen_ProjectsPage = {

bindEvent: async () => {

document.querySelector("#box_projectsPage > div:nth-child(3)").addEventListener("click", (e) => {

window.eventBus.emit("projectMouseClick", { e });
});

document.querySelector("#box_projectsPage > div:nth-child(3)").addEventListener("mousemove", (e) => {

window.eventBus.emit("projectMouseMove", { e });
Expand All @@ -42,6 +47,23 @@ export const SeeChen_ProjectsPage = {

window.eventBus.emit("projectMouseLeave", { e });
});

document.querySelector("#project_details_header > p:first-child").addEventListener("click", (e) => {

window.eventBus.emit("projectDetailsCloseClick", { e });
});

document.querySelectorAll(".dir_title").forEach(ele => {
ele.addEventListener("click", (e) => {

window.eventBus.emit("projectDetailsDirExpand", { e });
});
});

document.querySelector("#project_details_directory").addEventListener("click", (e) => {

window.eventBus.emit("projectDetailsDirClick", { e });
});
},

registerEvent: async () => {
Expand All @@ -51,12 +73,34 @@ export const SeeChen_ProjectsPage = {
projectMouseMove: SeeChen_ProjectsMouseEvent.mouseMove,
projectMouseEnter: SeeChen_ProjectsMouseEvent.mouseEnter,
projectMouseLeave: SeeChen_ProjectsMouseEvent.mouseLeave,
projectMouseClick: SeeChen_ProjectsMouseEvent.mouseClick,

projectDetailsCloseClick: SeeChen_ProjectsDetailsMouseEvent.closeClick,

projectDetailsDirExpand: SeeChen_ProjectsDetailsDirEvent.expandDir,
projectDetailsDirClick: SeeChen_ProjectsDetailsDirEvent.clickDir,
}

Object.entries(projects_EvnetHandler).forEach(([event, handler]) => {

window.eventBus.on(event, handler);
});

let isTouchScreen = 'ontouchstart' in window;

if (isTouchScreen || true) {
const projects_EvnetHandler = {

projectMouseMove: SeeChen_ProjectsMouseEvent.mouseMove,
projectMouseEnter: SeeChen_ProjectsMouseEvent.mouseEnter,
projectMouseLeave: SeeChen_ProjectsMouseEvent.mouseLeave,
}

Object.entries(projects_EvnetHandler).forEach(([event, handler]) => {

window.eventBus.off(event, handler);
});
}
},

clearUp: () => {
Expand Down Expand Up @@ -120,5 +164,59 @@ const SeeChen_ProjectsMouseEvent = {
document.querySelector("#project_details").classList.remove("small-window");
}
},
mouseClick: () => {}
mouseClick: (
event
) => {

const { e } = event;

if (e.target.classList.contains("project_border")) {

document.querySelector("#project_details").classList.add("ready-to-full");
setTimeout(() => {
document.querySelector("#project_details").classList.add("full-window");
}, 100);
}
}
}

const SeeChen_ProjectsDetailsMouseEvent = {

closeClick: (
event
) => {

document.querySelector("#project_details").classList.remove("full-window");
setTimeout(() => {
document.querySelector("#project_details").classList.remove("ready-to-full");
}, 600);
}
}

const SeeChen_ProjectsDetailsDirEvent = {

expandDir: (
event
) => {

const { e } = event;

e.target.classList.toggle("expand");
console.log("click")
},

clickDir: (
event
) => {

const { e } = event;

if (e.target.classList.contains("details_Dir_option")) {

document.querySelector(".content-display").classList.remove("content-display");

const targetDiv = `box_Projects_${e.target.id.split("_")[1]}`;
document.querySelector(`#${targetDiv}`).classList.add("content-display");
}
}
}
183 changes: 182 additions & 1 deletion spa.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,187 @@
</div>
</div>

<div id="project_details"></div>
<div id="project_details">
<div id="project_details_header">
<p>❌</p>
<p>_title_</p>
</div>

<div>
<div id="project_details_directory">
<div class="dir_level_0">
<p id="details_Intro" class="details_Dir_option">Introduction</p>
<p id="details_Git" class="details_Dir_option">Git</p>
<p id="details_Features" class="details_Dir_option">Features</p>
<p id="details_Guide" class="details_Dir_option">Guide</p>
<p id="details_Documentation" class="details_Dir_option">Documentation</p>
<p id="details_License" class="details_Dir_option">License</p>
<p id="details_Community" class="details_Dir_option">Community</p>
<p id="details_Faqs" class="details_Dir_option">FAQs</p>
<p id="details_Update" class="details_Dir_option">Update Log</p>
<p id="details_Author" class="details_Dir_option">Collaborator</p>
<!-- <div class="dir_level">
<p class="dir_title">aaa</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<div class="dir_level">
<p class="dir_title">bbb</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
</div>
<div class="dir_level">
<p class="dir_title">ddd</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
</div>
</div>
<div class="dir_level">
<p class="dir_title">ccc</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
<p>Overview</p>
</div> -->
</div>
</div>
<div id="project_details_content">
<div id="box_Projects_Intro" class="content-block content-display">

<div class="content-block-section">
<p class="content-block-title-1">Introduction</p>
<pre class="content-block-content-1">Especially thanks to the guiding principals, I think it’s fair to say if you are testing your component or app the same way you would instruct a human to test it in production, then you are doing it right. If your component is taking an API call, and formatting it into Markdown, then you should test that it is actually happening correctly. How the component is rendering (and mimicking it in your test) is an example of testing implementation details. Testing what the component renders is not.I know it’s a fine line, but I think you should include your last line. I also think it’d be great if you could find a way to query by something other than test-id.是的，这种顺序基本可行，因为它提供了呈现项目相关信息的逻辑流程。但是，细微的调整可以改善用户导航并提高清晰度。以下是对当前结构的分析和建议的改进：</pre>
</div>
</div>

<div id="box_Projects_Git" class="content-block">

<div>
<p><a href="#"><img src="/File/Icon/ico_github.png" alt=""></a></p>
<div>
<div>
<p>HTTPS</p>
<p>https://github.com/SeeChen/seechen.github.io.git</p>
<p>Copy</p>
</div>
<div>
<p>SSH</p>
<p>[email protected]:SeeChen/seechen.github.io.git</p>
<p>Copy</p>
</div>
</div>
<p><a href="#">Download ZIP File</a></p>
<p><a href="#">View on GitHub</a></p>
</div>
<div>
<p><a href="#"><img src="/File/Icon/ico_github.png" alt=""></a></p>
<div>
<div>
<p>HTTPS</p>
<p>https://github.com/SeeChen/seechen.github.io.git</p>
<p>Copy</p>
</div>
<div>
<p>SSH</p>
<p>[email protected]:SeeChen/seechen.github.io.git</p>
<p>Copy</p>
</div>
</div>
<p><a href="#">Download ZIP File</a></p>
<p><a href="#">View on GitHub</a></p>
</div>
<div>
<p><a href="#"><img src="/File/Icon/ico_github.png" alt=""></a></p>
<div>
<div>
<p>HTTPS</p>
<p>https://github.com/SeeChen/seechen.github.io.git</p>
<p>Copy</p>
</div>
<div>
<p>SSH</p>
<p>[email protected]:SeeChen/seechen.github.io.git</p>
<p>Copy</p>
</div>
</div>
<p><a href="#">Download ZIP File</a></p>
<p><a href="#">View on GitHub</a></p>
</div>
</div>

<div id="box_Projects_Features" class="content-block">
<div class="content-block-section">
<p class="content-block-title-1">Introduction</p>
<pre class="content-block-content-1"> a Especially thanks to the guiding principals, I think it’s fair to say if you are testing your component or app the same way you would instruct a human to test it in production, then you are doing it right. If your component is taking an API call, and formatting it into Markdown, then you should test that it is actually happening correctly. How the component is rendering (and mimicking it in your test) is an example of testing implementation details. Testing what the component renders is not.I know it’s a fine line, but I think you should include your last line. I also think it’d be great if you could find a way to query by something other than test-id.是的，这种顺序基本可行，因为它提供了呈现项目相关信息的逻辑流程。但是，细微的调整可以改善用户导航并提高清晰度。以下是对当前结构的分析和建议的改进：</pre>
</div>
</div>

<div id="box_Projects_Guide" class="content-block"></div>
<div id="box_Projects_Documentation" class="content-block"></div>

<div id="box_Projects_License" class="content-block">

<div class="content-block-section">
<p class="content-block-title-1">LICENSE</p>
<p class="content-block-content-1">本项目使用 <a href="#">MIT</a> 开源许可证进行开发</p>
<p class="content-block-content-1">许可证协议详情请查看 <a href="#">www.example.com</a></p>
</div>
<div class="content-block-section">
<p class="content-block-title-1">中文</p>
<p id="license_translate">本翻译仅供参考，原文请查看<a href="#license_original">这里</a>，或点击<a href="#">这里</a>。</p>
<pre class="content-block-content-1">这是中文的开源许可证</pre>
</div>
<div class="content-block-section">
<p class="content-block-title-1" id="license_original">Introduction</p>
<pre class="content-block-content-1">GNU GENERAL PUBLIC LICENSEVersion 3, 29 June 2007</pre>
</div>
</div>

<div id="box_Projects_Community" class="content-block"></div>
<div id="box_Projects_Faqs" class="content-block"></div>

<div id="box_Projects_Update" class="content-block">
<div class="content-block-section">
<p class="content-block-title-1">2000.08.06</p>
<figure>
<figcaption>Fruit</figcaption>
<ol start="0">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ol>
</figure>
</div>
</div>

<div id="box_Projects_Author" class="content-block">
<div>
<div>
<img src="/File/Image/Home/home-background.avif" alt="">
<p>SEECHEN LEE</p>
</div>
<div>
<a href="" class="profile_location">Malaysia</a>
<a href="" class="profile_school">Beijing Institute of Technology</a>
<a href="" class="profile_company">-</a>
<a href="#" class="profile_website">https://seechen.github.io</a>
<a href="#" class="profile_github">https://github.com/SeeChen</a>
<a href="#" class="profile_email">[email protected]</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Expand All @@ -180,3 +360,4 @@
</div>
</body>
</html>

0 comments on commit 11edfc2

Please sign in to comment.