mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2025-12-12 07:40:26 -08:00
Fix #151. It is now possible to escape the fullscreen. I fixed a refresh of the fullscreen button bug by defining a special alevent:fullscreen_toggled that the fullscreen button can listen to in order to change its arrow image (opening or closing). Also fix mouseup bug during selection
This commit is contained in:
19
examples/al-disto.html
Normal file
19
examples/al-disto.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
|
||||
|
||||
<script type="module">
|
||||
import A from '../src/js/A.js';
|
||||
var aladin;
|
||||
A.init.then(() => {
|
||||
aladin = A.aladin('#aladin-lite-div', {showContextMenu: true, survey: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-i-r-g/', fov: 0.00833333333, target: '270.334079 66.730469'});
|
||||
aladin.showHealpixGrid(true)
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -737,8 +737,6 @@ export let Aladin = (function () {
|
||||
}
|
||||
})
|
||||
|
||||
//this.fullScreenBtn.attr('title', isInFullscreen ? 'Restore original size' : 'Full screen');
|
||||
|
||||
if (this.aladinDiv.classList.contains("aladin-fullscreen")) {
|
||||
this.aladinDiv.classList.remove("aladin-fullscreen");
|
||||
} else {
|
||||
@@ -788,6 +786,8 @@ export let Aladin = (function () {
|
||||
self.callbacksByEventName["fullScreenToggled"];
|
||||
typeof fullScreenToggledFn === "function" &&
|
||||
fullScreenToggledFn(self.isInFullscreen);
|
||||
|
||||
ALEvent.FULLSCREEN_TOGGLED.dispatchedTo(this.aladinDiv, {fullscreen: self.isInFullscreen});
|
||||
};
|
||||
|
||||
Aladin.prototype.getOptionsFromQueryString = function () {
|
||||
|
||||
@@ -118,7 +118,11 @@ export class CircleSelect extends FSM {
|
||||
this.dispatch("off");
|
||||
};
|
||||
|
||||
let mouseout = mouseup;
|
||||
let mouseout = (params) => {
|
||||
if (this.startCoo) {
|
||||
mouseup(params);
|
||||
}
|
||||
};
|
||||
|
||||
let off = () => {
|
||||
view.aladin.showReticle(true)
|
||||
@@ -153,7 +157,8 @@ export class CircleSelect extends FSM {
|
||||
mouseout
|
||||
},
|
||||
mouseout: {
|
||||
off
|
||||
off,
|
||||
mousedown
|
||||
},
|
||||
mouseup: {
|
||||
off,
|
||||
|
||||
@@ -74,6 +74,7 @@ export class RectSelect extends FSM {
|
||||
let mouseup = (params) => {
|
||||
var x, y;
|
||||
const {coo} = params;
|
||||
|
||||
this.coo = coo;
|
||||
// finish the selection
|
||||
var w = this.coo.x - this.startCoo.x;
|
||||
@@ -132,7 +133,11 @@ export class RectSelect extends FSM {
|
||||
view.aladin.removeStatusBarMessage('selector')
|
||||
}
|
||||
|
||||
let mouseout = mouseup;
|
||||
let mouseout = (params) => {
|
||||
if (this.startCoo) {
|
||||
mouseup(params);
|
||||
}
|
||||
};
|
||||
|
||||
super({
|
||||
state: 'off',
|
||||
@@ -163,7 +168,8 @@ export class RectSelect extends FSM {
|
||||
off
|
||||
},
|
||||
mouseout: {
|
||||
off
|
||||
off,
|
||||
mousedown
|
||||
},
|
||||
mouseup: {
|
||||
off,
|
||||
|
||||
@@ -91,7 +91,7 @@ export class Selector {
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.dispatch('off')
|
||||
this.select && this.dispatch('off')
|
||||
}
|
||||
|
||||
dispatch(to, params) {
|
||||
|
||||
@@ -1258,7 +1258,13 @@ export let View = (function () {
|
||||
break;
|
||||
// escape
|
||||
case 27:
|
||||
view.selector.cancel()
|
||||
// if there is a selection occuring
|
||||
view.selector && view.selector.cancel()
|
||||
|
||||
if (view.aladin.isInFullscreen) {
|
||||
view.aladin.toggleFullscreen(view.aladin.options.realFullscreen);
|
||||
}
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
||||
@@ -79,6 +79,8 @@ export class ALEvent {
|
||||
|
||||
static MODE = new ALEvent("AL:mode")
|
||||
|
||||
static FULLSCREEN_TOGGLED = new ALEvent("AL:fullscreen.toggled")
|
||||
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
@@ -29,6 +29,8 @@
|
||||
*****************************************************************************/
|
||||
|
||||
import { ActionButton } from "../Widgets/ActionButton.js";
|
||||
import { ALEvent } from "../../events/ALEvent";
|
||||
|
||||
|
||||
import restoreIcon from './../../../../assets/icons/restore.svg';
|
||||
import maximizeIcon from './../../../../assets/icons/maximize.svg';
|
||||
@@ -57,39 +59,44 @@ export class FullScreenActionButton extends ActionButton {
|
||||
}
|
||||
|
||||
aladin.toggleFullscreen(aladin.options.realFullscreen);
|
||||
|
||||
if (aladin.isInFullscreen) {
|
||||
self.update({
|
||||
icon: {
|
||||
size: 'medium',
|
||||
monochrome: true,
|
||||
url: restoreIcon
|
||||
},
|
||||
tooltip: {
|
||||
content: 'Restore original size',
|
||||
position: {
|
||||
direction: 'left'
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
self.update({
|
||||
icon: {
|
||||
size: 'medium',
|
||||
monochrome: true,
|
||||
url: maximizeIcon
|
||||
},
|
||||
tooltip: {
|
||||
content: 'Fullscreen',
|
||||
position: {
|
||||
direction: 'left'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
self = this;
|
||||
|
||||
// Listen to the fullscreen toggled event to change the icon of the button
|
||||
ALEvent.FULLSCREEN_TOGGLED.listenedBy(aladin.aladinDiv, (event) => {
|
||||
const isInFullscreen = event.detail.fullscreen;
|
||||
|
||||
if (isInFullscreen) {
|
||||
self.update({
|
||||
icon: {
|
||||
size: 'medium',
|
||||
monochrome: true,
|
||||
url: restoreIcon
|
||||
},
|
||||
tooltip: {
|
||||
content: 'Restore original size',
|
||||
position: {
|
||||
direction: 'left'
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
self.update({
|
||||
icon: {
|
||||
size: 'medium',
|
||||
monochrome: true,
|
||||
url: maximizeIcon
|
||||
},
|
||||
tooltip: {
|
||||
content: 'Fullscreen',
|
||||
position: {
|
||||
direction: 'left'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -74,7 +74,6 @@ export class DOMElement {
|
||||
if (target && target.children) {
|
||||
index = Array.prototype.indexOf.call(target.children, el);
|
||||
}
|
||||
console.log("remove", el)
|
||||
el.remove()
|
||||
|
||||
return {target, position: index};
|
||||
|
||||
Reference in New Issue
Block a user