Aggiungere il proprio JavaScript

Regola

Aggiunge un po” di JavaScript (JS) è utile per una varietà di usi avanzati. Per esempio, è possibile:

• nasconde alcuni elementi dell’interfaccia utente che non si desidera visualizzare in modo predefinito

• aggiungere un pulsante personalizzato nell’interfaccia utente

• aggiungere un popup quando il progetto viene aperto (per visualizzare i finanziatori, i crediti…)

• evitare che la gente possa scaricare elementi della pagina cliccandovi sopra con il tasto destro, e naturalmente molto di più.

Prerequisiti

• Questa funzione deve essere attivata dall’amministratore dell’istanza Lizmap.

• La cartella media. Leggi come usare la cartella Media in Lizmap.

Configurazione del plugin

• Nel tuo repository (ad esempio /home/data/repo1/myproject.qgs), dovresti avere queste directory:

  media
  |-- js
    |-- myproject
    |-- default
  

• Tutto il codice JavaScript che copiate nella directory /home/data/rep1/media/js/myproject/ sarà eseguito da Lizmap solo per questo specifico progetto.

• Tutto il codice JavaScript in default sarà eseguito per tutti i progetti.

• Per permettere l’esecuzione di codice JavaScript, nell’interfaccia di amministrazione di Lizmap, si deve aggiungere il privilegio Allow themes for this repository.

Video tutorial

Questo video è un inizio veloce su come aggiungere un JavaScript per cambiare il pannello predefinito in Lizmap.

https://www.youtube.com/embed/xQQ34nvRZ-w

Libreria di scripts

Potete trovare alcuni esempi nel repository https://github.com/3liz/lizmap-javascript-scripts.

