decidim-collaborative_texts 0.31.0.rc1

data/app/packs/src/decidim/collaborative_texts/manager.js

@@ -0,0 +1,106 @@
+import confirmDialog from "src/decidim/confirm";
+export default class Manager {
+  constructor(document) {
+    this.document = document;
+    this.suggestions = document.suggestionsList.suggestions;
+    this.doc = document.doc;
+    this.i18n = document.i18n || {};
+    this.div = window.document.getElementsByClassName("collaborative-texts-manager")[0];
+    this.rolloutButton = this.div.querySelector("[data-collaborative-texts-manager-rollout]");
+    this.consolidateButton = this.div.querySelector("[data-collaborative-texts-manager-consolidate]");
+    this.cancelButton = this.div.querySelector("[data-collaborative-texts-manager-cancel]");
+    this.counters = {
+      applied: [...this.div.getElementsByClassName("collaborative-texts-manager-applied")],
+      pending: [...this.div.getElementsByClassName("collaborative-texts-manager-pending")]
+    };
+    this._bindEvents();
+  }
+
+  updateCounters(applied, pending) {
+    this.counters.applied.forEach((counter) => {
+      counter.textContent = applied;
+    });
+    this.counters.pending.forEach((counter) => {
+      counter.textContent = pending;
+    });
+  }
+
+  show() {
+    if (this.div)  {
+      this.div.classList.remove("hidden");
+    }
+  }
+
+  hide() {
+    this.div.classList.add("hidden");
+  }
+
+  cancel() {
+    this.suggestions.forEach((suggestion) => suggestion.restore());
+    this.hide();
+  }
+
+  // Duplicates the body of the document, removing non accepted suggestions
+  // Accepted suggestions nodes are converted to first level nodes
+  cleanBody() {
+    this.container = window.document.createElement("div");
+    this.doc.childNodes.forEach((node) => {
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return;
+      }
+      if (node.classList.contains("collaborative-texts-changes")) {
+        node.childNodes.forEach((child) => this.container.appendChild(child.cloneNode(true)));
+        return;
+      }
+      if ([...node.classList].find((cls) => cls.startsWith("collaborative-texts-"))) {
+        return;
+      }
+      this.container.appendChild(node.cloneNode(true));
+    });
+    return this.container.innerHTML;
+  }
+
+  _save(event) {
+    const draft = !event.target.dataset.collaborativeTextsManagerConsolidate;
+    confirmDialog(draft
+      ? this.i18n.rolloutConfirm
+      : this.i18n.consolidateConfirm).then((accepted) => {
+      if (accepted) {
+        fetch(this.doc.dataset.collaborativeTextsRolloutUrl, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Requested-With": "XMLHttpRequest",
+            "X-CSRF-Token": this.document.csrfToken
+          },
+          body: JSON.stringify({
+            body: this.cleanBody(),
+            accepted: this.document.suggestionsList.getApplied().map((suggestion) => suggestion.id),
+            pending: this.document.suggestionsList.getPending().map((suggestion) => suggestion.id),
+            draft: draft
+          })
+        }).
+          then(async (response) => {
+            const data = await response.json();
+            if (!response.ok) {
+              throw new Error(data.message
+                ? data.message
+                : data);
+            }
+            window.location.href = data.redirect;
+          }).
+          catch((error) => {
+            console.error("Error saving:", error);
+            this.document.alert(error);
+          });
+      }
+    });
+
+  }
+
+  _bindEvents() {
+    this.rolloutButton.addEventListener("click", this._save.bind(this));
+    this.consolidateButton.addEventListener("click", this._save.bind(this));
+    this.cancelButton.addEventListener("click", this.cancel.bind(this));
+  }
+}

data/app/packs/src/decidim/collaborative_texts/selection.js

