decidim-core 0.19.1 → 0.23.0

data/app/assets/javascripts/decidim/input_character_counter.js.es6

@@ -0,0 +1,115 @@
+((exports) => {
+  const COUNT_KEY = "%count%";
+  const DEFAULT_MESSAGES = {
+    charactersAtLeast: {
+      one: `at least ${COUNT_KEY} character`,
+      other: `at least ${COUNT_KEY} characters`
+    },
+    charactersLeft: {
+      one: `${COUNT_KEY} character left`,
+      other: `${COUNT_KEY} characters left`
+    }
+  };
+  let MESSAGES = DEFAULT_MESSAGES;
+
+  class InputCharacterCounter {
+    static configureMessages(messages) {
+      MESSAGES = exports.$.extend(DEFAULT_MESSAGES, messages);
+    }
+
+    constructor(input) {
+      this.$input = input;
+      this.$target = exports.$(this.$input.data("remaining-characters"));
+      this.minCharacters = parseInt(this.$input.attr("minlength"), 10);
+      this.maxCharacters = parseInt(this.$input.attr("maxlength"), 10);
+
+      if (this.$target.length < 1) {
+        let targetId = null;
+        if (this.$input.attr("id") && this.$input.attr("id").length > 0) {
+          targetId = `${this.$input.attr("id")}_characters`;
+        } else {
+          targetId = `characters_${Math.random().toString(36).substr(2, 9)}`;
+        }
+
+        this.$target = $(`<span id="${targetId}" class="form-input-extra-before" />`)
+
+        // If input is a hidden for WYSIWYG editor add it at the end
+        if (this.$input.parent().is(".editor")) {
+          this.$input.parent().after(this.$target);
+        }
+        // Prefix and suffix columns are wrapped in columns, so put the
+        // character counter before that.
+        else if (
+          this.$input.parent().is(".columns") &&
+          this.$input.parent().parent().is(".row")
+        ) {
+          this.$input.parent().parent().after(this.$target);
+        } else {
+          this.$input.after(this.$target);
+        }
+      }
+
+      if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
+        this.bindEvents();
+      }
+    }
+
+    bindEvents() {
+      // In WYSIWYG editors (Quill) we need to find the active editor from the
+      // DOM node. Quill has the experimental "find" method that should work
+      // fine in this case
+      if (Quill && this.$input.parent().is(".editor")) {
+        // Wait until the next javascript loop so Quill editors are created
+        setTimeout(() => {
+          const editor = Quill.find(this.$input.siblings(".editor-container")[0]);
+          editor.on("text-change", () => {
+            this.updateStatus();
+          });
+        })
+      }
+      this.$input.on("keyup", () => {
+        this.updateStatus();
+      });
+      this.updateStatus();
+    }
+
+    updateStatus() {
+      const numCharacters = this.$input.val().length;
+      const showMessages = [];
+
+      if (this.minCharacters > 0) {
+        let message = MESSAGES.charactersAtLeast.other;
+        if (this.minCharacters === 1) {
+          message = MESSAGES.charactersAtLeast.one;
+        }
+        showMessages.push(message.replace(COUNT_KEY, this.minCharacters));
+      }
+
+      if (this.maxCharacters > 0) {
+        const remaining = this.maxCharacters - numCharacters;
+        let message = MESSAGES.charactersLeft.other;
+        if (remaining === 1) {
+          message = MESSAGES.charactersLeft.one;
+        }
+        showMessages.push(message.replace(COUNT_KEY, remaining));
+      }
+
+      this.$target.text(showMessages.join(", "));
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.InputCharacterCounter = InputCharacterCounter;
+
+  exports.$(() => {
+    exports.$("input[type='text'], textarea, .editor>input[type='hidden']").each((_i, elem) => {
+      const $input = exports.$(elem);
+
+      if (!$input.is("[minlength]") && !$input.is("[maxlength]")) {
+        return;
+      }
+
+      $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+    });
+  });
+})(window);

data/app/assets/javascripts/decidim/input_hashtags.js.es6

@@ -25,7 +25,7 @@ $(() => {
 
   /* eslint no-use-before-define: ["error", { "variables": false }]*/
   let remoteSearch = function(text, cb) {
-    $.post("/api", {query: `{hashtags(name:${text}) {name}}`}).
+    $.post("/api", {query: `{hashtags(name:"${text}") {name}}`}).
 
       then((response) => {
         let data = response.data.hashtags || {};

data/app/assets/javascripts/decidim/input_mentions.js.es6

@@ -3,46 +3,91 @@
 $(() => {
   const $mentionContainer = $(".js-mentions");
   const nodatafound = $mentionContainer.attr("data-noresults");
-  const sources = [];
 
-  // EXAMPLE DATA
-  // tag & name properties are mandatory
-  //
-  // const sources = [{
-  //     "tag": "barrera",
-  //     "name": "Collins Franklin",
-  //   },
-  //   {
-  //     "tag": "woods",
-  //     "name": "Nadine Buck",
-  //   }]
+  let noMatchTemplate = null
+  if (nodatafound) {
+    noMatchTemplate = () => `<li>${nodatafound}</li>`;
+  }
 
   // Listener for the event triggered by quilljs
   let cursor = "";
-  $mentionContainer.on("quill-position", function(event) {
-    cursor = event.detail.index;
+  $mentionContainer.on("quill-position", (event) => {
+    if (event.detail !== null) {
+      // When replacing the text content after selecting a hashtag, we only need
+      // to know the hashtag's start position as that is the point which we want
+      // to replace.
+      let quill = event.target.__quill;
+      if (quill.getText(event.detail.index - 1, 1) === "@") {
+        cursor = event.detail.index;
+      }
+    }
   });
 
+  // Returns a function, that, as long as it continues to be invoked, will not
+  // be triggered. The function will be called after it stops being called for
+  // N milliseconds
+  /* eslint no-invalid-this: 0 */
+  /* eslint consistent-this: 0 */
+  /* eslint prefer-reflect: 0 */
+  const debounce = function(callback, wait) {
+    let timeout = null;
+    return (...args) => {
+      const context = this;
+      clearTimeout(timeout);
+      timeout = setTimeout(() => callback.apply(context, args), wait);
+    };
+  }
+
+  /* eslint no-use-before-define: ["error", { "variables": false }]*/
+  let remoteSearch = function(text, cb) {
+    let query = `{users(filter:{wildcard:"${text}"}){nickname,name,avatarUrl,__typename,...on UserGroup{membersCount}}}`;
+    $.post("/api", {query: query}).
+      then((response) => {
+        let data = response.data.users || {};
+        cb(data)
+      }).fail(function() {
+        cb([])
+      }).always(() => {
+      // This function runs Tribute every single time you type something
+      // So we must evalute DOM properties after each
+        const $parent = $(tribute.current.element).parent();
+        $parent.addClass("is-active");
+
+        // We need to move the container to the wrapper selected
+        const $tribute = $parent.find(".tribute-container");
+        // Remove the inline styles, relative to absolute positioning
+        $tribute.removeAttr("style");
+      })
+  };
+
   // tribute.js docs - http://github.com/zurb/tribute
   /* global Tribute*/
   let tribute = new Tribute({
-    values: sources,
-    positionMenu: false,
+    trigger: "@",
+    // avoid overloading the API if the user types too fast
+    values: debounce(function (text, cb) {
+      remoteSearch(text, (users) => cb(users));
+    }, 250),
+    positionMenu: true,
     menuContainer: null,
-    fillAttr: "tag",
-    noMatchTemplate: () => `<li>${nodatafound}</li>`,
-    lookup: (item) => item.tag + item.name,
+    allowSpaces: true,
+    menuItemLimit: 5,
+    fillAttr: "nickname",
+    selectClass: "highlight",
+    noMatchTemplate: noMatchTemplate,
+    lookup: (item) => item.nickname + item.name,
     selectTemplate: function(item) {
       if (typeof item === "undefined") {
         return null;
       }
       if (this.range.isContentEditable(this.current.element)) {
         // Check quill.js
-        if ($(this.current.element).hasClass("editor-container")) {
-          let quill = this.current.element.__quill;
-          quill.insertText(cursor - 1, `@${item.original.tag} `, Quill.sources.API);
+        if ($(this.current.element).hasClass("ql-editor")) {
+          let editorContainer = $(this.current.element).parent().get(0);
+          let quill = editorContainer.__quill;
+          quill.insertText(cursor - 1, `${item.original.nickname} `, Quill.sources.API);
           // cursor position + nickname length + "@" sign + space
-          let position = cursor + item.original.tag.length + 2;
+          let position = cursor + item.original.nickname.length + 2
 
           let next = 0;
           if (quill.getLength() > position) {
@@ -57,43 +102,85 @@ $(() => {
 
           return ""
         }
-        return `<span contenteditable="false">@${item.original.tag}</span>`;
+        return `<span contenteditable="false">${item.original.nickname}</span>`;
       }
-      return `@${item.original.tag}`;
+      return item.original.nickname;
     },
     menuItemTemplate: function(item) {
-      let tpl = `<strong>${item.original.tag}</strong>&nbsp;<small>${item.original.name}</small>`;
-      return tpl;
+      let svg = "";
+      if (window.Decidim && item.original.__typename === "UserGroup") {
+        let icons = window.Decidim.assets["icons.svg"];
+        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use xlink:href="${icons}#icon-members"/></svg></span>`;
+      }
+      return `<div class="tribute-item ${item.original.__typename}">
+      <span class="author__avatar"><img src="${item.original.avatarUrl}" alt="author-avatar"></span>
+        <strong>${item.original.nickname}</strong>
+        <small>${item.original.name}</small>
+        ${svg}
+      </div>`;
     }
   });
 
-  tribute.attach($mentionContainer);
+  let setupEvents = function($element) {
+    // DOM manipulation
+    $element.on("focusin", (event) => {
+      // Set the parent container relative to the current element
+      tribute.menuContainer = event.target.parentNode;
+    });
+    $element.on("focusout", (event) => {
+      let $parent = $(event.target).parent();
 
-  // DOM manipulation
-  $mentionContainer.on("focusin", (event) => {
-    // Set the parent container relative to the current element
-    tribute.menuContainer = event.target.parentNode;
-  });
-  $mentionContainer.on("focusout", (event) => {
-    let $parent = $(event.target).parent();
+      if ($parent.hasClass("is-active")) {
+        $parent.removeClass("is-active");
+      }
+    });
+    $element.on("input", (event) => {
+      let $parent = $(event.target).parent();
 
-    if ($parent.hasClass("is-active")) {
-      $parent.removeClass("is-active");
+      if (tribute.isActive) {
+        // We need to move the container to the wrapper selected
+        let $tribute = $(".tribute-container");
+        $tribute.appendTo($parent);
+
+        // Parent adaptation
+        $parent.addClass("is-active");
+      } else {
+        $parent.removeClass("is-active");
+      }
+    });
+  };
+
+  setupEvents($mentionContainer);
+
+  // This allows external libraries (like React) to use the component
+  // by simply firing and event targeting the element where to attach Tribute
+  $(document).on("attach-mentions-element", (event, element) => {
+    if (!element) {
+      return;
     }
-  });
-  $mentionContainer.on("input", (event) => {
-    let $parent = $(event.target).parent();
-
-    if (tribute.isActive) {
-      // We need to move the container to the wrapper selected
-      let $tribute = $(".tribute-container");
-      $tribute.appendTo($parent);
-      // Remove the inline styles, relative to absolute positioning
-      $tribute.removeAttr("style");
-      // Parent adaptation
-      $parent.addClass("is-active");
-    } else {
-      $parent.removeClass("is-active");
+    tribute.attach(element);
+    // Due a bug in Tribute, re-add menu to DOM if it has been removed
+    // See https://github.com/zurb/tribute/issues/140
+    if (tribute.menu && !document.body.contains(tribute.menu)) {
+      tribute.range.getDocument().body.appendChild(tribute.menu);
     }
+    setupEvents($(element));
   });
+
+  // tribute.attach($mentionContainer);
+  // Tribute needs to be attached to the `.ql-editor` element as said at:
+  // https://github.com/quilljs/quill/issues/1816
+  //
+  // For this reason we need to wait a bit for quill to initialize itself.
+  setTimeout(function() {
+    $mentionContainer.each((index, item) => {
+      let $qlEditor = $(".ql-editor", item);
+      if ($qlEditor.length > 0) {
+        tribute.attach($qlEditor);
+      } else {
+        tribute.attach(item);
+      }
+    });
+  }, 1000);
 });
+

data/app/assets/javascripts/decidim/input_multiple_mentions.js.es6

@@ -0,0 +1,195 @@
+// = require tribute
+
+$(() => {
+  const $multipleMentionContainer = $(".js-multiple-mentions");
+  const $multipleMentionRecipientsContainer = $(".js-multiple-mentions-recipients");
+  const nodatafound = $multipleMentionContainer.attr("data-noresults");
+  const directMessageDisabled = $multipleMentionContainer.attr("data-direct-messages-disabled");
+
+  const maxRecipients = 9;
+  let mentionsCount = 0;
+
+  /* eslint no-unused-vars: 0 */
+  let deleteRecipient = function(element) {
+    // Remove recipient
+    element.remove();
+    mentionsCount -= 1;
+    // In case mentions container disable, enable again
+    if ($multipleMentionContainer.prop("disabled")) {
+      $multipleMentionContainer.prop("disabled", false);
+    }
+  };
+
+  let noMatchTemplate = null
+  if (nodatafound) {
+    noMatchTemplate = () => `<li>${nodatafound}</li>`;
+  }
+
+  // Returns a function, that, as long as it continues to be invoked, will not
+  // be triggered. The function will be called after it stops being called for
+  // N milliseconds
+  /* eslint no-invalid-this: 0 */
+  /* eslint consistent-this: 0 */
+  /* eslint prefer-reflect: 0 */
+  const debounce = function(callback, wait) {
+    let timeout = null;
+    return (...args) => {
+      const context = this;
+      clearTimeout(timeout);
+      timeout = setTimeout(() => callback.apply(context, args), wait);
+    };
+  }
+
+  /* eslint no-use-before-define: ["error", { "variables": false }]*/
+  /* eslint no-unused-expressions: 0 */
+  let remoteSearch = function(text, cb) {
+    let exclusionIds = [];
+    $multipleMentionRecipientsContainer.find("input[name^='recipient_id']").each(function(index) {
+      exclusionIds.push($(this).val());
+    });
+    let query = `{users(filter:{wildcard:"${text}",excludeIds:[${exclusionIds}]}){id,nickname,name,avatarUrl,__typename,...on UserGroup{membersCount},...on User{directMessagesEnabled}}}`;
+    $.post("/api", {query: query}).
+      then((response) => {
+        let data = response.data.users || {};
+        cb(data)
+      }).fail(function() {
+        cb([])
+      }).always(() => {
+      // This function runs Tribute every single time you type something
+      // So we must evalute DOM properties after each
+        const $parent = $(tribute.current.element).parent();
+        $parent.addClass("is-active");
+
+        // We need to move the container to the wrapper selected
+        const $tribute = $parent.find(".tribute-container");
+        // Remove the inline styles, relative to absolute positioning
+        $tribute.removeAttr("style");
+      })
+  };
+
+  // tribute.js docs - http://github.com/zurb/tribute
+  /* global Tribute*/
+  /* eslint multiline-ternary: 0 */
+  /* eslint no-ternary: 0 */
+  let tribute = new Tribute({
+    autocompleteMode: true,
+    // avoid overloading the API if the user types too fast
+    values: debounce(function (text, cb) {
+      remoteSearch(text, (users) => cb(users));
+    }, 250),
+    positionMenu: true,
+    menuContainer: null,
+    menuItemLimit: 10,
+    fillAttr: "nickname",
+    noMatchTemplate: noMatchTemplate,
+    lookup: (item) => item.nickname + item.name,
+    selectTemplate: function(item) {
+      mentionsCount += 1;
+      if (mentionsCount >= maxRecipients) {
+        $multipleMentionContainer.prop("disabled", true);
+      }
+      if (typeof item === "undefined") {
+        return null;
+      }
+      // Set recipient profile view
+      let recipientLabel = `
+        <label style="padding: 0 0 10px 0">
+          <img src="${item.original.avatarUrl}" alt="${item.original.name}" height="35" width="35" style="border-radius: 50%;" aria-label="${item.original.name}">&nbsp;
+          <b>${item.original.name}</b>
+          <input type="hidden" name="recipient_id[]" value="${item.original.id}">
+          <div class="float-right">&times;</div>
+        </label>
+      `;
+
+      // Append new recipient to DOM
+      if (item.original.__typename === "UserGroup" || item.original.directMessagesEnabled === "true") {
+        $multipleMentionRecipientsContainer.append($(recipientLabel));
+        $multipleMentionContainer.val("");
+      }
+
+      // In order to add tabindex accessibility control to each recipient in list
+      $multipleMentionRecipientsContainer.find("label").each(function(index) {
+        $(this).find("div").attr("tabIndex", 0).attr("aria-controls", 0).attr("aria-label", "Close").attr("role", "tab");
+      });
+
+      // Clean input
+      return "";
+    },
+    menuItemTemplate: function(item) {
+      let svg = "";
+      let enabled = item.original.directMessagesEnabled === "true";
+      if (window.Decidim && item.original.__typename === "UserGroup") {
+        enabled = true;
+        let icons = window.Decidim.assets["icons.svg"];
+        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use xlink:href="${icons}#icon-members"/></svg></span>`;
+      }
+      let disabledElementClass = enabled ? "" : "disabled-tribute-element";
+      let disabledElementMessage = enabled ? "" : `&nbsp;<span class="disabled-tribute-element-info">${directMessageDisabled}</span>`;
+      return `<div class="tribute-item ${item.original.__typename} ${disabledElementClass}">
+      <span class="author__avatar"><img src="${item.original.avatarUrl}" alt="author-avatar"></span>
+        <strong>${item.original.nickname}</strong>
+        <small>${item.original.name}</small>
+        ${svg}
+        ${disabledElementMessage}
+      </div>`;
+    }
+  });
+
+  let setupEvents = function($element) {
+    // DOM manipulation
+    $element.on("focusin", (event) => {
+      // Set the parent container relative to the current element
+      tribute.menuContainer = event.target.parentNode;
+    });
+    $element.on("focusout", (event) => {
+      let $parent = $(event.target).parent();
+
+      if ($parent.hasClass("is-active")) {
+        $parent.removeClass("is-active");
+      }
+    });
+    $element.on("input", (event) => {
+      let $parent = $(event.target).parent();
+
+      if (tribute.isActive) {
+        // We need to move the container to the wrapper selected
+        let $tribute = $(".tribute-container");
+        $tribute.appendTo($parent);
+        // Remove the inline styles, relative to absolute positioning
+        $tribute.removeAttr("style");
+        // Parent adaptation
+        $parent.addClass("is-active");
+      } else {
+        $parent.removeClass("is-active");
+      }
+    });
+  };
+
+  let setupRecipientEvents = function($element) {
+    // Allow delete with click on element in recipients list
+    $element.on("click", (event) => {
+      let $target = event.target.parentNode;
+      if ($target.tagName === "LABEL") {
+        deleteRecipient($target);
+      }
+    });
+    // Allow delete with keypress on element in recipients list
+    $element.on("keypress", (event) => {
+      let $target = event.target.parentNode;
+      if ($target.tagName === "LABEL") {
+        deleteRecipient($target);
+      }
+    });
+  };
+
+  // Call only if we have containter to bind events to
+  if ($multipleMentionContainer.length) {
+    setupEvents($multipleMentionContainer);
+    tribute.attach($multipleMentionContainer);
+  }
+
+  // Call only if we have containter to bind events to
+  if ($multipleMentionRecipientsContainer.length) {
+    setupRecipientEvents($multipleMentionRecipientsContainer);
+  }
+});