Gestión de eventos

Eventos de interacción con la interfaz y del API

La gestión de los eventos en los plugins (extensiones) se suelen iniciar en la fachada del control, después de haber compilado la plantilla en el método createView, ya que necesitamos tener acceso a los elementos html de la interfaz del plugin:

M.control.scaleSelectorControl.prototype.createView = function(map) 
{
  var this_ = this;    
  var promise = new Promise(function(success, fail) {
// Compilamos la plantilla
    M.template.compile('apicore/plugins/scaleSelector/templates/scaleSelector.html', {
           'vars': {'scales':this_.scales_}
     }).then(function(html) {
// Una vez tengamos la plantilla compilada tenemos acceso al HTML
          this_.addEvents(html);
          success(html);
     });   
    });
    
    return promise;
};

En este caso la gestión se realizará en el método addEvents. Dentro del mismo, y teniendo ya acceso a los elementos html de la interfaz del plugin, podemos llamar a tantos métodos de fachada o implementación como sea necesario.

Ejemplo 1 - Nuestro plugin consiste en un selector de escalas, pero en vez de recibirlas como parámetros en el constructor, queremos que se rellene el selector con las escalas del mapa (cuando este está completo):

M.control.scaleselectorControl.prototype.addEvents = function(html)
{
// Obtengo el selector a rellenar   
var selector = html.querySelector('select#SelectEscala');

// Cuando el mapa tiene todas sus escalas ya calculadas (M.evt.COMPLETED) 
 this.map_.on(M.evt.COMPLETED, function() {
         // Tengo una funcion para leer las escalas del mapa
         this.readMapScales(selector);
      }, this);

Ejemplo 2 - Supongamos que queremos además gestionar el evento de selección de escala en el select. Añadiríamos a lo anterior lo siguiente:

 var this_ = this;  
 selector.addEventListener('change', function(e) {
      this_.selectEscala();
   },this);

Eventos de mapa

También podemos necesitar gestionar eventos de la librería de mapas que estemos usando, lo cual tendría que hacerse siempre en la parte de implementación del plugin, claro está. Supongamos que nuestro plugin necesita ejecutar lógica cuando se produce cambio de vista en el mapa, y que usaremos un evento de la librería base OL en la que tenemos la implementación.

      this.map_.on(M.evt.COMPLETED, function() {
         this.readMapScales(selector);
         // Accedemos a la impl para los eventos de la libreria de mapas
         this.getImpl().registerEvents();
      }, this);

Y en la implementación del plugin:

M.impl.control.scaleselectorControl.prototype.registerEvents = function() {
      if (!M.utils.isNullOrEmpty(this.facadeMap_)) {
         // Si cambia el nivel de zoom hay que actualizar la escala
         this.facadeMap_.getMapImpl().on('moveend', updateScaleValue, this);
      }
   };

Desvincular eventos

Es muy importante tener en cuenta que si vinculamos eventos, debemos desvincularlos en caso de que el plugin se elimine del mapa, o podrían ocasionarse errores. Normalmente, el proceso de desvinculación de eventos se iniciará con las destrucción del plugin en su método destroy:

M.plugin.scaleselector.prototype.destroy = function(map) {
   this.control_.unregisterEvents();

En la fachada podemos desvincular los eventos, y llamar si es necesario a la desvinculación de eventos de la implementación, en caso de que los hubiera:

M.control.scaleselectorControl.prototype.unregisterEvents = function() {
     // desvinculamos eventos de Mapea
      this.map_.un(M.evt.NOMBRE_EVENTO);
     // desvinculamos eventos de implementacion
      this.getImpl().unregisterEvents();
   };

Ejemplo:

M.impl.control.scaleselectorControl.prototype.unregisterEvents = function() {
   if (!M.utils.isNullOrEmpty(this.facadeMap_)) {
      this.facadeMap_.getMapImpl().un('moveend', updateScaleValue, this);
   }
};