@@ -0,0 +1,106 @@
+import Editor from "src/decidim/collaborative_texts/editor";
+
+class Selection {
+  constructor(doc) {
+    this.doc = doc;
+    this.selection = window.document.getSelection();
+    this.nodes = [];
+    this.firstNode = null;
+    this.lastNode = null;
+    this.wrapper = null;
+    this.editor = null;
+    this.blocked = false;
+  }
+
+  getRanges() {
+    const ranges = [];
+    for (let idx = 0; idx < this.selection.rangeCount; idx++) { // eslint-disable-line no-plusplus
+      ranges.push(this.selection.getRangeAt(idx));
+    }
+    return ranges;
+  }
+
+  isEditing() {
+    if (!this.blocked) {
+      return false;
+    }
+    if (this.changed()) {
+      return true;
+    }
+    return false;
+  }
+
+  isValid() {
+    if (this.selection.rangeCount === 0 || this.selection.isCollapsed) {
+      return false;
+    }
+    this.detectNodes();
+    if (this.nodes.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  detectNodes() {
+    this.nodes = [];
+    this.firstNode = null;
+    this.lastNode = null;
+    this.getRanges().forEach((range) => {
+      this.doc.nodes.forEach((node, index) => {
+        if (range.intersectsNode(node)) {
+          this.nodes[index] = node;
+          this.firstNode = this.firstNode || node;
+          this.lastNode = node;
+        }
+      });
+    });
+    return this;
+  }
+
+  changed() {
+    return this.editor && !this.editor.saveButton.disabled;
+  }
+
+  scrollIntoView() {
+    if (this.editor) {
+      this.editor.editor.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+    return this;
+  }
+
+  wrap() {
+    this.blocked = true;
+    this.wrapper = window.document.createElement("div");
+    this.wrapper.classList.add("collaborative-texts-selection");
+    this.firstNode.before(this.wrapper);
+    this.nodes.forEach((node) => this.wrapper.appendChild(node));
+    return this;
+  }
+
+  unWrap() {
+    if (this.wrapper) {
+      while (this.wrapper.firstChild) {
+        this.wrapper.parentNode.insertBefore(this.wrapper.firstChild, this.wrapper);
+      }
+      this.wrapper.remove();
+    }
+    return this;
+  }
+
+
+  showEditor() {
+    this.editor = new Editor(this);
+    return this;
+  }
+
+  clear() {
+    this.unWrap();
+    if (this.editor) {
+      this.editor.destroy();
+    }
+    this.blocked = false;
+    return this;
+  }
+}
+
+export default Selection;

data/app/packs/src/decidim/collaborative_texts/suggestion.js

@@ -0,0 +1,243 @@
+export default class Suggestion {
+  constructor(suggestionsList, entry) {
+    this.id = entry.id;
+    this.authorCell = entry.profileHtml;
+    this.suggestionsList = suggestionsList;
+    this.selection = suggestionsList.document.selection;
+    this.templates = suggestionsList.document.templates;
+    this.doc = suggestionsList.doc;
+    this.nodes = [];
+    for (const node of suggestionsList.nodes) {
+      if (node.id === `ct-node-${entry.changeset.firstNode}`) {
+        this.firstNode = node;
+      }
+      if (node.id === `ct-node-${entry.changeset.lastNode}`) {
+        this.lastNode = node;
+      }
+      if (this.firstNode) {
+        this.nodes.push(node);
+      }
+      if (this.lastNode) {
+        break;
+      }
+    }
+    this.replace = entry.changeset.replace;
+    this.summary = entry.summary;
+    this.item = null;
+    this.boxWrapper = null;
+    this.highlightWrapper = null;
+    this.changesWrapper = null;
+    this.applied = false;
+    this.isFirst = false;
+    this.valid = this.nodes.length > 0 && this.firstNode && this.lastNode && Array.isArray(this.replace);
+    if (this.valid) {
+      this._createBoxWrapper();
+      this._createBoxItem();
+      this._bindEvents();
+    }
+  }
+
+  // Get the nodes that are affected by the suggestion
+  siblingSuggestions() {
+    return this.suggestionsList.suggestions.filter((suggestion) => {
+      return suggestion.id !== this.id && suggestion.nodes.some((node) => this.nodes.includes(node));
+    });
+  }
+
+  // wrap affected nodes by the suggestion in a div to temporarily apply the changes
+  // this is used to highlight (or replace) the nodes when hovering the suggestion
+  highlight() {
+    // If applied, just add the style to the changesWrapper
+    if (this.applied) {
+      this.changesWrapper.classList.add("collaborative-texts-highlight");
+      return;
+    }
+    this.highlightWrapper = window.document.createElement("div");
+    this.highlightWrapper.classList.add("collaborative-texts-highlight");
+    this.firstNode.before(this.highlightWrapper);
+    this._hideOriginalNodes("collaborative-texts-highlight-hidden");
+    this.siblingSuggestions().filter((suggestion) => suggestion.applied).forEach((suggestion) => {
+      suggestion.changesWrapper.classList.add("collaborative-texts-highlight-hidden");
+      suggestion.nodes.forEach((node) => node.classList.add("collaborative-texts-highlight-shown"));
+    });
+    this._applyTo(this.highlightWrapper);
+  }
+
+  // Restores the highlighted nodes to their original state
+  // this is used to remove the highlight when leaving the suggestion
+  blur() {
+    // If applied, just remove the style from the changesWrapper
+    if (this.applied && this.changesWrapper) {
+      this.changesWrapper.classList.remove("collaborative-texts-highlight");
+    }
+    if (this.highlightWrapper) {
+      this.highlightWrapper.remove();
+      this.highlightWrapper = null;
+      this._showOriginalNodes("collaborative-texts-highlight-hidden");
+      this.siblingSuggestions().filter((suggestion) => suggestion.applied).forEach((suggestion) => {
+        suggestion.changesWrapper.classList.remove("collaborative-texts-highlight-hidden");
+        suggestion.nodes.forEach((node) => node.classList.remove("collaborative-texts-highlight-shown"));
+      });
+    }
+  }
+
+  // Apply the suggestion by replacing the nodes with the replace content
+  apply() {
+    if (!this.applied && !this.selection || !this.selection.blocked) {
+      this.applied = true;
+      if (this.highlightWrapper) {
+        this.blur();
+      }
+      // restore any other changes affecting the same nodes
+      this.suggestionsList.restore(this.nodes, [this]);
+      this._createChangesWrapper();
+      this._hideOriginalNodes();
+      this._applyTo(this.changesWrapper);
+      this.item.classList.add("applied");
+      this._resetAccordion();
+      let event = new CustomEvent("collaborative-texts:applied", { detail: { suggestion: this } });
+      this.doc.dispatchEvent(event);
+    }
+    return this;
+  }
+
+  // Restore the suggestion by removing the replace content and showing the original nodes
+  restore() {
+    if (this.applied) {
+      this.applied = false;
+      this.item.classList.remove("applied");
+      this._showOriginalNodes();
+      this.changesWrapper.remove();
+      this.changesWrapper = null;
+      this._resetAccordion();
+      let event = new CustomEvent("collaborative-texts:restored", { detail: { suggestion: this } });
+      this.doc.dispatchEvent(event);
+    }
+    return this;
+  }
+
+  // Apply the changes to the wrapper passed as argument
+  // this does not manipulate the DOM, but only the wrapper
+  _applyTo(wrapper) {
+    this.replace.forEach((text) => wrapper.insertAdjacentHTML("beforeend", text));
+    // wrap in <p> any text nodes
+    wrapper.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        let paragraph = window.document.createElement("p");
+        paragraph.textContent = node.textContent;
+        node.replaceWith(paragraph);
+      }
+    });
+  }
+
+  _hideOriginalNodes(className = "collaborative-texts-hidden") {
+    this.nodes.forEach((node) => node.classList.add(className));
+  }
+
+  _showOriginalNodes(className = "collaborative-texts-hidden") {
+    this.nodes.forEach((node) => node.classList.remove(className));
+  }
+
+  getPosition() {
+    let node = this.changesWrapper || this.highlightWrapper || this.firstNode;
+
+    while (node.classList.contains("collaborative-texts-hidden") || node.classList.contains("hidden")) {
+      node = node.previousSibling;
+    }
+
+    return node.offsetTop;
+  }
+
+  // Reset the position of the suggestion boxWrapper using the current position of the first node
+  setPosition(position) {
+    if (!this.boxWrapper) {
+      return this;
+    }
+    this.boxWrapper.style.top = `${position}px`;
+    return this;
+  }
+
+  destroy() {
+    if (this.item) {
+      this.item.remove();
+      this.item = null;
+    }
+    if (this.boxWrapper) {
+      this.boxWrapper.remove();
+      this.boxWrapper = null;
+    }
+    if (this.highlightWrapper) {
+      this.highlightWrapper.remove();
+      this.highlightWrapper = null;
+    }
+    if (this.changesWrapper) {
+      this.changesWrapper.remove();
+      this.changesWrapper = null;
+    }
+  }
+
+  // Create a wrapper where to put the changes when applying the suggestion
+  // Replaced nodes will be hidden, and the changes will be inserted in the wrapper
+  _createChangesWrapper() {
+    this.changesWrapper = window.document.createElement("div");
+    this.changesWrapper.classList.add("collaborative-texts-changes");
+    this.firstNode.before(this.changesWrapper);
+  }
+
+  // Because the A11y accordion has not an API to programmatically toggle the
+  // accordion, we need to destroy and recreate it to reset the state
+  _resetAccordion() {
+    let accordion = this.boxWrapper.querySelector('[data-controller="accordion"]');
+
+    accordion.dispatchEvent(new CustomEvent("accordion:reconnect", { detail: { collapse: true } }));
+  }
+
+  // Create a wrapper for all the suggestions applying to the same nodes
+  _createBoxWrapper() {
+    if (this.firstNode.previousSibling &&
+        this.firstNode.previousSibling.nodeType === Node.ELEMENT_NODE &&
+        this.firstNode.previousSibling.classList.contains("collaborative-texts-suggestions-box")) {
+      this.boxWrapper = this.firstNode.previousSibling;
+      return;
+    }
+    this.isFirst = true;
+    this.boxWrapper = window.document.createElement("div");
+    this.boxWrapper.id = `suggestion-box-wrapper-${this.id}`;
+    this.boxWrapper.classList.add("collaborative-texts-suggestions-box");
+    this.boxWrapper.innerHTML = this.templates.suggestionsBox.innerHTML.replaceAll("{{ID}}", this.id);
+    this.firstNode.before(this.boxWrapper);
+    this._resetAccordion();
+  }
+
+  // Create the box item for the suggestion inside the wrapper
+  _createBoxItem() {
+    this.boxItems = this.boxWrapper.querySelector(".collaborative-texts-suggestions-box-items");
+    this.itemsCounts = this.boxWrapper.querySelectorAll(".collaborative-texts-suggestions-box-items-count");
+    this.item = window.document.createElement("div");
+    this.item.classList.add("collaborative-texts-suggestions-box-item");
+    this.item.innerHTML = this.templates.suggestionsBoxItem.innerHTML.replaceAll("{{ID}}", this.id).replaceAll("{{PROFILE}}", this.authorCell);
+    this.text = this.item.querySelector(".collaborative-texts-suggestions-box-item-text");
+    this.text.innerHTML = this.summary;
+    this.boxItems.appendChild(this.item);
+    if (!this.doc.dataset.collaborativeTextsRolloutUrl) {
+      this.dropdown = this.item.querySelector('[data-controller="dropdown"]');
+      if (this.dropdown) {
+        this.dropdown.remove();
+      }
+    }
+    this.itemsCounts.forEach((item) => {
+      item.textContent = this.boxItems.childElementCount;
+    });
+  }
+
+  _resetDropdown() {
+
+  }
+
+  _bindEvents() {
+    this.item.addEventListener("mouseenter", this.highlight.bind(this));
+    this.item.addEventListener("mouseleave", this.blur.bind(this));
+    this.item.querySelector(".button-apply").addEventListener("click", this.apply.bind(this));
+    this.item.querySelector(".button-restore").addEventListener("click", this.restore.bind(this));
+  }
+}