Inoltre, nella directory lizmap-web-client/lizmap/install/qgis/media/js/ (o in GitHub https://github.com/3liz/lizmap-web-client/tree/master/extra-modules/lizmapdemo/qgis-projects/demoqgis/media/js/montpellier), puoi trovare esempi di codice JavaScript adatto.

Rimuovi l’estensione .example e copiali nella tua cartella media/js/default/ per attivarli.

Eventi Javascript disponibili

Il codice Javascript può utilizzare molti eventi generati da Lizmap Web Client. Ecco una lista di tutti gli eventi disponibili, con le proprietà restituite.

Lizmap Web Client eventi disponibili

Nome evento	Descrizione	Proprietà restituite
treecreated	Emesso quando l’albero dei livelli è stato creato nel pannello della leggenda
mapcreated	Emesso quando una mappa OpenLayers è stata creata
layersadded	Emesso quando livelli Openlayers sono stati aggiunti
uicreated	Emesso quando l’interfaccia è stata creata
dockopened	Emesso quando un dock è aperto (pannello a sinistra)	id
dockclosed	Emesso quando un dock è chiuso (pannello a sinistra)	id
minidockopened	Emesso quando un mini-dock (contenitore destro per gli strumenti) è aperto	id
minidockclosed	Emesso quando un mini-dock è chiuso	id
bottomdockopened	Emesso quando il dock in basso è aperto	id
bottomdockclosed	Emesso quando il dock in basso è chiuso	id
lizmapbaselayerchanged	Emesso quando il livello di base è stato modificato	livello
lizmapswitcheritemselected	Emesso quando un livello è stato evidenziato nel pannello della legenda dei livelli	name | type | selected
layerstylechanged	Emesso quando un stile livello è stato modificato	featureType
lizmaplocatefeaturecanceled	Emesso quando l’utente ha annullato lo strumento di localizzazione per livello	featureType
lizmaplocatefeaturechanged	Emesso quando l’utente ha selezionato un elemento nello strumento di localizzazione per livello	featureType | featureId
lizmappopupdisplayed	Emesso quando il contenuto del popup viene visualizzato
lizmappopupallchildrendisplayed	Emesso quando vengono visualizzati i popup di tutti i figli	parentPopupElement | childPopupElements
lizmappopupdisplayed_inattributetable	Emesso quando il contenuto del popup viene visualizzato nella tabella degli attributi (sotto-pannello destro)
lizmapeditionformdisplayed	Emesso quando viene visualizzato un modulo di modifica	layerId | featureId | editionConfig
lizmapeditionfeaturecreated	Emesso quando un elemento del livello è stato creato con lo strumento di modifica	layerId
lizmapeditionfeaturemodified	Emesso quando un elemento del livello è stato modificato con lo strumento di modifica	layerId
lizmapeditionfeaturedeleted	Emesso quando un elemento del livello è stato cancellato con lo strumento di modifica	layerId | featureId
attributeLayersReady	Emesso quando tutti i livelli da visualizzare nello strumento dei livelli degli attributi sono stati impostati	livelli
attributeLayerContentReady	Emesso quando una tabella per un livello è stata visualizzata nel dock inferiore	featureType
layerfeaturehighlighted	Emesso quando un elemento è stato evidenziato nella tabella degli attributi (rettangolo grigio). L’esecuzione manuale di questo evento forza un aggiornamento delle tabelle figlie, per il livello, se ne esistono	sourceTable | featureType | fid
layerfeatureselected	Emetti questo evento per innescare la selezione di un elemento per un livello, passando l’id dell’elemento. Una volta che la selezione è stata fatta, l’evento layerSelectionChanged viene emesso in ritorno.	featureType | fid | updateDrawing
layerfeaturefilterselected	Emettere questo evento per innescare il filtro di un livello per gli elementi selezionati. È necessario selezionare alcune caratteristiche prima di scatenare questo evento. Una volta che il filtro è applicato, Lizmap restituisce l’evento layerFilteredFeaturesChanged.	featureType
layerFilteredFeaturesChanged	Emesso quando un filtro è stato applicato alla mappa per un livello. Questo evento attiva anche il ridisegno della mappa e il contenuto delle tabelle degli attributi.	featureType | featureIds | updateDrawing
layerFilterParamChanged	Emesso quando i parametri richiesti dal WMS sono cambiati per un livello. Per esempio quando uno STILE o un FILTRO è stato modificato per il livello.	featureType | filter | updateDrawing
layerfeatureremovefilter	Emettere questo evento per rimuovere qualsiasi filtro applicato alla mappa. Una volta fatto, l’evento layerFilteredFeaturesChanged viene restituito e il contenuto della mappa e delle tabelle degli attributi viene aggiornato.	featureType
layerSelectionChanged	Emesso quando la selezione è stata cambiata per un livello. Questo attiva anche il ridisegno del contenuto della tabella degli attributi e del contenuto della mappa	featureType | featureIds | updateDrawing
layerfeatureselectsearched	Attiva questo evento per selezionare tutte le caratteristiche corrispondenti alle righe visualizzate della tabella degli attributi, che possono essere filtrate visivamente dall’utente inserendo alcuni caratteri nell’input del testo di ricerca.	featureType | updateDrawing
layerfeatureunselectall	Emetti questo evento per rimuovere tutte le caratteristiche dalla selezione di un livello. Una volta fatto, Lizmap risponde con l’evento layerSelectionChanged	featureType | updateDrawing
lizmapexternalsearchitemselected	Emesso quando l’utente ha selezionato un elemento elencato nei risultati dell’input di ricerca dell’intestazione	feature

Ci sono anche alcune variabili che sono disponibili.

Variabili disponibili per Lizmap Web Client

Nome variabile	Descrizione
lizUrls.media	URL to get a media
lizUrls.params.repository	Nome del repository attuale
lizUrls.params.project	Nome del progetto attuale

Esempi

Collassa un gruppo nella legenda

lizMap.events.on({
    uicreated: function(e) {
        $('#group-groupname td a.expander').click();
    }
});

Disabilita il click destro

Aggiungi un file chiamato es. disableRightClick.js con il seguente codice:

lizMap.events.on({
   uicreated: function(e) {
      $('body').attr('oncontextmenu', 'return false;');
   }
});

• Se vuoi che questo codice sia eseguito per tutti i progetti del tuo repository, devi copiare il file nella directory /home/data/rep1/media/js/default/ piuttosto che in /home/data/rep1/media/js/myproject/.

Invia il login user-ID corrente

Un esempio che permette di inviare l’ID utente di accesso corrente (e/o altri dati utente) alla colonna della tabella PostgreSQL, utilizzando lo strumento di edit:

var formPrefix = 'jforms_view_edition';

// Name of the QGIS vector layer fields which must contain the user info
// In the list below, replace the right side by your own fields in Lizmap
var userFields = {
   login: 'your_lizmap_user_login_field',
   firstname: 'your_lizmap_user_firstname_field',
   lastname: 'your_lizmap_user_lastname_field',
   organization: 'your_lizmap_user_organization_field'
};


lizMap.events.on({

   'lizmapeditionformdisplayed': function(e){

      // If user is logged in
      if( $('#info-user-login').length ){
            // Loop through the needed fields
            for( var f in userFields ){
               // If the user has some data for this property
               if( $('#info-user-' + f).text() ){
                  // If the field exists in the form
                  var fi = $('#' + formPrefix + '_' + userFields[f]);
                  if( fi.length ){
                        // Set val from lizmap user data
                        fi.val( $('#info-user-' + f).text() )
                        // Set disabled
                        fi.hide();
                  }
               }
            }
      }

   }

});

URL di un file statico

Se vuoi ottenere l’URL di un file statico, situato nella cartella Media:

var mediaUrl = OpenLayers.Util.urlAppend(
     lizUrls.media,
     OpenLayers.Util.getParameterString({
         "repository": lizUrls.params.repository,
         "project": lizUrls.params.project,
         "path": "picture.png"
     })
);

o

var domain = 'https://' + document.domain + lizUrls.basepath;
var image  = '<img src="' + domain + 'index.php/view/media/getMedia?repository=REPOSITORY&project=PROJECT&path=/media/logo.png" title="Logo" />';