decidim-participatory_documents 0.2.0

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

@@ -0,0 +1,99 @@
+import PolygonViewer from "./polygon_viewer";
+import Box from "./box";
+
+export default class PolygonEditor extends PolygonViewer {
+  constructor(div, boxes, options) {
+    super(div, boxes, options);
+    this.div.classList.add("admin");
+    this.box = null;
+    this.creating = false;
+    this.top = 0;
+    this.left = 0;
+  }
+
+  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));
+    this.div.addEventListener("mousemove", this._mouseMove.bind(this));
+    this.div.addEventListener("mouseup", this._mouseUp.bind(this));
+  }
+
+  isBlocked() {
+    return this.div.classList.contains("blocked");
+  }
+
+  removeBox(box) {
+    Reflect.deleteProperty(this.boxes, box.id);
+  }
+
+  _mouseDown(evt) {
+    if (!this.creating && !this.isBlocked()) {
+      this.blockBoxes();
+      this.box = this._createBoxFromMouseEvent(evt);
+      this.creating = true;
+      this.left = this.div.getBoundingClientRect().x;
+      this.top = this.div.getBoundingClientRect().y;
+      // disable mouse events on all children
+      console.log("mousedown", "evt", evt,  "this", this, "box div", this.box.div);
+    }
+  }
+
+  _mouseMove(evt) {
+    if (!this.isBlocked() && this.creating && this.box) {
+      let width = evt.clientX - this.left - 9;
+      let height = evt.clientY - this.top - 9;
+      let boxPercentLeft = parseInt(this.box.div.style.left, 10);
+      let boxPercentTop = parseInt(this.box.div.style.top, 10);
+      let mousePercentLeft = 100 * width / this.div.clientWidth;
+      let mousePercentTop = 100 * height / this.div.clientHeight;
+      this.box.div.style.width = `${mousePercentLeft - boxPercentLeft}%`;
+      this.box.div.style.height = `${mousePercentTop - boxPercentTop}%`;
+      // console.log('mousemove', evt,"mousePercent", mousePercentLeft,mousePercentTop, "box",this.box);
+    }
+  }
+  
+  _mouseUp() {
+    if (!this.isBlocked() && this.creating && this.box) {
+      this.box.div.classList.remove("creating");
+      if (this.box.div.clientWidth <= 5 && this.box.div.clientHeight <= 5) {
+        this.box.div.remove();
+        this.box = null;
+      } else {
+        this._initBox();
+      }
+      // console.log('mouseup', evt, "box", this.box.div);
+      this.creating = false;
+      this.unBlockBoxes();
+    }
+  }
+
+  _createBoxFromMouseEvent(evt) {
+    const {left, top} = this.div.getBoundingClientRect();
+    let width = evt.clientX - left - 3;
+    let height = evt.clientY - top - 3;
+    let mousePercentLeft = 100 * width / this.div.clientWidth;
+    let mousePercentTop = 100 * height / this.div.clientHeight;
+    // % corresponding to 1px
+    width = 1 / this.div.clientWidth;
+    height = 1 / this.div.clientHeight;
+
+    return new Box(this, { rect: { left: mousePercentLeft, top: mousePercentTop, width: width, height: height} });
+  }
+
+  _initBox() {
+    console.log("init box", this.box)
+    if (!this.boxes[this.box.id]) {
+      this.box.createControls();
+      this.bindBoxEvents(this.box);
+      this.box.setInfo();
+      this.box.onChange();
+      this.boxes[this.box.id] = this.box;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import Box from "./box";
+
+export default class PolygonViewer {
+  constructor(div, json, options) {
+    this.div = div;
+    this.json = json && json.length && json || [];
+    this.boxes = {};
+    this.i18n = options.i18n;
+    // events
+    this.onBoxClick = () => {};
+    this.onBoxBlur = () => {};
+    this.onBoxEnter = () => {};
+    this.onBoxLeave = () => {};
+    this.onBoxDestroy = () => {};
+    this.onBoxChange = () => {};
+    this.init();
+  }
+
+  init() {
+    // 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));
+      this.bindBoxEvents(this.boxes[box.id]);
+    });
+  }
+
+  // return all boxes in this layer
+  getBoxes() {
+    return Object.keys(this.boxes).map((id) => this.boxes[id]);
+  }
+
+  bindBoxEvents(box) {
+    box.onClick = (evt) => this.onBoxClick(box, evt);
+    box.onBlur = (evt) => this.onBoxBlur(box, evt);
+    box.onEnter = (evt) => this.onBoxEnter(box, evt);
+    box.onLeave = (evt) => this.onBoxLeave(box, evt);
+    box.onDestroy = (evt) => this.onBoxDestroy(box, evt);
+    box.onChange = (evt) => this.onBoxChange(box, evt);
+  }
+
+  blockBoxes() {
+    this.div.querySelectorAll(".box").forEach((div) => div.classList.add("blocked"));
+  }
+
+  unBlockBoxes() {
+    this.div.querySelectorAll(".box").forEach((div) => div.classList.remove("blocked"));
+  }
+
+  addBox(box) {
+    this.boxes[box.id] = box;
+  }
+}