data/app/packs/src/decidim/collaborative_texts/suggestions_list.js

@@ -0,0 +1,103 @@
+import Suggestion from "src/decidim/collaborative_texts/suggestion";
+
+export default class SuggestionsList {
+  constructor(document) {
+    this.document = document;
+    this.nodes = document.nodes;
+    this.doc = document.doc;
+    this.i18n = document.i18n || {};
+    this.suggestions = [];
+    this._fetchSuggestions();
+    this._bindEvents();
+  }
+
+  resetPositions() {
+    if (this.restoreTimeout) {
+      clearTimeout(this.restoreTimeout);
+      this.restoreTimeout = null;
+    }
+    // Restore the positions after a timeout to allow the DOM to update
+    // and avoid flickering
+    this.restoreTimeout = setTimeout(() => {
+      const offset = 58;
+      const positions = this.defaultSuggestions().map((suggestion) => [suggestion, suggestion.getPosition()]);
+      positions.sort((one, two) => one[1] - two[1]);
+      for (let i = 0; i < positions.length - 1; i++) { // eslint-disable-line
+        if (positions[i + 1][1] < positions[i][1] + offset) {
+          positions[i + 1][1] += offset - (positions[i + 1][1] - positions[i][1]);
+        }
+      }
+      positions.forEach(([suggestion, position]) => suggestion.setPosition(position));
+    }, 100);
+    return this;
+  }
+
+  // restore changes for any suggestion affecting the specified nodes
+  restore(nodes, except = []) {
+    this.suggestions.forEach((suggestion) => {
+      if (!except.includes(suggestion) && suggestion.nodes.some((node) => nodes.includes(node))) {
+        suggestion.restore();
+      }
+    });
+  }
+
+  // The applied suggestion for each boxWrapper or the first suggestion if none is applied
+  defaultSuggestions() {
+    let suggestions = {};
+    this.suggestions.forEach((suggestion) => {
+      if (suggestion.applied) {
+        suggestions[suggestion.boxWrapper.id] = suggestion;
+      } else if (!suggestions[suggestion.boxWrapper.id] && suggestion.isFirst) {
+        suggestions[suggestion.boxWrapper.id] = suggestion;
+      }
+    });
+    return Object.values(suggestions);
+  }
+
+  getApplied() {
+    return this.suggestions.filter((suggestion) => suggestion.applied);
+  }
+
+  getPending() {
+    return this.suggestions.filter((suggestion) => !suggestion.applied);
+  }
+
+  // destroy all suggestions
+  destroy() {
+    this.suggestions.forEach((suggestion) => suggestion.destroy());
+    this.suggestions = [];
+    return this;
+  }
+
+  _fetchSuggestions() {
+    fetch(this.doc.dataset.collaborativeTextsSuggestionsUrl, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-Requested-With": "XMLHttpRequest"
+      }
+    }).
+      then((response) => response.json()).
+      then((data) => {
+        data.forEach((item) => {
+          let suggestion = new Suggestion(this, item)
+          if (suggestion.valid) {
+            this.suggestions.push(suggestion);
+          }
+        });
+        this.resetPositions();
+      });
+  }
+
+  _bindEvents() {
+    this.doc.addEventListener("collaborative-texts:applied", this._onSuggestionApplied.bind(this));
+    this.doc.addEventListener("collaborative-texts:restored", this._onSuggestionRestored.bind(this));
+  }
+
+  _onSuggestionApplied() {
+    this.resetPositions();
+  }
+
+  _onSuggestionRestored() {
+    this.resetPositions();
+  }
+}

