Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(KTL-1177): Resize Observer has indefinite loop #3116

Merged
merged 2 commits into from Sep 5, 2023
Merged

fix(KTL-1177): Resize Observer has indefinite loop #3116

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f94a240
fix(KTL-1177): Resize Observer has indefinite loop
zoobestik Aug 12, 2023
d88520a
fix(KTL-1177): fix comments and var naming
zoobestik Sep 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
115 changes: 46 additions & 69 deletions plugins/base/src/main/resources/dokka/scripts/symbol-parameters-wrapper_deferred.js
View file
Open in desktop
Expand Up @@ -4,84 +4,61 @@

// helps with some corner cases where <wbr> starts working already,
// but the signature is not yet long enough to be wrapped
const leftPaddingPx = 60
(function() {
const leftPaddingPx = 60;

const symbolResizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const symbolElement = entry.target
symbolResizeObserver.unobserve(symbolElement) // only need it once, otherwise will be executed multiple times
wrapSymbolParameters(symbolElement);
})
});

const wrapAllSymbolParameters = () => {
document.querySelectorAll("div.symbol").forEach(symbol => wrapSymbolParameters(symbol))
}

const wrapSymbolParameters = (symbol) => {
let parametersBlock = symbol.querySelector("span.parameters")
if (parametersBlock == null) {
return // nothing to wrap
function createNbspIndent() {
let indent = document.createElement("span");
indent.append(document.createTextNode("\u00A0\u00A0\u00A0\u00A0"));
indent.classList.add("nbsp-indent");
return indent;
}

let symbolBlockWidth = symbol.clientWidth
function wrapSymbolParameters(entry) {
const symbol = entry.target;
const symbolBlockWidth = entry.borderBoxSize && entry.borderBoxSize[0] && entry.borderBoxSize[0].inlineSize;

// Even though the script is marked as `defer` and we wait for `DOMContentLoaded` event,
// it can happen that `symbolBlockWidth` is 0, indicating that something hasn't been loaded.
// In this case, just retry once all styles have been applied and it has been resized correctly.
if (symbolBlockWidth === 0) {
symbolResizeObserver.observe(symbol)
return
}
// Even though the script is marked as `defer` and we wait for `DOMContentLoaded` event,
// or if this block is a part of hidden tab, it can happen that `symbolBlockWidth` is 0,
// indicating that something hasn't been loaded.
// In this case, observer will be triggered onсe again when it will be ready.
if (symbolBlockWidth > 0) {
const node = symbol.querySelector(".parameters");

let innerTextWidth = Array.from(symbol.children)
.filter(it => !it.classList.contains("block")) // blocks are usually on their own (like annotations), so ignore it
.map(it => it.getBoundingClientRect().width).reduce((a, b) => a + b, 0)
if (node) {
// if window resize happened and observer was triggered, reset previously wrapped
// parameters as they might not need wrapping anymore, and check again
node.classList.remove("wrapped");
node.querySelectorAll(".parameter .nbsp-indent")
.forEach(indent => indent.remove());

// if signature text takes up more than a single line, wrap params for readability
let shouldWrapParams = innerTextWidth > (symbolBlockWidth - leftPaddingPx)
if (shouldWrapParams) {
parametersBlock.classList.add("wrapped")
parametersBlock.querySelectorAll("span.parameter").forEach(param => {
// has to be a physical indent so that it can be copied. styles like
// paddings and `::before { content: " " }` do not work for that
param.prepend(createNbspIndent())
})
}
}
const innerTextWidth = Array.from(symbol.children)
.filter(it => !it.classList.contains("block")) // blocks are usually on their own (like annotations), so ignore it
.map(it => it.getBoundingClientRect().width)
.reduce((a, b) => a + b, 0);

const createNbspIndent = () => {
let indent = document.createElement("span")
indent.append(document.createTextNode("\u00A0\u00A0\u00A0\u00A0"))
indent.classList.add("nbsp-indent")
return indent
}
// if signature text takes up more than a single line, wrap params for readability
if (innerTextWidth > (symbolBlockWidth - leftPaddingPx)) {
node.classList.add("wrapped");
node.querySelectorAll(".parameter").forEach(param => {
// has to be a physical indent so that it can be copied. styles like
// paddings and `::before { content: " " }` do not work for that
param.prepend(createNbspIndent());
});
}
}
}
}

const resetAllSymbolParametersWrapping = () => {
document.querySelectorAll("div.symbol").forEach(symbol => resetSymbolParametersWrapping(symbol))
}
const symbolsObserver = new ResizeObserver(entries => entries.forEach(wrapSymbolParameters));

const resetSymbolParametersWrapping = (symbol) => {
let parameters = symbol.querySelector("span.parameters")
if (parameters != null) {
parameters.classList.remove("wrapped")
parameters.querySelectorAll("span.parameter").forEach(param => {
let indent = param.querySelector("span.nbsp-indent")
if (indent != null) indent.remove()
})
function initHandlers() {
document.querySelectorAll("div.symbol").forEach(symbol => symbolsObserver.observe(symbol));
}
}

if (document.readyState === 'loading') {
window.addEventListener('DOMContentLoaded', () => {
wrapAllSymbolParameters()
})
} else {
wrapAllSymbolParameters()
}
if (document.readyState === 'loading') window.addEventListener('DOMContentLoaded', initHandlers);
else initHandlers();

window.onresize = event => {
// need to re-calculate if params need to be wrapped after resize
resetAllSymbolParametersWrapping()
wrapAllSymbolParameters()
}
// ToDo: Add `unobserve` if dokka will be SPA-like:
// https://github.com/w3c/csswg-drafts/issues/5155
})();