decidim-core 0.10.1 → 0.11.0.pre1

data/app/assets/javascripts/decidim/form_filter.component.test.js

@@ -1,15 +1,15 @@
 /* global spyOn */
 /* eslint-disable id-length */
-window.$ = require('jquery');
+window.$ = require("jquery");
 
-require('./history.js.es6');
-require('./data_picker.js.es6');
-require('./form_filter.component.js.es6');
+require("./history.js.es6");
+require("./data_picker.js.es6");
+require("./form_filter.component.js.es6");
 
 const { Decidim: { FormFilterComponent } } = window;
 
-describe('FormFilterComponent', () => {
-  const selector = 'form#new_filter';
+describe("FormFilterComponent", () => {
+  const selector = "form#new_filter";
   let subject = null;
   let scopesPickerState = {filter_scope_id: [{ url: "picker_url_3", value: 3, text: "Scope 3"}, { url: "picker_url_4", value: 4, text: "Scope 4"}]} // eslint-disable-line camelcase
 
@@ -40,27 +40,27 @@ describe('FormFilterComponent', () => {
         </fieldset>
       </form>
     `;
-    $('body').append(form);
+    $("body").append(form);
 
     window.theDataPicker = new window.Decidim.DataPicker($(".data-picker"));
-    subject = new FormFilterComponent($(document).find('form'));
+    subject = new FormFilterComponent($(document).find("form"));
   });
 
-  it('exists', () => {
+  it("exists", () => {
     expect(FormFilterComponent).toBeDefined();
   });
 
-  it('initializes unmounted', () => {
+  it("initializes unmounted", () => {
     expect(subject.mounted).toBeFalsy();
   });
 
-  it('initializes the formSelector with the given selector', () => {
+  it("initializes the formSelector with the given selector", () => {
     expect(subject.$form).toEqual($(selector));
   });
 
-  describe('when mounted', () => {
+  describe("when mounted", () => {
     beforeEach(() => {
-      spyOn(subject.$form, 'on');
+      spyOn(subject.$form, "on");
       subject.mountComponent();
     });
 
@@ -68,52 +68,52 @@ describe('FormFilterComponent', () => {
       subject.unmountComponent();
     });
 
-    it('mounts the component', () => {
+    it("mounts the component", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it('binds the form change event', () => {
-      expect(subject.$form.on).toHaveBeenCalledWith('change', 'input, select', subject._onFormChange);
+    it("binds the form change event", () => {
+      expect(subject.$form.on).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
     });
 
-    describe('onpopstate event', () => {
+    describe("onpopstate event", () => {
       beforeEach(() => {
-        spyOn(subject.$form, 'submit');
+        spyOn(subject.$form, "submit");
       });
 
-      it('clears the form data', () => {
-        spyOn(subject, '_clearForm');
+      it("clears the form data", () => {
+        spyOn(subject, "_clearForm");
 
         window.onpopstate({ isTrusted: true, state: scopesPickerState});
 
         expect(subject._clearForm).toHaveBeenCalled();
       });
 
-      it('sets the correct form fields based on the current location', () => {
-        spyOn(subject, '_getLocation').and.returnValue('/filters?filter[scope_id][]=3&filter[scope_id][]=4&filter[category_id]=2');
+      it("sets the correct form fields based on the current location", () => {
+        spyOn(subject, "_getLocation").and.returnValue("/filters?filter[scope_id][]=3&filter[scope_id][]=4&filter[category_id]=2");
         window.onpopstate({ isTrusted: true, state: scopesPickerState});
 
-        expect($(selector).find('select#filter_category_id').val()).toEqual('2');
+        expect($(selector).find("select#filter_category_id").val()).toEqual("2");
         expect($(`${selector} #filter_scope_id .picker-values div input`).map(function(_index, input) {
           return $(input).val();
-        }).get()).toEqual(['3', '4']);
+        }).get()).toEqual(["3", "4"]);
       });
     });
   });
 
