decidim-navigation_maps 1.2.0 → 1.3.0

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

@@ -1,143 +0,0 @@
-// 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

@@ -1,123 +0,0 @@
-// 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,
-    attributionControl:  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();
-  }
-};

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

@@ -1,44 +0,0 @@
-// 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
-
-$(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].onSetLayerProperties(function(layer, props) {
-      if(!props.popup) {
-        var node = document.createElement("div");
-        var 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) {
-      var 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) {
-    var id = $content.find('.map').data('id');
-    maps[id].reload();
-  });
-
-});