mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2026-04-28 03:43:20 -07:00
simplify UI Layout
This commit is contained in:
Matthieu Baumann
committed by
Matthieu Baumann
Matthieu Baumann
parent
ba86645204
commit
c674864762
17
assets/icons/enlarge.svg
Normal file
17
assets/icons/enlarge.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because it is too large
Load Diff
@@ -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 {
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -330,11 +330,15 @@ 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],
|
||||
Layout.horizontal(
|
||||
["Search:", searchDropdown],
|
||||
{cssStyle:
|
||||
{width: '100%'}
|
||||
}
|
||||
),
|
||||
Layout.horizontal(
|
||||
["Progressive catalog:", hipsCatLoad],
|
||||
{
|
||||
cssStyle: {
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
@@ -343,7 +347,8 @@ import { ActionButton } from "../Widgets/ActionButton.js";
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
},
|
||||
}),
|
||||
}
|
||||
),
|
||||
form
|
||||
]
|
||||
),
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -154,15 +154,13 @@ export class GridBox extends Box {
|
||||
}
|
||||
});
|
||||
sliderOpacity.addClass("aladin-input-range")
|
||||
const layout = Layout.horizontal({
|
||||
layout: [
|
||||
const layout = Layout.horizontal([
|
||||
enableCheckbox,
|
||||
labelSizeBtn,
|
||||
thicknessLineBtn,
|
||||
colorInput,
|
||||
sliderOpacity
|
||||
]
|
||||
})
|
||||
])
|
||||
|
||||
layout.addClass('aladin-grid-frame');
|
||||
|
||||
|
||||
@@ -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({
|
||||
title: [
|
||||
new Icon({
|
||||
size: 'medium',
|
||||
url: treeIconUrl,
|
||||
monochrome: true,
|
||||
}), "HiPS browser"]),
|
||||
}),
|
||||
"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
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -58,9 +58,9 @@ export class HiPSFilterBox extends Box {
|
||||
}
|
||||
});
|
||||
|
||||
let regimeOption = Layout.horizontal({
|
||||
label: 'Freq:',
|
||||
layout: [Input.select({
|
||||
let regimeOption = new Layout(
|
||||
{
|
||||
start: Input.select({
|
||||
tooltip: {
|
||||
content: "Observation regime",
|
||||
position: { direction: "left" },
|
||||
@@ -82,13 +82,15 @@ export class HiPSFilterBox extends Box {
|
||||
|
||||
self._triggerFilteringCallback();
|
||||
},
|
||||
}), regimeBtn]
|
||||
});
|
||||
}),
|
||||
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
|
||||
);
|
||||
|
||||
@@ -80,12 +80,10 @@ import { Input } from "../Widgets/Input.js";
|
||||
super(
|
||||
{
|
||||
close: false,
|
||||
content: Layout.horizontal({
|
||||
layout: [
|
||||
content: Layout.horizontal([
|
||||
inputText,
|
||||
loadBtn
|
||||
]
|
||||
}),
|
||||
]),
|
||||
...options
|
||||
},
|
||||
aladin.aladinDiv
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
],
|
||||
})
|
||||
);
|
||||
layout = layout.concat(this._createSurveysList());
|
||||
return Layout.vertical({ layout });
|
||||
return Layout.vertical(layout);
|
||||
}
|
||||
|
||||
_createOverlaysList() {
|
||||
@@ -866,12 +864,13 @@ 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",
|
||||
@@ -880,27 +879,9 @@ export class OverlayStackBox extends Box {
|
||||
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)) {
|
||||
|
||||
@@ -117,8 +117,8 @@ export class StatusBarBox extends Box {
|
||||
this.el.title = task.message;
|
||||
|
||||
// create message div
|
||||
let message = Layout.horizontal({
|
||||
layout: task.message,
|
||||
let message = Layout.horizontal(task.message,
|
||||
{
|
||||
tooltip: {
|
||||
content: task.message,
|
||||
position: {
|
||||
@@ -132,12 +132,13 @@ export class StatusBarBox extends Box {
|
||||
"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]),
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -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/')
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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 {
|
||||
// treat it as an array
|
||||
for (const item of options.layout) {
|
||||
this.appendContent(item)
|
||||
}
|
||||
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 (options.draggable) {
|
||||
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 (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 && 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 {
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,12 +136,10 @@ export class Location extends DOMElement {
|
||||
})
|
||||
copyBtn.el.classList.add("aladin-location-copy");
|
||||
|
||||
let el = Layout.horizontal({
|
||||
layout: [
|
||||
let el = Layout.horizontal([
|
||||
copyBtn,
|
||||
field
|
||||
]
|
||||
})
|
||||
])
|
||||
el.addClass('aladin-location');
|
||||
|
||||
super(el)
|
||||
|
||||
@@ -16,3 +16,9 @@ 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
|
||||
}
|
||||
@@ -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))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -82,7 +82,6 @@ export class Icon extends DOMElement {
|
||||
this._show();
|
||||
|
||||
this.addClass('aladin-icon')
|
||||
this.addClass('aladin-dark-theme')
|
||||
|
||||
this.attachTo(target, position)
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -87,7 +87,7 @@ export class RadioButton extends DOMElement {
|
||||
}
|
||||
}
|
||||
|
||||
let el = Layout.horizontal({layout});
|
||||
let el = Layout.horizontal(layout);
|
||||
|
||||
super(el, options)
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -75,8 +75,6 @@ export class Tooltip extends DOMElement {
|
||||
|
||||
super(wrapperEl, options)
|
||||
|
||||
this.element().classList.add('aladin-dark-theme')
|
||||
|
||||
this._show();
|
||||
}
|
||||
|
||||
|
||||
@@ -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,8 +196,11 @@ export class Tree extends DOMElement {
|
||||
.element(),
|
||||
])
|
||||
|
||||
let config = {
|
||||
console.log(layout)
|
||||
let childElt = new Layout(
|
||||
layout,
|
||||
{
|
||||
vertical: false,
|
||||
tooltip: {
|
||||
content: '<figure class="aladin-fig"><img ' +
|
||||
`src="${child.hips_service_url + "/preview.jpg"}"` +
|
||||
@@ -209,8 +211,7 @@ export class Tree extends DOMElement {
|
||||
mouse: true,
|
||||
aladin: this.aladin,
|
||||
}
|
||||
};
|
||||
let childElt = Layout.horizontal(config).element();
|
||||
}).element();
|
||||
if (this.highlight) {
|
||||
if(this.highlight.includes(child.ID)) {
|
||||
childElt.classList.add("aladin-valid");
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user