decidim-navigation_maps 1.1.1 → 1.3.1

data/app/packs/src/decidim/navigation_maps/admin/navigation_maps.js

@@ -0,0 +1,154 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+// import "jquery-form"; // we use a CDN instead due a bug in webpacker
+import NavigationMapEditor from "src/decidim/navigation_maps/admin/map_editor.js";
+
+$(() => {
+
+  let $maps = $(".navigation_maps.admin .map");
+  let $progress = $(".navigation_maps.admin .progress");
+  let $bar = $(".navigation_maps.admin .progress-meter");
+  let $loading = $(".navigation_maps.admin .loading");
+  let $callout = $(".navigation_maps.admin .callout");
+  let $modal = $("#mapEditModal");
+  let $form = $("form");
+  let $tabs = $("#navigation_maps-tabs");
+  let $accordion = $(".navigation_maps.admin .accordion");
+  let editors = {};
+  let new_areas = {};
+
+  $maps.each((_i, el) => {
+    let id = $(el).data("id");
+    let table = document.getElementById(`navigation_maps-table-${id}`);
+    editors[id] = new NavigationMapEditor(el, table);
+    editors[id].onCreateArea((area_id) => {
+      new_areas[area_id] = true;
+    });
+
+    editors[id].onClickArea((area_id, area) => {
+      $modal.find(".modal-content").html("");
+      $modal.addClass("loading").foundation("open");
+      $callout.hide();
+      $callout.removeClass("alert success");
+      // "new" form insted of editing
+      let rel = new_areas[area_id]
+        ? "new"
+        : area_id;
+      $modal.find(".modal-content").load(`/admin/navigation_maps/blueprints/${id}/areas/${rel}`, () => {
+        let $input1 = $modal.find('input[name="blueprint_area[area_id]"]');
+        let $input2 = $modal.find('input[name="blueprint_area[area_type]"]');
+        let $input3 = $modal.find('input[name="blueprint_area[area]"]');
+        let a = area.toGeoJSON();
+        $modal.removeClass("loading");
+        if ($input1.length) { 
+          $input1.val(area_id); 
+        }
+        if ($input2.length) {
+          $input2.val(a.type);
+        }
+        if ($input3.length) {
+          $input3.val(JSON.stringify(a));
+        }
+        $modal.find("ul[data-tabs=true]").each(() => {
+          new Foundation.Tabs($(el)); // eslint-disable-line
+        });
+      });
+    });
+  });
+
+  // Rails AJAX events
+  document.body.addEventListener("ajax:error", (responseText) => {
+    $callout.contents("p").html(`${responseText.detail[0].message}: <strong>${responseText.detail[0].error}</strong>`);
+    $callout.addClass("alert");
+  });
+
+  document.body.addEventListener("ajax:success", (responseText) => {
+    if (new_areas[responseText.detail[0].area]) {
+      delete new_areas[responseText.detail[0].area]
+    }
+    let blueprint_id = responseText.detail[0].blueprint_id;
+    let area_id = responseText.detail[0].area_id;
+    let area = responseText.detail[0].area;
+    editors[blueprint_id].setLayerProperties(editors[blueprint_id].map._layers[area_id], area);
+    editors[blueprint_id].blueprint[area_id] = area;
+    $callout.contents("p").html(responseText.detail[0].message);
+    $callout.addClass("success");
+  });
+
+  document.body.addEventListener("ajax:complete", () => {
+    $callout.show();
+    $modal.foundation("close");
+  })
+
+  $tabs.on("change.zf.tabs", (e, $tab, $content) => {
+    let id = $content.find(".map").data("id");
+    if (id) {
+      editors[id].reload();
+    }
+  });
+
+  $accordion.on("down.zf.accordion", () => {
+    let id = $accordion.find(".map").data("id");
+    if (id) {
+      editors[id].reload();
+    }
+  });
+
+  // If a new item si going to be created o the image is changed a reload is needed
+  let needsReload = () => {
+    let reload = false;
+    if ($form.find("#map-new input:checked").length) {
+      return true;
+    }
+    if ($form.find(".delete-tab input[type=checkbox]:checked").length) {
+      return true;
+    }
+
+    $form.find("input[type=file],input[tabs_id=blueprints___title]").each((_i, el) => {
+      if ($(el).val()) {
+        reload = true;
+        return false;
+      }
+    });
+    return reload;
+  };
+
+  $form.ajaxForm({
+    url: $form.find("[name=action]").val(),
+    beforeSerialize: () => {
+      Object.keys(editors).forEach((key) => {
+        let editor = editors[key];
+        $(`#blueprints_${editor.id}_blueprint`).val(JSON.stringify(editor.getBlueprint()));
+      });
+    },
+    beforeSend: () => {
+      let percentVal = "0%";
+      $bar.width(percentVal).html(percentVal);
+      $progress.show();
+      $callout.hide();
+      $callout.removeClass("alert success");
+      $loading.show();
+    },
+    uploadProgress: (event, position, total, percentComplete) => { // eslint-disable-line
+      let percentVal = `${percentComplete}%`;
+      $bar.width(percentVal).html(percentVal);
+    },
+    success: (responseText) => {
+      $callout.show();
+      $progress.hide();
+      $callout.contents("p").html(responseText);
+      $callout.addClass("success");
+      $loading.hide();
+      if (needsReload()) {
+        $loading.show();
+        location.reload();
+      }
+    },
+    error: (xhr) => {
+      $loading.hide();
+      $callout.show();
+      $callout.contents("p").html(xhr.responseText);
+      $callout.addClass("alert");
+    }
+  });
+});

