readme

README.md

@@ -6,14 +6,15 @@
 
 Allows to map processes to image parts using maps.
 
-> NOTE: This is in Beta status. Use it at your own risk, expect breaking
-> changes at any time.
+> NOTE: This module is ready to use but in Beta status. Feel free to report any bug!
 
 ## Usage
 
 NavigationMaps is available as a Content Block widget (currently for the
 homepage only).
 
+![Admin editor](examples/admin.gif)
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -125,3 +126,7 @@ the code coverage report.
 ## License
 
 This engine is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE.
+
+## Credits
+
+This plugin has been developed by ![Platoniq](examples/platoniq-logo.png) thanks to the project [Open Heritage](https://openheritage.eu/) and the Barcelona City Council ([Innovació Democràtica 2019](https://ajuntament.barcelona.cat/sites/default/files/bopb_17.07.2019-_anunci_ajuntament_de_barcelona_de_resolucio_definitiva_de_convocatoria_gral._subvencions_2019.pdf))

app/assets/javascripts/decidim/navigation_maps/map_view.js

@@ -22,6 +22,7 @@ function NavigationMapView(map_object, callback) {
   };
   self.image.src = self.image_path;
   this.clickAreaCallback = function () {};
+  this.setLayerPropertiesCallback = function () {};
 }
 
 NavigationMapView.prototype.createMap = function() {
@@ -75,6 +76,7 @@ NavigationMapView.prototype.setLayerProperties = function (layer, area) {
     if(props.color) {
       layer.setStyle({fillColor: props.color, color: props.color});
     }
+    this.setLayerPropertiesCallback(layer, props);
   }
 };
 
@@ -99,6 +101,10 @@ NavigationMapView.prototype.onClickArea = function(callback) {
   this.clickAreaCallback = callback;
 };
 
