fix bug vscode jupyter on text input: suppr delete the widget

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 3.3.0
 
+* Add CSS class for positioning the UI elements as the user wants. See the API doc aladin options for the class names to use.
 * [style] The default grid color is now `rgb(178, 50, 178)` to fit the classic Aladin color palette
 * [feat] The object of grid options `gridOptions` is now available in the public API
 * [fixed] The parameters `gridColor` and `gridOpacity`, `gridOptions.showLabels` now work as expected
@@ -9,7 +10,7 @@
 * New release page here: <https://aladin.cds.unistra.fr/AladinLite/doc/release/>
 * A major UI update by @bmatthieu3
   1. Some API new classes A.box, A.button
-  2. A status bar where the user can enque messages for a specific amount of time (Aladin.appendStatusBarMessage)
+  2. A status bar where the user can enque messages for a specific amount of time (Aladin.addStatusBarMessage)
 * Remove of JQuery and autocompletejs dependencies by @bmatthieu3
 * Fix some performances issues, i.e. a bug when resizing the aladin lite view and which launched several parallel requestAnimationFrame by @bmatthieu3
 * Polygon and circular selection (see Aladin class API documentation for how to use it)

examples/al-customize-button.html

@@ -27,9 +27,7 @@
 
         let btn = A.button({
             content: 'My button',
-            position: {
+            classList: ['myButton'],
-                anchor: 'left bottom'
-            },
             tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
             action(o) {
                 aladin.select('poly', p => {
@@ -65,13 +63,11 @@
                 title: "My window",
                 draggable: true,
             },
+            classList: ['myBox'],
             content: "This is the content of my window<br/> I can write proper html",
-            position: {
-                anchor: 'center center'
-            }
         }))
 
-        aladin.appendStatusBarMessage({
+        aladin.addStatusBarMessage({
             duration: 10000,
             type: 'info',
             message: 'Aladin Lite v3.3 is out. New features available:<ul><li>New Button, Box objects</li><li>Polygonal, circular selection</li></ul>'
@@ -84,6 +80,20 @@
         top: 10rem;
         left: 10rem;
     }
+
+    .myBox {
+        top: unset;
+        bottom: 0;
+        left: 0;
+    }
+
+    .myButton {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        background-color: pink;
+    }
 </style>
 </body>
 </html>

examples/al-init-custom-options.html

@@ -26,11 +26,11 @@
                 showShareControl: true,
                 showSettingsControl: true,
                 showLayersControl: true,
+                showZoomControl: true,
                 showContextMenu: true,
                 showCooGridControl: true,
                 showSimbadPointerControl: true,
                 showFullscreenControl: true,
-                showZoomControl: false,
             }
         );
     });

src/css/aladin.css

@@ -267,6 +267,7 @@ body { overscroll-behavior: contain; }
     overflow-y: none;
     max-height: 500px;
     max-width: fit-content;
