gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2026-04-28 03:43:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

simplify UI Layout

Browse Source
This commit is contained in:
Matthieu Baumann
2026-01-15 18:23:33 +01:00
committed by Matthieu Baumann
parent ba86645204
commit c674864762
33 changed files with 4869 additions and 4823 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/icons/enlarge.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-9 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>arrow-up-down</title>
<desc>Created with Sketch Beta.</desc>
<defs>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-213.000000, -1193.000000)" fill="#000000">
<path d="M225,1217 L222,1217 L222,1201 L225,1201 C225.643,1201 226.293,1201.02 226.687,1200.62 C227.08,1200.23 227.08,1199.6 226.687,1199.2 L220.747,1193.28 C220.537,1193.07 220.259,1192.98 219.984,1193 C219.71,1192.98 219.432,1193.07 219.222,1193.28 L213.283,1199.2 C212.89,1199.6 212.89,1200.23 213.283,1200.62 C213.676,1201.02 214.294,1201 215,1201 L218,1201 L218,1217 L215,1217 C214.357,1217 213.676,1216.98 213.283,1217.38 C212.89,1217.77 212.89,1218.4 213.283,1218.8 L219.222,1224.72 C219.432,1224.93 219.71,1225.02 219.984,1225 C220.259,1225.02 220.537,1224.93 220.747,1224.72 L226.687,1218.8 C227.08,1218.4 227.08,1217.77 226.687,1217.38 C226.293,1216.98 225.737,1217 225,1217" id="arrow-up-down" sketch:type="MSShapeGroup">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

8994
src/core/src/shaders.rs
View File

File diff suppressed because it is too large Load Diff

69
src/css/aladin.css
View File

@@ -43,6 +43,7 @@
.aladin-tree {
width: 100%;
height: calc(100% - 130px);
border-bottom: var(--border-size) solid var(--border-color);
}
@@ -56,8 +57,8 @@
.aladin-tree ul {
padding:0;
margin:0;
overflow-y: scroll;
height: 300px;
overflow-y: auto;
height: calc(100% - 37px);
}
.aladin-link {
list-style-type: none;
@@ -85,6 +86,7 @@
z-index: 1000;
padding: 0;
max-width: 100%;
width: fit-content;
}
#aladin-tooltip-mouse * {
margin: 0;
@@ -335,6 +337,12 @@
width: min-content;
border: var(--border-size) solid var(--border-color);
box-sizing: border-box;
}
.aladin-box .aladin-box-content {
height: 100%;
}
.aladin-container canvas {
@@ -353,11 +361,6 @@
font-weight: bold;
white-space: nowrap;
}
.aladin-box-content {
padding: 10px;
}
.aladin-shareInput {
width: 300px;
margin-top: 10px;
@@ -474,12 +477,6 @@
height: 100%;
}
/*
.aladin-icon.aladin-dark-theme {
background-color: transparent;
}
*/
[data-theme="dark"] .aladin-icon.aladin-icon-monochrome img {
filter: invert(100%) sepia(91%) saturate(0%) hue-rotate(169deg) brightness(115%) contrast(100%);
}
@@ -582,10 +579,6 @@
color: var(--error-color);
}
.aladin-box-content > div {
margin: 10px 0px 0px 0px;
}
.aladin-button:hover {
color: #ffffff;
background-color: #3276b1;
@@ -593,18 +586,7 @@
}
.aladin-vertical-list {
display: flex;
align-items: flex-start;
list-style: none;
flex-direction: column;
}
.aladin-vertical-list.left {
align-items: flex-start;
}
.aladin-vertical-list.right {
align-items: flex-end;
}
.aladin-vertical-list > *:first-child {
@@ -951,9 +933,6 @@
cursor: pointer;
font-family: monospace;
box-sizing: content-box;
/* <option> colors */
/* Remove focus outline */
/* Remove IE arrow */
}
/* This is done so that the select shrink to the size of its parent (coupled with flex)
@@ -1170,6 +1149,23 @@ otherwise it fits its content options. If those are too big the select can go ou
left: 0.2rem;
}
.aladin-indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
vertical-align: middle;
}
.aladin-indicator.aladin-not-valid {
background-color: var(--error-color);
}
.aladin-indicator.aladin-valid {
background-color: var(--valid-color);
}
.aladin-link:hover {
text-decoration: underline;
}
@@ -1222,15 +1218,22 @@ otherwise it fits its content options. If those are too big the select can go ou
width:100%;
}
.aladin-HiPS-browser-box {
height: 500px;
width: 400px;
}
.aladin-cat-browser-box {
width: 300px;
}
.aladin-HiPS-browser-box .aladin-input-text {
width: 100%;
min-width: 300px;
}
.aladin-cat-browser-box .aladin-input-text.search {
width: 100%;
min-width: 300px;
}
.aladin-location {

1
src/js/MeasurementTable.js
View File

@@ -30,7 +30,6 @@
*
*****************************************************************************/
import { Color } from "./Color.js"
import { Icon } from "./gui/Widgets/Icon.js";
import { Tabs } from "./gui/Widgets/Tab.js";
import { Table } from "./gui/Widgets/Table.js";