data/app/packs/src/decidim/navigation_maps/map_view.js

@@ -0,0 +1,125 @@
+// Creates a map view
+import "leaflet";
+import "leaflet/dist/leaflet.css";
+import "@geoman-io/leaflet-geoman-free";
+import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
+
+export default class NavigationMapView {
+  constructor(map_object, imageDecorator) {
+    this.features = {};
+    this.map_object = map_object;
+    this.id = map_object.dataset.id;
+    this.image_path = map_object.dataset.image;
+    this.blueprint = map_object.dataset.blueprint
+      ? JSON.parse(map_object.dataset.blueprint)
+      : {};
+    this.image = new Image();
+    this.image.onload = () => {
+      this.createMap();
+      if (typeof imageDecorator === "function") {
+        imageDecorator(this);
+      } else if (this.blueprint) {
+        this.createAreas();
+      }
+    };
+    this.image.src = this.image_path;
+    this.clickAreaCallback = () => {};
+    this.setLayerPropertiesCallback = () => {};
+  }
+
+  createMap() {
+    let bounds = [[0, 0], [this.image.height, this.image.width]];
+    this.map = L.map(this.map_object, {
+      minZoom: -1,
+      maxZoom: 2,
+      crs: L.CRS.Simple,
+      noWrap: true,
+      zoomSnap: 0,
+      // zoomDelta: 0.1,
+      maxBounds: [[0, 0], [this.image.height, this.image.width]],
+      center: [this.image.height / 2, this.image.width / 2],
+      zoom: -1,
+      scrollWheelZoom: false,
+      attributionControl: false
+    });
+
+    L.imageOverlay(this.image.src, bounds).addTo(this.map);
+    this.fitBounds();
+  };
+
+  fitBounds() {
+    let image_ratio = this.image.height / this.image.width;
+    let map_ratio = this.map_object.offsetHeight / this.map_object.offsetWidth;
+
+    if (image_ratio > map_ratio) {
+      this.map.fitBounds([[0, 0], [0, this.image.width]]);
+    }
+    else {
+      this.map.fitBounds([[0, 0], [this.image.height, 0]]);
+    }
+    this.map.setView([this.image.height / 2, this.image.width / 2]);
+  };
+
+  createAreas() {
+    this.forEachBlueprint((id, geoarea) => {
+      new L.GeoJSON(geoarea, {
+        onEachFeature: (feature, layer) => {
+          layer._leaflet_id = id;
+          this.setLayerProperties(layer, geoarea);
+          this.attachEditorEvents(layer);
+        }
+      }).addTo(this.map);
+    });
+  };
+
+  setLayerProperties (layer, area) {
+    let props = area.properties;
+    if (props) {
+      if (props.color) {
+        layer.setStyle({fillColor: props.color, color: props.color});
+      }
+      this.setLayerPropertiesCallback(layer, props);
+    }
+  };
+
+  attachEditorEvents (layer) {
+    layer.on("mouseover", (e) => {
+      e.target.getElement().classList.add("selected")
+    });
+
+    layer.on("mouseout", (e) => {
+      e.target.getElement().classList.remove("selected")
+    });
+
+    layer.on("click", (e) => {
+      this.clickAreaCallback(e.target, this);
+    });
+  };
+
+  // register callback to handle area clicks
+  onClickArea(callback) {
+    this.clickAreaCallback = callback;
+  };
+
+  onSetLayerProperties(callback) {
+    this.setLayerPropertiesCallback = callback;
+  };
+
+  forEachBlueprint (decorator) {
+    for (let id in this.blueprint) {
+      let geoarea = this.blueprint[id];
+      // avoid non-polygons for the moment
+      if (geoarea.geometry && geoarea.geometry.type === "Polygon") {
+        decorator(id, geoarea);
+      }
+    }
+  };
+
+  reload () {
+    if (this.map) {
+      this.map.invalidateSize(true);
+      this.fitBounds();
+    }
+  };
+}
+

