Skip to content

Commit

Permalink
fix(KTL-1177): Resize Observer has indefinite loop (#3116)
Browse files Browse the repository at this point in the history 
* fix(KTL-1177): Resize Observer has indefinite loop
  • Loading branch information
@zoobestik
zoobestik committed Sep 5, 2023
1 parent e9e8fbf commit b26c79c
Showing 1 changed file with 46 additions and 69 deletions.
115 changes: 46 additions & 69 deletions plugins/base/src/main/resources/dokka/scripts/symbol-parameters-wrapper_deferred.js
View file
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
})();

0 comments on commit b26c79c

Please sign in to comment.