diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index 867f43c5..d8f88d81 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -22,6 +22,7 @@ jobs:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
source "$HOME/.cargo/env"
rustup default nightly
+ rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
- name: "Install wasm-pack"
run: |
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
@@ -31,6 +32,8 @@ jobs:
- name: "Build Aladin Lite"
run: |
npm run build
+ - name: "Publish Aladin Lite to npm"
+ run: |
npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
\ No newline at end of file
diff --git a/src/css/aladin.css b/src/css/aladin.css
index 8d8b9767..c8df7501 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -8,6 +8,10 @@ body { overscroll-behavior: contain; }
/* disable x swipe on chrome, firefox */
/* see. https://stackoverflow.com/questions/30636930/disable-web-page-navigation-on-swipeback-and-forward */
overscroll-behavior-x: none;
+
+ /* media query on the aladin lite container. not supported everywhere.
+ There can be a more supported alternative here: https://caniuse.com/?search=grid-template-columns */
+ /*container-type: inline-size;*/
}
.aladin-imageCanvas {
@@ -680,7 +684,7 @@ canvas {
}
.aladin-input-text.aladin-dark-theme.search {
- width: 16rem;
+ width: 15rem;
text-shadow: 0px 0px 2px #000;
}
@@ -1296,32 +1300,16 @@ canvas {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEIEwUMBS20MQAAApRJREFUWEfdV7GO2zAMfXY7x1luzOFwDeB/KHCAB87eumvqmI/JWhTwF3TIrMFAv8JbgWyHG3IpOjbpcKJC02KipECHclIU+j2KfKRlAABRUyFYak3UgKiZiXUJAIt1d1ysu2PYn53DsPCucpbkRE3JAdxKTtQgWo6zJAfGGbAwLuEV7OB9/yrXIbqZ9/0+rMuhdb+RYfWmm+fged8fihzyoXXxlNcYB2KRxwwA6SzI9Crgd973B/5/u3IF8FYSw98M5D2QR86kRE3pfX+AMqKm8iEQoqYaWrfj/4bW7QgokMhCeSs5KeVrDM4K29C6Y6oE0YGEUlndocVGyg/rGZDXBQpr0kmjLiAlOOvk3vf7RJZM5Q+te2W/7coVEq+wnC1yCZYyS3B8MMYF3vBKK9Jz5PWmm8sab1eu4N9D63aaHEAsH88SzmQpnSHsHDmnWvlXIoiJ4JTviY8FRUJ8ZAiOEiJbLpcjARM1M0twpmjZOeGQrXYm1/7yMLz/eH8fnyus6XXOtmLgWBrKtdMguNKYPPystIausn9egsVDfI674KxS6003F/sX357AdOBwcADwWD9EjBKJubxYd0cml4RhP5IPrduFk04GjiZXMyZiRHKdAU3OWeB2lLNAk+tpl9IHY0zSlBo4OgsaTJpFzs+F0pxKYEXK73Nd8+3KFfWmG71qGfgSeQqPN0fvdlZrSvmUoXaJJ7EiocArZaS6tgzA+5RQe3gumUl5gPLXzy+6pEQNzDuhvFKx1ZuuEuTxliwmY/KuoHxGhzGv5QDw9PTx7senz88aLHUpJeOu8OHb17u+//4CTMm97/eFVQK5vqR8y6xOyipByjn3+0C3moUH4O++D1UX3PR9eJWzJCf6Tz5O/wDUeIfTLPlbywAAAABJRU5ErkJggg==') 15 15, auto;
}
-/* *********************************************** */
-
-/* Autocomplete styles (adapted from https://github.com/kraaden/autocomplete ) */
-/*.autocomplete {
- background: white;
-
- font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- overflow: auto;
- box-sizing: border-box;
- border: 1px solid rgba(50, 50, 50, 0.6);
+/* Media query */
+/*@container (max-width: 40rem) {
+ .aladin-input-text.aladin-dark-theme.search {
+ width: 6rem;
+ text-shadow: 0px 0px 2px #000;
+ }
}
-.autocomplete * {
- font: inherit;
-}
-
-.autocomplete > div {
- padding: 0 4px;
-}
-
-.autocomplete .group {
- background: #eee;
-}
-
-.autocomplete > div:hover:not(.group),
-.autocomplete > div.selected {
- background: #81ca91;
- cursor: pointer;
+@container (max-width: 31rem) {
+ .aladin-fov .aladin-monospace-text {
+ display: none;
+ }
}*/
diff --git a/src/js/A.js b/src/js/A.js
index e5000ab2..81dc18f2 100644
--- a/src/js/A.js
+++ b/src/js/A.js
@@ -76,7 +76,7 @@ let A = {};
* @function
* @name A.aladin
* @memberof A
- * @param {string} divSelector - The ID selector for the HTML element or the HTML element itself
+ * @param {string|HTMLElement} divSelector - The ID selector for the HTML element or the HTML element itself
* @param {AladinOptions} [options] - Options for configuring the Aladin Lite instance.
* @returns {Aladin} An instance of the Aladin Lite library.
* @example
diff --git a/src/js/Aladin.js b/src/js/Aladin.js
index 188db1d1..90bed4ae 100644
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -443,7 +443,8 @@ export let Aladin = (function () {
}
if (options.showProjectionControl) {
- topRightToolbar.add(new ProjectionActionButton(this))
+ this.projBtn = new ProjectionActionButton(this);
+ topRightToolbar.add(this.projBtn)
}
if (options.showFullscreenControl) {
@@ -457,74 +458,43 @@ export let Aladin = (function () {
this.menu = menu;
this.viewportMenu = viewport;
- this._applyMediaQueriesUI()
+ //this._applyMediaQueriesUI()
}
- Aladin.prototype._applyMediaQueriesUI = function() {
- let self = this;
- function updateLocation() {
- let [lon, lat] = self.wasm.getCenter();
- self.location.update({
- lon: lon,
- lat: lat,
- isViewCenter: true,
- frame: self.view.cooFrame
- }, self);
- }
-
- function mqMediumSizeFunction(x) {
- if (x.matches) { // If media query matches
- if (self.location) {
- Location.prec = 2;
- updateLocation()
+ /*Aladin.prototype._applyMediaQueriesUI = function() {
+ const applyMediaQuery = function(maxWidth, matchingCallback, unmatchingCallback) {
+ function mqFunction(x) {
+ if (x.matches) { // If media query matches
+ matchingCallback()
+ } else {
+ unmatchingCallback()
}
- } else {
- if (self.location) {
- Location.prec = 7;
- updateLocation()
- }
}
+
+ // Create a MediaQueryList object
+ var mq = window.matchMedia("(max-width: " + maxWidth + ")")
+
+ // Attach listener function on state changes
+ mq.addEventListener("change", function() {
+ mqFunction(mq);
+ });
+
+ mqFunction(mq);
}
- // Create a MediaQueryList object
- var mqMediumSize = window.matchMedia("(max-width: 500px)")
+ let self = this;
- // Attach listener function on state changes
- mqMediumSize.addEventListener("change", function() {
- mqMediumSizeFunction(mqMediumSize);
- });
-
- var mqSmallSize = window.matchMedia("(max-width: 410px)")
-
- /*function mqSmallSizeFunction(x) {
- if (x.matches) { // If media query matches
- self.menu.update({
- direction: 'right',
- position: {
- top: '23px',
- left: '0px'
- }
- })
- } else {
- self.menu.update({
- direction: 'left',
- position: {
- top: '23px',
- left: '0px'
- }
- })
+ applyMediaQuery('48rem', () => {
+ if (self.projBtn) {
+ self.projBtn.update({verbosity: 'reduced'})
}
- }*/
-
- // Attach listener function on state changes
- /*mqSmallSize.addEventListener("change", function() {
- mqSmallSizeFunction(mqSmallSize);
- });*/
-
- // Call listener function at run time
- //mqSmallSizeFunction(mqSmallSize);
- mqMediumSizeFunction(mqMediumSize);
- }
+ },
+ () => {
+ if (self.projBtn) {
+ self.projBtn.update({verbosity: 'full'})
+ }
+ })
+ }*/
/**** CONSTANTS ****/
Aladin.VERSION = version;
diff --git a/src/js/gui/Button/Projection.js b/src/js/gui/Button/Projection.js
index 3a885fde..c6abc75f 100644
--- a/src/js/gui/Button/Projection.js
+++ b/src/js/gui/Button/Projection.js
@@ -42,13 +42,16 @@ import { ALEvent } from "../../events/ALEvent";
* @param {Aladin} aladin - The aladin instance.
*/
constructor(aladin, options) {
+ options = options || {};
+ options.verbosity = (options && options.verbosity) || 'full';
+ let projectionName = aladin.getProjectionName();
super({
icon: {
monochrome: true,
size: 'small',
url: projectionIconUrl,
},
- content: [ProjectionEnum[aladin.getProjectionName()].label],
+ content: [options.verbosity === 'full' ? ProjectionEnum[projectionName].label : ''],
tooltip: {content: 'Change the view projection', position: {direction: 'bottom left'}},
cssStyle: {
cursor: 'pointer',
@@ -56,26 +59,36 @@ import { ALEvent } from "../../events/ALEvent";
...options
}, aladin);
- let ctxMenu = this._buildLayout(aladin);
+ this.aladin = aladin;
+
+ let ctxMenu = this._buildLayout();
this.update({ctxMenu})
- this._addEventListeners(aladin)
+ this._addEventListeners()
}
- _addEventListeners(aladin) {
+ _addEventListeners() {
+ let aladin = this.aladin;
let self = this;
+
ALEvent.PROJECTION_CHANGED.listenedBy(aladin.aladinDiv, function (e) {
- self.update({content: [ProjectionEnum[aladin.getProjectionName()].label]})
+ let projName = aladin.getProjectionName();
+ let content = self.options.verbosity === 'full' ? ProjectionEnum[projName].label : '';
+
+ self.update({content})
});
}
- _buildLayout(aladin) {
+ _buildLayout() {
+ let aladin = this.aladin;
+
let layout = [];
let self = this;
let aladinProj = aladin.getProjectionName();
for (const key in ProjectionEnum) {
let proj = ProjectionEnum[key];
+
layout.push({
label: proj.label,
selected: aladinProj === key,
@@ -83,7 +96,7 @@ import { ALEvent } from "../../events/ALEvent";
aladin.setProjection(key)
let ctxMenu = self._buildLayout(aladin);
- self.update({ctxMenu, content: proj.label});
+ self.update({ctxMenu, content: self.options.verbosity === 'full' ? proj.label : ''});
}
})
}
@@ -91,6 +104,17 @@ import { ALEvent } from "../../events/ALEvent";
return layout;
}
+ update(options) {
+ super.update(options);
+
+ if (options.verbosity) {
+ let ctxMenu = this._buildLayout();
+ let projName = this.aladin.getProjectionName();
+ let label = options.verbosity === 'full' ? ProjectionEnum[projName].label : '';
+ super.update({ctxMenu, content: label});
+ }
+ }
+
_show() {
super._show()
}
diff --git a/src/js/gui/FoV.js b/src/js/gui/FoV.js
index 71fc4360..f07bdc90 100644
--- a/src/js/gui/FoV.js
+++ b/src/js/gui/FoV.js
@@ -78,7 +78,7 @@ export class FoV extends DOMElement {
if (options.showFov) {
layout.push(...['',
- '×
',
+ '×
',
''])
}
@@ -102,7 +102,7 @@ export class FoV extends DOMElement {
};
_update(fovXDeg, fovYDeg) {
- let [fovX, fovY] = this.el.querySelectorAll('.aladin-monospace-text')
+ let [fovX, _, fovY] = this.el.querySelectorAll('.aladin-monospace-text')
fovX.innerText = this._format(fovXDeg)
fovY.innerText = this._format(fovYDeg)
}