data/app/packs/src/decidim/navigation_maps/navigation_maps.js

@@ -0,0 +1,43 @@
+import NavigationMapView from "src/decidim/navigation_maps/map_view.js";
+import "jsviews/jsrender";
+
+$(function() {
+
+  let $maps = $(".navigation_maps .map");
+  let $tabs = $("#navigation_maps-tabs");
+  let maps = {};
+  let tmpl = $.templates("#navigation_maps-popup");
+
+  $maps.each(function() {
+    let id = $(this).data("id");
+    maps[id] = new NavigationMapView(this);
+    maps[id].onSetLayerProperties(function(layer, props) {
+      if (!props.popup) {
+        let node = document.createElement("div");
+        let html = tmpl.render(props);
+        $(node).html(html);
+
+        layer.bindPopup(node, {
+          maxHeight: 400,
+          // autoPan: false,
+          maxWidth: 640,
+          minWidth: 200,
+          keepInView: true,
+          className: `navigation_map-info map-info-${id}-${layer._leaflet_id}`
+        });
+      }
+    });
+    maps[id].onClickArea(function(area) {
+      let popup = area.feature.properties && area.feature.properties.link && area.feature.properties.popup;
+      if (popup) {
+        location = area.feature.properties.link;
+      }
+    });
+  });
+
+  $tabs.on("change.zf.tabs", function(e, $tab, $content) {
+    let id = $content.find(".map").data("id");
+    maps[id].reload();
+  });
+
+});

data/app/{assets → packs}/stylesheets/decidim/navigation_maps/admin/navigation_maps.scss

@@ -2,10 +2,10 @@
 //= require leaflet-geoman
 //= require_self
 