+    height: fit-content;
 }
 
 .aladin-box::-webkit-scrollbar {
@@ -370,18 +371,6 @@ canvas {
     background-position:center center;
 }
 
-.aladin-fullscreen {
-	position: fixed !important;
-
-	top: 0;
-	left: 0;
-	height: 100% !important;
-	width: 100% !important;
-	border: 0 !important;
-    max-width: none !important;
-    background: #fff;
-}
-
 /* smartphones, iPhone, portrait 480x320 phones */
 .aladin-btn {
     all:unset;
@@ -479,16 +468,6 @@ canvas {
     width: 100%;
 }
 
-.aladin-fov, .aladin-cooFrame, .aladin-location {
-    font-family: monospace;
-
-    color: white;
-
-    font-size: 1rem;
-    border-radius: 5px;
-    height: 1.7rem;
-}
-
 .aladin-input-text.aladin-dark-theme.search {
     width: 15rem;
     text-shadow: 0px 0px 2px #000;
@@ -955,6 +934,7 @@ canvas {
      background: transparent;
      cursor: pointer;
      width: 5em;
+     height: 1.5rem;
  }
  
  /* Removes default focus */
@@ -983,13 +963,6 @@ canvas {
 
     border-radius: 0.5rem;
  }
- .aladin-input-range:hover::-webkit-slider-thumb {
-    filter: brightness(105%);
- }
-
- /* aladin input text */
-
-
  
  /******** Firefox styles ********/
  /* slider track */
@@ -1011,11 +984,6 @@ canvas {
 
     border-radius: 0.5rem;
  }
-
- .aladin-input-range:hover::-moz-range-thumb {
-    filter: brightness(105%);
- }
- 
  
 /* *********************************************** */
 
@@ -1134,7 +1102,92 @@ canvas {
     left: 0;
 }
 
+.aladin-cooFrame {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    font-family: monospace;
+
+    color: white;
+
+    font-size: 1rem;
+    border-radius: 5px;
+    height: 1.7rem;
+}
+
+.aladin-location {
+    position: absolute;
+    top: 0;
+    left: 7rem;
+    font-family: monospace;
+
+    color: white;
+
+    font-size: 1rem;
+    border-radius: 5px;
+    height: 1.7rem;
+}
+
+.aladin-fov {
+    position: absolute;
+    top: 0;
+    left: 25rem;
+
+    font-family: monospace;
+
+    color: white;
+
+    font-size: 1rem;
+    border-radius: 5px;
+    height: 1.7rem;
+}
+
+.aladin-status-bar {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0%);
+}
+
+.aladin-share-control {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.aladin-fullScreen-control {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.aladin-projection-control {
+    position: absolute;
+    top: 0;
+    right: 3rem;
+}
+
+.aladin-fullscreen {
+	position: fixed !important;
+
+	top: 0;
+	left: 0;
+	height: 100% !important;
+	width: 100% !important;
+	border: 0 !important;
+    max-width: none !important;
+    background: #fff;
+}
+
+
+
 /* Media query */
+/*@media screen and (max-width: 31rem) {
+    .aladin-projection-control {
+        display: none;
+    }
+}*/
 /*@container (max-width: 40rem) {
     .aladin-input-text.aladin-dark-theme.search {
         width: 6rem;

src/js/A.js

@@ -673,6 +673,8 @@ A.catalogFromSkyBot = function (ra, dec, radius, epoch, queryOptions, options, s
  *           cssStyle: {
  *               backgroundColor: 'pink',
  *           },
+ *           // Adding a CSS class allowing you to position your button on the aladin lite view
+ *           classList: ['myButton'],
  *           tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
  *           action(o) {
  *               // Enter a polygonal selection mode
@@ -726,10 +728,9 @@ A.button = function(options) {
  *           title: "My window",
  *           draggable: true,
  *       },
+ *       // Adding a CSS class allowing you to position your window on the aladin lite view
+ *       classList: ['myBox'],
  *       content: "This is the content of my window<br/> I can write proper html",
- *       position: {
- *           anchor: 'center center'
- *       }
  *   })
  *   aladin.addUI(box)
  */

src/js/Aladin.js

@@ -84,9 +84,11 @@ import { GridEnabler } from './gui/Button/GridEnabler';
  * @property {string} [backgroundColor="rgb(60, 60, 60)"] - Background color in RGB format.
  *
  * @property {boolean} [showZoomControl=true] - Whether to show the zoom control toolbar.
+ * This element belongs to the FoV UI thus its CSS class is `aladin-fov` 
  * @property {boolean} [showLayersControl=true] - Whether to show the layers control toolbar.
  * CSS class for that button is `aladin-stack-control` 
  * @property {boolean} [showFullscreenControl=true] - Whether to show the fullscreen control toolbar.
+ * CSS class for that button is `aladin-fullScreen-control` 
  * @property {boolean} [showSimbadPointerControl=false] - Whether to show the Simbad pointer control toolbar.
  * CSS class for that button is `aladin-simbadPointer-control` 
  * @property {boolean} [showCooGridControl=false] - Whether to show the coordinate grid control toolbar.
@@ -94,13 +96,17 @@ import { GridEnabler } from './gui/Button/GridEnabler';
  * @property {boolean} [showSettingsControl=false] - Whether to show the settings control toolbar.
  * CSS class for that button is `aladin-settings-control` 
  * @property {boolean} [showShareControl=false] - Whether to show the share control toolbar.
+ * CSS class for that button is `aladin-share-control` 
  * @property {boolean} [showStatusBar=true] - Whether to show the status bar. Enabled by default.
- *
+ * CSS class for that button is `aladin-status-bar` 
  * @property {boolean} [showFrame=true] - Whether to show the viewport frame.
+ * CSS class for that button is `aladin-cooFrame` 
  * @property {boolean} [showFov=true] - Whether to show the field of view indicator.
+ * CSS class for that button is `aladin-fov` 
  * @property {boolean} [showCooLocation=true] - Whether to show the coordinate location indicator.
+ * CSS class for that button is `aladin-location` 
  * @property {boolean} [showProjectionControl=true] - Whether to show the projection control toolbar.
- *
+ * CSS class for that button is `aladin-projection-control` 
  * @property {boolean} [showContextMenu=false] - Whether to show the context menu.
  * @property {boolean} [showReticle=true] - Whether to show the reticle.
  * @property {boolean} [showCatalog=true] - Whether to show the catalog.
@@ -315,7 +321,7 @@ export let Aladin = (function () {
             Utils.on(document, 'fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function (e) {
                 var fullscreenElt = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
                 if (fullscreenElt === null || fullscreenElt === undefined) {
-                    self.aladinDiv.classList.remove('aladin-fullscreen');
+                    //self.aladinDiv.classList.remove('aladin-fullscreen');
     
                     var fullScreenToggledFn = self.callbacksByEventName['fullScreenToggled'];
                     (typeof fullScreenToggledFn === 'function') && fullScreenToggledFn(self.isInFullscreen);
@@ -348,13 +354,6 @@ export let Aladin = (function () {
             this.statusBar = new StatusBarBox(this, statusBarOptions);
         }
 
-        let viewport = new Toolbar({
-            direction: 'horizontal',
-            position: {
-                anchor: 'left top'
-            }
-        }, this);
-
         // Add the frame control
         if (options.showFrame) {
             let cooFrame = CooFrameEnum.fromString(options.cooFrame, CooFrameEnum.J2000);
@@ -376,15 +375,18 @@ export let Aladin = (function () {
 
             cooFrameControl.addClass('aladin-cooFrame');
 
-            viewport.add(cooFrameControl)
+            this.addUI(cooFrameControl)
         }
+
         // Add the location info
         if (options.showCooLocation) {
-            this.location = new Location(this)
+            this.addUI(new Location(this));
-            viewport.add(this.location);
         }
+
         // Add the FoV info
-        viewport.add(new FoV(this, options))
+        if (options.showFov || options.showZoomControl) {
+            this.addUI(new FoV(this, options))
+        }
 
         ////////////////////////////////////////////////////
         let stack = new OverlayStackButton(this);
@@ -400,22 +402,8 @@ export let Aladin = (function () {
         if (options.showSimbadPointerControl) {
             this.addUI(simbad)
         }
+
         // Add the projection control
-        let topRightToolbar = new Toolbar({
-            orientation: 'horizontal',
-            position: {
-                anchor: 'right top'
-            }
-        }, this);
-        /*if (options.showProjectionControl) {
-            topRightToolbar.add(new ProjectionActionButton(this, {
-                openDirection: 'left',
-            }))            
-        }*/
-        // Add the goto control
-        /*if (options.showGotoControl) {
-            menu.enable('goto')
-        }*/
         // Add the coo grid control
         if (options.showCooGridControl) {
             this.addUI(grid)
@@ -425,35 +413,19 @@ export let Aladin = (function () {
             this.addUI(settings)
         }
 
-        this.addUI(viewport);
-        //this.addUI(menu);
-
         // share control panel
         if (options.showShareControl) {
-            this.addUI(new ShareActionButton(self, {
+            this.addUI(new ShareActionButton(self));
-                position: {
-                    bottom: "0px",
-                    left: "0px",
-                }
-            }));
         }
 
         if (options.showProjectionControl) {
             this.projBtn = new ProjectionActionButton(this);
-            topRightToolbar.add(this.projBtn)            
+            this.addUI(this.projBtn)            
         }
 
         if (options.showFullscreenControl) {
-            topRightToolbar.add(new FullScreenActionButton(self))
+            this.addUI(new FullScreenActionButton(self))
         }
-
-        this.addUI(topRightToolbar);
-
-        topRightToolbar
-
-        this.viewportMenu = viewport;
-
-        //this._applyMediaQueriesUI()
     }
 
     /*Aladin.prototype._applyMediaQueriesUI = function() {
@@ -771,8 +743,16 @@ export let Aladin = (function () {
      * @param {string} options.message - The message to display
      * @param {string|number} options.duration - The duration of the message. Accepts a time in milliseconds or 'unlimited'
      * @param {string} options.type - The type of the message. Can be 'loading', 'tooltip', 'info'
+     * 
+     * @example
+     * 
+     * aladin.addStatusBarMessage({
+     *       duration: 10000,
+     *       type: 'info',
+     *       message: 'Aladin Lite v3.3 is out. New features available:<ul><li>New Button, Box objects</li><li>Polygonal, circular selection</li></ul>'
+     * })
      */
-    Aladin.prototype.appendStatusBarMessage = function(options) {
+    Aladin.prototype.addStatusBarMessage = function(options) {
         if (this.statusBar) {
             this.statusBar.appendMessage(options)
         }
@@ -1187,7 +1167,9 @@ export let Aladin = (function () {
         ui.attachTo(this.aladinDiv)
         // as the ui is pushed to the dom, setting position may need the aladin instance to work
         // so we recompute it
-        ui.update({position: {...ui.options.position, aladin: this}})
+        if (ui.options) {
+            ui.update({position: {...ui.options.position, aladin: this}})
+        }
     };
 
     // @API

src/js/AladinUtils.js

@@ -147,66 +147,6 @@ export let AladinUtils = {
             }
         },
 
-    	/**
-    	 * passage de xy projection à xy dans la vue écran 
-    	 * @param x
-    	 * @param y
-    	 * @param width
-    	 * @param height
-    	 * @param largestDim largest dimension of the view
-    	 * @returns position in the view
-    	 */
-        /*
-    	xyToView: function(x, y, width, height, largestDim, zoomFactor, round) {
-    	    if (round==undefined) {
-                // we round by default
-    	        round = true;
-    	    }
-
-    	    if (round) {
-    	        // we round the result for potential performance gains
-    	        return {vx: AladinUtils.myRound(largestDim/2*(1+zoomFactor*x)-(largestDim-width)/2), vy: AladinUtils.myRound(largestDim/2*(1+zoomFactor*y)-(largestDim-height)/2)};
-
-    	    }
-    	    else {
-                return {vx: largestDim/2*(1+zoomFactor*x)-(largestDim-width)/2, vy: largestDim/2*(1+zoomFactor*y)-(largestDim-height)/2};
-    	    }
-    	},*/
-    	
-    	/**
-    	 * passage de xy dans la vue écran à xy projection
-    	 * @param vx
-    	 * @param vy
-    	 * @param width
-    	 * @param height
-    	 * @param largestDim
-    	 * @param zoomFactor
-    	 * @returns position in xy projection
-    	 */
-    	/*viewToXy: function(vx, vy, width, height, largestDim, zoomFactor) {
-    		return {x: ((2*vx+(largestDim-width))/largestDim-1)/zoomFactor, y: ((2*vy+(largestDim-height))/largestDim-1)/zoomFactor};
-    	},*/
-
-    	/**
-    	 * convert a 
-    	 * @returns position x,y in the view. Null if projection is impossible
-    	 */
-        /*radecToViewXy: function(ra, dec, currentProjection, currentFrame, width, height, largestDim, zoomFactor) {
-            var xy;
-            if (currentFrame.system != CooFrameEnum.SYSTEMS.J2000) {
-                var lonlat = CooConversion.J2000ToGalactic([ra, dec]);
-                xy = currentProjection.project(lonlat[0], lonlat[1]);
-            }
-            else {
-                xy = currentProjection.project(ra, dec);
-            }
-            if (!xy) {
-                return null;
-            }
-
-            return AladinUtils.xyToView(xy.X, xy.Y, width, height, largestDim, zoomFactor, false);
-        },*/
-
         /**
          * Converts celestial coordinates (ra, dec) to screen coordinates (x, y) in pixels within the view.
          *
@@ -240,129 +180,6 @@ export let AladinUtils = {
             let xy = aladin.view.wasm.screenToClip(x, y);
             return xy;
         },
-    	
-        /**
-         * @deprecated since version 2.0
-         */
-    	/*myRound: function(a) {
-    		if (a<0) {
-    			return -1*( (-a) | 0);
-    		}
-    		else {
-    			return a | 0;
-    		}
-    	},*/
-    	
-    	/**
-    	 * Test whether a xy position is the view
-    	 * @param vx
-    	 * @param vy
-    	 * @param width
-    	 * @param height
-    	 * @returns a boolean whether (vx, vy) is in the screen
-    	 */
-    	/*isInsideViewXy: function(vx, vy, width, height) {
-    		return vx >= 0 && vx < width && vy >= 0 && vy < height
-    	},*/
-    	
-    	/**
-    	 * tests whether a healpix pixel is visible or not
-    	 * @param pixCorners array of position (xy view) of the corners of the pixel
-    	 * @param viewW
-    	 */
-    	/*isHpxPixVisible: function(pixCorners, viewWidth, viewHeight) {
-    		for (var i = 0; i<pixCorners.length; i++) {
-    			if ( pixCorners[i].vx>=-20 && pixCorners[i].vx<(viewWidth+20) &&
-    				 pixCorners[i].vy>=-20 && pixCorners[i].vy<(viewHeight+20) ) {
-    				return true;
-    			}
-    		}
-    		return false;
-    	},*/
-
-        // Zoom is handled in the backend
-        /*getZoomFactorForAngle: function(angleInDegrees, projectionMethod) {
-            var p1 = {ra: 0, dec: 0};
-            var p2 = {ra: angleInDegrees, dec: 0};
-            var projection = new Projection(angleInDegrees/2, 0);
-            projection.setProjection(projectionMethod);
-            var p1Projected = projection.project(p1.ra, p1.dec);
-            var p2Projected = projection.project(p2.ra, p2.dec);
-           
-            var zoomFactor = 1/Math.abs(p1Projected.X - p2Projected.Y);
-
-            return zoomFactor;
-        },*/
-
-        /*counterClockwiseTriangle: function(x1, y1, x2, y2, x3, y3) {
-            // From: https://math.stackexchange.com/questions/1324179/how-to-tell-if-3-connected-points-are-connected-clockwise-or-counter-clockwise
-            // | x1, y1, 1 |
-            // | x2, y2, 1 | > 0 => the triangle is given in anticlockwise order
-            // | x3, y3, 1 |
-    
-            return x1*y2 + y1*x3 + x2*y3 - x3*y2 - y3*x1 - x2*y1 >= 0;
-        },*/
-
-        // grow array b of vx,vy view positions by *val* pixels
-        /*grow2: function(b, val) {
-            var j=0;
-            for ( var i=0; i<4; i++ ) {
-                if ( b[i]==null ) {
-                    j++;
-                }
-            }
-
-            if( j>1 ) {
-                return b;
-            }
-
-            var b1 = [];
-            for ( var i=0; i<4; i++ ) {
-                b1.push( {vx: b[i].vx, vy: b[i].vy} );
-            }
-    
-            for ( var i=0; i<2; i++ ) {
-                var a = i==1 ? 1 : 0;
-                var c = i==1 ? 3 : 2;
-
-                if ( b1[a]==null ) {
-                    var d,g;
-                    if ( a==0 || a==3 ) {
-                        d=1;
-                        g=2;
-                    }
-                    else {
-                        d=0;
-                        g=3;
-                    }
-                    b1[a] = {vx: (b1[d].vx+b1[g].vx)/2, vy: (b1[d].vy+b1[g].vy)/2};
-                }
-                if ( b1[c]==null ) {
-                    var d,g;
-                    if ( c==0 || c==3 ) {
-                        d=1;
-                        g=2;
-                    }
-                    else {
-                        d=0;
-                        g=3;
-                    }
-                    b1[c] = {vx: (b1[d].vx+b1[g].vx)/2, vy: (b1[d].vy+b1[g].vy)/2};
-                }
-                if( b1[a]==null || b1[c]==null ) {
-                    continue;
-                }
-
-                var angle = Math.atan2(b1[c].vy-b1[a].vy, b1[c].vx-b1[a].vx);
-                var chouilla = val*Math.cos(angle);
-                b1[a].vx -= chouilla;
-                b1[c].vx += chouilla;
-                chouilla = val*Math.sin(angle);
-                b1[a].vy-=chouilla;
-                b1[c].vy+=chouilla;
-            }
-            return b1;
-        },*/
 
         /**
         * @function degreesToString

src/js/gui/Box/StatusBarBox.js

@@ -46,12 +46,7 @@ export class StatusBarBox extends Box {
             ...options.cssStyle
         };
 
-        super({
+        super(options, aladin.aladinDiv)
-            position: {
-                anchor: 'center bottom'
-            },
-            ...options,
-        }, aladin.aladinDiv)
 
         this.addClass("aladin-status-bar");
 

src/js/gui/Box/SurveyEditBox.js

@@ -185,9 +185,6 @@ import { ColorCfg } from "../../ColorCfg.js";
             self.luminositySettingsContent = Layout.vertical({
                 layout: [
                     Input.slider({
-                        cssStyle: {
-                            marginBottom: '7px',
-                        },
                         tooltip: {content: 'brightness', position: {direction: 'right'}},
                         name: 'brightness',
                         type: 'range',
@@ -196,14 +193,12 @@ import { ColorCfg } from "../../ColorCfg.js";
                         ticks: [0.0],
                         value: brightness,
                         change(e, slider) {
-                            const brightness = +e.target.value
+                            const brightness = +e.target.value;
                             layer.setBrightness(brightness)
+                            slider.update({value: brightness, tooltip: {content: `brightness: ${brightness.toFixed(3)}`, position: {direction: 'right'}}})
                         }
                     }),
                     Input.slider({
-                        cssStyle: {
-                            marginBottom: '7px',
-                        },
                         tooltip: {content: 'saturation', position: {direction: 'right'}},
                         name: 'saturation',
                         type: 'range',
@@ -214,6 +209,7 @@ import { ColorCfg } from "../../ColorCfg.js";
                         change(e, slider) {
                             const saturation = +e.target.value
                             layer.setSaturation(saturation)
+                            slider.update({value: saturation, tooltip: {content: `saturation: ${saturation.toFixed(3)}`, position: {direction: 'right'}}})
                         }
                     }),
                     Input.slider({
@@ -227,6 +223,7 @@ import { ColorCfg } from "../../ColorCfg.js";
                         change(e, slider) {
                             const contrast = +e.target.value
                             layer.setContrast(contrast)
+                            slider.update({value: contrast, tooltip: {content: `contrast: ${contrast.toFixed(3)}`, position: {direction: 'right'}}})
                         }
                     }),
                 ]

src/js/gui/Button/FullScreen.js

@@ -43,6 +43,7 @@ export class FullScreenActionButton extends ActionButton {
                 monochrome: true,
                 url: aladin.isInFullscreen ? restoreIcon : maximizeIcon
             },
+            classList: ['aladin-fullScreen-control'],
             ...options,
             tooltip: {
                 content: aladin.isInFullscreen ? 'Restore original size' : 'Full-screen',
@@ -94,7 +95,5 @@ export class FullScreenActionButton extends ActionButton {
         })
 
         self = this;
-
-        this.addClass('medium-sized-icon')
     }
 }

src/js/gui/Button/Projection.js

@@ -51,6 +51,7 @@ import { ALEvent } from "../../events/ALEvent";
                 size: 'small',
                 url: projectionIconUrl,
             },
+            classList: ['aladin-projection-control'],
             content: [options.verbosity === 'full' ? ProjectionEnum[projectionName].label : ''],
             tooltip: {content: 'Change the view projection', position: {direction: 'bottom left'}},
             cssStyle: {
@@ -114,8 +115,4 @@ import { ALEvent } from "../../events/ALEvent";
             super.update({ctxMenu, content: label});
         }
     }
-
-    _show() {
-        super._show()
-    }
 }

src/js/gui/Button/ShareView.js

@@ -121,18 +121,18 @@ import cameraIconUrl from '../../../../assets/icons/camera.svg';
             },
         ];
 
-        let self;
         super({
             size: 'medium',
             ctxMenu: layout,
+            classList: ['aladin-share-control'],
             ...options,
             icon: {
                 url: shareIconUrl,
                 monochrome: true,
             },
-            //openDirection: 'top',
             tooltip: {content: 'You can share/export your view into many ways', position: {direction: 'top'}},
         }, aladin);
+
         self = this;
     }
 }

src/js/gui/CtxMenu/OverlayStack.js

@@ -243,12 +243,7 @@ export class OverlayStack extends ContextMenu {
                                 
                                 self._hide();
 
-                                self.catBox = new CatalogQueryBox(self.aladin, {
+                                self.catBox = new CatalogQueryBox(self.aladin);
-                                    onHidden: () => {
-                                        // called after hiding catalog query box
-                                        self.show()
-                                    }
-                                });
                                 self.catBox._show({position: self.position});
 
                                 self.mode = 'search';
@@ -482,12 +477,7 @@ export class OverlayStack extends ContextMenu {
 
                         self._hide();
 
-                        self.hipsSelectorBox = new HiPSSelectorBox(self.aladin, {
+                        self.hipsSelectorBox = new HiPSSelectorBox(self.aladin);
-                            onHidden: () => {
-                                // called after hiding catalog query box
-                                self.show()
-                            }
-                        });
                         // attach a callback
                         self.hipsSelectorBox.attach( 
                             (HiPSId) => {
@@ -607,16 +597,11 @@ export class OverlayStack extends ContextMenu {
 
                     self._hide();
 
-                    self.aladin.selectLayer(layer.layer);
+                    console.log("kjkj")
-                    self.attach()
+                    //self.aladin.selectLayer(layer.layer);
+                    //self.attach()
 
-                    self.editBox = new LayerEditBox(self.aladin, {
+                    self.editBox = new LayerEditBox(self.aladin);
-                        onHidden: () => {
-                            // called after hiding catalog query box
-                            self.show()
-
-                        }
-                    });
                     self.editBox.update({layer})
                     self.editBox._show({position: self.position});
 
@@ -786,15 +771,7 @@ export class OverlayStack extends ContextMenu {
 
                     self._hide();
 
-                    if (self.hipsBox) {
+                    self.hipsBox = new HiPSSelectorBox(self.aladin)
-                        self.hipsBox.remove();
-                    }
-                    self.hipsBox = new HiPSSelectorBox(self.aladin, {
-                        onHidden: () => {
-                            // called after hiding catalog query box
-                            self.show()
-                        }
-                    })
 
                     self.hipsBox.attach(
                         (HiPSId) => {            
@@ -888,6 +865,10 @@ export class OverlayStack extends ContextMenu {
             if(this.hipsBox) {
                 this.hipsBox.remove()
             }
+
+            if(this.editBox) {
+                this.editBox.remove()
+            }
         }
 
         self.mode = 'stack';
@@ -919,48 +900,5 @@ export class OverlayStack extends ContextMenu {
                         subMenu.style.overflowY = 'scroll';
                     })
             })
-            
-    }
-
-    hideAll() {
-        if (this.hipsBox) {
-            this.hipsBox.remove()
-        }
-
-        if (this.editBox) {
-            this.editBox.remove()
-        }
-
-        if (this.hipsSelectorBox) {
-            this.hipsSelectorBox.remove()
-        }
-
-        if (this.catBox) {
-            this.catBox.remove()
-        }
-
-        this._hide()
-        this.mode = 'stack';
-    }
-
-    _hide() {
-        /*if (this.hipsBox) {
-            this.hipsBox.remove()
-        }
-
-        if (this.editBox) {
-            this.editBox.remove()
-        }
-
-        if (this.hipsSelectorBox) {
-            this.hipsSelectorBox.remove()
-        }
-
-        if (this.catBox) {
-            this.catBox.remove()
-        }*/
-
-        //this.mode = 'stack';
-        super._hide();
     }
 }

src/js/gui/Location.js

@@ -74,6 +74,8 @@ export class Location extends DOMElement {
                     focused = false;
                 },
                 keydown: (e) => {
+                    e.stopPropagation();
+
                     field.removeClass('aladin-unknownObject'); // remove red border
 
                     if (e.key === 'Enter') {

src/js/gui/Widgets/ActionButton.js

@@ -161,7 +161,7 @@ export class ActionButton extends DOMElement {
         }
 
         if (this.options.classList) {
-            this.options.classList.forEach((className) => this.element().classList.add(className))
+            this.element().classList.add(this.options.classList)
         }
 
         super._show();

src/js/gui/Widgets/Box.js

@@ -57,10 +57,6 @@ export class Box extends DOMElement {
         this.attachTo(target, position);
     }
 
-    _hide() {
-        super._hide()
-    }
-
     _show(options) {
         //this.el.parentNode.appendChild(this.el);
 
@@ -146,6 +142,10 @@ export class Box extends DOMElement {
             this.setPosition(this.options.position)
         }
 
+        if (this.options.classList) {
+            this.addClass(this.options.classList)
+        }
+
         super._show();
     }
 }

src/js/gui/Widgets/Input.js

@@ -109,6 +109,13 @@ export class Input extends DOMElement {
                 this.el.step = "any";
             }
 
+            if (this.options.type === "range") {
+                if (this.options.ticks) {
+                    this.options.autocomplete = {options: this.options.ticks};
+                    delete this.options.ticks;
+                }
+            }
+
             if (this.options.type === "text") {
                 this.el.enterkeyhint = "send";
             }

src/js/gui/Widgets/Widget.js

@@ -294,7 +294,8 @@ export class DOMElement {
     }
 
     _show() {
-        this.el.style.display = 'block';
+        delete this.el.style.display;
+        //this.el.style.display = 'block';
         this.isHidden = false;
     }