data/app/packs/src/decidim/participatory_documents/pdf/suggestion_form.js

@@ -0,0 +1,142 @@
+export default class SuggestionForm {
+  constructor(div, path, group = null) {
+    this.path = path;
+    this.group = group;
+    this.div = div;
+  }
+
+  open() {
+    if (this.div.classList.contains("active")) {
+      this.close(() => this.open());
+    } else {
+      // console.log("open!", "group:", this.group)
+      this.div.classList.add("active");
+      if (this.group) {
+        this.div.classList.add("section");
+      } else {
+        this.div.classList.add("document");
+      }
+    }
+  }
+
+  close(callback = () => {}) {
+    this.div.classList.remove("active");
+    this.div.addEventListener("transitionend", () => {
+      this.div.classList.remove("section", "document");
+      // console.log("end transition", this.div.classList);
+      if (callback) {
+        setTimeout(() => callback());
+      }
+    }, { once: true });
+  }
+
+  getCSRFToken() {
+    const token =  document.getElementsByName("csrf-token")
+
+    return token.length && token[0].content;
+  }
+
+  // Sanitize internal path
+  getPath() {
+    return this.path.split("?")[0];
+  }
+
+  getQueryString() {
+    return this.path.indexOf("?") === -1 // eslint-disable-line no-ternary
+      ? ""
+      : `?${this.path.split("?")[1]}`
+  }
+
+  getGroupUrl() {
+    if (this.group === null) {
+      return `${this.getPath()}/suggestions${this.getQueryString()}`;
+    }
+    return `${this.getPath()}/sections/${this.group}/suggestions${this.getQueryString()}`;
+
+  }
+
+  scrollToEnd() {
+    this.div.scrollTop = this.div.scrollHeight;
+  }
+
+  populateArea(data) {
+    this.div.innerHTML = data;
+    this.addCloseHandler();
+    this.addFormHandler();
+    this.scrollToEnd();
+  }
+
+  addCloseHandler() {
+    let close = document.getElementById("close-suggestions");
+
+    if (close) {
+      close.addEventListener("click", () => {
+        this.close();
+      }, { once: true });
+    }
+  }
+
+  addFormHandler() {
+    let form = document.getElementById("new_suggestion_");
+    if (form) {
+      let fileInput = document.getElementById("file-upload-field");
+      let fileNameContainer = document.getElementById("fileNameContainer");
+
+      if (fileInput) {
+        fileInput.addEventListener("change", () => {
+          if (fileInput.files.length > 0) {
+            fileNameContainer.textContent = fileInput.files[0].name;
+          } else {
+            fileNameContainer.textContent = "";
+          }
+        });
+      }
+
+      form.addEventListener("submit", (event) => {
+        event.preventDefault();
+
+        let formData = new FormData(event.target);
+
+        fetch(event.target.action, {
+          method: event.target.method,
+          body: formData,
+          headers: {
+            "X-CSRF-Token": this.getCSRFToken()
+          },
+          credentials: "include"
+        }).then((response) => {
+          return response.text();
+        }).then((data) => {
+          this.div.innerHTML = data;
+          this.addFormHandler();
+          this.addCloseHandler();
+        }).catch((error) => {
+          console.error(error);
+        });
+      });
+      document.getElementById("suggestion_body").focus();
+    }
+  }
+
+  fetchGroup() {
+    fetch(this.getGroupUrl(), {
+      headers: {
+        "Content-Type": "text/html; charset=utf-8",
+        "Accept": "text/html"
+      },
+      credentials: "include"
+      // body: JSON.stringify(data)
+    }).then((response) => {
+      if (response.ok) {
+        return response.text();
+      }
+      throw new Error(response);
+    }).
+      then((data) => {
+        this.populateArea(data);
+      }).
+      catch((error) => {
+        console.error(error);
+      });
+  }
+}

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

