aboutsummaryrefslogtreecommitdiff
path: root/app/javascript/controllers
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2020-11-12 23:39:13 +0100
committerhellekin <hellekin@cepheide.org>2020-11-12 23:39:13 +0100
commit6c9922a87fb72b958b78014c45b6cd1efafdd30e (patch)
treec58addb0b39bafe5bc8aceebe659bb2cc86f3851 /app/javascript/controllers
parent8d9387cf64929b6467b6ba52f22ca0aa5ed35782 (diff)
downloadincommon-map-6c9922a87fb72b958b78014c45b6cd1efafdd30e.tar.gz
Add Stimulus Map and Taxonomy (WIP)
This commit add StimulusJS interaction for the map and taxonomy, as well as styling. It provides preliminary work to hook up live data on the map from the taxonomy.
Diffstat (limited to 'app/javascript/controllers')
-rw-r--r--app/javascript/controllers/map_controller.js49
-rw-r--r--app/javascript/controllers/taxonomy_controller.js56
2 files changed, 105 insertions, 0 deletions
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
new file mode 100644
index 0000000..5363e5e
--- /dev/null
+++ b/app/javascript/controllers/map_controller.js
@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+
+import { Controller } from "stimulus"
+import L from "leaflet"
+import "leaflet/dist/leaflet.css"
+
+export default class extends Controller {
+ static targets = [ "container" ]
+
+ initialize() {
+ console.log("Map controller initialized.")
+ }
+
+ connect() {
+ this.map = L.map(this.containerTarget, {
+ zoomDelta: 0.5,
+ zoomSnap: 0.5,
+ }).setView(this._coordinates(), this._zoom());
+
+ L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+ attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
+ maxZoom: 18,
+ id: 'mapbox/streets-v11',
+ tileSize: 512,
+ zoomOffset: -1,
+ accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
+ }).addTo(this.map);
+ }
+
+ disconnect() {
+ this.map.remove();
+ console.log('Map controller disconnected.')
+ }
+
+ _coordinates() {
+ return [this.data.get('latitude'), this.data.get('longitude')];
+ }
+
+ _zoom() {
+ return this.data.get('zoom');
+ }
+
+}
diff --git a/app/javascript/controllers/taxonomy_controller.js b/app/javascript/controllers/taxonomy_controller.js
new file mode 100644
index 0000000..16d57fa
--- /dev/null
+++ b/app/javascript/controllers/taxonomy_controller.js
@@ -0,0 +1,56 @@
+// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+ static targets = [ "category", "deploy", "filter", "section", "toggle" ]
+
+ initialize() {
+ console.log("Taxonomy controller initialized.")
+ }
+
+ connect() {
+ console.log("Taxonomy controller connected.")
+
+ if (this.hasFilterTarget) {
+ let url = `/taxonomies/${this.data.get('uuid')}/filter.js`
+ console.log(`loading url = ${url}`)
+ fetch(url, {
+ headers: { accept: 'application/json'}
+ })
+ .then(response => response.text())
+ .then(html => this.filterTarget.innerHTML = html)
+ } else {
+ console.log("Taxonomy filter is missing")
+ }
+ }
+
+ deploy() {
+ console.log(`deploying taxonomy ${this.data.get('uuid')}`);
+ fetch(`/taxonomies/${this.data.get('uuid')}.js`)
+ .then(response => response.text())
+ .then(html => this.deployTarget.innerHTML = html);
+ }
+
+ toggle() {
+ var cssClass = 'on';
+ this.toggleTarget.classList.toggle(cssClass)
+ this.filterTarget.parentNode.classList.toggle(cssClass)
+ }
+
+ category(event) {
+ let catId = event.target.dataset.taxonomyCategoryId
+ event.target.classList.toggle('active')
+ }
+
+ section(event) {
+ let catId = event.target.dataset.taxonomySectionId
+ event.target.classList.toggle('active')
+ }
+}