decidim-navigation_maps 1.0.1

data/README.md

@@ -0,0 +1,144 @@
+# Decidim::NavigationMaps
+
+![Test](https://github.com/Platoniq/decidim-module-navigation_maps/workflows/Test/badge.svg)
+[![Maintainability](https://api.codeclimate.com/v1/badges/f69b2b0ab0ffcd26f002/maintainability)](https://codeclimate.com/github/Platoniq/decidim-module-navigation_maps/maintainability)
+[![Codecov](https://codecov.io/gh/Platoniq/decidim-module-navigation_maps/branch/master/graph/badge.svg?token=XhzWO0IiWt)](https://codecov.io/gh/Platoniq/decidim-module-navigation_maps)
+
+Allows to map processes to image parts using maps.
+
+> 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).
+
+👉 [Check the usage guide here!](USAGE.md)
+
+![Admin editor](examples/admin.gif)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-navigation_maps", "~> 1.0.0"
+```
+
+And then execute:
+
+```bash
+bundle
+bundle exec rails decidim_navigation_maps:install:migrations
+bundle exec rails db:migrate
+```
+
+Depending on your Decidim version, choose the corresponding Plugin version to ensure compatibility:
+
+| Navigation Maps version | Compatible Decidim versions |
+|---|---|
+| 1.0.x | 0.18.x, 0.21.x |
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+### Developing
+
+To start contributing to this project, first:
+
+- Install the basic dependencies (such as Ruby and PostgreSQL)
+- Clone this repository
+
+Decidim's main repository also provides a Docker configuration file if you
+prefer to use Docker instead of installing the dependencies locally on your
+machine.
+
+You can create the development app by running the following commands after
+cloning this project:
+
+```bash
+bundle
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake development_app
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+Then to test how the module works in Decidim, start the development server:
+
+```bash
+cd development_app
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rails s
+```
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add the environment variables to the root directory of the project in a file
+named `.rbenv-vars`. If these are defined for the environment, you can omit
+defining these in the commands shown above.
+
+#### Code Styling
+
+Please follow the code styling defined by the different linters that ensure we
+are all talking with the same language collaborating on the same project. This
+project is set to follow the same rules that Decidim itself follows.
+
+[Rubocop](https://rubocop.readthedocs.io/) linter is used for the Ruby language.
+
+You can run the code styling checks by running the following commands from the
+console:
+
+```
+bundle exec rubocop
+```
+
+To ease up following the style guide, you should install the plugin to your
+favorite editor, such as:
+
+- Atom - [linter-rubocop](https://atom.io/packages/linter-rubocop)
+- Sublime Text - [Sublime RuboCop](https://github.com/pderichs/sublime_rubocop)
+- Visual Studio Code - [Rubocop for Visual Studio Code](https://github.com/misogi/vscode-ruby-rubocop)
+
+### Testing
+
+To run the tests run the following in the gem development path:
+
+```bash
+bundle
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake test_app
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rspec
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add these environment variables to the root directory of the project in a
+file named `.rbenv-vars`. In this case, you can omit defining these in the
+commands shown above.
+
+### Test code coverage
+
+If you want to generate the code coverage report for the tests, you can use
+the `SIMPLECOV=1` environment variable in the rspec command as follows:
+
+```bash
+SIMPLECOV=1 bundle exec rspec
+```
+
+This will generate a folder named `coverage` in the project root which contains
+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)
+
+> Amb el suport de l'Ajuntament de Barcelona - Direcció de Serveis d'Innovació Democràtica
+>
+> ![Logo Barcelona](examples/bcn-logo.png)

data/Rakefile

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+def install_module(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim_navigation_maps:install:migrations")
+    system("bundle exec rake db:migrate")
+  end
+end
+
+def seed_db(path)
+  Dir.chdir(path) do
+    system("bundle exec rake db:seed")
+  end
+end
+
+desc "Generates a dummy app for testing"
+task test_app: "decidim:generate_external_test_app" do
+  ENV["RAILS_ENV"] = "test"
+  install_module("spec/decidim_dummy_app")
+end
+
+desc "Generates a development app"
+task :development_app do
+  Bundler.with_original_env do
+    generate_decidim_app(
+      "development_app",
+      "--app_name",
+      "#{base_app_name}_development_app",
+      "--path",
+      "..",
+      "--recreate_db",
+      "--demo"
+    )
+  end
+
+  install_module("development_app")
+  seed_db("development_app")
+end

data/app/assets/config/admin/decidim_navigation_maps_manifest.css

@@ -0,0 +1,3 @@
+/*
+ *= link decidim/navigation_maps/admin/navigation_maps.css
+ */

data/app/assets/config/admin/decidim_navigation_maps_manifest.js

@@ -0,0 +1,3 @@
+//= link decidim/navigation_maps/admin/navigation_maps.js
+//= require jquery.form
+//= require leaflet

data/app/assets/config/decidim_navigation_maps_manifest.css

@@ -0,0 +1,3 @@
+/*
+ *= link decidim/navigation_maps/navigation_maps.css
+ */

data/app/assets/config/decidim_navigation_maps_manifest.js

@@ -0,0 +1 @@
+//= link decidim/navigation_maps/navigation_maps.js

data/app/assets/images/decidim/navigation_maps/icon.svg

@@ -0,0 +1 @@
+<svg height="35px" width="35px" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 1 511 511" style="enable-background:new 0 1 511 511;" xml:space="preserve"><g><path d="M205.6,146.9c-22.2,0-40.2,18-40.2,40.2c0,22.2,18,40.2,40.2,40.2c22.2,0,40.2-18,40.2-40.2   C245.9,165,227.8,146.9,205.6,146.9z M205.6,206.6c-10.7,0-19.3-8.7-19.3-19.3c0-10.7,8.7-19.3,19.3-19.3   c10.6,0,19.3,8.7,19.3,19.3C225,197.9,216.3,206.6,205.6,206.6z"/><path d="M406.6,178V70.3c0-5.8-4.2-10.1-10-10.1H10.6C4.8,60.3,0,64.6,0,70.3v304.9c0,5.8,4.8,10.9,10.6,10.9h242   c24.5,39.8,68.7,66.7,119.1,66.7c77,0,139.4-62.8,139.4-139.7C511,248.4,467.4,193.7,406.6,178z M21,365.2v-284h364.7v92.9   c-4.2-0.5-9.1-0.7-14-0.7c-0.3,0-0.6,0-0.6,0v-66.4c0-5.8-5-10-10.9-10H47.2c-5.8,0-10.5,4.2-10.5,10v231.8   c0,5.8,4.7,10.8,10.5,10.8h189.7c1.5,5.2,3.1,10.5,5.2,15.7H21z M232.9,328.6H57.6v-40.4l61.5-54.3c2.8-2.5,7-2.6,10-0.2l63.3,50.6   c10.7,8.6,26,8.4,36.5-0.5l7.6-6.5c-3,11.4-4.6,23.6-4.6,35.8C232,318.3,232.3,323.3,232.9,328.6z M215.7,267.8   c-2.8,2.4-7,2.4-10,0.1l-63.4-50.6c-10.9-8.7-26.5-8.4-37,0.9l-47.7,42V117.9H350v57.2c-37.7,6-70.1,26.8-91.4,56.4L215.7,267.8z    M371.6,431.7C306.2,431.7,253,378.4,253,313s53.2-118.6,118.6-118.6c65.4,0,118.6,53.2,118.6,118.6   C490.4,378.4,437.1,431.7,371.6,431.7z"/><path d="M435.4,234c-34.8-34.6-91-34.6-125.6,0c-13.7,13.7-22.4,31.2-25,50.4c-2.5,18.5,0.9,37.8,9.9,54.4c0,0,0,0.1,0.1,0.1   c4.4,8,9.4,14.7,15.2,20.4l55.1,55.1c2,2,4.6,3,7.4,3s5.5-1.2,7.4-3l55.1-55.1c16.9-16.9,26.2-39.2,26.2-62.8   C461.4,273,452.2,250.7,435.4,234z M420.1,344.6l-47.7,47.7l-47.7-47.7c-4.4-4.4-8.2-9.5-11.6-15.7c-14.2-26.6-9.6-58.8,11.6-80.1   c26.4-26.4,69.4-26.4,95.8,0c12.8,12.8,19.8,29.8,19.7,47.7C440.2,314.6,433,331.7,420.1,344.6z"/><path d="M372.3,241.7c-29,0-52.7,23.7-52.7,52.7c0,29,23.7,52.7,52.7,52.7s52.7-23.7,52.7-52.7   C425.1,265.4,401.5,241.7,372.3,241.7z M372.3,326c-17.5,0-31.8-14.2-31.8-31.8c0-17.5,14.3-31.8,31.8-31.8   c17.5,0,31.8,14.3,31.8,31.8C404.1,311.8,389.9,326,372.3,326z"/></g></svg>

data/app/assets/javascripts/decidim/navigation_maps/admin/map_editor.js

@@ -0,0 +1,88 @@
+// Creates a map
+//= require decidim/navigation_maps/map_view
+
+function NavigationMapEditor(map_object, table_object) {
+  var self = this;
+  // Call constructor of superclass to initialize superclass-derived members.
+  NavigationMapView.call(self, map_object, function() {
+    self.createControls();
+    if(self.blueprint) {
+      self.createAreas();
+    }
+  });
+  self.table_object = table_object;
+  this.createAreaCallback = function () {};
+  this.editAreaCallback = function () {};
+  this.removeAreaCallback = function () {};
+}
+
+// NavigationMapEditor derives from NavigationMapView
+NavigationMapEditor.prototype = Object.create(NavigationMapView.prototype);
+NavigationMapEditor.prototype.constructor = NavigationMapEditor;
+
+NavigationMapEditor.prototype.createControls = function() {
+  var self = this;
+  self.map.pm.addControls({
+    position: 'topleft',
+    drawCircle: false,
+    drawMarker: false,
+    drawCircleMarker: false,
+    drawPolyline: false,
+    cutPolygon: false
+  });
+
+  self.map.on('pm:create', function(e) {
+    var geojson = e.layer.toGeoJSON();
+    self.blueprint[e.layer._leaflet_id] = geojson;
+    self.attachEditorEvents(e.layer);
+    self.createAreaCallback(e.layer._leaflet_id, e.layer, self);
+  });
+
+  self.map.on('pm:remove', function(e) {
+    delete self.blueprint[e.layer._leaflet_id];
+    self.removeAreaCallback(e.layer._leaflet_id, e.layer, self);
+  });
+};
+
+NavigationMapEditor.prototype.editing = function() {
+  var pm = this.map.pm;
+  return pm.globalRemovalEnabled() || pm.globalDragModeEnabled() || pm.globalEditEnabled();
+};
+
+// register callback to handle area edits,removals and creations
+NavigationMapView.prototype.onCreateArea = function(callback) {
+  this.createAreaCallback = callback;
+};
+NavigationMapView.prototype.onEditArea = function(callback) {
+  this.editAreaCallback = callback;
+};
+NavigationMapView.prototype.onRemoveArea = function(callback) {
+  this.removeCreateCallback = callback;
+};
+
+NavigationMapEditor.prototype.attachEditorEvents = function (layer) {
+  var self = this;
+
+  layer.on('mouseover', function(e) {
+    e.target.getElement().classList.add('selected')
+  });
+
+  layer.on('mouseout', function(e) {
+    e.target.getElement().classList.remove('selected')
+  });
+
+  layer.on('pm:edit', function(e) {
+    self.blueprint[e.target._leaflet_id] = e.target.toGeoJSON();
+    self.editAreaCallback(e.target._leaflet_id, e.target, self);
+  });
+
+  layer.on('click', function(e) {
+    if(!self.editing()) {
+      self.clickAreaCallback(e.target._leaflet_id, e.target, self);
+    }
+  });
+};
+
+NavigationMapEditor.prototype.getBlueprint = function () {
+  return this.blueprint;
+};

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

@@ -0,0 +1,143 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+//= require jquery.form
+//= require decidim/navigation_maps/admin/map_editor
+//= require_self
+
+$(function() {
+
+  var $maps = $('.navigation_maps.admin .map');
+  var $progress = $('.navigation_maps.admin .progress');
+  var $bar = $('.navigation_maps.admin .progress-meter');
+  var $loading = $('.navigation_maps.admin .loading');
+  var $callout = $('.navigation_maps.admin .callout');
+  var $modal = $('#mapEditModal');
+  var $form = $('form');
+  var $tabs = $('#navigation_maps-tabs');
+  var $accordion = $('.navigation_maps.admin .accordion');
+  var editors = {};
+  var new_areas = {};
+
+  $maps.each(function() {
+    var id = $(this).data('id');
+    var table = document.getElementById("navigation_maps-table-" + id);
+    editors[id] = new NavigationMapEditor(this, table);
+    editors[id].onCreateArea(function(area_id) {
+      new_areas[area_id] = true;
+    });
+
+    editors[id].onClickArea(function(area_id, area) {
+      $modal.find('.modal-content').html('');
+      $modal.addClass('loading').foundation('open');
+      $callout.hide();
+      $callout.removeClass('alert success');
+      // "new" form insted of editing
+      var rel = new_areas[area_id] ? 'new' : area_id;
+      $modal.find('.modal-content').load(`/admin/navigation_maps/blueprints/${id}/areas/${rel}`, function() {
+        var $input1 = $modal.find('input[name="blueprint_area[area_id]"]');
+        var $input2 = $modal.find('input[name="blueprint_area[area_type]"]');
+        var $input3 = $modal.find('input[name="blueprint_area[area]"]');
+        var 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(function() {
+          new Foundation.Tabs($(this));
+        });
+      });
+    });
+  });
+
+  // Rails AJAX events
+  document.body.addEventListener('ajax:error', function(responseText) {
+    $callout.contents('p').html(responseText.detail[0].message + ": <strong>" + responseText.detail[0].error + "</strong>");
+    $callout.addClass('alert');
+  });
+
+  document.body.addEventListener('ajax:success', function(responseText) {
+    if(new_areas[responseText.detail[0].area]) {
+      delete new_areas[responseText.detail[0].area]
+    }
+    var blueprint_id = responseText.detail[0].blueprint_id;
+    var area_id = responseText.detail[0].area_id;
+    var 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', function() {
+    $callout.show();
+    $modal.foundation('close');
+  })
+
+  $tabs.on('change.zf.tabs', function(e, $tab, $content) {
+    var id = $content.find('.map').data('id');
+    if(id) {
+      editors[id].reload();
+    }
+  });
+
+  $accordion.on('down.zf.accordion', function(e, $accordion) {
+    var 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
+  var needsReload = function() {
+    var 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(function() {
+      if($(this).val()) {
+        reload = true;
+        return false;
+      }
+    });
+    return reload;
+  };
+
+  $form.ajaxForm({
+    url: $form.find('[name=action]').val(),
+    beforeSerialize: function() {
+      Object.keys(editors).forEach(function(key) {
+        var editor = editors[key];
+        $(`#blueprints_${editor.id}_blueprint`).val(JSON.stringify(editor.getBlueprint()));
+      });
+    },
+    beforeSend: function() {
+        var percentVal = '0%';
+        $bar.width(percentVal).html(percentVal);
+        $progress.show();
+        $callout.hide();
+        $callout.removeClass('alert success');
+        $loading.show();
+    },
+    uploadProgress: function(event, position, total, percentComplete) {
+        var percentVal = percentComplete + '%';
+        $bar.width(percentVal).html(percentVal);
+    },
+    success: function(responseText) {
+        $callout.show();
+        $progress.hide();
+        $callout.contents('p').html(responseText);
+        $callout.addClass('success');
+        $loading.hide();
+        if(needsReload()) {
+          $loading.show();
+          location.reload();
+        }
+    },
+    error: function(xhr) {
+      $loading.hide();
+      $callout.show();
+      $callout.contents('p').html(xhr.responseText);
+      $callout.addClass('alert');
+    }
+  });
+});

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

@@ -0,0 +1,123 @@
+// Creates a map view
+//= require leaflet
+//= require leaflet-geoman.min
+
+function NavigationMapView(map_object, callback) {
+  var self = this;
+  self.features = {};
+  self.map_object = map_object;
+  self.id = map_object.dataset.id;
+  self.image_path = map_object.dataset.image;
+  self.blueprint = map_object.dataset.blueprint ? JSON.parse(map_object.dataset.blueprint) : {};
+  self.image = new Image();
+  self.image.onload = function() {
+    self.createMap();
+    if(typeof callback === "function") {
+      callback(self);
+    } else {
+      if(self.blueprint) {
+        self.createAreas();
+      }
+    }
+  };
+  self.image.src = self.image_path;
+  this.clickAreaCallback = function () {};
+  this.setLayerPropertiesCallback = function () {};
+}
+
+NavigationMapView.prototype.createMap = function() {
+  var 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
+  });
+
+  L.imageOverlay(this.image.src, bounds).addTo(this.map);
+  this.fitBounds();
+};
+
+NavigationMapView.prototype.fitBounds = function() {
+  var image_ratio = this.image.height / this.image.width;
+  var 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]);
+};
+
+NavigationMapView.prototype.createAreas = function() {
+  var self = this;
+  self.forEachBlueprint(function(id, geoarea) {
+    new L.GeoJSON(geoarea, {
+      onEachFeature: function(feature, layer) {
+        layer._leaflet_id = id;
+        self.setLayerProperties(layer, geoarea);
+        self.attachEditorEvents(layer);
+      }
+    }).addTo(self.map);
+  });
+};
+
+NavigationMapView.prototype.setLayerProperties = function (layer, area) {
+  var props = area.properties;
+  if(props) {
+    if(props.color) {
+      layer.setStyle({fillColor: props.color, color: props.color});
+    }
+    this.setLayerPropertiesCallback(layer, props);
+  }
+};
+
+NavigationMapView.prototype.attachEditorEvents = function (layer) {
+  var self = this;
+
+  layer.on('mouseover', function(e) {
+    e.target.getElement().classList.add('selected')
+  });
+
+  layer.on('mouseout', function(e) {
+    e.target.getElement().classList.remove('selected')
+  });
+
+  layer.on('click', function(e) {
+    self.clickAreaCallback(e.target, self);
+  });
+};
+
+// register callback to handle area clicks
+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];
+    // avoid non-polygons for the moment
+    if(!geoarea.geometry || geoarea.geometry.type !== 'Polygon') continue;
+    callback(id, geoarea);
+  }
+};
+
+NavigationMapView.prototype.reload = function () {
+  if(this.map) {
+    this.map.invalidateSize(true);
+    this.fitBounds();
+  }
+};