decidim-participatory_documents 0.2.0

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

@@ -0,0 +1,234 @@
+import BoxControls from "./box_controls";
+
+export default class Box {
+  constructor(layer, json) {
+    this.layer = layer;
+    this.json = json || { rect: {} };
+    this.id = this.json.id || -Object.keys(layer.boxes).length;
+    this.section = this.json.section || 0;
+    this.sectionNumber = this.json.section_number || 0;
+    this.createBox(this.id, this.json.position, this.json.rect);
+    this.setInfo();
+    this._bindEvents();
+    // console.log("box constructor", this);
+    // events
+    this.onClick = () => {};
+    this.onBlur = () => {};
+    this.onEnter = () => {};
+    this.onLeave = () => {};
+    this.onDestroy = () => {};
+    this.onChange = () => {};
+  }
+
+  // Creates a box using percentanges, with and height are optional
+  createBox(id, position, {left, top, width, height}) {
+    this.div = document.createElement("div");
+    this.div.draggable = false;
+    this.div.id = `box-${id || Date.now()}`;
+    this.div.dataset.position = position || this._getNextPosition();
+    this.setSection(this.section, this.sectionNumber);
+    this.div.classList.add("box");
+    this.div.style.left = `${this._sanitizePercent(left)}%`;
+    this.div.style.top = `${this._sanitizePercent(top)}%`;
+    // 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");
+    span.innerHTML = this.div.dataset.position;
+    this.div.appendChild(span)
+    this.layer.div.appendChild(this.div);
+  }
+
+  setSection(section, sectionNumber) {
+    if (section) {
+      this.div.dataset.sectionNumber = sectionNumber || this._getNextSectionNumber();
+      this.div.dataset.section = section;
+    } else {
+      // ensure a new section will be created in the next save
+      this.div.dataset.sectionNumber = this.sectionNumber || this._getNextSectionNumber();
+      this.div.dataset.section = this.section;
+    }
+  }
+
+  createControls() {
+    this.controls = new BoxControls(this);
+    this.resize = new ResizeObserver(this._resize.bind(this));
+    this.resize.observe(this.div);
+  }
+
+  getRect() {
+    return {
+      left: parseFloat(this.div.style.left) || 0,
+      top: parseFloat(this.div.style.top) || 0,
+      width: this._ensureCssPercent(this.div.style.width, this.div.ClientWidth),
+      height: this._ensureCssPercent(this.div.style.height, this.div.ClientHeight)
+    }
+  }
+
+  getInfo() {
+    return {
+      id: this.id,
+      // Section in the dataset can be manipulated by the group editor
+      // this.section is always the original
+      section: this.div.dataset.section,
+      rect: this.getRect()
+    }
+  }
+
+  setInfo(data) {
+    if (data) {
+      if (data.id) {
+        this.layer.removeBox(this)
+        this.id = data.id;
+        this.layer.addBox(this)
+      }
+      this.section = data.section || this.section;
+      this.div.dataset.section = this.section;
+    }
+    if (this.isPersisted()) {
+      this.div.classList.add("persisted");
+    }
+    this.previousInfo = this.getInfo();
+  }
+
+  isPersisted() {
+    return this.id && this.id > 0;
+  }
+
+  isMoving() {
+    return this.div.classList.contains("moving");
+  }
+
+  isGrouping() {
+    return document.querySelectorAll(".polygon-ready .box.grouping").length;
+  }
+
+  isResizing() {
+    return this.div.classList.contains("resizing");
+  }
+
+  _getNextPosition() {
+    return document.querySelectorAll(".polygon-ready .box").length + 1;
+  }
+
+  _getNextSectionNumber() {
+    let positions = new Set();
+    document.querySelectorAll(".polygon-ready .box").forEach((div) => positions.add(div.dataset.sectionNumber));
+    return positions.size + 1;
+  }
+
+  _ensureCssPercent(num, max) {
+    if (num.indexOf("%") !== -1) {
+      return parseFloat(num);
+    }
+    return this._sanitizePercent(100 * parseFloat(num) / max);
+
+  }
+
+  _sanitizePercent(num, min = 0, max = 100) {
+    return Math.min(Math.max(parseFloat(num), min), max);
+  }
+
+  _bindEvents() {
+    this.div.addEventListener("mouseenter", this._mouseEnter.bind(this));
+    this.div.addEventListener("mouseleave", this._mouseLeave.bind(this));
+    this.div.addEventListener("mouseup", this._mouseUp.bind(this));
+    this.div.addEventListener("click", this._click.bind(this));
+  }
+
+  _click(evt) {
+    if (!this.layer.creating && !this.isMoving() && !this.isGrouping() && !this.isResizing()) {
+      // console.log("box click", evt, this);
+      evt.stopPropagation();
+      this.onClick(evt);
+      window.addEventListener("click", this._blur.bind(this), { once: true });
+    }
+  }
+
+  _blur(evt) {
+    if (!this.layer.creating) {
+      this.onBlur(evt);
+    }
+  }
+
+  _mouseEnter(evt) {
+    if (!this.layer.creating && !this.isGrouping()) {
+      this.blockSibilings();
+      this.div.classList.add("hover");
+      this.focusGroup();
+      this.onEnter(evt);
+      // console.log("box mousenter", evt, "widht/height", this.div.style.width, this.div.style.height);
+    }
+  }
+
+  _mouseLeave(evt) {
+    if (!this.layer.creating && !this.isGrouping()) {
+      this.div.classList.remove("hover", "resizing");
+      this.blurGroup()
+      this.unBlockSibilings();
+      this.onLeave(evt);
+      // console.log("box mouseleave", evt);
+    }
+  }
+
+  _mouseUp() {
+    if (!this.layer.creating) {
+      console.log("mouseup", this.hasChanged())
+      // delay changing resizing status to avoid triggering the click event in the box
+      setTimeout(() => this.div.classList.remove("resizing"), 100);
+      if (this.hasChanged()) {
+        this.setInfo();
+        this.onChange();
+      }
+    }
+  }
+
+  _resize(entries) {
+    if (!this.layer.creating && this.div.classList.contains("hover")) {
+      this.div.classList.add("resizing")
+      let width = `${100 * entries[0].contentRect.width / this.layer.div.clientWidth}%`;
+      let height = `${100 * entries[0].contentRect.height / this.layer.div.clientHeight}%`;
+      // console.log("box resize", entries, this.div.style.width, this.div.style.height, "calculated", width, height);
+      this.div.style.width = width;
+      this.div.style.height = height;
+    }
+  }
+
+
+  hasChanged() {
+    return JSON.stringify(this.getInfo()) !== JSON.stringify(this.previousInfo);
+  }
+
+  // Not using getNodes because groups can span across layers
+  focusGroup() {
+    document.querySelectorAll(".polygon-ready .box").forEach((div) => div.dataset.sectionNumber === this.div.dataset.sectionNumber && div.classList.add("focus"));
+  }
+
+  blurGroup() {
+    document.querySelectorAll(".polygon-ready .box").forEach((div) => div.classList.remove("focus"));
+  }
+
+  blockSibilings() {
+    document.querySelectorAll(".polygon-ready").forEach((layer) => {
+      layer.classList.add("blocked");
+      layer.querySelectorAll(".box").forEach((div) => div.id !== this.div.id && div.classList.add("blocked"));
+    });
+  }
+
+  unBlockSibilings() {
+    document.querySelectorAll(".polygon-ready").forEach((layer) => {
+      layer.classList.remove("blocked");
+      layer.querySelectorAll(".box").forEach((div) => div.classList.remove("blocked"));
+    });
+  }
+
+  destroy() {
+    this.div.remove();
+    this.resize.disconnect();
+    this.onDestroy();
+  }
+}

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

