Skip to content

Commit cf2f3c2

Browse files
Stagnant09Stagnant09
authored
Add files via upload
1 parent d47429c commit cf2f3c2

File tree

3 files changed

+121
-35
lines changed

3 files changed

+121
-35
lines changed

‎index.html

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -50,52 +50,59 @@
5050
<div class="paragraph">This is the second paragraph of the article. The margin between paragraphs is 11 px.</div>
5151
<div class="contents">
5252
<div class="peak">Contents</div>
53-
<div class="cs">1. Sample Sector</div>
54-
<div class="cs">2. Another Sector</div>
55-
<div class="cs">3. References</div>
53+
<div class="cs" tag="1">1. Sample Sector</div>
54+
<div class="cs" tag="2">2. Another Sector</div>
55+
<div class="cs" tag="3">3. References</div>
5656
</div>
5757
<div class="sector" tag="1"><span class="hideshow" tag="1">▶ </span>Sample Sector</div>
58-
<div class="paragraph">Above there is a sector separator with a unique tag. Next to the title of the sector there is a hide/show button.</div>
59-
<div class="paragraph">Next, there is an example equation displayed in LaTeX formatting:</div>
60-
<div class="equation">
61-
\[
62-
\frac{d}{dx} f(x) = \lim_{h\to0} \frac{f(x+h)-f(x)}{h} \: \: \: \: \: \: \: \: \: (1 \:. 1\:)
63-
\]
58+
<div class="sector-content-container" tag="1">
59+
<div class="paragraph">Above there is a sector separator with a unique tag. Next to the title of the sector there is a hide/show button.</div>
60+
<div class="paragraph">Next, there is an example equation displayed in LaTeX formatting:</div>
61+
<div class="equation">
62+
\[
63+
\frac{d}{dx} f(x) = \lim_{h\to0} \frac{f(x+h)-f(x)}{h} \: \: \: \: \: \: \: \: \: (1 \:. 1\:)
64+
\]
65+
</div>
66+
<div class="legend">Fig. 1.1. This is an example legend.</div>
67+
<div class="paragraph">This how a <span class="link">link</span> is displayed.</div>
6468
</div>
65-
<div class="legend">Fig. 1.1. This is an example legend.</div>
66-
<div class="paragraph">This how a <span class="link">link</span> is displayed.</div>
6769
<div class="sector" tag="2"><span class="hideshow" tag="2">▶ </span>Another Sector</div>
68-
<div class="paragraph">This is the second sector. Now, here is how a script is displayed:</div>
69-
<div class="code">
70-
<div class="header-code" style="overflow: hidden;">Java <span class="copy" style="float: right;">&nbsp;Copy 📋</span></div>
71-
<div class="line">
72-
public class Main {
73-
</div>
74-
<div class="line">
75-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public static void main(String[] args) {
76-
</div>
77-
<div class="line">
78-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println("Hello World!"); // Prints "Hello World!" to the console.
79-
</div>
80-
<div class="line">
81-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
82-
</div>
83-
<div class="line">
84-
}
70+
<div class="sector-content-container" tag="2">
71+
<div class="paragraph">This is the second sector. Now, here is how a script is displayed:</div>
72+
<div class="code" tag="1">
73+
<div class="header-code" style="overflow: hidden;">Java <span class="copy" style="float: right;" tag="1">&nbsp;Copy 📋</span></div>
74+
<div class="line">
75+
public class Main {
76+
</div>
77+
<div class="line">
78+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public static void main(String[] args) {
79+
</div>
80+
<div class="line">
81+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println("Hello World!"); // Prints "Hello World!" to the console.
82+
</div>
83+
<div class="line">
84+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
85+
</div>
86+
<div class="line">
87+
}
88+
</div>
8589
</div>
90+
<div class="paragraph note">Note: You can copy the above script by clicking on the copy button.</div>
8691
</div>
87-
<div class="paragraph note">Note: You can copy the above script by clicking on the copy button.</div>
88-
<div class="sector" tag="2"><span class="hideshow" tag="3">▶ </span>References</div>
89-
<div class="paragraph">
90-
<ul>
91-
<li>First Reference [2099], <span class="source">Placeholder Author</span>, <span class="editions">Example Editions</span></li>
92-
<li>Second Reference [2099], <span class="source">Placeholder Author</span>, <span class="editions">Example Editions</span></li>
93-
</ul>
92+
<div class="sector" tag="3"><span class="hideshow" tag="3">▶ </span>References</div>
93+
<div class="sector-content-container" tag="3">
94+
<div class="paragraph">
95+
<ul>
96+
<li>First Reference [2099], <span class="source">Placeholder Author</span>, <span class="editions">Example Editions</span></li>
97+
<li>Second Reference [2099], <span class="source">Placeholder Author</span>, <span class="editions">Example Editions</span></li>
98+
</ul>
99+
</div>
94100
</div>
95101
</div>
96102
</div>
97103
<footer>
98104
@Stagnant09 2024
99105
</footer>
100106
</body>
107+
<script src="script.js"></script>
101108
</html>

‎script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
Functions:
3+
1. When a hide button is clicked, the content of the sector is hidden or shown.
4+
2. When a copy button is clicked, the content of the sector is copied to the clipboard.
5+
3. When a link is clicked, the content of the sector is copied to the clipboard and then opened in a new tab.
6+
4. When a node in the contents is clicked, the page loads the respective sector.
7+
and more
8+
*/
9+
10+
let hideButtons;
11+
let copyButtons;
12+
let nodes;
13+
let tag;
14+
15+
function hideShowContent(tag) {
16+
console.log(tag);
17+
let content = document.querySelector(`.sector-content-container[tag="${tag}"]`);
18+
if (content.style.display == "none") {
19+
content.style.display = "block";
20+
} else {
21+
content.style.display = "none";
22+
}
23+
}
24+
25+
function copyContent(tag) {
26+
let clipboard = "";
27+
let code = document.querySelector(`.code[tag="${tag}"]`);
28+
let lines = code.querySelectorAll(".line");
29+
for (line of lines) {
30+
clipboard += line.textContent + "\n";
31+
}
32+
navigator.clipboard.writeText(clipboard);
33+
}
34+
35+
function openLink() {
36+
//TODO
37+
}
38+
39+
function loadSector(tag) {
40+
//Scroll to the start of the sector
41+
let sector = document.querySelector(`.sector[tag="${tag}"]`);
42+
sector.scrollIntoView();
43+
}
44+
45+
window.onload = function() {
46+
47+
let sectorContentContainers = document.getElementsByClassName("sector-content-container");
48+
for (sectorContentContainer of sectorContentContainers) {
49+
console.log(sectorContentContainer.getAttribute("tag"));
50+
}
51+
52+
hideButtons = document.getElementsByClassName("hideshow");
53+
54+
for (let i=0; i < hideButtons.length; i++) {
55+
hideButtons[i].addEventListener("click", function() {
56+
hideShowContent(hideButtons[i].getAttribute("tag"));
57+
});
58+
}
59+
60+
copyButtons = document.querySelectorAll(".copy");
61+
62+
for (let i=0; i < copyButtons.length; i++) {
63+
copyButtons[i].addEventListener("click", function() {
64+
copyContent(copyButtons[i].getAttribute("tag"));
65+
});
66+
}
67+
68+
nodes = document.querySelectorAll(".cs");
69+
70+
for (let i=0; i < nodes.length; i++) {
71+
nodes[i].addEventListener("click", function() {
72+
loadSector(nodes[i].getAttribute("tag"));
73+
});
74+
}
75+
76+
}

‎style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ header {
5353

5454
.rich-title {
5555
margin-bottom: 40px;
56+
border-bottom: dotted rgb(208, 208, 208) 1px;
57+
border-spacing: 4px;
58+
height: 88px;
5659
}
5760

5861
.title {

0 commit comments

Comments
 (0)