Skip to content

Commit 2bd9bca

Browse files
Florian3kFlorian3k
committed
Revert "ux fixes"
This reverts commit 1425358.
1 parent 1425358 commit 2bd9bca

File tree

1 file changed

+150
-120
lines changed
  • scaladoc/resources/dotty_res/scripts

1 file changed

+150
-120
lines changed

‎scaladoc/resources/dotty_res/scripts/ux.js

Lines changed: 150 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
window.addEventListener("DOMContentLoaded", () => {
2-
var toggler = document.getElementById("leftToggler");
3-
if (toggler) {
4-
toggler.onclick = function () {
5-
document.getElementById("leftColumn").classList.toggle("open");
6-
};
1+
let observer = null;
2+
3+
function attachAllListeners() {
4+
if (observer) {
5+
observer.disconnect()
76
}
87

98
var scrollPosition = sessionStorage.getItem("scroll_value");
@@ -54,24 +53,89 @@ window.addEventListener("DOMContentLoaded", () => {
5453
}
5554
}
5655
}
57-
58-
$(".side-menu span").on("click", function () {
59-
$(this).parent().toggleClass("expanded");
60-
});
56+
$(".side-menu span").on("click", function () {
57+
$(this).parent().toggleClass("expanded");
58+
});
59+
document.querySelectorAll('a').forEach(el => {
60+
const href = el.href
61+
if (href === "") { return }
62+
const url = new URL(href)
63+
el.addEventListener('click', e => {
64+
if (url.href.replace("#", "") === window.location.href.replace("#", "")) { return }
65+
if (url.origin !== window.location.origin) { return }
66+
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) { return }
67+
e.preventDefault()
68+
e.stopPropagation()
69+
$.get(href, function (data) {
70+
const html = $.parseHTML(data)
71+
const title = html.find(node => node.nodeName === "TITLE").innerText
72+
const bodyDiv = html.find(node => node.nodeName === "DIV")
73+
const { children } = document.body.firstChild
74+
if (window.history.state === null) {
75+
window.history.replaceState({
76+
leftColumn: children[3].innerHTML,
77+
mainDiv: children[6].innerHTML,
78+
title: document.title,
79+
}, '')
80+
}
81+
document.title = title
82+
const leftColumn = bodyDiv.children[3].innerHTML
83+
const mainDiv = bodyDiv.children[6].innerHTML
84+
window.history.pushState({ leftColumn, mainDiv, title }, '', href)
85+
children[3].innerHTML = leftColumn
86+
children[6].innerHTML = mainDiv
87+
attachAllListeners()
88+
})
89+
})
90+
})
91+
92+
document.querySelectorAll('a').forEach(el => {
93+
const href = el.href
94+
if (href === "") { return }
95+
const url = new URL(href)
96+
el.addEventListener('click', e => {
97+
if (url.href.replace("#", "") === window.location.href.replace("#", "")) { return }
98+
if (url.origin !== window.location.origin) { return }
99+
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) { return }
100+
e.preventDefault()
101+
e.stopPropagation()
102+
$.get(href, function (data) {
103+
const html = $.parseHTML(data)
104+
const title = html.find(node => node.nodeName === "TITLE").innerText
105+
const bodyDiv = html.find(node => node.nodeName === "DIV")
106+
const { children } = document.body.firstChild
107+
if (window.history.state === null) {
108+
window.history.replaceState({
109+
leftColumn: children[3].innerHTML,
110+
mainDiv: children[6].innerHTML,
111+
title: document.title,
112+
}, '')
113+
}
114+
document.title = title
115+
const leftColumn = bodyDiv.children[3].innerHTML
116+
const mainDiv = bodyDiv.children[6].innerHTML
117+
window.history.pushState({ leftColumn, mainDiv, title }, '', href)
118+
children[3].innerHTML = leftColumn
119+
children[6].innerHTML = mainDiv
120+
attachAllListeners()
121+
})
122+
})
123+
})
61124

62125
$(".ar").on("click", function (e) {
63126
$(this).parent().parent().toggleClass("expanded");
64127
$(this).toggleClass("expanded");
65128
e.stopPropagation();
66129
});
67130

68-
document.querySelectorAll(".nh").forEach((el) =>
69-
el.addEventListener("click", () => {
70-
el.lastChild.click();
71-
el.first.addClass("expanded");
72-
el.parent.addClass("expanded");
73-
}),
74-
);
131+
document.querySelectorAll(".nh").forEach(el => el.addEventListener('click', () => {
132+
if (el.lastChild.href.replace("#", "") === window.location.href.replace("#", "")) {
133+
el.parentElement.classList.toggle("expanded")
134+
el.firstChild.classList.toggle("expanded")
135+
} else {
136+
el.lastChild.click()
137+
}
138+
}))
75139

76140
document.querySelectorAll(".supertypes").forEach((el) =>
77141
el.firstChild.addEventListener("click", () => {
@@ -104,154 +168,128 @@ window.addEventListener("DOMContentLoaded", () => {
104168
}),
105169
);
106170

107-
const observer = new IntersectionObserver((entries) => {
108-
entries.forEach((entry) => {
109-
const id = entry.target.getAttribute("id");
171+
const observer = new IntersectionObserver(entries => {
172+
entries.forEach(entry => {
173+
const id = entry.target.getAttribute('id');
110174
if (entry.intersectionRatio > 0) {
111-
document
112-
.querySelector(`#toc li a[href="#${id}"]`)
113-
.parentElement.classList.add("active");
175+
document.querySelector(`#toc li a[href="#${id}"]`).parentElement.classList.add('active');
114176
} else {
115-
document
116-
.querySelector(`#toc li a[href="#${id}"]`)
117-
.parentElement.classList.remove("active");
177+
document.querySelector(`#toc li a[href="#${id}"]`).parentElement.classList.remove('active');
118178
}
119179
});
120180
});
121181

122-
document.querySelectorAll("#content section[id]").forEach((section) => {
182+
document.querySelectorAll('#content section[id]').forEach((section) => {
123183
observer.observe(section);
124184
});
125185

126-
document
127-
.querySelectorAll(".side-menu a")
128-
.forEach((elem) =>
129-
elem.addEventListener("click", (e) => e.stopPropagation()),
130-
);
131-
132186
if (location.hash) {
133187
var target = location.hash.substring(1);
134188
// setting the 'expand' class on the top-level container causes undesireable styles
135189
// to apply to the top-level docs, so we avoid this logic for that element.
136-
if (target != "container") {
190+
if (target != 'container') {
137191
var selected = document.getElementById(location.hash.substring(1));
138192
if (selected) {
139193
selected.classList.toggle("expand");
140194
}
141195
}
142196
}
143197

144-
var logo = document.getElementById("logo");
145-
if (logo) {
146-
logo.onclick = function () {
147-
window.location = pathToRoot; // global variable pathToRoot is created by the html renderer
148-
};
149-
}
150-
151-
document.querySelectorAll(".documentableAnchor").forEach((elem) => {
152-
elem.addEventListener("click", (event) => {
153-
var $temp = $("<input>");
154-
$("body").append($temp);
155-
var a = document.createElement("a");
156-
a.href = $(elem).attr("link");
157-
$temp.val(a.href).select();
158-
document.execCommand("copy");
159-
$temp.remove();
160-
});
198+
document.querySelectorAll('pre code').forEach(el => {
199+
hljs.highlightBlock(el);
161200
});
162201

163-
hljs.registerLanguage("scala", highlightDotty);
164-
hljs.registerAliases(["dotty", "scala3"], "scala");
165-
hljs.initHighlighting();
166-
167202
/* listen for the `F` key to be pressed, to focus on the member filter input (if it's present) */
168-
document.body.addEventListener("keydown", (e) => {
203+
document.body.addEventListener('keydown', e => {
169204
if (e.key == "f") {
170205
const tag = e.target.tagName;
171206
if (tag != "INPUT" && tag != "TEXTAREA") {
172-
const filterInput = findRef(
173-
".documentableFilter input.filterableInput",
174-
);
207+
const filterInput = findRef('.documentableFilter input.filterableInput');
175208
if (filterInput != null) {
176209
// if we focus during this event handler, the `f` key gets typed into the input
177210
setTimeout(() => filterInput.focus(), 1);
178211
}
179212
}
180213
}
181-
});
182-
183-
// show/hide side menu on mobile view
184-
const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
185-
sideMenuToggler.addEventListener("click", (_e) => {
186-
document.getElementById("leftColumn").classList.toggle("show");
187-
document.getElementById("content").classList.toggle("sidebar-shown");
188-
const toc = document.getElementById("toc");
189-
if (toc) {
190-
toc.classList.toggle("sidebar-shown");
191-
}
192-
sideMenuToggler.classList.toggle("menu-shown");
193-
});
194-
195-
// show/hide mobile menu on mobile view
196-
const mobileMenuOpenIcon = document.getElementById("mobile-menu-toggle");
197-
const mobileMenuCloseIcon = document.getElementById("mobile-menu-close");
198-
mobileMenuOpenIcon.addEventListener("click", (_e) => {
199-
document.getElementById("mobile-menu").classList.add("show");
200-
});
201-
mobileMenuCloseIcon.addEventListener("click", (_e) => {
202-
document.getElementById("mobile-menu").classList.remove("show");
203-
});
214+
})
204215

205216
// when document is loaded graph needs to be shown
217+
}
218+
219+
window.addEventListener("DOMContentLoaded", () => {
220+
hljs.registerLanguage("scala", highlightDotty);
221+
hljs.registerAliases(["dotty", "scala3"], "scala");
222+
attachAllListeners()
206223
});
207224

225+
// show/hide side menu on mobile view
226+
const sideMenuToggler = document.getElementById("mobile-sidebar-toggle")
227+
sideMenuToggler.addEventListener('click', _e => {
228+
document.getElementById("leftColumn").classList.toggle("show")
229+
document.getElementById("content").classList.toggle("sidebar-shown")
230+
const toc = document.getElementById("toc");
231+
if (toc && toc.childElementCount > 0) {
232+
toc.classList.toggle("sidebar-shown")
233+
}
234+
sideMenuToggler.classList.toggle("menu-shown")
235+
})
236+
237+
// show/hide mobile menu on mobile view
238+
document.getElementById("mobile-menu-toggle").addEventListener('click', _e => {
239+
document.getElementById("mobile-menu").classList.add("show")
240+
})
241+
document.getElementById("mobile-menu-close").addEventListener('click', _e => {
242+
document.getElementById("mobile-menu").classList.remove("show")
243+
})
244+
245+
window.addEventListener('popstate', e => {
246+
const { leftColumn, mainDiv, title } = e.state
247+
document.title = title
248+
const { children } = document.body.firstChild
249+
children[3].innerHTML = leftColumn
250+
children[6].innerHTML = mainDiv
251+
attachAllListeners()
252+
})
253+
208254
var zoom;
209255
var transform;
210256

211257
function showGraph() {
212-
document.getElementById("inheritance-diagram").classList.add("shown");
258+
document.getElementById("inheritance-diagram").classList.add("shown")
213259
if ($("svg#graph").children().length == 0) {
214-
var dotNode = document.querySelector("#dot");
260+
var dotNode = document.querySelector("#dot")
215261

216262
if (dotNode) {
217263
var svg = d3.select("#graph");
218-
var radialGradient = svg
219-
.append("defs")
220-
.append("radialGradient")
221-
.attr("id", "Gradient");
222-
radialGradient
223-
.append("stop")
224-
.attr("stop-color", "var(--yellow9)")
225-
.attr("offset", "30%");
226-
radialGradient
227-
.append("stop")
228-
.attr("stop-color", "var(--background-default)")
229-
.attr("offset", "100%");
264+
var radialGradient = svg.append("defs").append("radialGradient").attr("id", "Gradient");
265+
radialGradient.append("stop").attr("stop-color", "var(--yellow9)").attr("offset", "30%");
266+
radialGradient.append("stop").attr("stop-color", "var(--background-default)").attr("offset", "100%");
230267

231268
var inner = svg.append("g");
232269

233270
// Set up zoom support
234-
zoom = d3.zoom().on("zoom", function ({ transform }) {
235-
inner.attr("transform", transform);
236-
});
271+
zoom = d3.zoom()
272+
.on("zoom", function ({ transform }) {
273+
inner.attr("transform", transform);
274+
});
237275
svg.call(zoom);
238276

239277
var render = new dagreD3.render();
240278
var g = graphlibDot.read(dotNode.text);
241-
g.graph().rankDir = "BT";
279+
g.graph().rankDir = 'BT';
242280
g.nodes().forEach(function (v) {
243281
g.setNode(v, {
244282
labelType: "html",
245283
label: g.node(v).label,
246284
class: g.node(v).class,
247285
id: g.node(v).id,
248286
rx: "4px",
249-
ry: "4px",
287+
ry: "4px"
250288
});
251289
});
252290
g.setNode("node0Cluster", {
253291
style: "fill: url(#Gradient);",
254-
id: "node0Cluster",
292+
id: "node0Cluster"
255293
});
256294
g.setParent("node0", "node0Cluster");
257295

@@ -262,8 +300,7 @@ function showGraph() {
262300
});
263301

264302
render.arrows().hollowPoint = function normal(parent, id, edge, type) {
265-
var marker = parent
266-
.append("marker")
303+
var marker = parent.append("marker")
267304
.attr("id", id)
268305
.attr("viewBox", "0 0 10 10")
269306
.attr("refX", 9)
@@ -273,8 +310,7 @@ function showGraph() {
273310
.attr("markerHeight", 12)
274311
.attr("orient", "auto");
275312

276-
var path = marker
277-
.append("path")
313+
var path = marker.append("path")
278314
.attr("d", "M 0 0 L 10 5 L 0 10 z")
279315
.style("stroke-width", 1)
280316
.style("stroke-dasharray", "1,0")
@@ -296,10 +332,7 @@ function showGraph() {
296332
midY = bounds.y + height / 2;
297333
if (width == 0 || height == 0) return; // nothing to fit
298334
var scale = Math.min(fullWidth / width, fullHeight / height) * 0.99; // 0.99 to make a little padding
299-
var translate = [
300-
fullWidth / 2 - scale * midX,
301-
fullHeight / 2 - scale * midY,
302-
];
335+
var translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];
303336

304337
transform = d3.zoomIdentity
305338
.translate(translate[0], translate[1])
@@ -313,25 +346,22 @@ function showGraph() {
313346
var node0Cluster = d3.select("g#node0Cluster")._groups[0][0];
314347
var node0ClusterRect = node0Cluster.children[0];
315348
node0Cluster.setAttribute("transform", node0.getAttribute("transform"));
316-
node0ClusterRect.setAttribute(
317-
"width",
318-
+node0Rect.getAttribute("width") + 80,
319-
);
320-
node0ClusterRect.setAttribute(
321-
"height",
322-
+node0Rect.getAttribute("height") + 80,
323-
);
349+
node0ClusterRect.setAttribute("width", +node0Rect.getAttribute("width") + 80);
350+
node0ClusterRect.setAttribute("height", +node0Rect.getAttribute("height") + 80);
324351
node0ClusterRect.setAttribute("x", node0Rect.getAttribute("x") - 40);
325352
node0ClusterRect.setAttribute("y", node0Rect.getAttribute("y") - 40);
326353
}
327354
}
328355
}
329356

330357
function hideGraph() {
331-
document.getElementById("inheritance-diagram").classList.remove("shown");
358+
document.getElementById("inheritance-diagram").classList.remove("shown")
332359
}
333360

334361
function zoomOut() {
335362
var svg = d3.select("#graph");
336-
svg.transition().duration(2000).call(zoom.transform, transform);
363+
svg
364+
.transition()
365+
.duration(2000)
366+
.call(zoom.transform, transform);
337367
}

0 commit comments

Comments
 (0)