simplify new test

remove inject css vite plugin to manually insert the content of aladin.css in js inside the aladin lite div container
fix: also add style sheet in shadow dom context
2025-12-25 04:16:55 -08:00 · 2024-09-12 16:54:48 +02:00 · 2024-09-12 16:53:06 +02:00 · 2024-09-12 11:04:50 +02:00
6 changed files with 43 additions and 6 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * [test] Add support of playwright. Instructions in the readme for running the test matching snapshots [PR #176]
 * [fixed] Order of overlays in the stack now matches the addMOC/addCatalog/addOverlay calls ordering
 * [doc] Expose the API of Coo class
+* [fix] Insert aladin css inside the aladin lite so that it should be compliant with the use of shadow DOMs [cds-astro/ipyaladin#113], [marimo-team/marimo#2106]

 ## 3.5.0-beta

--- a/examples/al-in-shadow-dom.html
+++ b/examples/al-in-shadow-dom.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+    <head>
+    </head>
+<body>
+
+<div class="shadow-host"></div>
+
+<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
+<script type="text/javascript">
+    const shadowEl = document.querySelector(".shadow-host");
+    const shadow = shadowEl.attachShadow({mode: 'open'});
+
+    let aladinLiteEl = document.createElement('div');
+    aladinLiteEl.id = "aladin-lite-div"
+    aladinLiteEl.style = "width: 768px; height: 512px";
+    shadow.appendChild(aladinLiteEl)
+
+    A.init.then(() => {
+        let aladin = A.aladin(
+            aladinLiteEl,
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'orion', // initial target
+            }
+        );
+    });
+</script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
    "@playwright/test": "^1.47.0",
    "jsdoc": "^4.0.2",
    "vite": "^4.3.8",
-    "vite-plugin-css-injected-by-js": "^3.1.1",
    "vite-plugin-glsl": "^1.1.2",
    "vite-plugin-top-level-await": "^1.4.1",
    "vite-plugin-wasm": "^3.2.2",
--- a/src/js/A.js
+++ b/src/js/A.js
@@ -51,8 +51,7 @@ import { Sesame } from "./Sesame.js";
 import init, * as module from './../core/pkg';

 // Import aladin css inside the project
-import './../css/aladin.css';
-
+import aladinCSS from './../css/aladin.css?inline';

 ///////////////////////////////
 /////// Aladin Lite API ///////
@@ -97,6 +96,13 @@ A.aladin = function (divSelector, options) {
    } else {
        divElement = divSelector;
    }
+
+    // Associate the CSS inside the div
+    var cssStyleSheet = document.createElement('style')
+    cssStyleSheet.classList.add("aladin-css");
+    cssStyleSheet.innerHTML = aladinCSS;
+    divElement.appendChild(cssStyleSheet)
+
    return new Aladin(divElement, options);
 };

--- a/src/js/gui/Box/StackBox.js
+++ b/src/js/gui/Box/StackBox.js
@@ -768,7 +768,7 @@ export class OverlayStackBox extends Box {
        );
        layout = layout.concat(this._createSurveysList());

-        return Layout.vertical({ layout, classList: ["content"] });
+        return Layout.vertical({ layout });
    }

    _createOverlaysList() {
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,7 @@ import wasmPack from 'vite-plugin-wasm-pack';
 // To include and minify glsl into the bundle
 import glsl from 'vite-plugin-glsl';
 // To include css into the bundle
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+//import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

 export default defineConfig({
    build: {
@@ -38,7 +38,6 @@ export default defineConfig({
        glsl({
            compress: true,
        }),
-        cssInjectedByJsPlugin(),
    ],
    resolve: {
        alias: [
Author	SHA1	Message	Date
Matthieu Baumann	1cf827cd84	simplify new test	2024-09-12 16:54:48 +02:00
Matthieu Baumann	cbfe278661	remove inject css vite plugin to manually insert the content of aladin.css in js inside the aladin lite div container	2024-09-12 16:53:06 +02:00
MARCHAND MANON	914f296965	fix: also add style sheet in shadow dom context	2024-09-12 11:04:50 +02:00