Skip to content

Commit

Permalink
Accept manual height setting for resizer
Browse files Browse the repository at this point in the history
This resize script can now be called from other applications in a more
generic way
  • Loading branch information
rossjrw committed May 21, 2024
1 parent 79aa8fb commit be7d04a
Showing 1 changed file with 21 additions and 18 deletions.
39 changes: 21 additions & 18 deletions stats-frontend/assets/createResizeIframe.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
* @param {String} site - The base URL of the site.
* @param {String} frameId - The last segment of the URL of the interwiki
* iframe, used by Wikidot to identify it when resizing it.
* @param {Number=} [debounceTime] - Debounce delay to stagger repeated calls to the resizer. Defaults to 750 ms.
* @returns {((height: Number=) => void)}
*/
function createResizeIframe(site, frameId) {
function createResizeIframe(site, frameId, debounceTime) {
if (debounceTime == null) debounceTime = 750
let container = document.getElementById("resizer-container")
if (container == null) {
container = document.createElement("div")
Expand All @@ -17,24 +20,23 @@ function createResizeIframe(site, frameId) {
resizer.style.display = "none"
container.appendChild(resizer)

// Prefix frame ID with leading slash, required for resize-iframe.html
if (frameId[0] !== "/") frameId = "/" + frameId

return debounce(() => {
// Measure from the top of the document to the iframe container to get
// the document height - this takes into account inner margins, unlike
// e.g. document.body.clientHeight
// The container must not have display:none for this to work, which is
// why the iframe has it instead
var height = container.getBoundingClientRect().top
// Brute-force past any subpixel issues
if (height) height += 1
resizer.src =
site +
"/common--javascript/resize-iframe.html?" +
"#" +
height +
frameId
}, 750)
return debounce((height) => {
if (height == null) {
// Measure from the top of the document to the iframe container to get
// the document height - this takes into account inner margins, unlike
// e.g. document.body.clientHeight
// The container must not have display:none for this to work, which is
// why the iframe has it instead
let height = container.getBoundingClientRect().top
// Brute-force past any subpixel issues
if (height) height += 1
}

resizer.src = `${site}/common--javascript/resize-iframe.html?#${height}${frameId}`
}, debounceTime)
}

/**
Expand All @@ -47,7 +49,7 @@ function createResizeIframe(site, frameId) {
function autoResizeIframe(site) {
const frameId = location.href.replace(/^.*\//, "/")
const resize = createResizeIframe(site, frameId)
const observer = new ResizeObserver(resize)
const observer = new ResizeObserver(() => resize())
observer.observe(document.documentElement)
}

Expand All @@ -59,6 +61,7 @@ function autoResizeIframe(site) {
* @param {Function} func - The function to call.
* @param {Number} wait - The number of milliseconds to wait after any call
* to the debounced function before executing it.
* @returns {Function} The debounced function
*/
function debounce(func, wait) {
let timeout = 0
Expand Down

0 comments on commit be7d04a

Please sign in to comment.