gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2025-12-12 07:40:26 -08:00
Code Issues Packages Projects Releases Wiki Activity

remove inject css vite plugin to manually insert the content of aladin.css in js inside the aladin lite div container

Browse Source
This commit is contained in:
Matthieu Baumann
2024-09-12 16:53:06 +02:00
committed by Matthieu Baumann
parent afca8f8be9
commit 1271e5f0ac
6 changed files with 50 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -6,6 +6,7 @@
* [test] Add support of playwright. Instructions in the readme for running the test matching snapshots [PR #176] * [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 * [fixed] Order of overlays in the stack now matches the addMOC/addCatalog/addOverlay calls ordering
* [doc] Expose the API of Coo class * [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 ## 3.5.0-beta

39
examples/al-in-shadow-dom.html Normal file
View File

@@ -0,0 +1,39 @@
<!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)
console.log(aladinLiteEl.getRootNode() instanceof ShadowRoot)
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
}
);
//aladin.removeHiPSFromFavorites('CDS/P/allWISE/color')
});
</script>
<style>
.aladin-cat-browser-box {
width: 600px;
}
</style>
</body>
</html>

1
package.json
View File

@@ -51,7 +51,6 @@
"@playwright/test": "^1.47.0", "@playwright/test": "^1.47.0",
"jsdoc": "^4.0.2", "jsdoc": "^4.0.2",
"vite": "^4.3.8", "vite": "^4.3.8",
"vite-plugin-css-injected-by-js": "^3.1.1",
"vite-plugin-glsl": "^1.1.2", "vite-plugin-glsl": "^1.1.2",
"vite-plugin-top-level-await": "^1.4.1", "vite-plugin-top-level-await": "^1.4.1",
"vite-plugin-wasm": "^3.2.2", "vite-plugin-wasm": "^3.2.2",

10
src/js/A.js
View File

@@ -51,8 +51,7 @@ import { Sesame } from "./Sesame.js";
import init, * as module from './../core/pkg'; import init, * as module from './../core/pkg';
// Import aladin css inside the project // Import aladin css inside the project
import './../css/aladin.css'; import aladinCSS from './../css/aladin.css?inline';
/////////////////////////////// ///////////////////////////////
/////// Aladin Lite API /////// /////// Aladin Lite API ///////
@@ -97,6 +96,13 @@ A.aladin = function (divSelector, options) {
} else { } else {
divElement = divSelector; 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); return new Aladin(divElement, options);
}; };

2
src/js/gui/Box/StackBox.js
View File

@@ -768,7 +768,7 @@ export class OverlayStackBox extends Box {
); );
layout = layout.concat(this._createSurveysList()); layout = layout.concat(this._createSurveysList());
return Layout.vertical({ layout, classList: ["content"] }); return Layout.vertical({ layout });
} }
_createOverlaysList() { _createOverlaysList() {

41
vite.config.ts
View File

@@ -10,7 +10,7 @@ import wasmPack from 'vite-plugin-wasm-pack';
// To include and minify glsl into the bundle // To include and minify glsl into the bundle
import glsl from 'vite-plugin-glsl'; import glsl from 'vite-plugin-glsl';
// To include css into the bundle // 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({ export default defineConfig({
build: { build: {
@@ -38,45 +38,6 @@ export default defineConfig({
glsl({ glsl({
compress: true, compress: true,
}), }),
// make sure that the CSS is also included in ShadowDOMs.
// Extracted from https://github.com/marco-prontera/vite-plugin-css-injected-by-js/issues/128
cssInjectedByJsPlugin({
styleId: "aladin-css",
injectCodeFunction: async function injectCodeCustomRunTimeFunction(cssCode) {
function getAladinDiv(divName: string): Promise<Element | null> {
return new Promise((resolve) => {
if (document.querySelector(divName)) {
return resolve(document.querySelector(divName));
}
const observer = new MutationObserver(() => {
if (document.querySelector(divName)) {
observer.disconnect();
resolve(document.querySelector(divName));
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
}
try {
if (typeof document != 'undefined') {
let elementStyle = document.createElement('style');
elementStyle.id = "aladin-css";
elementStyle.appendChild(document.createTextNode(cssCode));
document.head.appendChild(elementStyle);
let aladinDiv = await getAladinDiv("aladin-container")
aladinDiv?.shadowRoot?.appendChild(elementStyle);
}
} catch (e) {
console.error('vite-plugin-css-injected-by-js', e);
}
}
}),
], ],
resolve: { resolve: {
alias: [ alias: [