data/app/packs/src/decidim/collaborative_texts/test/document.test.js

@@ -0,0 +1,83 @@
+/* global global, jest */
+
+import Document from "src/decidim/collaborative_texts/document";
+import SuggestionsList from "src/decidim/collaborative_texts/suggestions_list";
+
+describe("Document", () => {
+  let i18n = {test: "test"};
+  let suggestionsUrl = "http://example.com/suggestions";
+  let rolloutUrl = "http://example.com/rollout";
+
+  const content = `
+    <body>
+      <div class="collaborative-texts-alert hidden">
+        <div></div>
+      </div>
+
+      <div data-collaborative-texts-document="true"
+          data-collaborative-texts-i18n='${JSON.stringify(i18n)}'
+          data-collaborative-texts-suggestions-url="${suggestionsUrl}"
+          data-collaborative-texts-rollout-url="${rolloutUrl}">
+        <h2>This is a collaborative text</h2>
+        <p>Some content</p>
+        <h2>This is another title</h2>
+        <ul><li>More content</li><li>Event more content</li></ul>
+      </div>
+    </body>
+  `;
+
+  let doc = null;
+  let fetchResult = [];
+
+  global.fetch = jest.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve(fetchResult)
+    })
+  );
+
+  beforeEach(() => {
+    document.body.innerHTML = content;
+    doc = new Document(document.querySelector("[data-collaborative-texts-document]"));
+  });
+
+  it("Filters text nodes and adds ids", () => {
+    expect(doc.fetchSuggestions().suggestionsList).toBeInstanceOf(SuggestionsList);
+    expect(doc.fetchSuggestions().suggestionsList.document).toBe(doc);
+    expect(doc.nodes.length).toBe(4);
+    expect(doc.nodes[0].id).toBe("ct-node-1");
+    expect(doc.nodes[0].textContent).toBe("This is a collaborative text");
+    expect(doc.nodes[1].id).toBe("ct-node-2");
+    expect(doc.nodes[1].textContent).toBe("Some content");
+    expect(doc.nodes[2].id).toBe("ct-node-3");
+    expect(doc.nodes[2].textContent).toBe("This is another title");
+    expect(doc.nodes[3].id).toBe("ct-node-4");
+    expect(doc.nodes[3].childNodes[0].textContent).toBe("More content");
+    expect(doc.nodes[3].childNodes[1].textContent).toBe("Event more content");
+  });
+
+  it("Shows the alert", () => {
+    doc.alert("This is a test");
+    expect(doc.alertWrapper.classList.contains("hidden")).toBe(false);
+    expect(doc.alertDiv.textContent).toBe("This is a test");
+  });
+
+  it("enables suggestions", () => {
+    expect(doc.active).toBe(true);
+    doc.enableSuggestions();
+    window.document.dispatchEvent(new Event("selectstart"));
+    expect(doc.selecting).toBe(true);
+    window.document.dispatchEvent(new Event("mouseup"));
+    expect(doc.selecting).toBe(false);
+  });
+
+  describe("when disabled", () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<div class="collaborative-texts-alert"></div><div data-collaborative-texts-document="false" data-collaborative-texts-i18n="{}"></div>';
+      doc = new Document(document.querySelector("[data-collaborative-texts-document]"));
+    });
+
+    it("disables suggestions", () => {
+      expect(doc.active).toBe(false);
+    });
+  });
+});