1
src/js/View.js
View File

@@ -276,7 +276,6 @@ export let View = (function () {
colorPickerElement = document.createElement('span');
colorPickerElement.classList.add('aladin-color-picker')
colorPickerElement.classList.add('aladin-view-label')
colorPickerElement.classList.add('aladin-dark-theme')
this.aladin.aladinDiv.appendChild(colorPickerElement);
}

33
src/js/gui/Box/CatalogQueryBox.js
View File

@@ -330,20 +330,25 @@ import { ActionButton } from "../Widgets/ActionButton.js";
classList: ['aladin-cat-browser-box'],
content: Layout.vertical(
[
Layout.horizontal({
layout: ["Search:", searchDropdown], cssStyle: {width: '100%'}
}),
Layout.horizontal({
layout: ["Progressive catalog:", hipsCatLoad],
cssStyle: {
textAlign: "center",
display: "flex",
alignItems: "center",
listStyle: "none",
justifyContent: "space-between",
width: "100%",
},
}),
Layout.horizontal(
["Search:", searchDropdown],
{cssStyle:
{width: '100%'}
}
),
Layout.horizontal(
["Progressive catalog:", hipsCatLoad],
{
cssStyle: {
textAlign: "center",
display: "flex",
alignItems: "center",
listStyle: "none",
justifyContent: "space-between",
width: "100%",
},
}
),
form
]
),

14
src/js/gui/Box/GotoBox.js
View File

@@ -36,20 +36,6 @@ import { SearchTextInput } from "../Input/InputTextSearch.js";
export class GotoBox extends Box {
// Constructor
constructor(aladin) {
/*let content = Layout.horizontal([
'Go to:',
Input.text({
//tooltip: {content: 'Search for a VizieR catalogue', position: {direction :'bottom'}},
label: "Go to:",
name: "goto",
type: "text",
placeholder: 'Object name/position',
autocomplete: 'off',
change(e, self) {
self.addEventListener('blur', (event) => {});
}
})
]);*/
let textField = new SearchTextInput(aladin, {
cssStyle: {
width: '15rem'

16
src/js/gui/Box/GridBox.js
View File

@@ -154,15 +154,13 @@ export class GridBox extends Box {
}
});
sliderOpacity.addClass("aladin-input-range")
const layout = Layout.horizontal({
layout: [
enableCheckbox,
labelSizeBtn,
thicknessLineBtn,
colorInput,
sliderOpacity
]
})
const layout = Layout.horizontal([
enableCheckbox,
labelSizeBtn,
thicknessLineBtn,
colorInput,
sliderOpacity
])
layout.addClass('aladin-grid-frame');

47
src/js/gui/Box/HiPSBrowserBox.js
View File

@@ -24,6 +24,8 @@ import { Dropdown } from "../Input/Dropdown.js";
import filterOnUrl from "../../../../assets/icons/filter-on.svg";
import treeIconUrl from "../../../../assets/icons/tree.svg";
import filterOffUrl from "../../../../assets/icons/filter-off.svg";
import helpIconUrl from "../../../../assets/icons/help.svg";
import { Input } from "../Widgets/Input.js";
import { TogglerActionButton } from "../Button/Toggler.js";
import { Layout } from "../Layout.js";
@@ -222,7 +224,7 @@ export class HiPSBrowserBox extends Box {
let filterEnabler = Input.checkbox({
name: "filter-enabler",
tooltip: { content: "enable/disable" },
tooltip: { content: "Enable the filter" },
checked: false,
click(e) {
let on = e.target.checked;
@@ -274,23 +276,44 @@ export class HiPSBrowserBox extends Box {
let filterNumberElt = document.createElement("div");
super(
{
super({
close: true,
tooltip: {
global: true,
aladin,
content: 'red: out of the view, green: in view'
},
header: {
title: Layout.horizontal([new Icon({
size: 'medium',
url: treeIconUrl,
monochrome: true,
}), "HiPS browser"]),
title: [
new Icon({
size: 'medium',
url: treeIconUrl,
monochrome: true,
}),
"HiPS browser",
new Icon({
size: 'medium',
url: helpIconUrl,
monochrome: true,
tooltip: {
content: 'HiPS:<br/><span class="aladin-indicator aladin-not-valid"></span> out of the view<br /><span class="aladin-indicator aladin-valid"></span> in view',
mouse: true,
aladin
},
style: {
cursor: 'help'
}
}),
],
draggable: true,
},
sizeable: true,
classList: ['aladin-HiPS-browser-box'],
content: Layout.vertical([
content: [
searchTree,
Layout.horizontal(["Search:", searchDropdown, infoCurrentHiPSBtn]),
Layout.horizontal([Layout.horizontal([filterEnabler, filterBtn, filterNumberElt])]),
]),
["Search:", searchDropdown, infoCurrentHiPSBtn],
[filterEnabler, filterBtn, filterNumberElt],
],
...options,
},
aladin.aladinDiv

7
src/js/gui/Box/HiPSCompositeBox.js
View File

@@ -162,7 +162,7 @@ export class HiPSCompositeBox extends Box {
draggable: true,
},
content: Layout.vertical([
Layout.horizontal([searchDropdown, infoCurrentHiPSBtn]),
[searchDropdown, infoCurrentHiPSBtn],
]),
...options,
},
@@ -232,7 +232,10 @@ export class HiPSCompositeBox extends Box {
})
hips.setSliceNumber(idxSlice)
cubeDisplayer.update({position: cubeDisplayer.position, content: Layout.horizontal([prevBtn, nextBtn, slicer, toStr(idxSlice + 1, true) + '/' + toStr(numSlices, false)])})
cubeDisplayer.update({
position: cubeDisplayer.position,
content: [prevBtn, nextBtn, slicer, toStr(idxSlice + 1, true) + '/' + toStr(numSlices, false)]
})
};
let slicer = Input.slider({

71
src/js/gui/Box/HiPSFilterBox.js
View File

@@ -58,37 +58,39 @@ export class HiPSFilterBox extends Box {
}
});
let regimeOption = Layout.horizontal({
label: 'Freq:',
layout: [Input.select({
tooltip: {
content: "Observation regime",
position: { direction: "left" },
},
value: "Optical",
options: [
"Radio",
"Infrared",
"Millimeter",
"Optical",
"UV",
"EUV",
"X-ray",
"Gamma-ray",
],
change: (e) => {
let regime = e.target.value;
self.params["regime"] = regime;
let regimeOption = new Layout(
{
start: Input.select({
tooltip: {
content: "Observation regime",
position: { direction: "left" },
},
value: "Optical",
options: [
"Radio",
"Infrared",
"Millimeter",
"Optical",
"UV",
"EUV",
"X-ray",
"Gamma-ray",
],
change: (e) => {
let regime = e.target.value;
self.params["regime"] = regime;
self._triggerFilteringCallback();
},
}), regimeBtn]
});
self._triggerFilteringCallback();
},
}),
end: regimeBtn
},
{label: 'Freq:'}
);
let resolutionOption = Layout.horizontal({
label: "Max resolution [°/px]:",
layout: [
new Input({
let resolutionOption = new Layout(
{
start: new Input({
name: "res",
value: 0.1,
type: 'range',
@@ -110,9 +112,10 @@ export class HiPSFilterBox extends Box {
self._triggerFilteringCallback();
},
}),
resolutionBtn,
]
});
end: resolutionBtn,
},
{label: "Max resolution [°/px]:"}
);
super(
{
header: {
@@ -121,7 +124,7 @@ export class HiPSFilterBox extends Box {
},
close: false,
classList: ['aladin-HiPS-filter-box'],
content: Layout.vertical([
content: [
new Form({
subInputs: [
{
@@ -133,7 +136,7 @@ export class HiPSFilterBox extends Box {
},
],
}),
])
]
},
aladin.aladinDiv
);

10
src/js/gui/Box/HiPSSelectorBox.js
View File

@@ -80,12 +80,10 @@ import { Input } from "../Widgets/Input.js";
super(
{
close: false,
content: Layout.horizontal({
layout: [
inputText,
loadBtn
]
}),
content: Layout.horizontal([
inputText,
loadBtn
]),
...options
},
aladin.aladinDiv

12
src/js/gui/Box/HiPSSettingsBox.js
View File

@@ -53,9 +53,7 @@ import { TogglerActionButton } from "../Button/Toggler.js";
},
tooltip: {content: 'Contrast', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({
layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.luminositySettingsContent]
});
const content = Layout.vertical([[self.selector, self.spectraBtn], self.luminositySettingsContent]);
self.update({content})
}
},
@@ -67,7 +65,7 @@ import { TogglerActionButton } from "../Button/Toggler.js";
},
tooltip: {content: 'Opacity', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.opacitySettingsContent]});
const content = Layout.vertical([[self.selector, self.spectraBtn], self.opacitySettingsContent]);
self.update({content})
}
},
@@ -78,7 +76,7 @@ import { TogglerActionButton } from "../Button/Toggler.js";
},
tooltip: {content: 'Colormap', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.colorSettingsContent]});
const content = Layout.vertical([[self.selector, self.spectraBtn], self.colorSettingsContent]);
self.update({content})
}
},
@@ -90,7 +88,7 @@ import { TogglerActionButton } from "../Button/Toggler.js";
},
tooltip: {content: 'Cutouts', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.pixelSettingsContent]});
const content = Layout.vertical([[self.selector, self.spectraBtn], self.pixelSettingsContent]);
self.update({content})
}
},
@@ -343,7 +341,7 @@ import { TogglerActionButton } from "../Button/Toggler.js";
}
});
self.update({content: Layout.vertical([Layout.horizontal([self.selector, self.spectraBtn]), self.opacitySettingsContent])})
self.update({content: Layout.vertical([[self.selector, self.spectraBtn], self.opacitySettingsContent])})
}
this._update(options.layer)

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

