Skip to content

Commit 6c4b5f0

Browse files
rtoalrtoal
committed
Navigation for language browser
1 parent 6edb973 commit 6c4b5f0

File tree

4 files changed

+104
-81
lines changed

4 files changed

+104
-81
lines changed

‎docs/overviews.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,22 @@
55
<link rel="stylesheet" href="resources/styles/overviews.css" />
66
</head>
77
<body>
8-
<header>Programming Languages</header>
8+
<header>
9+
<span id="title">Programming Languages</span>
10+
<span><a href="https://github.com/rtoal/ple">ple</a></span>
11+
</header>
912
<main>
1013
<nav></nav>
1114
<section id="canvas">
1215
<div id="index"></div>
13-
<div id="logo"><img /></div>
14-
<h1></h1>
15-
<div id="text">
16-
<p id="description"></p>
17-
<p id="info"></p>
18-
<p id="tags"></p>
16+
<div id="single">
17+
<div id="logo"><img /></div>
18+
<h1></h1>
19+
<div id="text">
20+
<p id="description"></p>
21+
<ul id="info"></ul>
22+
<p id="tags"></p>
23+
</div>
1924
</div>
2025
</section>
2126
</main>

‎docs/resources/scripts/info.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ var langs = [
139139
"K & R (1972)",
140140
"ISO (1989/90)",
141141
"99 (1999)",
142-
"11 (2011), 17 (2018), 23 (2023)",
142+
"11 (2011), 17 (2018), 23 (2024)",
143143
],
144144
r: "Systems programming",
145145
u: "Unix and Unix-like operating systems",
@@ -1186,9 +1186,10 @@ var langs = [
11861186
rc: "Scala",
11871187
pp: "scala",
11881188
d: "Scala is a statically-typed, functional, and object-oriented language that interoperates with Java.",
1189-
f: 2003,
1190-
r: "Being highly scalable.",
1191-
u: "Acting to replace and resolve many of the flaws of Java",
1189+
f: 2004,
1190+
r: "Supporting both functional and object-oriented styles and being highly scalable.",
1191+
u: "Distributed data processing, web servers",
1192+
v: ["2 (2006)", "3 (2021)"],
11921193
t: [
11931194
"Multi-paradigm",
11941195
"Concurrent",

‎docs/resources/scripts/overviews.js‎

Lines changed: 79 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1+
const title = document.querySelector("#title");
12
const nav = document.querySelector("nav");
2-
3-
for (let lang of langs) {
4-
const item = document.createElement("div");
5-
item.appendChild(document.createTextNode(lang.n));
6-
item.onclick = () => show(lang);
7-
nav.appendChild(item);
8-
}
3+
const imageElement = document.querySelector("#logo img");
4+
const description = document.getElementById("description");
5+
const info = document.getElementById("info");
6+
const tags = document.getElementById("tags");
97

108
function iconFor(iconName, uri) {
119
return (
@@ -17,61 +15,13 @@ function iconFor(iconName, uri) {
1715
);
1816
}
1917

20-
langs.forEach((lang, index) => {
21-
lang.index = index;
22-
if (!lang.noLogo) {
23-
var span = document.createElement("span");
24-
var attribute = document.createAttribute("class");
25-
attribute.value = "cell";
26-
span.data = lang;
27-
span.setAttributeNode(attribute);
28-
span.style.backgroundImage = "url(resources/" + lang.i + "-logo-64.png)";
29-
document.querySelector("#index").appendChild(span);
30-
}
31-
if ((lang.h || lang.w || lang.g || lang.rc || lang.pp) && lang.d) {
32-
var icons = [];
33-
if (lang.h) icons.push(iconFor("home", lang.h));
34-
if (lang.w)
35-
icons.push(
36-
iconFor("wikipedia", "https://en.wikipedia.org/wiki/" + lang.w)
37-
);
38-
if (lang.g)
39-
icons.push(
40-
iconFor(
41-
"github",
42-
"https://github.com/search?l=" +
43-
lang.g +
44-
"&q=stars%3A%3E1&s=stars&type=Repositories"
45-
)
46-
);
47-
if (lang.rc)
48-
icons.push(
49-
iconFor(
50-
"rosetta-code",
51-
"https://rosettacode.org/wiki/Category:" + lang.rc
52-
)
53-
);
54-
if (lang.pp)
55-
icons.push(
56-
iconFor("progopedia", "http://progopedia.com/language/" + lang.pp + "/")
57-
);
58-
if (icons) {
59-
lang.d +=
60-
'&nbsp;<span style="white-space:nowrap">' +
61-
icons.join("&nbsp;") +
62-
"</span>";
63-
}
64-
}
65-
});
66-
console.log(`We have ${langs.length} languages`);
67-
console.log(langs.filter((lang) => !lang.noLogo).length + " with logos");
68-
69-
var imageElement = document.querySelector("#logo img");
70-
var description = document.getElementById("description");
71-
var info = document.getElementById("info");
72-
var tags = document.getElementById("tags");
18+
function showIndex() {
19+
document.querySelector("#index").style.display = "block";
20+
document.querySelector("#single").style.display = "none";
21+
}
7322

7423
function show(language) {
24+
document.querySelector("#single").style.display = "block";
7525
document.querySelector("#index").style.display = "none";
7626
if (language.noLogo) {
7727
imageElement.style.display = "none";
@@ -89,24 +39,23 @@ function show(language) {
8939
}
9040
if (language.f || language.v || language.r || language.u) {
9141
info.style.display = "block";
92-
var text = [];
42+
var items = "";
9343
if (language.f) {
94-
text.push("<b>First appeared</b>: " + language.f);
44+
items += `<li><b>First appeared</b>: ${language.f}</li>`;
9545
}
9646
if (language.v && language.v.length > 0) {
97-
text.push("<b>Notable Versions</b>: " + language.v.join(", "));
47+
items += `<li><b>Notable Versions</b>: ${language.v.join(", ")}</li>`;
9848
}
9949
if (language.r) {
100-
text.push("<b>Recognized for</b>: " + language.r);
50+
items += `<li><b>Recognized for</b>: ${language.r}</li>`;
10151
}
10252
if (language.u) {
103-
text.push("<b>Used in</b>: " + language.u);
53+
items += `<li><b>Used in</b>: ${language.u}</li>`;
10454
}
105-
info.innerHTML = text.join(" &bull; ");
55+
info.innerHTML = items;
10656
} else {
10757
info.style.display = "none";
10858
}
109-
11059
if (language.t) {
11160
tags.style.display = "block";
11261
tags.innerHTML = language.t
@@ -118,3 +67,66 @@ function show(language) {
11867
tags.style.display = "none";
11968
}
12069
}
70+
71+
function load() {
72+
for (let lang of langs) {
73+
const item = document.createElement("div");
74+
item.appendChild(document.createTextNode(lang.n));
75+
item.onclick = () => show(lang);
76+
nav.appendChild(item);
77+
}
78+
langs.forEach((lang, index) => {
79+
lang.index = index;
80+
if (!lang.noLogo) {
81+
const span = document.createElement("span");
82+
const attribute = document.createAttribute("class");
83+
attribute.value = "cell";
84+
span.data = lang;
85+
span.setAttributeNode(attribute);
86+
span.style.backgroundImage = "url(resources/" + lang.i + "-logo-64.png)";
87+
document.querySelector("#index").appendChild(span);
88+
}
89+
if ((lang.h || lang.w || lang.g || lang.rc || lang.pp) && lang.d) {
90+
let icons = [];
91+
if (lang.h) icons.push(iconFor("home", lang.h));
92+
if (lang.w)
93+
icons.push(
94+
iconFor("wikipedia", "https://en.wikipedia.org/wiki/" + lang.w)
95+
);
96+
if (lang.g)
97+
icons.push(
98+
iconFor(
99+
"github",
100+
"https://github.com/search?l=" +
101+
lang.g +
102+
"&q=stars%3A%3E1&s=stars&type=Repositories"
103+
)
104+
);
105+
if (lang.rc)
106+
icons.push(
107+
iconFor(
108+
"rosetta-code",
109+
"https://rosettacode.org/wiki/Category:" + lang.rc
110+
)
111+
);
112+
if (lang.pp)
113+
icons.push(
114+
iconFor(
115+
"progopedia",
116+
"http://progopedia.com/language/" + lang.pp + "/"
117+
)
118+
);
119+
if (icons) {
120+
lang.d +=
121+
'&nbsp;<span style="white-space:nowrap">' +
122+
icons.join("&nbsp;") +
123+
"</span>";
124+
}
125+
}
126+
});
127+
console.log(`We have ${langs.length} languages`);
128+
console.log(langs.filter((lang) => !lang.noLogo).length + " with logos");
129+
}
130+
131+
title.addEventListener("click", showIndex);
132+
document.addEventListener("DOMContentLoaded", load);

‎docs/resources/styles/overviews.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ body {
88
padding: 0;
99
height: 100vh;
1010
overflow: hidden;
11-
box-sizing: content-box;
1211
}
1312

1413
header {
@@ -19,13 +18,19 @@ header {
1918
color: white;
2019
padding: 10px;
2120
font-family: sans-serif;
22-
position: fixed;
21+
box-sizing: border-box;
2322
width: 100%;
24-
height: 30px;
23+
position: fixed;
24+
height: 50px;
2525
top: 0;
2626
left: 0;
2727
}
2828

29+
header a {
30+
color: white;
31+
text-decoration: none;
32+
}
33+
2934
main {
3035
margin-top: 50px;
3136
display: grid;

0 commit comments

Comments
 (0)