Skip to content

Commit 1425358

Browse files
kamilszewczyk0kamilszewczyk0
committed
ux fixes
1 parent cce944d commit 1425358

File tree

1 file changed

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

1 file changed

+120
-150
lines changed

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

Lines changed: 120 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
let observer = null;
2-
3-
function attachAllListeners() {
4-
if (observer) {
5-
observer.disconnect()
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+
};
67
}
78

89
var scrollPosition = sessionStorage.getItem("scroll_value");
@@ -53,89 +54,24 @@ function attachAllListeners() {
5354
}
5455
}
5556
}
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-
})
57+
58+
$(".side-menu span").on("click", function () {
59+
$(this).parent().toggleClass("expanded");
60+
});
12461

12562
$(".ar").on("click", function (e) {
12663
$(this).parent().parent().toggleClass("expanded");
12764
$(this).toggleClass("expanded");
12865
e.stopPropagation();
12966
});
13067

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-
}))
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+
);
13975

14076
document.querySelectorAll(".supertypes").forEach((el) =>
14177
el.firstChild.addEventListener("click", () => {
@@ -168,128 +104,154 @@ function attachAllListeners() {
168104
}),
169105
);
170106

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

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

126+
document
127+
.querySelectorAll(".side-menu a")
128+
.forEach((elem) =>
129+
elem.addEventListener("click", (e) => e.stopPropagation()),
130+
);
131+
186132
if (location.hash) {
187133
var target = location.hash.substring(1);
188134
// setting the 'expand' class on the top-level container causes undesireable styles
189135
// to apply to the top-level docs, so we avoid this logic for that element.
190-
if (target != 'container') {
136+
if (target != "container") {
191137
var selected = document.getElementById(location.hash.substring(1));
192138
if (selected) {
193139
selected.classList.toggle("expand");
194140
}
195141
}
196142
}
197143

198-
document.querySelectorAll('pre code').forEach(el => {
199-
hljs.highlightBlock(el);
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+
});
200161
});
201162

163+
hljs.registerLanguage("scala", highlightDotty);
164+
hljs.registerAliases(["dotty", "scala3"], "scala");
165+
hljs.initHighlighting();
166+
202167
/* listen for the `F` key to be pressed, to focus on the member filter input (if it's present) */
203-
document.body.addEventListener('keydown', e => {
168+
document.body.addEventListener("keydown", (e) => {
204169
if (e.key == "f") {
205170
const tag = e.target.tagName;
206171
if (tag != "INPUT" && tag != "TEXTAREA") {
207-
const filterInput = findRef('.documentableFilter input.filterableInput');
172+
const filterInput = findRef(
173+
".documentableFilter input.filterableInput",
174+
);
208175
if (filterInput != null) {
209176
// if we focus during this event handler, the `f` key gets typed into the input
210177
setTimeout(() => filterInput.focus(), 1);
211178
}
212179
}
213180
}
214-
})
181+
});
215182

216-
// when document is loaded graph needs to be shown
217-
}
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+
});
218194

219-
window.addEventListener("DOMContentLoaded", () => {
220-
hljs.registerLanguage("scala", highlightDotty);
221-
hljs.registerAliases(["dotty", "scala3"], "scala");
222-
attachAllListeners()
223-
});
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+
});
224204

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-
})
205+
// when document is loaded graph needs to be shown
206+
});
253207

254208
var zoom;
255209
var transform;
256210

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

262216
if (dotNode) {
263217
var svg = d3.select("#graph");
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%");
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%");
267230

268231
var inner = svg.append("g");
269232

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

277239
var render = new dagreD3.render();
278240
var g = graphlibDot.read(dotNode.text);
279-
g.graph().rankDir = 'BT';
241+
g.graph().rankDir = "BT";
280242
g.nodes().forEach(function (v) {
281243
g.setNode(v, {
282244
labelType: "html",
283245
label: g.node(v).label,
284246
class: g.node(v).class,
285247
id: g.node(v).id,
286248
rx: "4px",
287-
ry: "4px"
249+
ry: "4px",
288250
});
289251
});
290252
g.setNode("node0Cluster", {
291253
style: "fill: url(#Gradient);",
292-
id: "node0Cluster"
254+
id: "node0Cluster",
293255
});
294256
g.setParent("node0", "node0Cluster");
295257

@@ -300,7 +262,8 @@ function showGraph() {
300262
});
301263

302264
render.arrows().hollowPoint = function normal(parent, id, edge, type) {
303-
var marker = parent.append("marker")
265+
var marker = parent
266+
.append("marker")
304267
.attr("id", id)
305268
.attr("viewBox", "0 0 10 10")
306269
.attr("refX", 9)
@@ -310,7 +273,8 @@ function showGraph() {
310273
.attr("markerHeight", 12)
311274
.attr("orient", "auto");
312275

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

337304
transform = d3.zoomIdentity
338305
.translate(translate[0], translate[1])
@@ -346,22 +313,25 @@ function showGraph() {
346313
var node0Cluster = d3.select("g#node0Cluster")._groups[0][0];
347314
var node0ClusterRect = node0Cluster.children[0];
348315
node0Cluster.setAttribute("transform", node0.getAttribute("transform"));
349-
node0ClusterRect.setAttribute("width", +node0Rect.getAttribute("width") + 80);
350-
node0ClusterRect.setAttribute("height", +node0Rect.getAttribute("height") + 80);
316+
node0ClusterRect.setAttribute(
317+
"width",
318+
+node0Rect.getAttribute("width") + 80,
319+
);
320+
node0ClusterRect.setAttribute(
321+
"height",
322+
+node0Rect.getAttribute("height") + 80,
323+
);
351324
node0ClusterRect.setAttribute("x", node0Rect.getAttribute("x") - 40);
352325
node0ClusterRect.setAttribute("y", node0Rect.getAttribute("y") - 40);
353326
}
354327
}
355328
}
356329

357330
function hideGraph() {
358-
document.getElementById("inheritance-diagram").classList.remove("shown")
331+
document.getElementById("inheritance-diagram").classList.remove("shown");
359332
}
360333

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

0 commit comments

Comments
 (0)