+NavigationMapView.prototype.onSetLayerProperties = function(callback) {
+  this.setLayerPropertiesCallback = callback;
+};
+
 NavigationMapView.prototype.forEachBlueprint = function (callback) {
   for (var id in this.blueprint) {
     var geoarea = this.blueprint[id];

app/assets/javascripts/decidim/navigation_maps/navigation_maps.js

@@ -1,6 +1,7 @@
 // Place all the behaviors and hooks related to the matching controller here.
 // All this logic will automatically be available in application.js.
 //= require decidim/navigation_maps/map_view
+//= require jsrender.min
 //= require_self
 
 
@@ -9,13 +10,31 @@ $(function() {
   var $maps = $('.navigation_maps .map');
   var $tabs = $('#navigation_maps-tabs');
   var maps = {};
+  var tmpl = $.templates("#navigation_maps-popup");
 
   $maps.each(function() {
     var id = $(this).data('id');
     maps[id] = new NavigationMapView(this);
-    maps[id].onClickArea(function(area) {
-      if(area.feature.properties && area.feature.properties.link) location = area.feature.properties.link;
+    maps[id].onSetLayerProperties(function(layer, props) {
+      if(props.title) {
+        var node = document.createElement("div");
+        var html = tmpl.render(props);
+        $(node).html(html);
+
+        layer.bindPopup(node, {
+          maxHeight: 400,
+          // autoPan: false,
+          maxWidth: 640,
+          minWidth: 500,
+          keepInView: true,
+          className: `navigation_map-info map-info-${id}-${layer._leaflet_id}`
+        });
+      }
+
     });
+    // maps[id].onClickArea(function(area) {
+      // if(area.feature.properties && area.feature.properties.link) location = area.feature.properties.link;
+    // });
   });
 
   $tabs.on('change.zf.tabs', function(e, $tab, $content) {

app/assets/stylesheets/decidim/navigation_maps/navigation_maps.scss

@@ -25,6 +25,17 @@
     .leaflet-container {
       background-color: #fafafa;
       border-color:#f4f4f4;
+      .navigation_map-info {
+        border-style: solid;
+        border-width: 3px;
+        border-radius: 10px;
+        .leaflet-popup-content-wrapper {
+          border-radius: 10px;
+        }
+        .leaflet-popup-tip {
+          border-width: 3px;
+        }
+      }
     }
     .leaflet-interactive {
       fill: "rgba(#{$leaflet-background-color}, 1)";

app/cells/decidim/navigation_maps/content_blocks/navigation_map/_styles.erb

@@ -0,0 +1,14 @@
+<style type="text/css">
+  <% blueprints.each do |blueprint| %>
+    <% next unless blueprint.areas %>
+    <% blueprint.areas.each do |area| %>
+    .map-info-<%= blueprint.id %>-<%= area.area_id %> {
+      border-color: <%= area.color %> !important;
+    }
+    .map-info-<%= blueprint.id %>-<%= area.area_id %> .leaflet-popup-tip {
+      border-color: <%= area.color %> !important;
+    }
+
+    <% end %>
+  <% end %>
+</style>

app/cells/decidim/navigation_maps/content_blocks/navigation_map/_template.erb

@@ -0,0 +1,13 @@
+<script id="navigation_maps-popup" type="text/x-jsrender">
+  <div class="map-info__content">
+    <h3>{{:title}}</h3>
+    <div id="bodyContent">
+      <p>{{:description}}</p>
+      <div class="map-info__button">
+        <a href="{{:link}}" class="button button--sc" style="background-color:{{:color}} !important">
+          <%= t(".view") %>
+        </a>
+      </div>
+    </div>
+  </div>
+</script>

app/cells/decidim/navigation_maps/content_blocks/navigation_map/show.erb

@@ -1,3 +1,6 @@
+<%= stylesheet_link_tag "decidim/navigation_maps/navigation_maps" %>
+<%= render partial: "styles", locals: { blueprints: valid_blueprints } %>
+
 <section class="extended home-section">
   <div class="row">
     <div class="columns small-centered large-10">
@@ -9,5 +12,5 @@
   </div>
 </section>
 
+<%= render partial: "template" %>
 <%= javascript_include_tag "decidim/navigation_maps/navigation_maps" %>
-<%= stylesheet_link_tag "decidim/navigation_maps/navigation_maps" %>

app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_form.erb

@@ -30,17 +30,6 @@
 
       <%= content_tag(:div, "", id: "navigation_maps-map-#{form.ident}", class: "map", data: { id: form.ident, image: form.image.url, blueprint: form.blueprint }) %>
 
-      <table id="navigation_maps-table-<%= form.ident %>">
-        <thead>
-          <tr>
-            <th> <%= t(".id") %> </th>
-            <th> <%= t(".link") %></th>
-          </tr>
-        </thead>
-        <tbody id="navigation_maps-table-<%= form.ident %>-tbody">
-        </tbody>
-      </table>
-
     </div>
   </li>
   <% end %>

app/controllers/decidim/navigation_maps/admin/blueprints_controller.rb

@@ -33,7 +33,6 @@ def create
         private
 
         def parse_blueprints
-          # return if params[:image]
           return unless params[:blueprints]
 
           params[:blueprints].each do |_key, data|

app/models/decidim/navigation_maps/blueprint_area.rb

@@ -4,6 +4,8 @@ module Decidim
   module NavigationMaps
     # Abstract class from which all models in this engine inherit.
     class BlueprintArea < ApplicationRecord
+      include Decidim::TranslatableAttributes
+
       self.table_name = "decidim_navigation_maps_blueprint_areas"
 
       belongs_to :blueprint, foreign_key: :decidim_navigation_maps_blueprint_id, class_name: "Decidim::NavigationMaps::Blueprint"
@@ -16,7 +18,9 @@ def to_geoson
           geometry: area,
           properties: {
             link: link,
-            color: color
+            color: color,
+            title: translated_attribute(title),
+            description: translated_attribute(description)
           }
         }
       end

config/locales/en.yml

@@ -23,6 +23,8 @@ en:
             success: Area saved successfully
       content_blocks:
         name: Navigation Maps
+        navigation_map:
+          view: Take part
         navigation_map_settings_form:
           add: Add
           blueprint_image: Blueprint image

lib/decidim/navigation_maps/version.rb

@@ -3,7 +3,7 @@
 module Decidim
   # This holds the decidim-meetings version.
   module NavigationMaps
-    VERSION = "0.19.0alpha"
+    VERSION = "1.0"
     DECIDIM_VERSION = ">= 0.18.0"
   end
 end

spec/content_blocks/navigation_map_settings_form_cell_spec.rb

@@ -9,13 +9,22 @@ module Decidim::NavigationMaps::ContentBlocks
     let(:organization) { create(:organization) }
     let(:content_block) { create :content_block, organization: organization, manifest_name: :navigation_map, scope: :homepage }
     let!(:blueprint) { create(:blueprint, organization: organization) }
+    let(:settings) { NavigationMapSettingsFormCell.new }
 
     controller Decidim::Admin::ApplicationController
 
+    before do
+      allow(settings).to receive(:current_organization).and_return(organization)
+    end
+
     context "when there are blueprints in the organization" do
       it "contains the map" do
         expect(subject.to_s).to include(blueprint.image.url)
       end
+
+      it "Cell returns a form" do
+        expect(settings.blueprint_form(blueprint).ident).to eq(blueprint.id)
+      end
     end
   end
 end

spec/controllers/area_controller_spec.rb

@@ -12,23 +12,24 @@ module Decidim::NavigationMaps::Admin
 
     let(:attributes) do
       {
+        blueprint_id: blueprint.id,
+        area_id: area.area_id,
         blueprint_area: {
-          area: data,
+          area: json,
           id: id,
           title: title,
           description: title,
           link: link,
-          current_blueprint: blueprint
+          color: color
         }
       }
     end
-    let(:data) do
-      { x: 0.5, y: 0.6 }
-    end
+    let(:json) { "{\"geometry\":\"{}\",\"type\":\"Feature\"}" }
     let(:title) { Decidim::Faker::Localized.sentence(2) }
     let(:description) { Decidim::Faker::Localized.paragraph }
     let(:id) { nil }
     let(:link) { "#link" }
+    let(:color) { "#f0f" }
 
     before do
       request.env["decidim.current_organization"] = user.organization
@@ -48,24 +49,33 @@ module Decidim::NavigationMaps::Admin
         let!(:area) { create(:blueprint_area, blueprint: blueprint) }
 
         it "returns http success" do
-          get :show, params: { blueprint_id: blueprint.id, area_id: area.area_id }
+          get :show, params: attributes
           expect(response).to have_http_status(:success)
         end
       end
 
       context "when area does not exist" do
-        it "redirects to new" do
+        it "returns http success" do
           get :show, params: { blueprint_id: blueprint.id, area_id: 1111 }
           expect(response).to have_http_status(:success)
         end
       end
     end
 
+    describe "POST #create" do
+      let!(:area) { create(:blueprint_area, blueprint: blueprint) }
+
+      it "returns http success" do
+        post :create, params: attributes
+        expect(response).to have_http_status(:success)
+      end
+    end
+
     describe "POST #update" do
       let!(:area) { create(:blueprint_area, blueprint: blueprint) }
 
       it "returns http success" do
-        post :update, params: { blueprint_id: blueprint.id, area_id: area.area_id }
+        post :update, params: attributes
         expect(response).to have_http_status(:success)
       end
     end

spec/forms/blueprint_form_spec.rb

@@ -7,30 +7,63 @@ module Decidim::NavigationMaps
     subject { described_class.from_params(attributes).with_context(context) }
 
     let(:organization) { create :organization }
-    let(:title) { Decidim::Faker::Localized.sentence(2) }
     let(:attributes) do
       {
         title: title,
+        id: id,
+        image: image,
         blueprint: {
           "x" => "x data",
           "y" => "y data"
         }
       }
     end
+    let(:title) { Decidim::Faker::Localized.sentence(2) }
+    let(:id) { 101 }
+    let(:image) { {} }
     let(:context) do
       {
         "current_organization" => organization
       }
     end
 
+    before do
+      allow(subject.image).to receive(:url).and_return(true)
+      allow(subject.image).to receive(:content_type).and_return("image/jpeg")
+    end
+
     context "when everything is OK" do
       it { is_expected.to be_valid }
+
+      it "ident matches id" do
+        expect(subject.ident).to eq(id)
+      end
+
+      it "image? responds true" do
+        expect(subject.image?).to eq(true)
+      end
     end
 
     context "when there is no title" do
       let(:title) { nil }
 
       it { is_expected.not_to be_valid }
     end
+
+    context "when there is no id" do
+      let(:id) { nil }
+
+      it "ident is an underscore" do
+        expect(subject.ident).to eq("_")
+      end
+    end
+
+    context "when there is no image" do
+      let(:image) { nil }
+
+      it "image? responds false" do
+        expect(subject.image?).not_to eq(true)
+      end
+    end
   end
 end