-
+
diff --git a/webgis/js/controllers/tabs_controller.js b/webgis/js/controllers/tabs_controller.js
new file mode 100644
index 0000000..277c752
--- /dev/null
+++ b/webgis/js/controllers/tabs_controller.js
@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+ static targets = ['active', 'tab', 'content'];
+
+ activate(event) {
+ this.deactivate();
+ const activeId = event.currentTarget.id;
+
+ event.currentTarget.classList.add('is-active');
+ this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
+ .classList.remove('is-hidden');
+ }
+
+ reset() {
+ this.deactivate();
+ const activeId = this.activeTarget.id;
+
+ this.activeTarget.classList.add('is-active');
+ this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
+ .classList.remove('is-hidden');
+ }
+
+ deactivate() {
+ this.tabTargets.forEach(tab => {
+ tab.classList.remove('is-active');
+ });
+
+ this.contentTargets.forEach(content => {
+ content.classList.add('is-hidden');
+ });
+ }
+}
+
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 5ce3aa3..34bea4c 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -5,6 +5,7 @@ import MenuController from './controllers/menu_controller.js';
import ModalController from './controllers/modal_controller.js';
import MarkerController from './controllers/marker_controller.js';
import BiblioController from './controllers/biblio_controller.js';
+import TabsController from './controllers/tabs_controller.js';
document.addEventListener('DOMContentLoaded', async () => {
// Register Stimulus controllers
@@ -31,4 +32,5 @@ function initStimulus() {
Stimulus.register("modal", ModalController);
Stimulus.register("marker", MarkerController);
Stimulus.register("biblio", BiblioController);
+ Stimulus.register("tabs", TabsController);
}
\ No newline at end of file
diff --git a/webgis/js/ui.js b/webgis/js/ui.js
index 9415541..aaa23e3 100644
--- a/webgis/js/ui.js
+++ b/webgis/js/ui.js
@@ -93,21 +93,21 @@ UI.toggleMenu = function (triggerId, listId = null) {
}
/**
* Open a modal with DB site data
- * @todo Refactor!!! Web components??
* @param {object} data The data retrieved from the DB to display as modal content
* @param {string} selector The modal selector
*/
UI.openSiteModal = async function (data, selector) {
const modal = document.querySelector(selector);
- const tabs = modal.querySelector('.tabs > ul');
let dataTabs = modal.querySelectorAll('.data-tabs');
// Reset data tabs content
for (let tab of dataTabs) {
tab.innerHTML = '';
}
+
let siteSheet = new SiteSheet();
siteSheet.siteData = data;
+
window.Biblio = siteSheet;
modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
@@ -136,29 +136,6 @@ UI.openSiteModal = async function (data, selector) {
images.innerHTML += photos[0] ? sitePhotos.render() : '';
}
- // Move to Stimulus?
- // TODO Awful!!!
- tabs.childNodes.forEach(node => {
- if (node.nodeName === 'LI') {
- node.addEventListener('click', () => {
- node.classList.add('is-active');
-
- for (let el of tabs.childNodes) {
- if (el.nodeName === 'LI' && el !== node) {
- el.classList.remove('is-active');
- }
- }
-
- for (let tab of dataTabs) {
- tab.classList.add('is-hidden');
- if (tab.id == node.id.replace('for-','')) {
- tab.classList.remove('is-hidden');
- }
- }
- });
- }
- });
-
modal.classList.add('is-active');
this.imageGallery('gallery-1', surveys);
@@ -175,6 +152,7 @@ UI.openNotConserModal = async function (data, selector) {
sheet.siteData = data;
// For Stimulus biblio_controller
window.Biblio = sheet;
+
modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render();
modal.classList.add('is-active');
}
@@ -184,7 +162,6 @@ UI.openNotConserModal = async function (data, selector) {
*/
UI.openFindingModal = async function (data, selector) {
const modal = document.querySelector(selector);
- const tabs = modal.querySelector('.tabs > ul');
let dataTabs = modal.querySelectorAll('.data-tabs');
// Reset data tabs content
@@ -194,37 +171,50 @@ UI.openFindingModal = async function (data, selector) {
let finding = new Finding();
finding.data = data;
- finding.setImages();
- modal.querySelector('#finding-sheet').innerHTML = await finding.render();
+
// For Stimulus biblio_controller
window.Biblio = finding;
+
+ finding.setImages();
+ modal.querySelector('#finding-sheet').innerHTML = await finding.render();
if (finding.images) {
modal.querySelector('#photos').innerHTML = finding.renderImages();
this.imageGallery('finding-gallery', finding.images);
}
- // Move to Stimulus?
- // TODO Awful!!!
- tabs.childNodes.forEach(node => {
- if (node.nodeName === 'LI') {
- node.addEventListener('click', () => {
- node.classList.add('is-active');
+ modal.classList.add('is-active');
+}
+/**
+ * @param {string} menuListSel Menu list selector
+ * @param {L.Map} map
+ * @param {L.LayerGroup} sites
+ */
+UI.sitesMenu = function (menuListSel, map, sites) {
+ // Close menu if arrow button is clicked...
+ let markers = [];
- for (let el of tabs.childNodes) {
- if (el.nodeName === 'LI' && el !== node) {
- el.classList.remove('is-active');
- }
- }
+ map.eachLayer(layer => {
+ if (layer instanceof L.Marker) {
+ markers.push(layer);
+ }
+ })
- for (let tab of dataTabs) {
- tab.classList.add('is-hidden');
- if (tab.id == node.id.replace('for-','')) {
- tab.classList.remove('is-hidden');
- }
- }
- });
+ const menu = document.querySelector(menuListSel);
+ menu.addEventListener('click', async event => {
+ if (event.target.nodeName === 'A') {
+ const layerId = event.target.id;
+ const marker = markers.filter(m => m.id === layerId)[0];
+
+ // zoom to layer...
+ const layer = sites.customGetLayer(layerId);
+ map.setView(
+ layer.getBounds().getCenter(),
+ 19,
+ {animate: true, duration: 1, easeLinearity: 0.25}
+ );
+
+ marker.openTooltip();
}
});
- modal.classList.add('is-active');
}
/**
* Open Spotlight gallery