@@ -0,0 +1,37 @@
+import PolygonViewer from "src/decidim/participatory_documents/pdf/polygon_viewer";
+import SuggestionForm from "src/decidim/participatory_documents/pdf/suggestion_form";
+import "src/decidim/participatory_documents/pdf_notifications";
+import "src/decidim/participatory_documents/global";
+
+window.currentSuggestionForm = null;
+window.InitDocumentManagers = (options) => {
+  options.globalSuggestionsButton.addEventListener("click", (evt) => {
+    evt.stopPropagation();
+    if (window.currentSuggestionForm && !window.currentSuggestionForm.group && window.currentSuggestionForm.div.classList.contains("active")) {
+      window.currentSuggestionForm.close();
+    } else {
+      window.currentSuggestionForm = new SuggestionForm(options.participationLayout, options.documentPath, null);
+      window.currentSuggestionForm.fetchGroup();
+      window.currentSuggestionForm.open();
+    }
+  });
+};
+
+// Call this on an annotation layer to initialize the polygon viewer (public side)
+window.InitPolygonViewer = (layer, boxes, options) => {
+  let viewer = new PolygonViewer(layer, boxes, { i18n: options.i18n});
+
+  viewer.onBoxClick = (box, evt) => {
+    console.log("click on box", box, evt);
+    window.currentSuggestionForm = new SuggestionForm(options.participationLayout, options.documentPath, box.section);
+    window.currentSuggestionForm.open();
+    window.currentSuggestionForm.fetchGroup();
+  }
+
+  viewer.onBoxBlur = (box, evt) => {
+    console.log("click outside box", box, evt);
+    window.currentSuggestionForm.close();
+  };
+
+  return viewer;
+};

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

@@ -0,0 +1,60 @@
+/* eslint-disable max-params */
+
+import "src/decidim/participatory_documents/global";
+import "src/decidim/participatory_documents/pdf_notifications";
+import PolygonEditor from "src/decidim/participatory_documents/pdf/polygon_editor";
+import PdfStateManager from "src/decidim/participatory_documents/pdf/pdf_state_manager";
+import PdfModalManager from "src/decidim/participatory_documents/pdf/pdf_modal_manager";
+
+
+window.InitDocumentManagers = (options) => {
+  window.PdfDocStateManager = new PdfStateManager(options);
+  // show message when saving
+  window.PdfDocStateManager.onSave = () => {
+    window.showInfo(options.i18n.allSaved);
+  };
+  window.PdfDocStateManager.onError = (errors) => {
+    window.showAlert(options.i18n.errorsSaving);
+    console.error("State Manager Errors:", errors);
+  };
+
+  window.PdfModalManager = new PdfModalManager(options);
+
+  // remove box from the global state manager if edited though the modal
+  window.PdfModalManager.onSave = (box) => {
+    window.PdfDocStateManager.remove(box);
+    window.showInfo(options.i18n.created);
+  };
+  window.PdfModalManager.onDestroy = (box) => {
+    window.PdfDocStateManager.remove(box);
+    window.showInfo(options.i18n.removed);
+  };
+  window.PdfModalManager.onError = (box, error) => {
+    window.showAlert(options.i18n.operationFailed);
+    console.error("Modal Manager Error:", error);
+  };
+};
+
+// Call this on an annotation layer to initialize the polygon editor (admin side)
+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) => {
+    if (box.isPersisted()) {
+      window.PdfModalManager.loadBoxModal(box);
+    } else {
+      window.showAlert(options.i18n.needsSaving);
+    }
+  };
+  // update the global state manager when a box is edited or destroyed using the polygon editor (mouse interaction)
+  editor.onBoxChange = (box) => {
+    window.PdfDocStateManager.add(box);
+    changeCallback(box);
+  };
+  editor.onBoxDestroy = (box) => {
+    window.PdfDocStateManager.remove(box);
+    changeCallback(box);
+  };
+
+  return editor;
+};

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

@@ -0,0 +1,20 @@
+window.showInfo = (title, options = {}) => {
+  const info = document.getElementById("notifications");
+  info.innerHTML = title;
+  info.classList.add("show");
+  info.classList.remove("alert");
+  if (options && options.class) {
+    info.classList.add(options.class);
+  }
+  if (window.notificationTimeout) {
+    clearTimeout(window.notificationTimeout);
+  }
+  window.notificationTimeout = setTimeout(() => {
+    info.classList.remove("show")
+  }, options && options.delay || 3000);
+};
+
+window.showAlert = (title, options = {}) => {
+  options.class = "alert"
+  window.showInfo(title, options);
+};

data/app/packs/src/decidim/participatory_documents/skip_cookie_warning.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-plusplus */
+
+document.addEventListener("DOMContentLoaded", () => {
+  const original = document.getElementById("pdf-iframe");
+
+  if (original) {
+    original.outerHTML = original.outerHTML.replace(/^<pdf-iframe/, "<iframe") +
+                         original.outerHTML.replace(/pdf-iframe>$/, "iframe>");
+  }
+});

data/app/packs/stylesheets/decidim/participatory_documents/decidim_admin_classes.scss