@@ -770,22 +770,20 @@ export class OverlayStackBox extends Box {
createLayout() {
this.HiPSui = {};
let layout = [Layout.horizontal([this.addOverlayBtn, "Overlays"])];
let layout = [[this.addOverlayBtn, "Overlays"]];
layout = layout.concat(this._createOverlaysList());
layout.push(
Layout.horizontal({
layout: [
this.addHiPSBtn,
"Surveys",
this.filterEnabler,
this.filterBtn,
],
})
[
this.addHiPSBtn,
"Surveys",
this.filterEnabler,
this.filterBtn,
],
);
layout = layout.concat(this._createSurveysList());
return Layout.vertical({ layout });
return Layout.vertical(layout);
}
_createOverlaysList() {
@@ -866,41 +864,24 @@ export class OverlayStackBox extends Box {
}
let item = Layout.horizontal({
layout: [
let item = Layout.horizontal(
[
this._addOverlayIcon(overlay),
name,
Layout.horizontal({ layout: optBtn }),
optBtn,
],
cssStyle: {
textAlign: "center",
display: "flex",
alignItems: "center",
listStyle: "none",
justifyContent: "space-between",
width: "100%",
},
});
{
cssStyle: {
textAlign: "center",
display: "flex",
alignItems: "center",
listStyle: "none",
justifyContent: "space-between",
width: "100%",
},
}
);
/*if(!Utils.hasTouchScreen()) {
layout.push({
label: item,
cssStyle,
hover(e) {
showBtn.el.style.visibility = 'visible'
deleteBtn.el.style.visibility = 'visible'
},
unhover(e) {
showBtn.el.style.visibility = 'hidden'
deleteBtn.el.style.visibility = 'hidden'
},
})
} else {
layout.push({
label: item,
cssStyle
})
}*/
layout.push(item);
}
@@ -1091,10 +1072,7 @@ export class OverlayStackBox extends Box {
}
btns = btns.concat([swapBtn, deleteBtn]);
let item = Layout.horizontal({
layout: [HiPSSelector, Layout.horizontal(btns)],
});
let item = Layout.horizontal([HiPSSelector, Layout.horizontal(btns)]);
layout.push(item);
if (!(layer.layer in self.HiPSui)) {

33
src/js/gui/Box/StatusBarBox.js
View File

@@ -117,27 +117,28 @@ export class StatusBarBox extends Box {
this.el.title = task.message;
// create message div
let message = Layout.horizontal({
layout: task.message,
tooltip: {
content: task.message,
position: {
direction: "top",
let message = Layout.horizontal(task.message,
{
tooltip: {
content: task.message,
position: {
direction: "top",
},
hoverable: true,
delayShowUpTime: '500ms',
cssStyle: {
fontSize: 'x-small',
maxWidth: "200px",
"overflow-wrap": "break-word",
}
},
hoverable: true,
delayShowUpTime: '500ms',
cssStyle: {
fontSize: 'x-small',
maxWidth: "200px",
"overflow-wrap": "break-word",
}
},
});
}
);
message.addClass("aladin-status-bar-message")
this._show({
content: new Layout({layout: [StatusBarBox.icons[task.type], message], orientation: 'horizontal'}),
content: Layout.horizontal([StatusBarBox.icons[task.type], message]),
})
}

2
src/js/gui/CtxMenu/Settings.js
View File

@@ -285,7 +285,7 @@ export class SettingsCtxMenu extends ContextMenu {
}
},
{
label: Layout.horizontal({layout: ['Examples'], tooltip: { content: 'How to embed Aladin Lite <br \>into your own webpages!', position: {direction: 'bottom'}}}),
label: Layout.horizontal('Examples', { tooltip: { content: 'How to embed Aladin Lite <br \>into your own webpages!', position: {direction: 'bottom'}}}),
action(o) {
Utils.openNewTab('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/')
}

3
src/js/gui/FoV.js
View File

@@ -83,10 +83,9 @@ export class FoV extends DOMElement {
'<div class="aladin-monospace-text"></div>'])
}
let el = Layout.horizontal({layout});
let el = Layout.horizontal(layout);
if (el) {
el.addClass('aladin-fov');
el.addClass('aladin-dark-theme')
}
super(el)

99
src/js/gui/Layout.js
View File

@@ -18,6 +18,7 @@
//
import { DOMElement } from "./Widgets/Widget";
import { Tooltip } from "./Widgets/Tooltip";
import { isJSObject } from "./Utils";
/******************************************************************************
* Aladin Lite project
@@ -34,23 +35,21 @@ import { Tooltip } from "./Widgets/Tooltip";
export class Layout extends DOMElement {
/**
* Create a layout
* @param {layout: Array.<DOMElement | String>, cssStyle: Object} options - Represents the structure of the Tabs
* @param {layout: Array.<DOMElement | String>} layout - Represents the structure of the Tabs
* @param {Object} options - Options object
* @param {DOMElement} target - The parent element.
* @param {String} position - The position of the tabs layout relative to the target.
* For the list of possibilities, see https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
*/
constructor(options = {layout: []}, target, position = "beforeend") {
constructor(layout, options, target, position = "beforeend") {
let el = document.createElement('div');
// The user should also be able to give just a list of DOMElement
if (options instanceof Array) {
options['layout'] = options;
}
options.layout = options.layout || [];
layout = layout || [];
super(el, options);
if (options.cssStyle) {
this.layout = layout;
if (options && options.cssStyle) {
this.setCss(options.cssStyle);
}
@@ -58,17 +57,35 @@ export class Layout extends DOMElement {
this.attachTo(target, position);
// 2. Once self is attached, attach the children
if (options.layout) {
if (typeof options.layout === 'string' || options.layout instanceof String) {
this.el.innerHTML = options.layout;
} else {
if (typeof layout === 'string' || layout instanceof String) {
this.el.innerHTML = layout;
// otherwise it is an object
} else if (
isJSObject(layout)
) {
if (layout.start) {
this.appendContent(new Layout(layout.start));
}
if (layout.end) {
this.appendContent(new Layout(layout.end));
}
this.el.style.justifyContent = "space-between";
} else if (Array.isArray(layout)) {
// treat it as an array
for (const item of options.layout) {
for (let item of layout) {
if (Array.isArray(item) || isJSObject(item)) {
item = new Layout(item)
}
this.appendContent(item)
}
} else {
const item = layout;
this.appendContent(item)
}
if (options.draggable) {
if (options && options.draggable) {
// retrieve the children and add the drag listeners
let draggableFn = options.draggable;
let firstSelected = null;
@@ -108,43 +125,37 @@ export class Layout extends DOMElement {
});
});
}
}
// The tooltip has to be set once the element
// lies in the DOM
if (options.tooltip) {
if (options && options.tooltip) {
Tooltip.add(options.tooltip, this)
}
if (options.position) {
if (options && options.position) {
this.setPosition(options.position)
}
if (options.orientation) {
if (options.orientation === 'horizontal') {
this.addClass('aladin-horizontal-list')
} else {
this.addClass('aladin-vertical-list')
}
if (options && options.vertical && options.vertical === true) {
this.addClass('aladin-vertical-list')
} else {
this.addClass('aladin-horizontal-list')
}
if (options.classList) {
if (options && options.classList) {
this.addClass(options.classList)
}
}
static horizontal(options, target, position = "beforeend") {
let layout = new Layout(options, target, position);
layout.addClass('aladin-horizontal-list');
return layout;
static horizontal(layout, options, target, position = "beforeend") {
return new Layout(layout, options, target, position);
}
static vertical(options, target, position = "beforeend") {
let layout = new Layout(options, target, position);
layout.addClass('aladin-vertical-list');
static vertical(layout, options, target, position = "beforeend") {
let verticalLayout = new Layout(layout, {...options, vertical: true}, target, position);
verticalLayout.addClass('aladin-vertical-list');
return layout;
return verticalLayout;
}
/**
@@ -160,7 +171,7 @@ export class Layout extends DOMElement {
* @param {DOMElement} item - Represents the structure of the Tabs
*/
removeItem(item) {
let arr = this.options.layout;
let arr = this.layout;
var index = arr.indexOf(item);
if (index > -1) {
@@ -175,7 +186,7 @@ export class Layout extends DOMElement {
* @param {DOMElement} item - Represents the structure of the Tabs
*/
appendLast(item) {
this.insertItemAtIndex(item, this.options.layout.length);
this.insertItemAtIndex(item, this.layout.length);
}
/**
@@ -185,7 +196,7 @@ export class Layout extends DOMElement {
* For the list of possibilities, see https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
*/
insertItemAtIndex(item, index) {
this.options.layout.splice(index, 0, item);
this.layout.splice(index, 0, item);
this._show();
}
@@ -195,11 +206,7 @@ export class Layout extends DOMElement {
*/
empty() {
// remove all the sub elements
/*for (let elmt of this.options.layout) {
elmt.remove();
}*/
this.options.layout = [];
this.layout = [];
this._show();
}
@@ -208,19 +215,19 @@ export class Layout extends DOMElement {
this.el.innerHTML = "";
// apply css
if (this.options.cssStyle) {
if (this.options && this.options.cssStyle) {
this.setCss(this.options.cssStyle);
}
if (this.options.layout) {
for (const item of this.options.layout) {
if (this.layout) {
for (const item of this.layout) {
if (item) {
this.appendContent(item)
}
}
}
if (this.options.position) {
if (this.options && this.options.position) {
this.setPosition(this.options.position)
}
}

10
src/js/gui/Location.js
View File

@@ -136,12 +136,10 @@ export class Location extends DOMElement {
})
copyBtn.el.classList.add("aladin-location-copy");
let el = Layout.horizontal({
layout: [
copyBtn,
field
]
})
let el = Layout.horizontal([
copyBtn,
field
])
el.addClass('aladin-location');
super(el)

8
src/js/gui/Utils.js
View File

@@ -15,4 +15,10 @@ Element.prototype.swap = function (node) {
// Move `node` to before the sibling of `this`
parent.insertBefore(node, sibling);
};
};
export function isJSObject(obj) {
return obj !== null &&
typeof obj === "object" &&
obj.constructor === Object
}

4
src/js/gui/Widgets/ActionButton.js
View File

@@ -84,7 +84,7 @@ import A from "../../A";
export class ActionButton extends DOMElement {
constructor(options, target, position = "beforeend") {
let el = document.createElement('button');
el.classList.add('aladin-btn', 'aladin-dark-theme');
el.classList.add('aladin-btn');
// add it to the dom
super(el, options);
@@ -147,7 +147,7 @@ export class ActionButton extends DOMElement {
if (layout.length === 1) {
this.appendContent(layout[0])
} else {
this.appendContent(new Layout({layout, orientation: 'horizontal'}))
this.appendContent(new Layout(layout))
}
}

79
src/js/gui/Widgets/Box.js
View File

@@ -19,6 +19,7 @@
import { DOMElement } from "./Widget";
import { ActionButton } from "./ActionButton";
import enlargeIconImg from '../../../../assets/icons/enlarge.svg';
import moveIconImg from '../../../../assets/icons/move.svg';
import { Layout } from "../Layout";
@@ -33,16 +34,6 @@ import { Layout } from "../Layout";
* Author: Matthieu Baumann[CDS]
*
*****************************************************************************/
/* Example of layout
[{
content: ''
title: '',
color: <label color>,
backgroundColor: <background tab color>,
action: () => {}
},]
*/
export class Box extends DOMElement {
constructor(options, target, position = "beforeend") {
let el = document.createElement("div");
@@ -52,7 +43,6 @@ export class Box extends DOMElement {
this.attachTo(target, position);
this._show();
this.addClass('aladin-dark-theme')
}
_show(options) {
@@ -97,7 +87,7 @@ export class Box extends DOMElement {
titleEl = document.createElement('div')
titleEl.classList.add("aladin-box-title");
DOMElement.appendTo(header.title, titleEl);
DOMElement.appendTo(new Layout(header.title), titleEl);
}
let draggableEl;
@@ -120,7 +110,7 @@ export class Box extends DOMElement {
});
}
let headerEl = Layout.horizontal([draggableEl, titleEl], this.el);
let headerEl = Layout.horizontal([draggableEl, titleEl], {}, this.el);
if (draggable) {
dragElement(headerEl.element(), this.el, this.options.onDragged);
headerEl.element().style.cursor = 'move';
@@ -137,7 +127,33 @@ export class Box extends DOMElement {
if (this.options.content) {
let content = this.options.content
this.appendContent(content);
if (content instanceof Layout) {
this.appendContent(content);
} else {
this.appendContent(Layout.vertical(content));
}
this.el.lastChild.classList.add("aladin-box-content");
}
if (this.options.sizeable) {
let sizeableBtn = new ActionButton({
icon: {
url: enlargeIconImg,
size: "small",
monochrome: true,
},
tooltip: {content: 'Enlarge the window', global: true, aladin},
cssStyle: {
cursor: 'move',
position: 'absolute',
bottom: 0,
right: 0
},
});
this.appendContent(sizeableBtn);
enlargeElement(sizeableBtn.element(), this.el);
}
if (this.options.position) {
@@ -216,3 +232,38 @@ function dragElement(triggerElt, elmnt, onDragged) {
}
}
}
function enlargeElement(triggerElt, elmnt) {
let pos3 = 0, pos4 = 0;
triggerElt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
const dx = e.clientX - pos3;
const dy = e.clientY - pos4;
pos3 = e.clientX;
pos4 = e.clientY;
const newWidth = elmnt.offsetWidth + 2*dx;
const newHeight = elmnt.offsetHeight + 2*dy;
elmnt.style.width = Math.max(20, newWidth) + "px";
elmnt.style.height = Math.max(20, newHeight) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}

6
src/js/gui/Widgets/ContextMenu.js
View File

@@ -51,8 +51,6 @@ export class ContextMenu extends DOMElement {
super(el, options);
this.addClass('aladin-dark-theme')
this.aladin = aladin;
this.cssStyleDefault = el.style;
@@ -176,7 +174,7 @@ export class ContextMenu extends DOMElement {
tooltip = opt.label.tooltip
}
let labelEl = Layout.horizontal({layout, tooltip});
let labelEl = Layout.horizontal(layout, {tooltip});
labelEl.attachTo(item)
} else if (opt.disabled && opt.disabled.reason) {
let tooltip = {
@@ -184,7 +182,7 @@ export class ContextMenu extends DOMElement {
position: {direction: 'top'}
}
let labelEl = Layout.horizontal({layout: opt.label, tooltip});
let labelEl = Layout.horizontal(opt.label, {tooltip});
labelEl.attachTo(item)
} else {
let wrapEl = document.createElement('div');

2
src/js/gui/Widgets/Form.js
View File

@@ -142,7 +142,7 @@ export class Form extends DOMElement {
groupLayout.push(input)
});
let item = new Layout({layout: groupLayout});
let item = new Layout(groupLayout, {vertical: true});
item.addClass('aladin-form-group')
return item;

1
src/js/gui/Widgets/Icon.js
View File

@@ -82,7 +82,6 @@ export class Icon extends DOMElement {
this._show();
this.addClass('aladin-icon')
this.addClass('aladin-dark-theme')
this.attachTo(target, position)
}

1
src/js/gui/Widgets/Input.js
View File

@@ -330,7 +330,6 @@ export class Input extends DOMElement {
}
this.el.classList.add('aladin-input');
this.el.classList.add('aladin-dark-theme');
if (this.options.cssStyle) {
this.setCss(this.options.cssStyle);

2
src/js/gui/Widgets/Radio.js
View File

@@ -87,7 +87,7 @@ export class RadioButton extends DOMElement {
}
}
let el = Layout.horizontal({layout});
let el = Layout.horizontal(layout);
super(el, options)

10
src/js/gui/Widgets/Tab.js
View File

@@ -57,13 +57,13 @@ export class Tabs extends DOMElement {
this.tabSelectedIdx = 0;
let tabs = this.buildTabs(options);
this.el = new Layout({
layout: [
new Layout({layout: tabs.layout, orientation: 'horizontal'}),
this.el = Layout.vertical(
[
tabs.layout,
tabs.content
],
classList: "aladin-table"
}).element();
{ classList: "aladin-table" }
).element();
this._show();

2
src/js/gui/Widgets/Table.js
View File

@@ -52,8 +52,6 @@ export class Table extends DOMElement {
super(el, options);
this.attachTo(target, position);
this.addClass("aladin-dark-theme")
}
static _createTableBody = function(options) {

2
src/js/gui/Widgets/Tooltip.js
View File

@@ -75,8 +75,6 @@ export class Tooltip extends DOMElement {
super(wrapperEl, options)
this.element().classList.add('aladin-dark-theme')
this._show();
}

37
src/js/gui/Widgets/Tree.js
View File

@@ -53,7 +53,6 @@ export class Tree extends DOMElement {
this.attachTo(target, position);
this._show();
this.addClass('aladin-dark-theme')
}
_setRoot(root) {
@@ -151,16 +150,16 @@ export class Tree extends DOMElement {
}
let label = this.label(child);
let layout = [label];
let layout = {start: [label], end: []};
if (child.dataproduct_subtype === "color") {
layout.push(new Icon({
layout.end.push(new Icon({
size: "small",
url: Icon.dataURLFromSVG({ svg: Icon.SVG_ICONS.COLOR }),
}))
}
layout.push(ActionButton.BUTTONS(this.aladin)
layout.end.push(ActionButton.BUTTONS(this.aladin)
.infoHiPS({
url: child.hips_service_url,
tooltip: {
@@ -171,7 +170,7 @@ export class Tree extends DOMElement {
}).element()
)
layout = layout.concat([
layout.end = layout.end.concat([
ActionButton.BUTTONS(this.aladin)
.targetHiPSLocation({
ra: child.hips_initial_ra,
@@ -197,20 +196,22 @@ export class Tree extends DOMElement {
.element(),
])
let config = {
console.log(layout)
let childElt = new Layout(
layout,
tooltip: {
content: '<figure class="aladin-fig"><img ' +
`src="${child.hips_service_url + "/preview.jpg"}"` +
`alt="${label}" />` +
`<figcaption>${label}</figcaption>` +
'</figure>',
delayShowUpTime: "100ms",
mouse: true,
aladin: this.aladin,
}
};
let childElt = Layout.horizontal(config).element();
{
vertical: false,
tooltip: {
content: '<figure class="aladin-fig"><img ' +
`src="${child.hips_service_url + "/preview.jpg"}"` +
`alt="${label}" />` +
`<figcaption>${label}</figcaption>` +
'</figure>',
delayShowUpTime: "100ms",
mouse: true,
aladin: this.aladin,
}
}).element();
if (this.highlight) {
if(this.highlight.includes(child.ID)) {
childElt.classList.add("aladin-valid");

29
src/js/gui/Widgets/Widget.js
View File

@@ -18,7 +18,6 @@
//
import { Utils } from "../../Utils";
/******************************************************************************
* Aladin Lite project
*
@@ -47,28 +46,6 @@ export class DOMElement {
this.options = options;
this.name = options && options.name || Utils.uuidv4()
this.isHidden = true;
/*this.el.addEventListener("mouseup", (e) => {
var wasDragging = view.realDragging === true;
if (view.dragging) { // if we were dragging, reset to default cursor
if(view.mode === View.PAN) {
view.setCursor('default');
}
view.dragging = false;
if (wasDragging) {
view.realDragging = false;
// call the positionChanged once more with a dragging = false
view.throttledPositionChanged(false);
}
if (view.spectraDisplayer) {
view.spectraDisplayer.enableInteraction();
}
}
});*/
}
element() {
@@ -119,7 +96,11 @@ export class DOMElement {
static appendTo(elmt, parent) {
if(elmt) {
// Append the updated content
if (elmt instanceof DOMElement) {
if (Array.isArray(elmt)) {
for (var elt of elmt) {
DOMElement.appendTo(elt, parent)
}
} else if (elmt instanceof DOMElement) {
elmt.attachTo(parent)
} else if (elmt instanceof Element) {
parent.insertAdjacentElement('beforeend', elmt);

2
src/js/vo/Datalink.js
View File

@@ -234,7 +234,7 @@ export let Datalink = (function() {
title: 'HiPS cube player',
draggable: true,
},
content: Layout.horizontal([prevBtn, nextBtn, slicer, (idxSlice + 1) + '/' + numSlices]),
content: [prevBtn, nextBtn, slicer, (idxSlice + 1) + '/' + numSlices],
position: {anchor: 'center top'},
});
aladinInstance.addUI(cubeDisplayer)