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

Adjust height of feature info panel in Cesium map #2214

Merged
merged 1 commit into from
Oct 26, 2023
Merged

Adjust height of feature info panel in Cesium map #2214

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions src/js/views/maps/FeatureInfoView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,8 @@ define(

try {

const view = this;

// Elements to update
const title = this.getFeatureTitle()
const iFrame = this.elements.iFrame
Expand All @@ -275,12 +277,17 @@ define(
this.elements.title.innerHTML = title

// Update the iFrame content
iFrame.height = 0;
this.getContent().then(function (html) {
iFrameDiv.innerHTML = html;
const maxHeight = window.innerHeight - 275;
const scrollHeight = iFrame.contentWindow.document.body.scrollHeight + 5;
iFrame.height = scrollHeight > maxHeight ? maxHeight : scrollHeight;
view.updateIFrameHeight();
// Not the ideal solution, but check the height of the iFrame
// again after some time to allow external content to load. This
// is necessary for content that loads asynchronously, like
// images. Difficult to set listeners for this, since the content
// may be from a different domain.
setTimeout(function () {
view.updateIFrameHeight();
}, 850);
})

// Show or hide the layer details button, update the text
Expand All @@ -299,6 +306,29 @@ define(
}
},

/**
* Update the height of the iFrame to match the height of the content
* within it.
* @param {number} [height] The height to set the iFrame to. If no
* height is provided, then the height of the content within the iFrame
* will be used.
* @param {boolean} [limit=true] Whether or not to limit the height of
* the iFrame to the height of the window, minus 275px.
* @since x.x.x
*/
updateIFrameHeight: function (height, limit = true) {
const iFrame = this.elements?.iFrame;
if (!iFrame) return;
if ((!height && height !== 0) || height < 0) {
height = iFrame.contentWindow.document.body.scrollHeight + 5;
}
if (limit) {
const maxHeight = window.innerHeight - 275;
height = height > maxHeight ? maxHeight : height;
}
iFrame.style.height = height + "px";
},

/**
* Get the inner HTML content to insert into the iFrame. The content will vary
* based on the feature and if there is a template set on the parent Map Asset
Expand Down