@@ -0,0 +1,80 @@
+export default class BoxControlGroup {
+  constructor(control) {
+    this.control = control;
+    this.box = control.box;
+    this.layer = control.box.layer;
+    this.div = document.createElement("div");
+    this.div.classList.add("control", "group");
+    this.div.title = this.layer.i18n.group;
+    this.control.div.appendChild(this.div);
+    this._bindEvents();
+  }
+
+  _bindEvents() {
+    this.div.addEventListener("click", this._startGrouping.bind(this));
+    this.groupBoxHandler = this._groupBox.bind(this);
+    this.box.div.addEventListener("click", this.groupBoxHandler);
+  }
+
+  _startGrouping(evt) {
+    evt.stopPropagation();
+    if (this.box.div.classList.contains("grouping")) {
+      this._stopGrouping(evt);
+      return;
+    }
+    this.box.div.classList.add("grouping");
+    document.querySelectorAll(".polygon-ready .box").forEach((div) => {
+      // just in case
+      if (div.id !== this.box.div.id) {
+        div.classList.remove("grouping", "mark-group", "focus");
+      }
+      if (div.dataset.sectionNumber === this.box.div.dataset.sectionNumber) {
+        div.classList.add("mark-group");
+      }
+    });
+    // Set all layers with the grouping property so we can join boxes in different layers
+    document.querySelectorAll(".polygon-ready").forEach((div) => {
+      div.classList.add("grouping");
+      div.dataset.groupBoxId = this.box.div.id;
+      div.dataset.groupBoxSection = this.box.div.dataset.section;
+      div.dataset.groupBoxNumber = this.box.div.dataset.sectionNumber;
+    });
+    window.addEventListener("click", this._stopGrouping.bind(this), { once: true });
+    window.addEventListener("keydown", (keyEvent) => {
+      if (keyEvent.key === "Escape" || keyEvent.keyCode === 27) {
+        this._stopGrouping(keyEvent);
+      }
+    }, { once: true });
+    console.log("start grouping", evt, this);
+  }
+
+  _stopGrouping(evt) {
+    evt.stopPropagation();
+    this.box.div.removeEventListener("click", this.groupBoxHandler);
+    document.querySelectorAll(".polygon-ready .box").forEach((div) => div.classList.remove("mark-group", "hover", "blocked", "grouping", "focus"));
+    document.querySelectorAll(".polygon-ready").forEach((div) => div.classList.remove("grouping"));
+    console.log("stop grouping", evt, this);
+  }
+
+  _groupBox(evt) {
+    console.log("group box", this)
+    evt.stopPropagation();
+    if (this.box.isGrouping() && this.layer.div.dataset.groupBoxId !== this.box.div.id) {
+      if (this.box.div.dataset.sectionNumber === this.layer.div.dataset.groupBoxNumber) {
+        this.box.div.classList.remove("mark-group");
+        if (this.box.sectionNumber === parseInt(this.layer.div.dataset.groupBoxNumber, 10)) {
+          console.log("reset to original", this.box)
+          // reset section to the original
+          this.box.setSection(-1);
+        } else {
+          this.box.setSection(this.box.section, this.box.sectionNumber);
+        }
+      } else {
+        this.box.div.classList.add("mark-group");
+        this.box.setSection(this.layer.div.dataset.groupBoxSection, this.layer.div.dataset.groupBoxNumber);
+      }
+      this.box.onChange();
+      // console.log("group this", this.layer.div.dataset.groupBoxId, this.box.div.id, evt, this.box.div.dataset.sectionNumber);
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+export default class BoxControlMove {
+  constructor(control) {
+    this.control = control;
+    this.box = control.box;
+    this.layer = control.box.layer;
+    this.left = 0;
+    this.top = 0;
+    this.div = document.createElement("div");
+    this.div.classList.add("control", "move");
+    this.div.title = this.layer.i18n.move;
+    this.control.div.appendChild(this.div);
+    this._bindEvents();
+  }
+
+  _bindEvents() {
+    this.div.addEventListener("mousedown", this._startMoving.bind(this));
+  }
+
+  _startMoving(evt) {
+    evt.stopPropagation();
+    this.box.div.classList.add("moving");
+    this.left = this.layer.div.getBoundingClientRect().x + evt.layerX;
+    // We need to substract the controls height because is aligned at the bottom
+    this.top = this.layer.div.getBoundingClientRect().y + this.box.div.clientHeight - this.div.clientHeight + evt.layerY;
+    // Binding mouseup and mousemove to the entire window so it works even if the mouse is outside the box
+    window.addEventListener("mouseup", this._stopMoving.bind(this), { once: true });
+    this.moveHandler = this._move.bind(this);
+    window.addEventListener("mousemove", this.moveHandler);
+    // console.log("start moving", evt, this.box.div.style.left, this.box.div.style.top, this);
+  }
+
+  _stopMoving(evt) {
+    evt.stopPropagation();
+    window.removeEventListener("mousemove", this.moveHandler);
+    // delay removing the moving class to avoid triggering the click event in the box
+    setTimeout(() => {
+      this.box.setInfo();
+      this.box.div.classList.remove("moving")
+    }, 100);
+    // console.log("stop moving", evt, this);
+  }
+
+  _move(evt) {
+    if (this.box.isMoving()) {
+      evt.stopPropagation();
+      let width = evt.clientX - this.left;
+      let height = evt.clientY - this.top;
+      let mousePercentLeft = (100 * width / this.layer.div.clientWidth)
+      let mousePercentTop = (100 * height / this.layer.div.clientHeight)
+      this.box.div.style.left = `${mousePercentLeft}%`;
+      this.box.div.style.top = `${mousePercentTop}%`;
+      // console.log("moving", evt, mousePercentLeft, mousePercentTop, this);
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import BoxControlMove from "./box_control_move";
+import BoxControlGroup from "./box_control_group";
+
+export default class BoxControls {
+  constructor(box) {
+    this.box = box;
+    this.createControls();
+  }
+
+  createControls() {
+    this.div = document.createElement("div");
+    this.div.classList.add("box-controls");
+    this.box.div.appendChild(this.div);
+    this.box.div.classList.add("admin")
+    this.mover = new BoxControlMove(this);
+    this.grouper = new BoxControlGroup(this);
+  }
+}

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

@@ -0,0 +1,129 @@
+/* eslint-disable no-alert */
+export default class PdfModalManager {
+  constructor(options) {
+    this.i18n = options.i18n;
+    this.editSectionPath = options.editSectionPath;
+    this.annotationsPath = options.annotationsPath;
+    this.pdfViewer = options.pdfViewer;
+    this.csrfToken = options.csrfToken;
+    // UI
+    this.modalLayout = document.getElementById("decidim");
+    // events
+    this.onSave = () => {};
+    this.onDestroy = () => {};
+    this.onError = () => {};
+    this.onCancel = () => {};
+  }
+
+  loadBoxModal(box) {
+    $.ajax({
+      url: this.editSectionPath(box.section),
+      type: "GET"
+    }).done((data) => this.populateModal(data, box)).
+      fail((error) => this.onError(box, error));
+  }
+
+  populateModal(data, box) {
+    this.modalLayout.innerHTML = data;
+    this.displayModal(box);
+  }
+
+  displayModal(box) {
+    const uiSave = document.getElementById("editor-modal-save");
+    const uiClose = document.getElementById("editor-modal-close");
+    const uiTitle = document.getElementById("editor-modal-title");
+    const uiRemove = document.getElementById("editor-modal-remove");
+    uiTitle.innerHTML = this.i18n.modalTitle.replace("%{box}", box.div.dataset.position).replace("%{section}", box.sectionNumber);
+
+    this.modalLayout.classList.add("show");
+    $(this.modalLayout).foundation();
+
+    uiClose.addEventListener("click", this._closeHandler.bind(this), { once: true });
+    uiRemove.addEventListener("click", (evt) => this._removeHandler(box, evt), { once: true });
+    uiSave.addEventListener("click", (evt) => this._saveHandler(box, evt), { once: true });
+  }
+
+  createBox(box, page) {
+    let body = box.getInfo();
+    body.pageNumber = page;
+
+    fetch(this.annotationsPath, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+        "X-CSRF-Token": this.csrfToken
+      },
+      credentials: "include",
+      body: JSON.stringify(body)
+    }).
+      then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw new Error(" ");
+      }).
+      then((resp) => {
+        box.setInfo();
+        this.onSave(box, resp.data);
+      }).
+      catch((error) => {
+        console.error("Error creating box, removing it from the UI", error);
+        box.destroy();
+        this.onError(box, error);
+      });
+  }
+
+  _saveHandler(box, evt) {
+    evt.stopPropagation();
+    let $form = $(this.modalLayout).find("form");
+
+    $.ajax({
+      type: $form.attr("method"),
+      url: $form.attr("action"),
+      data: $form.serialize()
+    }).done(() => {
+      this.modalLayout.classList.remove("show");
+      this.createBox(box, this.pdfViewer.currentPageNumber);
+    }).
+      fail((data) => this.populateModal(data.responseText, box));
+  }
+
+  _removeHandler(box, evt) {
+    evt.stopPropagation();
+
+    if (confirm(this.i18n.removeBoxConfirm)) {
+      // Do not call ajax if not persisted
+      if (box.isPersisted()) {
+        fetch(`${this.annotationsPath}/${box.id}`, {
+          method: "DELETE",
+          headers: {
+            "X-CSRF-Token": this.csrfToken
+          },
+          credentials: "include"
+        }).
+          then((response) => {
+            if (response.ok) {
+              return response.json();
+            }
+            throw new Error(" ");
+          }).
+          then(() => {
+            box.destroy();
+            this.onDestroy(box);
+          }).
+          catch((error) => {
+            this.onError(box, error);
+          });
+      } else {
+        box.destroy();
+      }
+      this.modalLayout.classList.remove("show");
+    }
+  }
+
+  _closeHandler(evt) {
+    evt.stopPropagation();
+    this.modalLayout.classList.remove("show");
+  }
+}

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

@@ -0,0 +1,141 @@
+/*
+ * This class handles the global state of the PDF document while it is being edited.
+ * It keeps track of the boxes that have been modified and it changes some UI classes
+ * */
+export default class PdfStateManager {
+  constructor(options) {
+    this.changes = [];
+    this.element = options.saveButton;
+    this.i18n = options.i18n;
+    this.csrfToken = options.csrfToken;
+    this.pdfViewer = options.pdfViewer;
+    this.annotationsPath = options.annotationsPath;
+    this.bindEvents();
+    // events
+    this.onSave = () => {};
+    this.onError = () => {};
+  }
+
+  add(box) {
+    let index = this.changes.indexOf(box.id);
+    if (index === -1) {
+      this.changes.push(box.id);
+      this.setDirty();
+    }
+  }
+
+  remove(box) {
+    let index = this.changes.indexOf(box.id);
+    if (index >= 0) {
+      this.changes.splice(index, 1);
+      if (this.isEmpty()) {
+        this.reset();
+      }
+    }
+    console.log(this.pdfViewer._pages)
+    this.pdfViewer._pages.
+      filter((page) => page.boxEditor).
+      filter((page) => page.boxEditor.removeBox(box));
+  }
+
+  isEmpty() {
+    return this.changes.length === 0;
+  }
+
+  bindEvents() {
+    this.element.addEventListener("click", this._saveHandler.bind(this));
+  }
+
+  setDirty() {
+    // console.log("setDirty", this)
+    if (this.element) {
+      this.element.classList.add("alert");
+    }
+    if (!this.beforeUnloadHandler) {
+      // create a global reference to ensure the method is the same on adding and removing
+      this.beforeUnloadHandler = this._beforeUnload.bind(this);
+      window.addEventListener("beforeunload", this.beforeUnloadHandler, { capture: true });
+    }
+  }
+
+  reset() {
+    this.changes = [];
+    if (this.element) {
+      this.element.classList.remove("alert");
+      this.element.classList.remove("loading");
+    }
+
+    window.removeEventListener("beforeunload", this.beforeUnloadHandler, { capture: true });
+    this.beforeUnloadHandler = null;
+  }
+
+
+  _beforeUnload(evt) {
+    if (!this.isEmpty()) {
+      evt.returnValue = this.i18n.confirmExit;
+    }
+  }
+
+  _saveHandler(evt) {
+    evt.preventDefault();
+    if (this.element.classList.contains("loading")) {
+      return;
+    }
+    this.element.classList.add("loading");
+    this.processed = {};
+    this.errors = {};
+    this.totalBoxes = 0;
+    this.pdfViewer._pages.
+      filter((page) => page.boxEditor).
+      filter((page) => Object.keys(page.boxEditor.boxes).length > 0).
+      forEach((page) => Object.values(page.boxEditor.boxes).map((box) => this._updateOrCreateBox(box, page.id)));
+  }
+
+  _updateOrCreateBox(box, page) {
+    let body = box.getInfo();
+    body.page_number = page; // eslint-disable-line camelcase
+    this.totalBoxes += 1;
+
+    fetch(this.annotationsPath, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+        "X-CSRF-Token": this.csrfToken
+      },
+      credentials: "include",
+      body: JSON.stringify(body)
+    }).
+      then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+
+        throw new Error(" ");
+      }).
+      then((resp) => {
+        box.setInfo(resp.data);
+        this._setProcessed(box, resp.data);
+      }).
+      catch((error) => {
+        this._setProcessed(box, null, error);
+      });
+  }
+
+  _setProcessed(box, data, error) {
+    if (data) {
+      this.processed[box.id] = data;
+    } else {
+      this.errors[box.id] = error;
+    }
+
+    if (Object.keys(this.processed).length + Object.keys(this.errors).length === this.totalBoxes) {
+      this.reset();
+      if (Object.keys(this.errors).length > 0) {
+        this.onError(this.errors);
+      } else {
+        this.onSave(this.processed);
+      }
+    }
+  }
+}