add some docs on UI customization, a jsdoc conf file, fix some class links in the doc

2025-12-31 15:08:04 -08:00 · 2024-06-10 11:51:44 +02:00
parent 6df2ee9757
commit 2b5f8a751a
15 changed files with 152 additions and 161 deletions
--- a/tutorials/UIGuide.md
+++ b/tutorials/UIGuide.md
@@ -0,0 +1,66 @@
+# User guide
+
+This is a guide for users wanting to customize the apparence of Aladin Lite user interface.
+
+## CSS class names
+
+There are distincts CSS class names for users wanting to personnalize the default elements. These classes are listed below:
+
+* `aladin-stack-control` targets the stack opener button
+* `aladin-fullScreen-control` targets the fullscreen control button
+* `aladin-simbadPointer-control` targets the Simbad pointer control button
+* `aladin-grid-control`  targets the coordinate grid trigger button
+* `aladin-settings-control` targets the settings menu opener button
+* `aladin-share-control` targets the share menu opener button
+* `aladin-projection-control` targets the projection selector button
+* `aladin-stack-box` targets the stack box
+* `aladin-status-bar` targets the status bar frame
+* `aladin-cooFrame` targets the frame selector element
+* `aladin-location` targets the search bar and location information element
+* `aladin-fov` targets the field of view information display element
+
+This example changes the position of the Aladin Lite search bar to the very top-left of Aladin Lite and it disables the frame.
+
+```js
+<!doctype html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    </head>
+<body>
+
+<div id="aladin-lite-div" style="width: 768px; height: 512px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showContextMenu: true,
+            }
+        );
+    });
+</script>
+<style>
+    .aladin-location {
+        position: absolute;
+        left: 0.2rem;
+        top: 0.2rem;
+    }
+
+    .aladin-cooFrame {
+        display: none;
+    }
+</style>
+</body>
+</html>
+```