decidim-navigation_maps 1.0.1

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

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

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

@@ -0,0 +1,3 @@
+// Variables
+
+$leaflet-background-color: 34,98,204;

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

@@ -0,0 +1,102 @@
+//= require leaflet
+//= require leaflet-geoman
+//= require_self
+
+@import "decidim/variables";
+@import "decidim/utils/settings";
+@import "decidim/utils/mixins";
+@import "decidim/navigation_maps/variables";
+
+.navigation_maps.admin {
+  .accordion-item {
+    .accordion-title {
+      border: 1px solid #ccc !important;
+    }
+    &.is-active {
+      .accordion-title {
+        background-color: #039be5;
+        border-color: "rgba(#{$leaflet-background-color}, 1)" !important;
+      }
+    }
+  }
+
+  >.content {
+    position: relative;
+  }
+  .loading {
+    display: none;
+    z-index: 10000;
+    content: "";
+    position: absolute;
+    background-color: rgba(255,255,255,.8);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .inner-loading {
+      margin-top: 25%;
+      width: 90%;
+      display: inline-block;
+      text-align: center;
+
+    }
+    .spinner {
+      @include spinner(25px, #aaa, var(--secondary), 800ms);
+      vertical-align: middle;
+    }
+    .progress {
+      background-color: #aaa;
+      display: inline-block;
+      width: 90%;
+      margin-left: 1em;
+    }
+    .progress-meter {
+      color: #fff;
+      background-color: var(--secondary);
+      width: 30%;
+      padding:0 0.5em;
+      font-size: 0.7em;
+      font-weight: bold;
+    }
+
+  }
+
+  .tabs-content {
+    .map {
+      height: 475px;
+    }
+    .thumbnail {
+      img {
+        max-height: 100px;
+      }
+    }
+    .delete-tab {
+      border-top: 1px solid $dark-gray;
+      padding: 1em 1em 0;
+    }
+    .leaflet-interactive {
+      fill: "rgba(#{$leaflet-background-color}, 1)";
+      color: "rgba(#{$leaflet-background-color}, 1)";
+      weight: 3;
+      opacity: 0.6;
+      fill-opacity: 0.5;
+      &.selected {
+        opacity: 1;
+      }
+    }
+  }
+
+}
+
+.navigation_maps.modal {
+  .spinner {
+    @include spinner(25px, #aaa, var(--secondary), 800ms);
+    vertical-align: middle;
+    display: none;
+  }
+  &.loading {
+    .spinner {
+      display: inline-block;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+//= require leaflet
+//= require leaflet-geoman
+//= require_self
+
+@import "decidim/navigation_maps/variables";
+
+.home-section {
+  .navigation_maps {
+    margin: 1em 0;
+    .tabs {
+      background-color: #f4f4f4;
+    }
+    .tabs-title {
+      a {
+        font-size: 1.2em;
+        color: var(--secondary);
+      }
+    }
+    .tabs-content {
+      border-color: #f4f4f4;
+    }
+    .map {
+      height: 475px;
+      @media (max-width: 480px) {
+        height: 240px;
+      }
+    }
+    .map-info__content {
+        padding-top: 0;
+        padding-left: 0;
+    }
+    .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)";
+      color: "rgba(#{$leaflet-background-color}, 1)";
+      weight: 3;
+      opacity: 0.6;
+      fill-opacity: 0.5;
+      &.selected {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+<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;
+    }
+    .map-info-<%= blueprint.id %>-<%= area.area_id %> .button {
+      background-color: <%= area.color %>;
+      color: #fff;
+    }
+
+    <% end %>
+  <% end %>
+</style>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map/_tabs.erb

@@ -0,0 +1,5 @@
+<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="navigation_maps-tabs">
+  <% tabs.each_with_index do |item, index| %>
+    <li class="tabs-title<%= " is-active" if index.zero? %>"><a data-tabs-target="map<%= index %>" href="#map<%= index %>"><%= translated_attribute(item.title).presence || "Tab #{index + 1}" %></a></li>
+  <% end %>
+</ul>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map/_tabs_content.erb

@@ -0,0 +1,8 @@
+
+<div class="tabs-content admin" data-tabs-content="navigation_maps-tabs">
+  <% tabs.each_with_index do |item, index| %>
+    <div class="tabs-panel<%= " is-active" if index.zero? %>" id="map<%= index %>">
+      <%= content_tag(:div, "", id: "navigation_maps-map-#{item.id}", class: "map", data: { id: item.id, image: item.image.url, blueprint: item.blueprint }) %>
+    </div>
+  <% end %>
+</div>

data/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">
+          <%= t(".view") %>
+        </a>
+      </div>
+    </div>
+  </div>
+</script>

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

@@ -0,0 +1,21 @@
+<%= stylesheet_link_tag "decidim/navigation_maps/navigation_maps" %>
+<%= render partial: "styles", locals: { blueprints: valid_blueprints } %>
+
+<section class="extended home-section">
+  <div class="wrapper-home">
+    <div class="row column text-center">
+
+      <% if translated_title.present? %>
+        <h3 class="heading3"><%= decidim_sanitize translated_title %></h3>
+      <% end %>
+
+      <div class="navigation_maps">
+        <%= render partial: "tabs", locals: { tabs: valid_blueprints } %>
+        <%= render partial: "tabs_content", locals: { tabs: valid_blueprints } %>
+      </div>
+    </div>
+  </div>
+</section>
+
+<%= render partial: "template" %>
+<%= javascript_include_tag "decidim/navigation_maps/navigation_maps" %>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_cell.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Decidim
+  module NavigationMaps
+    module ContentBlocks
+      class NavigationMapCell < Decidim::ViewModel
+        include NavigationMaps::NavigationMapCellHelpers
+        include Decidim::SanitizeHelper
+
+        view_paths << "#{Decidim::NavigationMaps::Engine.root}/app/cells/decidim/navigation_maps/content_blocks/navigation_map"
+
+        def show
+          render if valid_blueprints?
+        end
+
+        def translated_title
+          translated_attribute(model.settings.title)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+<ul class="accordion" data-accordion>
+  <li class="accordion-item<%= " is-active" unless form.image? %>" data-accordion-item>
+    <a href="#" class="accordion-title"><%= t ".info" %></a>
+
+    <div class="accordion-content" data-tab-content>
+      <%= translated_field_tag :text_field_tag, "blueprints[#{form.ident}]", :title, form.title, { tabs_id: "blueprints_#{form.ident}_title", label: t(".title") } %>
+
+      <%= label_tag t(".blueprint_image") %>
+      <div class="thumbnail">
+        <%= image_tag form.image.thumbnail.url if form.image? %>
+      </div>
+      <%= file_field_tag "blueprints[#{form.ident}][image]", { id: "blueprints_#{form.ident}_image", label: t(".title") } %>
+
+      <%= hidden_field_tag "blueprints[#{form.ident}][id]", form.id, { id: "blueprints_#{form.ident}_id" } %>
+      <%= hidden_field_tag "blueprints[#{form.ident}][blueprint]", form.blueprint.to_json, { id: "blueprints_#{form.ident}_blueprint" } %>
+
+      <% if form.id %>
+        <label class="delete-tab">
+          <%= check_box_tag("blueprints[#{form.ident}][remove]", form.id) %>
+          <%= t(".remove_blueprint") %>
+        </label>
+      <% end %>
+  </div>
+  </li>
+
+  <% if form.image? %>
+  <li class="accordion-item is-active" data-accordion-item>
+    <a href="#" class="accordion-title"><%= t ".editor" %></a>
+    <div class="accordion-content navigation_maps-content" data-tab-content>
+
+      <%= content_tag(:div, "", id: "navigation_maps-map-#{form.ident}", class: "map", data: { id: form.ident, image: form.image.url, blueprint: form.blueprint }) %>
+
+    </div>
+  </li>
+  <% end %>
+</ul>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_modal.erb

@@ -0,0 +1,12 @@
+
+<div class="reveal navigation_maps modal loading" id="mapEditModal" data-reveal>
+  <div class="modal-content">
+
+  </div>
+
+  <div class="spinner"></div>
+
+  <button class="close-button" data-close aria-label="Close modal" type="button">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_tabs.erb

@@ -0,0 +1,6 @@
+<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="navigation_maps-tabs">
+  <% tabs.each_with_index do |item, index| %>
+    <li class="tabs-title<%= " is-active" if index.zero? %>"><a data-tabs-target="map<%= index %>" href="#map<%= index %>"><%= translated_attribute(item.title).presence || "Tab #{index + 1}" %></a></li>
+  <% end %>
+  <li class="tabs-title"><a href="#map-new">+ <%= t ".add" %></a></li>
+</ul>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_tabs_content.erb

@@ -0,0 +1,11 @@
+
+<div class="tabs-content" data-tabs-content="navigation_maps-tabs">
+  <% tabs.each_with_index do |item, index| %>
+    <div class="tabs-panel<%= " is-active" if index.zero? %>" id="map<%= index %>">
+      <%= render partial: "form", locals: { form: blueprint_form(item) } %>
+    </div>
+  <% end %>
+  <div class="tabs-panel" id="map-new">
+    <%= render partial: "form", locals: { form: blueprint_form } %>
+  </div>
+</div>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/show.erb

@@ -0,0 +1,35 @@
+<!-- Original settings -->
+<% form.fields_for :settings, form.object.settings do |settings_fields| %>
+  <%= settings_fields.translated :text_field, :title %>
+<% end %>
+
+<!-- Override rails default patch (using post via ajax) -->
+<%= hidden_field_tag :_method, "post" %>
+<%= hidden_field_tag :action, blueprints_path %>
+
+<div class="navigation_maps admin">
+  <div class="callout" style="display:none" data-closable>
+    <p></p>
+    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="content">
+    <%= render partial: "tabs", locals: { tabs: blueprints } %>
+    <%= render partial: "tabs_content", locals: { tabs: blueprints } %>
+
+    <div class="loading">
+      <div class="inner-loading">
+        <div class="spinner"></div>
+        <div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-meter">0%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= render partial: "modal" %>
+<%= javascript_include_tag "decidim/navigation_maps/admin/navigation_maps" %>
+<%= stylesheet_link_tag "decidim/navigation_maps/admin/navigation_maps" %>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form_cell.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Decidim
+  module NavigationMaps
+    module ContentBlocks
+      class NavigationMapSettingsFormCell < Decidim::ViewModel
+        include NavigationMaps::NavigationMapCellHelpers
+        alias form model
+
+        view_paths << "#{Decidim::NavigationMaps::Engine.root}/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form"
+
+        def blueprint_form(blueprint = nil)
+          blueprint ||= Blueprint.new
+          BlueprintForm.from_model(blueprint).with_context(organization: current_organization)
+        end
+
+        # it should come from the Engine Routes
+        def blueprints_path
+          "/admin/navigation_maps/blueprints"
+        end
+
+        def content_block
+          options[:content_block]
+        end
+
+        def label
+          I18n.t("decidim.content_blocks.html.html_content")
+        end
+      end
+    end
+  end
+end