@@ -0,0 +1,13 @@
+@import "stylesheets/decidim/admin/variables";
+@import "stylesheets/decidim/utils/fontface";
+@import "stylesheets/decidim/admin/utils/settings";
+
+// @import "stylesheets/decidim/admin/utils/helpers";
+// @import "stylesheets/decidim/admin/utils/keyframes";
+@import "foundation-sites/scss/foundation";
+@import "stylesheets/foundation-overrides/components/button-group";
+
+@include foundation-everything();
+
+@import "stylesheets/decidim/admin/utils/mixins";
+@import "stylesheets/decidim/admin/modules/modules";

data/app/packs/stylesheets/decidim/participatory_documents/pdf/admin_modals.scss

@@ -0,0 +1,41 @@
+@use "sass:meta";
+
+@import "stylesheets/decidim/admin/variables";
+@import "stylesheets/decidim/utils/fontface";
+@import "stylesheets/decidim/admin/utils/settings";
+
+@keyframes blinker {
+  50% {
+    background-color: rgba(var(--primary-rgb), .6);
+  }
+}
+
+#decidim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100000;
+  display: none;
+  margin: 0;
+  padding: 0;
+  font-family: $body-font-family;
+  font-weight: $global-weight-normal;
+  line-height: $global-lineheight;
+  color: $body-font-color;
+
+  @include meta.load-css("stylesheets/decidim/participatory_documents/decidim_admin_classes.scss");
+
+  &.show {
+    display: block;
+
+    .reveal-overlay {
+      display: block;
+
+      .reveal {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+.box {
+  // Make the resize a little bit more visible
+  // Note: hidden until "hover" class is set
+  &::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, transparent 0, transparent 45%, #fff 80%);
+  }
+
+  &.hover {
+    resize: both;
+    // In order to resize to work, it needs to have overflow
+    // but this clips the elements outside
+    overflow: hidden;
+
+    &::after {
+      content: "";
+    }
+
+    &::before {
+      left: 0;
+    }
+
+    & > span {
+      display: block;
+    }
+
+    .box-controls {
+      display: block;
+    }
+  }
+
+  &.blocked {
+    & > span {
+      display: block;
+    }
+  }
+
+  &.grouping {
+    .box-controls {
+      .control.group {
+        background-color: red;
+        animation: blinker 2s linear infinite;
+
+        &::after {
+          background-color: white;
+          animation: blinker 2s linear infinite;
+        }
+      }
+    }
+  }
+
+  // Non persisted cannot group yet (although we could refactor to allow it)
+  &.persisted {
+    .box-controls {
+      .control.group {
+        display: inline-block;
+      }
+    }
+  }
+
+  // Admin controls
+  .box-controls {
+    position: absolute;
+    display: none;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    max-height: 44px;
+    overflow: hidden;
+
+    .control {
+      background: #fffe;
+      display: inline-block;
+      position: relative;
+      width: 40px;
+      height: 36px;
+      margin: 0 3px;
+      padding: 2px;
+      border-radius: 5px;
+
+      &:hover {
+        transform: scale(.9);
+        opacity: .8;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--box-color);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-size: 37px 37px;
+        -webkit-mask-position: 4px 2px;
+        mask-repeat: no-repeat;
+        mask-size: 37px 37px;
+        mask-position: 4px 2px;
+      }
+
+      &.group {
+        cursor: cell;
+        display: none;
+
+        &::after {
+          -webkit-mask-image: url(../images/group.svg);
+          -webkit-mask-size: 30px 30px;
+          -webkit-mask-position: 7px 5px;
+          mask-image: url(../images/group.svg);
+          mask-size: 30px 30px;
+          mask-position: 7px 5px;
+        }
+      }
+
+      &.move {
+        cursor: move;
+
+        &::after {
+          -webkit-mask-image: url(../images/move.svg);
+          mask-image: url(../images/move.svg);
+        }
+      }
+    }
+  }
+}

data/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;
+  }
+}

data/app/packs/stylesheets/decidim/participatory_documents/pdf/defaults.scss

@@ -0,0 +1,7 @@
+:root {
+  --box-text-color: #fff;
+  --box-color: rgb(30, 152, 215);
+  --box-color-rgba: rgba(30, 152, 215, .12);
+  --notifications-color-rgba: rgba(30, 152, 215, .6);
+  --suggestions-modal-color-hsla: hsla(213, 48%, 90%, .95);
+}

data/app/packs/stylesheets/decidim/participatory_documents/pdf/document.scss

@@ -0,0 +1,7 @@
+.pdf-viewer-container,
+.pdf-viewer-container iframe {
+  height: calc(100vh - 30rem);
+  min-height: 50em;
+  margin: 0;
+  padding: 0 0 2em;
+}