[FOCUS] - focus y blur en el mapa

Variante de uso de la función onfocus y onblur (HTML5) en lugar de onfocusonly (OL v5) [Basada en ejemplo de B.]

by deivil79

HTML

<link rel="stylesheet" href="http://publicacion.i-administracion.junta-andalucia.es/mapea/assets/css/mapea-5.0.0.ol.min.css">
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/mapea-5.0.0.ol.min.js"></script>
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/configuration-5.0.0.js"></script>
<script src="https://github.com/openlayers/openlayers/blob/v5.3.0/src/ol/interaction/Interaction.js"></script>

<div >
Hola, esto es una prueba <br> bla bla
<!-- Comento la llamada a las funciones para hacer el onfocus basado en html5
<div style="width:600px;height:300px" tabindex="1" onfocus="activaEventos()" onblur="desactivaEventos()" id="mapjs">-->
</div>
<div style="width:600px;height:300px" tabindex="1" id="mapjs">
</div>
  deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
   deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
   deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
   deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
   deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
   deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
   deded<br> ded
  <br> dee
  <br> dee
  <br> dd
  <br> de
  <br> de
  <br>
</div>

CSS

html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: scroll;
      }

JavaScript

var myMap = M.map({
     container: 'mapjs',
     controls: ['layerswitcher'],
     interactions: defaultInteractions({
          constrainResolution: true, onFocusOnly: true
        }),
   });


// A continuación para hacer el onfocus utilizando la función de html5
/*   function desactivaEventos() {
     console.log('Desctivamos los eventos de navegación...');
     myMap.getMapImpl().getInteractions().forEach((i) => {
       if (i instanceof ol.interaction.MouseWheelZoom || i instanceof ol.interaction.DragPan) {
         i.setActive(false);
       }
     })
   }
   
   function activaEventos() {
     console.log('Activamos los eventos de navegación...');
     myMap.getMapImpl().getInteractions().forEach((i) => {
       if (i instanceof ol.interaction.MouseWheelZoom || i instanceof ol.interaction.DragPan) {
         i.setActive(true);
       }
     })
   }

   // Cuando el mapa este completo, esactivamos la rueda de raton
   myMap.on(M.evt.COMPLETED, function(mapa) {
     desactivaEventos();
   });
*/