-  describe('when unmounted', () => {
+  describe("when unmounted", () => {
     beforeEach(() => {
-      spyOn(subject.$form, 'off');
+      spyOn(subject.$form, "off");
       subject.mountComponent();
       subject.unmountComponent();
     });
 
-    it('mounts the component', () => {
+    it("mounts the component", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it('unbinds the form change event', () => {
-      expect(subject.$form.off).toHaveBeenCalledWith('change', 'input, select', subject._onFormChange);
+    it("unbinds the form change event", () => {
+      expect(subject.$form.off).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
     });
   });
 

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

@@ -1,12 +1,12 @@
 ((exports) => {
   exports.$(() => {
-    const $impersonationWarning = $('.impersonation-warning');
-    const endsAt = exports.moment($impersonationWarning.data('session-ends-at'));
+    const $impersonationWarning = $(".impersonation-warning");
+    const endsAt = exports.moment($impersonationWarning.data("session-ends-at"));
 
     setInterval(() => {
       const diff = (endsAt - exports.moment()) / 60000;
       const diffInMinutes = Math.round(diff);
-      $impersonationWarning.find('.minutes').html(diffInMinutes);
+      $impersonationWarning.find(".minutes").html(diffInMinutes);
 
       if (diff <= 0) {
         window.location.reload();

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

@@ -0,0 +1,100 @@
+// = require tribute
+
+$(() => {
+  const $mentionContainer = $(".js-mentions");
+  const nodatafound = $mentionContainer.attr("data-noresults");
+  const sources = [];
+
+  // EXAMPLE DATA
+  // tag & name properties are mandatory
+  //
+  // sources = [{
+  //     "tag": "barrera",
+  //     "name": "Collins Franklin",
+  //   },
+  //   {
+  //     "tag": "woods",
+  //     "name": "Nadine Buck",
+  //   },
+  //   ...]
+
+  // Listener for the event triggered by quilljs
+  let cursor = "";
+  $mentionContainer.on("quill-position", function(event) {
+    cursor = event.detail.index;
+  });
+
+  // tribute.js docs - http://github.com/zurb/tribute
+  /* global Tribute*/
+  let tribute = new Tribute({
+    values: sources,
+    positionMenu: false,
+    menuContainer: null,
+    fillAttr: "tag",
+    noMatchTemplate: () => `<li>${nodatafound}</li>`,
+    lookup: (item) => item.tag + 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);
+          // cursor position + nickname length + "@" sign + space
+          let position = cursor + item.original.tag.length + 2;
+
+          let next = 0;
+          if (quill.getLength() > position) {
+            next = position
+          } else {
+            next = quill.getLength() - 1
+          }
+          // Workaround https://github.com/quilljs/quill/issues/731
+          setTimeout(function () {
+            quill.setSelection(next, 0);
+          }, 500);
+
+          return ""
+        }
+        return `<span contenteditable="false">@${item.original.tag}</span>`;
+      }
+      return `@${item.original.tag}`;
+    },
+    menuItemTemplate: function(item) {
+      let tpl = `<strong>${item.original.tag}</strong>&nbsp;<small>${item.original.name}</small>`;
+      return tpl;
+    }
+  });
+
+  tribute.attach($mentionContainer);
+
+  // 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");
+    }
+  });
+  $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");
+    }
+  });
+});

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

@@ -0,0 +1,12 @@
+// = require tagsinput
+
+$(() => {
+  const $tagContainer = $(".js-tags-container");
+
+  // Initialize
+  $tagContainer.tagsinput({
+    tagClass: "input__tag",
+    trimValue: true
+  });
+
+});

data/app/assets/javascripts/decidim/{map.js.es6.erb → map.js.es6}

@@ -7,18 +7,18 @@
 
 L.DivIcon.SVGIcon.DecidimIcon = L.DivIcon.SVGIcon.extend({
   options: {
-    fillColor: '#ef604d',
+    fillColor: "#ef604d",
     opacity: 0
   },
   _createPathDescription: function() {
-    return 'M14 1.17a11.685 11.685 0 0 0-11.685 11.685c0 11.25 10.23 20.61 10.665 21a1.5 1.5 0 0 0 2.025 0c0.435-.435 10.665-9.81 10.665-21A11.685 11.685 0 0 0 14 1.17Zm0 17.415A5.085 5.085 0 1 1 19.085 13.5 5.085 5.085 0 0 1 14 18.585Z';
+    return "M14 1.17a11.685 11.685 0 0 0-11.685 11.685c0 11.25 10.23 20.61 10.665 21a1.5 1.5 0 0 0 2.025 0c0.435-.435 10.665-9.81 10.665-21A11.685 11.685 0 0 0 14 1.17Zm0 17.415A5.085 5.085 0 1 1 19.085 13.5 5.085 5.085 0 0 1 14 18.585Z";
   },
   _createCircle: function() {
     return ""
   }
 });
 
-const popupTemplateId = 'marker-popup';
+const popupTemplateId = "marker-popup";
 $.template(popupTemplateId, $(`#${popupTemplateId}`).html());
 
 const addMarkers = (markersData, markerClusters, map) => {
@@ -28,7 +28,7 @@ const addMarkers = (markersData, markerClusters, map) => {
     let marker = L.marker([markerData.latitude, markerData.longitude], {
       icon: new L.DivIcon.SVGIcon.DecidimIcon()
     });
-    let node = document.createElement('div');
+    let node = document.createElement("div");
 
     $.tmpl(popupTemplateId, markerData).appendTo(node);
 
@@ -36,7 +36,7 @@ const addMarkers = (markersData, markerClusters, map) => {
       maxwidth: 640,
       minWidth: 500,
       keepInView: true,
-      className: 'map-info'
+      className: "map-info"
     }).openPopup();
 
     markerClusters.addLayer(marker);
@@ -80,12 +80,12 @@ window.Decidim.currentMap =  null;
 window.Decidim.mapConfiguration = {};
 
 $(() => {
-  const mapId = 'map';
+  const mapId = "map";
   const $map = $(`#${mapId}`);
 
-  const markersData = $map.data('markers-data');
-  const hereAppId = $map.data('here-app-id');
-  const hereAppCode = $map.data('here-app-code');
+  const markersData = $map.data("markers-data");
+  const hereAppId = $map.data("here-app-id");
+  const hereAppCode = $map.data("here-app-code");
 
   window.Decidim.mapConfiguration = { hereAppId, hereAppCode };
 

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

@@ -1,30 +1,30 @@
 $(() => {
-  const $wrapper = $('#notifications');
-  const $section = $wrapper.find('section#notifications-list');
-  const $noNotificationsText = $wrapper.find('.empty-notifications');
-  const $pagination = $wrapper.find('ul.pagination');
+  const $wrapper = $("#notifications");
+  const $section = $wrapper.find("section#notifications-list");
+  const $noNotificationsText = $wrapper.find(".empty-notifications");
+  const $pagination = $wrapper.find("ul.pagination");
   const FADEOUT_TIME = 500;
 
-  const anyNotifications = () => $wrapper.find('.card--list__item').length > 0;
+  const anyNotifications = () => $wrapper.find(".card--list__item").length > 0;
   const emptyNotifications = () => {
     if (!anyNotifications()) {
       $section.remove();
-      $noNotificationsText.removeClass('hide');
+      $noNotificationsText.removeClass("hide");
     }
   };
 
-  $section.on('click', '.mark-as-read-button', (event) => {
-    const $item = $(event.target).parents('.card--list__item');
+  $section.on("click", ".mark-as-read-button", (event) => {
+    const $item = $(event.target).parents(".card--list__item");
     $item.fadeOut(FADEOUT_TIME, () => {
       $item.remove();
       emptyNotifications();
     });
   });
 
-  $wrapper.on('click', '.mark-all-as-read-button', () => {
+  $wrapper.on("click", ".mark-all-as-read-button", () => {
     $section.fadeOut(FADEOUT_TIME, () => {
       $pagination.remove();
-      $wrapper.find('.card--list__item').remove();
+      $wrapper.find(".card--list__item").remove();
       emptyNotifications();
     });
   });

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

@@ -6,16 +6,16 @@ $(() => {
   $(document).on("click", ".order-by a", (event) => {
     const $target = $(event.target);
 
-    $target.parents('.menu').find('a:first').text($target.text());
+    $target.parents(".menu").find("a:first").text($target.text());
 
-    pushState($target.attr('href'));
+    pushState($target.attr("href"));
   })
 
   registerCallback("orders", () => {
     const url = window.location.toString();
     const match = url.match(/order=([^&]*)/);
-    const $orderMenu = $('.order-by .menu');
-    let order = $orderMenu.find('.menu a:first').data('order');
+    const $orderMenu = $(".order-by .menu");
+    let order = $orderMenu.find(".menu a:first").data("order");
 
     if (match) {
       order = match[1];
@@ -23,6 +23,6 @@ $(() => {
 
     const linkText = $orderMenu.find(`.menu a[data-order="${order}"]`).text();
 
-    $orderMenu.find('a:first').text(linkText);
+    $orderMenu.find("a:first").text(linkText);
   });
 });

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

@@ -1,10 +1,10 @@
 $(() => {
-  const $userRegistrationForm = $('.register-form');
-  const $userGroupFields      = $userRegistrationForm.find('.user-group-fields');
+  const $userRegistrationForm = $(".register-form");
+  const $userGroupFields      = $userRegistrationForm.find(".user-group-fields");
   const inputSelector         = 'input[name="user[sign_up_as]"]';
 
   const setGroupFieldsVisibility = (value) => {
-    if (value === 'user') {
+    if (value === "user") {
       $userGroupFields.hide();
     } else {
       $userGroupFields.show();
@@ -13,7 +13,7 @@ $(() => {
 
   setGroupFieldsVisibility($userRegistrationForm.find(`${inputSelector}:checked`).val());
 
-  $userRegistrationForm.on('change', inputSelector, (event) => {
+  $userRegistrationForm.on("change", inputSelector, (event) => {
     const value = event.target.value;
 
     setGroupFieldsVisibility(value);

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

@@ -10,5 +10,5 @@ window.addEventListener("message", (event) => {
 
 $(() => {
   // Set target blank for all widget links.
-  $('a').attr('target', '_blank');
+  $("a").attr("target", "_blank");
 });

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

@@ -14,6 +14,9 @@
 // = require decidim/account_form
 // = require decidim/data_picker
 // = require decidim/append_redirect_url_to_modals
+// = require decidim/editor
+// = require decidim/input_tags
+// = require decidim/input_mentions
 
 /* globals svg4everybody */
 
@@ -23,9 +26,16 @@ $(() => {
   if (window.Decidim.DataPicker) {
     window.theDataPicker = new window.Decidim.DataPicker($(".data-picker"));
   }
+
   $(document).foundation();
+
   svg4everybody();
+
   if (window.Decidim.formDatePicker) {
     window.Decidim.formDatePicker();
   }
+
+  if (window.Decidim.quillEditor) {
+    window.Decidim.quillEditor();
+  }
 });

data/app/assets/stylesheets/decidim/application.scss.erb

@@ -1,6 +1,6 @@
 @import "decidim";
 @import "editor";
 
-<% Decidim.feature_manifests.map(&:stylesheet).compact.each do |stylesheet| %>
+<% Decidim.component_manifests.map(&:stylesheet).compact.each do |stylesheet| %>
 @import "<%= stylesheet %>";
 <% end %>

data/app/assets/stylesheets/decidim/modules/_author-avatar.scss

@@ -38,6 +38,43 @@ $author-data-color: $muted;
   padding-left: 25px;
 }
 
+.author-data--big{
+  padding-left: 0;
+
+  .author-data__main{
+    margin: 0;
+  }
+
+  .author--flex,
+  .author__name--container{
+    display: flex;
+    align-items: center;
+  }
+
+  .author__avatar{
+    position: relative;
+    margin-left: 0;
+
+    img{
+      max-width: none;
+      margin-top: auto;
+      width: rem-calc(54);
+    }
+  }
+
+  .author__name{
+    @extend .heading5;
+  }
+
+  .author__nickname{
+    font-size: rem-calc(15);
+  }
+
+  .author__verified{
+    margin-left: $global-margin / 4;
+  }
+}
+
 .author-data--nopadding{
   padding-left: 0;
 }
@@ -51,6 +88,7 @@ $author-data-color: $muted;
   display: inline-block;
 
   > button,
+  > span,
   > a{
     margin-right: 1rem;
   }
@@ -131,4 +169,5 @@ a:hover .author__name{
 .author__verified{
   display: inline-block;
   vertical-align: middle;
+  color: $primary;
 }