Enable links on PDFs for public viewer (#94)

* improve responsiveness

* fix click links on the viewer

app/packs/entrypoints/decidim_participatory_documents_editor.scss

@@ -2,6 +2,7 @@
 
 @import "stylesheets/decidim/participatory_documents/pdf/defaults.scss";
 @import "stylesheets/decidim/participatory_documents/pdf/tweaks.scss";
+@import "stylesheets/decidim/participatory_documents/pdf/admin_tweaks.scss";
 @import "stylesheets/decidim/participatory_documents/pdf/admin_modals.scss";
 @import "stylesheets/decidim/participatory_documents/pdf/notifications.scss";
 

app/packs/src/decidim/participatory_documents/global.js

@@ -1,4 +1,4 @@
-window.toggleFullscreen = function() {
+window.toggleFullscreen = () => {
   let viewer = document.getElementById("outerContainer");
 
   if (document.fullscreenElement) {

app/packs/src/decidim/participatory_documents/pdf/box.js

@@ -33,6 +33,8 @@ export default class Box {
     // if width is not defined will use 15%
     this.div.style.width = `${this._sanitizePercent(width, 0, 100 - parseFloat(left)) || 15}%`;
     this.div.style.height = `${this._sanitizePercent(height, 0, 100 - parseFloat(top)) || 15}%`;
+    // as the parent layer might have pointerEvents disabled we make sure in the box are enabled
+    this.div.style.pointerEvents = "auto";
 
     // add the number of the box in the middle
     let span = document.createElement("span");

app/packs/src/decidim/participatory_documents/pdf/polygon_editor.js

@@ -13,6 +13,10 @@ export default class PolygonEditor extends PolygonViewer {
 
   init() {
     super.init();
+    // The editor needs to draw boxes over the underlying layer
+    // this effectively disables pointer events on the layer (so links are not clickable).
+    // But that's okey for the editor, it's for creating the boxes.
+    this.div.style.pointerEvents = "all";
     // add controls to existing boxes
     this.getBoxes().map((box) => box.createControls());
     this.div.addEventListener("mousedown", this._mouseDown.bind(this));

app/packs/src/decidim/participatory_documents/pdf/polygon_viewer.js

@@ -17,7 +17,9 @@ export default class PolygonViewer {
   }
 
   init() {
-    this.div.style.pointerEvents = "all";
+    // we don't handle pointer events here so links are clickable
+    // each box will handle its own evens
+    this.div.style.pointerEvents = "none";
     this.div.classList.add("polygon-ready");
     this.json.forEach((box) => {
       this.addBox(new Box(this, box));

app/packs/src/decidim/participatory_documents/pdf_admin.js

@@ -7,7 +7,7 @@ import PdfStateManager from "src/decidim/participatory_documents/pdf/pdf_state_m
 import PdfModalManager from "src/decidim/participatory_documents/pdf/pdf_modal_manager";
 
 
-window.InitDocumentManagers = function(options) {
+window.InitDocumentManagers = (options) => {
   window.PdfDocStateManager = new PdfStateManager(options);
   // show message when saving
   window.PdfDocStateManager.onSave = () => {
@@ -36,7 +36,7 @@ window.InitDocumentManagers = function(options) {
 };
 
 // Call this on an annotation layer to initialize the polygon editor (admin side)
-window.InitPolygonEditor = function(layer, boxes, options, changeCallback = () => {}) {
+window.InitPolygonEditor = (layer, boxes, options, changeCallback = () => {}) => {
   let editor = new PolygonEditor(layer, boxes, { i18n: options.i18n });
   // Open the global box modal settings when a box is clicked
   editor.onBoxClick = (box) => {

app/packs/src/decidim/participatory_documents/pdf_notifications.js

@@ -1,4 +1,4 @@
-window.showInfo = function (title, options = {}) {
+window.showInfo = (title, options = {}) => {
   const info = document.getElementById("notifications");
   info.innerHTML = title;
   info.classList.add("show");
@@ -14,7 +14,7 @@ window.showInfo = function (title, options = {}) {
   }, options && options.delay || 3000);
 };
 
-window.showAlert = function (title, options = {}) {
+window.showAlert = (title, options = {}) => {
   options.class = "alert"
   window.showInfo(title, options);
 };

app/packs/stylesheets/decidim/participatory_documents/pdf/admin_polygons.scss

@@ -60,6 +60,8 @@
     left: 0;
     width: auto;
     height: auto;
+    max-height: 44px;
+    overflow: hidden;
 
     .control {
       background: #fffe;

app/packs/stylesheets/decidim/participatory_documents/pdf/admin_tweaks.scss

@@ -0,0 +1,44 @@
+#DecidimPDSaveButton {
+  min-width: 110px;
+  height: 44px;
+
+  &::before {
+    display: none;
+  }
+
+  &.alert {
+    background-color: var(--primary);
+    animation: blinker 2s linear infinite;
+  }
+
+  &.loading {
+    &::before {
+      @include spinner(25px, #fff, var(--primary), 800ms);
+
+      margin: -4px 6px 0 -5px;
+      content: "";
+      vertical-align: middle;
+    }
+  }
+
+  @media(max-width: 900px) {
+    margin-top: 12px;
+  }
+}
+
+#fullscreenButton {
+  @media(max-width: 900px) {
+    width: 28px;
+    height: 28px;
+    margin-right: 0;
+    padding-right: 0;
+    overflow: hidden;
+    font-size: 0;
+  }
+}
+
+#scaleSelectContainer {
+  @media(max-width: 900px) {
+    display: none;
+  }
+}

app/packs/stylesheets/decidim/participatory_documents/pdf/tweaks.scss

@@ -85,30 +85,6 @@
   text-shadow: 0 0 0 #fff;
 }
 
-#DecidimPDSaveButton {
-  min-width: 110px;
-  height: 44px;
-
-  &::before {
-    display: none;
-  }
-
-  &.alert {
-    background-color: var(--primary);
-    animation: blinker 2s linear infinite;
-  }
-
-  &.loading {
-    &::before {
-      @include spinner(25px, #fff, var(--primary), 800ms);
-
-      margin: -4px 6px 0 -5px;
-      content: "";
-      vertical-align: middle;
-    }
-  }
-}
-
 #globalSuggestionTrigger {
   min-width: 160px;
 
@@ -138,6 +114,15 @@
   &.exit {
     background-image: url(../images/fullscreen_exit.svg);
   }
+
+  @media(max-width: 560px) {
+    width: 28px;
+    height: 28px;
+    margin-right: 0;
+    padding-right: 0;
+    overflow: hidden;
+    font-size: 0;
+  }
 }
 
 #documentProperties.secondaryToolbarButton {