-@import "decidim/variables";
-@import "decidim/utils/settings";
-@import "decidim/utils/mixins";
-@import "decidim/navigation_maps/variables";
+@import "stylesheets/decidim/variables";
+@import "stylesheets/decidim/utils/settings";
+@import "stylesheets/decidim/utils/mixins";
+@import "stylesheets/decidim/navigation_maps/variables";
 
 .navigation_maps.admin {
   .accordion-item {

data/app/{assets → packs}/stylesheets/decidim/navigation_maps/navigation_maps.scss

@@ -1,8 +1,7 @@
 //= require leaflet
 //= require leaflet-geoman
 //= require_self
-
-@import "decidim/navigation_maps/variables";
+@import "stylesheets/decidim/navigation_maps/variables";
 
 .home-section {
   .navigation_maps {

data/app/queries/decidim/navigation_maps/content_block_blueprints.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Decidim
+  module NavigationMaps
+    # This query finds the published blueprints for a content block
+    class ContentBlockBlueprints < Rectify::Query
+      def initialize(content_block)
+        @content_block = content_block
+      end
+
+      def query
+        Decidim::NavigationMaps::Blueprint.where(content_block: @content_block)
+      end
+
+      private
+
+      attr_reader :content_block
+    end
+  end
+end

data/app/uploaders/decidim/navigation_maps/blueprint_uploader.rb

@@ -4,18 +4,10 @@ module Decidim
   module NavigationMaps
     # This class deals with uploading images to a Blueprints.
     class BlueprintUploader < Decidim::ImageUploader
-      process :validate_size, :validate_dimensions
-
-      version :thumbnail do
-        process resize_to_fit: [nil, 237]
-      end
-
-      def extension_white_list
-        %w(jpg jpeg png svg)
-      end
-
-      def max_image_height_or_width
-        8000
+      set_variants do
+        {
+          thumbnail: { resize_to_fit: [nil, 237] }
+        }
       end
     end
   end

data/app/uploaders/decidim/navigation_maps/cw/blueprint_uploader.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Decidim
+  module NavigationMaps
+    module Cw
+      # This class deals with uploading images to a Blueprints.
+      class BlueprintUploader < Decidim::Cw::ImageUploader
+        process :validate_size, :validate_dimensions
+
+        version :thumbnail do
+          process resize_to_fit: [nil, 237]
+        end
+
+        def extension_white_list
+          %w(jpg jpeg png svg)
+        end
+
+        def max_image_height_or_width
+          8000
+        end
+      end
+    end
+  end
+end

data/config/assets.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# This file is located at `config/assets.rb` of your module.
+
+# Define the base path of your module. Please note that `Rails.root` may not be
+# used because we are not inside the Rails environment when this file is loaded.
+base_path = File.expand_path("..", __dir__)
+
+# Register an additional load path for webpack. All the assets within these
+# directories will be available for inclusion within the Decidim assets. For
+# example, if you have `app/packs/src/decidim/foo.js`, you can include that file
+# in your JavaScript entrypoints (or other JavaScript files within Decidim)
+# using `import "src/decidim/foo"` after you have registered the additional path
+# as follows.
+Decidim::Webpacker.register_path("#{base_path}/app/packs")
+
+# Register the entrypoints for your module. These entrypoints can be included
+# within your application using `javascript_pack_tag` and if you include any
+# SCSS files within the entrypoints, they become available for inclusion using
+# `stylesheet_pack_tag`.
+Decidim::Webpacker.register_entrypoints(
+  decidim_navigation_maps: "#{base_path}/app/packs/entrypoints/decidim_navigation_maps.js",
+  decidim_admin_navigation_maps: "#{base_path}/app/packs/entrypoints/decidim_admin_navigation_maps.js"
+)
+
+# If you want to import some extra SCSS files in the Decidim main SCSS file
+# without adding any extra stylesheet inclusion tags, you can use the following
+# method to register the stylesheet import for the main application.
+# Decidim::Webpacker.register_stylesheet_import("stylesheets/decidim/navigation_maps/navigation_maps")
+
+# If you want to do the same but include the SCSS file for the admin panel's
+# main SCSS file, you can use the following method.
+# Decidim::Webpacker.register_stylesheet_import("stylesheets/decidim/navigation_maps/admin", group: :admin)
+
+# If you want to override some SCSS variables/settings for Foundation from the
+# module, you can add the following registered import.
+# Decidim::Webpacker.register_stylesheet_import("stylesheets/decidim/foo/settings", type: :settings)
+
+# If you want to do the same but override the SCSS variables of the admin
+# panel's styles, you can use the following method.
+# Decidim::Webpacker.register_stylesheet_import("stylesheets/decidim/foo/admin_settings", type: :settings, group: :admin)

data/config/locales/ca.yml

@@ -29,6 +29,7 @@ ca:
           view: Participa
         navigation_map_settings_form:
           add: Afegeix
+          autohide_tabs: Amaga les pestanyes de navegació si només hi ha un mapa
           blueprint_image: Imatge del plànol
           description: Descripció
           editor: Editor del mapa

data/config/locales/cs.yml

@@ -29,10 +29,11 @@ cs:
           view: Zapojte se
         navigation_map_settings_form:
           add: Přidat
+          autohide_tabs: Skrýt navigaci v záložkách, pokud je pouze jedna mapa
           blueprint_image: Obrázek plánu
           description: Popis
           editor: Editor mapy
-          height: Height (px)
+          height: Výška (px)
           id: Id
           image_missing: Pro začátek přidejte obrázek plánu
           info: Obecné informace

data/config/locales/en.yml

@@ -30,6 +30,7 @@ en:
           view: Take part
         navigation_map_settings_form:
           add: Add
+          autohide_tabs: Hide tabs navigation if there's only one map
           blueprint_image: Blueprint image
           description: Description
           editor: Map Editor

data/config/locales/es.yml

@@ -29,6 +29,7 @@ es:
           view: Participar
         navigation_map_settings_form:
           add: Añadir
+          autohide_tabs: Ocultar las pestañas de navegación si sólo hay un mapa
           blueprint_image: Imagen del plano
           description: Descripción
           editor: Editor de Mapa

data/db/migrate/20201105130724_add_reference_to_content_block_to_blueprints_table.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class AddReferenceToContentBlockToBlueprintsTable < ActiveRecord::Migration[5.2]
+  def change
+    add_reference(
+      :decidim_navigation_maps_blueprints,
+      :decidim_content_block,
+      foreign_key: true,
+      index: { name: "decidim_navigation_maps_constraint_content_block" }
+    )
+  end
+end

data/db/seeds.rb

@@ -1,6 +1,9 @@
 # frozen_string_literal: true
 
-if !Rails.env.production? || ENV["SEED"]
+print "Skipping seeds for decidim_navigation maps as required by SKIP_MODULE_SEEDS\n" if ENV["SKIP_MODULE_SEEDS"]
+
+if !ENV["SKIP_MODULE_SEEDS"] && (!Rails.env.production? || ENV["SEED"])
+
   print "Creating seeds for decidim_navigation maps...\n" unless Rails.env.test?
 
   require "decidim/faker/localized"
@@ -8,29 +11,32 @@ if !Rails.env.production? || ENV["SEED"]
 
   organization = Decidim::Organization.first
 
-  Decidim::ContentBlock.create(
+  # homepage blueprint
+  content_block = Decidim::ContentBlock.create(
     decidim_organization_id: organization.id,
     weight: 1,
     scope_name: :homepage,
     manifest_name: :navigation_map,
     published_at: Time.current,
-    settings: { title: Decidim::Faker::Localized.sentence(5) }
+    settings: { title: Decidim::Faker::Localized.sentence(word_count: 5) }
   )
 
   blueprint1 = Decidim::NavigationMaps::Blueprint.create(
     organization: organization,
-    image: File.new(File.join(seeds_root, "antarctica.png")),
-    title: Decidim::Faker::Localized.sentence(2),
-    description: Decidim::Faker::Localized.sentence(10)
+    content_block: content_block,
+    title: Decidim::Faker::Localized.sentence(word_count: 2),
+    description: Decidim::Faker::Localized.sentence(word_count: 10)
   )
 
-  Decidim::NavigationMaps::Blueprint.create(
+  blueprint2 = Decidim::NavigationMaps::Blueprint.create(
     organization: organization,
-    image: File.new(File.join(seeds_root, "penguins.jpg")),
-    title: Decidim::Faker::Localized.sentence(2),
-    description: Decidim::Faker::Localized.sentence(10)
+    title: Decidim::Faker::Localized.sentence(word_count: 2),
+    description: Decidim::Faker::Localized.sentence(word_count: 10)
   )
 
+  blueprint1.image.attach(io: File.open(File.join(seeds_root, "antarctica.png")), filename: "antarctica.png", content_type: "image/png")
+  blueprint2.image.attach(io: File.open(File.join(seeds_root, "penguins.jpg")), filename: "penguins.jpg", content_type: "image/jpeg")
+
   Decidim::NavigationMaps::BlueprintArea.create(
     blueprint: blueprint1,
     area_id: "10",
@@ -79,7 +85,7 @@ if !Rails.env.production? || ENV["SEED"]
     link_type: "link",
     color: "#ffbb00",
     title: { en: "Penguins" },
-    description: { en: "Penguins are beatiful animals" }
+    description: { en: "Penguins are beautiful animals" }
   )
 
   Decidim::NavigationMaps::BlueprintArea.create(
@@ -100,4 +106,49 @@ if !Rails.env.production? || ENV["SEED"]
     link: "#map1",
     link_type: "direct"
   )
+
+  # participatory process groups blueprint
+  Decidim::ParticipatoryProcessGroup.find_each do |group|
+    content_block = Decidim::ContentBlock.create(
+      decidim_organization_id: organization.id,
+      weight: 1,
+      scope_name: :participatory_process_group_homepage,
+      scoped_resource_id: group.id,
+      manifest_name: :navigation_map,
+      published_at: Time.current,
+      settings: { title: Decidim::Faker::Localized.sentence(word_count: 5), autohide_tabs: true }
+    )
+
+    blueprint = Decidim::NavigationMaps::Blueprint.create(
+      organization: organization,
+      content_block: content_block,
+      title: Decidim::Faker::Localized.sentence(word_count: 2),
+      description: Decidim::Faker::Localized.sentence(word_count: 10)
+    )
+    blueprint1.image.attach(io: File.open(File.join(seeds_root, "pla-cerda.jpg")), filename: "pla-cerda.jpg", content_type: "image/jpeg")
+
+    Decidim::NavigationMaps::BlueprintArea.create(
+      blueprint: blueprint,
+      area_id: "10",
+      area_type: "Feature",
+      area: {
+        type: "Polygon",
+        coordinates: [[
+          [286.211699, 216.817532],
+          [342.618384, 252.332852],
+          [449.164345, 210.550122],
+          [447.075209, 191.747894],
+          [429.665738, 147.179649],
+          [323.816156, 126.288284],
+          [285.51532, 170.856529],
+          [286.211699, 216.817532]
+        ]]
+      },
+      link: "https://en.wikipedia.org/wiki/Centelles",
+      link_type: "link",
+      color: "#ff4700",
+      title: { en: "Pla Cerdà" },
+      description: { en: "Cerdà was from the town of Centelles" }
+    )
+  end
 end

data/lib/decidim/navigation_maps/admin_engine.rb

@@ -22,10 +22,6 @@ module Decidim
         end
       end
 
-      initializer "decidim_navigation_maps.admin_assets" do |app|
-        app.config.assets.precompile += %w(admin/decidim_navigation_maps_manifest.js admin/decidim_navigation_maps_manifest.css)
-      end
-
       def load_seed
         nil
       end