mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2025-12-05 20:39:56 -08:00
remove inject css vite plugin to manually insert the content of aladin.css in js inside the aladin lite div container
This commit is contained in:
Matthieu Baumann
committed by
Matthieu Baumann
Matthieu Baumann
parent
afca8f8be9
commit
1271e5f0ac
@@ -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
|
||||
|
||||
|
||||
39
examples/al-in-shadow-dom.html
Normal file
39
examples/al-in-shadow-dom.html
Normal 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>
|
||||
@@ -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",
|
||||
|
||||
10
src/js/A.js
10
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);
|
||||
};
|
||||
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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,45 +38,6 @@ export default defineConfig({
|
||||
glsl({
|
||||
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: {
|
||||
alias: [
|
||||
|
||||
Reference in New Issue
Block a user