[DOC]

gtt-project · Jan 30, 2025 · bfe7852 · bfe7852
1 parent e327f9b
commit bfe7852
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/dist/ol-ext.css b/dist/ol-ext.css
@@ -1979,6 +1979,7 @@ body > .ol-ext-dialog > form {
   width: 0;
   height: 0;
   opacity: 0;
+  position: absolute;
 }
 
 .ol-layerswitcher .panel li {

diff --git a/dist/ol-ext.min.css b/dist/ol-ext.min.css
diff --git a/examples/control/map.switcher.html b/examples/control/map.switcher.html
@@ -85,12 +85,18 @@
     .ol-layerswitcher li:has(> div.li-content > .ol-visibility:focus) > div > .layerTrash:after {
       content: "x";
     }
-
     .ol-layerswitcher li:has(> div.li-content > .ol-visibility:focus) > div > .myInfo:after {
       content: "?";
-      top: 0;
     }
-
+    kbd {
+      display: inline-block;
+      border: 1px solid #aaa;
+      padding: 0.1em .25em;
+      border-radius: 3px;
+      background-color: #e0e0e0;
+      box-shadow: inset -1px -1px 2px #bbb, inset 2px 2px 2px #efefef;
+      font-style: normal;
+    }
   </style>
 </head>
 <body >
@@ -130,7 +136,10 @@ <h1>ol-ext: LayerSwitcher control</h1>
         You can use the <i>drawlist</i> event handle the current line display (add button, change list style, etc.)
       </li>
       <li>
-        It trigger a <i>toogle</i> event when shown/hidden
+        It triggers a <i>toogle</i> event when shown/hidden
+      </li>
+      <li>
+        It triggers a <i>layer:keydown</i> event when a key is pressed on the layer
       </li>
     </ul>
     <p>
@@ -152,6 +161,9 @@ <h2>Options:</h2>
     <br/>
     <input id="percent" type="checkbox" onchange="$('body').toggleClass('showPercent');" />
     <label for="percent">show percent information</label>
+    <p><i>
+      Use <kbd>Tab</kbd> to navigate in the layer switcher, <kbd>⇐</kbd> and <kbd>⇒</kbd> to change opacity, <kbd>Ctrl</kbd>+<kbd>⇑</kbd> or <kbd>⇓</kbd> to move up / down in the list.
+    </i></p>
   </div>
 
   <script type="text/javascript">

diff --git a/examples/misc/map.input.collection.html b/examples/misc/map.input.collection.html
@@ -51,7 +51,7 @@
       line-height: 1.2em;
       border-bottom: 1px solid rgba(51, 102, 153, 0.3);
     }
-    key {
+    kbd {
       display: inline-block;
       border: 1px solid #aaa;
       padding: 0.1em .25em;
@@ -74,7 +74,7 @@ <h1>ol-ext: Collection input!</h1>
       List can be ordered interactively and keep associated Collection up to date.
     </p>
     <p>
-      Use <key>Tab</key> to navigate in the list, <key>Enter</key> or <key>Space</key> to select a line and <key>Ctrl</key>+<key>⇧</key> or <key>⇩</key> arrow to reorder the liste
+      Use <kbd>Tab</kbd> to navigate in the list, <kbd>Enter</kbd> or <kbd>Space</kbd> to select a line and <kbd>Ctrl</kbd>+<kbd>⇧</kbd> or <kbd>⇩</kbd> arrow to reorder the liste
     </p>
   </div>
 

diff --git a/src/control/LayerSwitcher.css b/src/control/LayerSwitcher.css
@@ -105,6 +105,7 @@
   width: 0;
   height: 0;
   opacity: 0;
+  position: absolute;
 }
 
 .ol-layerswitcher .panel li {

diff --git a/src/control/LayerSwitcher.js b/src/control/LayerSwitcher.js
@@ -883,7 +883,7 @@ var ol_control_LayerSwitcher = class olcontrolLayerSwitcher extends ol_control_C
         }.bind(this),
         parent: label
       })
-
+      
       //  up/down
       if (this.reordering) {
         if ((i < layers.length - 1 && (layer.get("allwaysOnTop") || !layers[i + 1].get("allwaysOnTop")))