diff --git a/CHANGELOG.md b/CHANGELOG.md index d30f193..53cfa6f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- it is now possible to extend the widget's height to 100% of its container. To do so, + do `Aladin(height=-1)`. This is implemented to support use in dashboard + applications, this cannot work in a notebook. + ### Fixed - remove `requests` from mandatory dependencies (accident in version 0.5.0) diff --git a/js/models/event_handler.js b/js/models/event_handler.js index fc90d51..935cf56 100644 --- a/js/models/event_handler.js +++ b/js/models/event_handler.js @@ -1,5 +1,5 @@ import MessageHandler from "./message_handler"; -import { divNumber, setDivNumber, Lock } from "../utils"; +import { divNumber, setDivNumber, Lock, setDivHeight } from "../utils"; export default class EventHandler { /** @@ -131,8 +131,7 @@ export default class EventHandler { /* Div control */ this.model.on("change:_height", () => { - let height = this.model.get("_height"); - this.aladinDiv.style.height = `${height}px`; + setDivHeight(this.model.get("_height"), this.aladinDiv); // Update WCS and FoV only if this is the last div this.updateWCS(); this.update2AxisFoV(); diff --git a/js/utils.js b/js/utils.js index d2ac729..d3de2a4 100644 --- a/js/utils.js +++ b/js/utils.js @@ -46,10 +46,19 @@ function setDivNumber(num) { divNumber = num; } +function setDivHeight(height, div) { + if (height == -1) { + div.style.height = "100%"; + } else { + div.style.height = `${height}px`; + } +} + export { snakeCaseToCamelCase, convertOptionNamesToCamelCase, Lock, divNumber, setDivNumber, + setDivHeight, }; diff --git a/js/widget.js b/js/widget.js index 92a0a4d..92a5d29 100644 --- a/js/widget.js +++ b/js/widget.js @@ -1,6 +1,11 @@ import "./widget.css"; import EventHandler from "./models/event_handler"; -import { divNumber, setDivNumber, snakeCaseToCamelCase } from "./utils"; +import { + divNumber, + setDivHeight, + setDivNumber, + snakeCaseToCamelCase, +} from "./utils"; import A from "./aladin_lite"; function initAladinLite(model, el) { @@ -13,8 +18,7 @@ function initAladinLite(model, el) { let aladinDiv = document.createElement("div"); aladinDiv.classList.add("aladin-widget"); - aladinDiv.style.height = `${model.get("_height")}px`; - + setDivHeight(model.get("_height"), aladinDiv); aladinDiv.id = `aladin-lite-div-${divNumber}`; let aladin = new A.aladin(aladinDiv, initOptions); el.appendChild(aladinDiv); diff --git a/src/ipyaladin/widget.py b/src/ipyaladin/widget.py index a6974e1..bc4853d 100644 --- a/src/ipyaladin/widget.py +++ b/src/ipyaladin/widget.py @@ -262,13 +262,16 @@ def selected_objects(self) -> List[Table]: @property def height(self) -> int: - """The height of the Aladin Lite widget. + """The height of the widget. Returns ------- int The height of the widget in pixels. - + Setting the height to -1 will expand the widget at 100% height of its + container. This is generally a bad idea in a notebook but can be usefull + for dashbord applications. + The default height is 400 pixels. """ return self._height