decidim-core 0.8.4 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 0ad061f43f8c514c854f0ea29035179e9f9010aa
-  data.tar.gz: 880adff366f398867619dd379122a0bb2704d153
+SHA256:
+  metadata.gz: 805692ed2a7af317223e63403b6d86f95a050669fdef7c4d314b5e4b89c2bd27
+  data.tar.gz: c66bfe177feb3f77ee4fe92a1f2968d4e8bccb19fdc426f4115064ead19a3162
 SHA512:
-  metadata.gz: 80b4ae4bfee8d712fcbc8ec4aacbc630e3e294b887cebd70fe716b435cf51904f47c1179a56e4f1a92d50f1944f8bf6947259bb78a416e7651853e637f032a11
-  data.tar.gz: 607fdd0f547ee9b38348fc2d0a752fcb1be3fbd431931f4e04b22b3447ac07dd03825482d9bf1689a470c3fb51153d069ce6f795b61e833ef95d74006636cc76
+  metadata.gz: 6179a494542e34d8662c98ed65bba5960b0641de0f104a1fa1e44576b6ad9c33ba854c8368d53fdb484430d33807c5fa94806c652c729055239e65ae0ce11cdf
+  data.tar.gz: db9335b2ed20100ded1417784c281fc627e0805dc3c175ebdd0da91b52655c17c010b82100897037c2dce7f56941850d5bc2f24463071aa2c3263676aef58ebc

data/README.md

@@ -4,7 +4,7 @@ Short description and motivation.
 
 ## Usage
 
-How to use my plugin.
+How to use my module.
 
 ## Installation
 

data/app/assets/images/decidim/decidim-logo.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 255.8 57" style="enable-background:new 0 0 255.8 57;" xml:space="preserve">
+   viewBox="0 0 255.8 57" style="enable-background:new 0 0 255.8 57;" xml:space="preserve">
 <style type="text/css">
   .center{
     fill: #dfe3e9;
@@ -29,30 +29,30 @@
   }
 </style>
 <g>
-	<g>
-		<path class="text" d="M74.3,42.2v-13c0-13.8,6.6-14.1,9-14.1c3,0,5.2,1.8,6.3,3.4l0,0l-0.2-5.2V2.4h7.5v54.1h-5.9l-0.7-3.8
-			c-1.3,2.2-3.5,4.3-7.3,4.3C80.4,57,74.3,56.1,74.3,42.2z M89.4,48.2V23.6c-0.7-1.6-2-3-3.8-3c-2.2,0-3.8,1.3-3.8,7.4v15.7
-			c0,6.1,1.6,7.5,3.8,7.5C87.6,51.1,88.8,49.7,89.4,48.2z"/>
-		<path class="text" d="M103.6,39.7V32c0-15.7,7.5-16.9,11.8-16.9c5.4,0,10.3,2.9,10.3,12.8c0,3.3-0.4,7-1,9.6h-13.6v4.2
-			c0,7.1,1,9.6,4.4,9.6c1.8,0,3.6-1.3,3.6-5.7v-1.3h6.3v1.6c0,7.8-3.8,11.2-10.8,11.2C107.5,57,103.6,51.9,103.6,39.7z M118.7,32.4
-			c0.1-0.9,0.1-3.1,0.1-4.2c0-5.4-1.3-7.6-3.8-7.6c-2.6,0-3.9,2.3-3.9,9.3v2.5H118.7z"/>
-		<path class="text" d="M131,39.7V32c0-15.7,7.4-16.9,11.5-16.9c5.6,0,9.4,2.9,9.4,9c0,1.9-0.2,3.2-0.5,4.4h-6v-1.4
-			c0-4.1-0.9-6.6-3.1-6.6c-2.4,0-3.7,2.1-3.7,9.1v11.6c0,7.1,0.9,9.8,3.8,9.8c1.5,0,2.9-1.3,2.9-5.7v-1.3h6.5v1.6
-			c0,7.8-3.5,11.2-10.3,11.2C134.7,57,131,51.3,131,39.7z"/>
-		<path class="text" d="M157.5,4.8c0-3.5,1.7-4.8,4.5-4.8c2.9,0,4.6,1.5,4.6,4.8c0,3.1-1.6,4.9-4.6,4.9
-			C159.3,9.7,157.5,7.9,157.5,4.8z M158.1,15.5h7.5v41h-7.5V15.5z"/>
-		<path class="text" d="M172.6,42.2v-13c0-13.8,6.6-14.1,9-14.1c3,0,5.2,1.8,6.3,3.4l0,0l-0.2-5.2V2.4h7.5v54.1h-5.9l-0.7-3.8
-			c-1.3,2.2-3.5,4.3-7.3,4.3C178.6,57,172.6,56.1,172.6,42.2z M187.7,48.2V23.6c-0.7-1.6-2-3-3.8-3c-2.2,0-3.8,1.3-3.8,7.4v15.7
-			c0,6.1,1.6,7.5,3.8,7.5C185.9,51.1,187,49.7,187.7,48.2z"/>
-		<path class="text" d="M202.4,4.8c0-3.5,1.7-4.8,4.5-4.8c2.9,0,4.6,1.5,4.6,4.8c0,3.1-1.6,4.9-4.6,4.9
-			C204.2,9.7,202.4,7.9,202.4,4.8z M203,15.5h7.5v41H203V15.5z"/>
-		<path class="text" d="M218.4,15.5h5.8l0.7,4.4v0c2.3-3.7,5.5-4.9,8.5-4.9c3.2,0,5.5,1.5,6.6,4.6c2.3-3.5,5.4-4.6,8.4-4.6
-			c4.7,0,7.5,3.4,7.5,10.1v31.4h-7.5V25.4c0-3.6-1-4.8-3.5-4.8c-1.4,0-2.9,1.1-4,2.9c0,0.4,0,0.7,0,1.1v32h-7.5V25.4
-			c0-3.6-1-4.8-3.5-4.8c-1.3,0-2.8,1.1-3.9,2.8v33.1h-7.5V15.5z"/>
-	</g>
+  <g>
+    <path class="text" d="M74.3,42.2v-13c0-13.8,6.6-14.1,9-14.1c3,0,5.2,1.8,6.3,3.4l0,0l-0.2-5.2V2.4h7.5v54.1h-5.9l-0.7-3.8
+      c-1.3,2.2-3.5,4.3-7.3,4.3C80.4,57,74.3,56.1,74.3,42.2z M89.4,48.2V23.6c-0.7-1.6-2-3-3.8-3c-2.2,0-3.8,1.3-3.8,7.4v15.7
+      c0,6.1,1.6,7.5,3.8,7.5C87.6,51.1,88.8,49.7,89.4,48.2z"/>
+    <path class="text" d="M103.6,39.7V32c0-15.7,7.5-16.9,11.8-16.9c5.4,0,10.3,2.9,10.3,12.8c0,3.3-0.4,7-1,9.6h-13.6v4.2
+      c0,7.1,1,9.6,4.4,9.6c1.8,0,3.6-1.3,3.6-5.7v-1.3h6.3v1.6c0,7.8-3.8,11.2-10.8,11.2C107.5,57,103.6,51.9,103.6,39.7z M118.7,32.4
+      c0.1-0.9,0.1-3.1,0.1-4.2c0-5.4-1.3-7.6-3.8-7.6c-2.6,0-3.9,2.3-3.9,9.3v2.5H118.7z"/>
+    <path class="text" d="M131,39.7V32c0-15.7,7.4-16.9,11.5-16.9c5.6,0,9.4,2.9,9.4,9c0,1.9-0.2,3.2-0.5,4.4h-6v-1.4
+      c0-4.1-0.9-6.6-3.1-6.6c-2.4,0-3.7,2.1-3.7,9.1v11.6c0,7.1,0.9,9.8,3.8,9.8c1.5,0,2.9-1.3,2.9-5.7v-1.3h6.5v1.6
+      c0,7.8-3.5,11.2-10.3,11.2C134.7,57,131,51.3,131,39.7z"/>
+    <path class="text" d="M157.5,4.8c0-3.5,1.7-4.8,4.5-4.8c2.9,0,4.6,1.5,4.6,4.8c0,3.1-1.6,4.9-4.6,4.9
+      C159.3,9.7,157.5,7.9,157.5,4.8z M158.1,15.5h7.5v41h-7.5V15.5z"/>
+    <path class="text" d="M172.6,42.2v-13c0-13.8,6.6-14.1,9-14.1c3,0,5.2,1.8,6.3,3.4l0,0l-0.2-5.2V2.4h7.5v54.1h-5.9l-0.7-3.8
+      c-1.3,2.2-3.5,4.3-7.3,4.3C178.6,57,172.6,56.1,172.6,42.2z M187.7,48.2V23.6c-0.7-1.6-2-3-3.8-3c-2.2,0-3.8,1.3-3.8,7.4v15.7
+      c0,6.1,1.6,7.5,3.8,7.5C185.9,51.1,187,49.7,187.7,48.2z"/>
+    <path class="text" d="M202.4,4.8c0-3.5,1.7-4.8,4.5-4.8c2.9,0,4.6,1.5,4.6,4.8c0,3.1-1.6,4.9-4.6,4.9
+      C204.2,9.7,202.4,7.9,202.4,4.8z M203,15.5h7.5v41H203V15.5z"/>
+    <path class="text" d="M218.4,15.5h5.8l0.7,4.4v0c2.3-3.7,5.5-4.9,8.5-4.9c3.2,0,5.5,1.5,6.6,4.6c2.3-3.5,5.4-4.6,8.4-4.6
+      c4.7,0,7.5,3.4,7.5,10.1v31.4h-7.5V25.4c0-3.6-1-4.8-3.5-4.8c-1.4,0-2.9,1.1-4,2.9c0,0.4,0,0.7,0,1.1v32h-7.5V25.4
+      c0-3.6-1-4.8-3.5-4.8c-1.3,0-2.8,1.1-3.9,2.8v33.1h-7.5V15.5z"/>
+  </g>
 </g>
 <path class="center" d="M54.1,29.1C39.4,28.9,27.5,17,27.3,2.3h-0.5C26.6,17,14.7,28.9,0,29.1v0.5c14.7,0.1,26.6,12,26.8,26.8h0.5
-	c0.1-14.7,12-26.6,26.8-26.8V29.1z"/>
+  c0.1-14.7,12-26.6,26.8-26.8V29.1z"/>
 <path class="top-right-circle" d="M54.1,29.1C53.9,14.4,42,2.5,27.3,2.3C27.5,17,39.4,28.9,54.1,29.1z"/>
 <path class="bottom-right-circle" d="M54.1,29.6c-14.7,0.1-26.6,12-26.8,26.8C42,56.2,53.9,44.3,54.1,29.6z"/>
 <path class="square-top-left" d="M0,2.3v26.8h0c14.7-0.1,26.6-12,26.8-26.8H0z"/>

data/app/assets/images/decidim/default-avatar.svg

@@ -2,13 +2,13 @@
 <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+   width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
 <g>
-	<path fill="#C5C5C5" d="M200-0.5H0v200h26.099c2.885-35.293,24.07-64.381,52.419-74.319C64.372,117.596,54.75,102.674,54.75,85.5
-		c0-24.853,20.146-45,45-45c24.853,0,45,20.147,45,45c0,17.095-9.533,31.963-23.572,39.58c28.5,9.837,49.828,39.002,52.724,74.42
-		H200V-0.5z"/>
-	<path fill="#FFFFFF" d="M121.178,125.08c14.039-7.617,23.572-22.485,23.572-39.58c0-24.853-20.147-45-45-45
-		c-24.854,0-45,20.147-45,45c0,17.174,9.622,32.096,23.768,39.681c-28.349,9.938-49.534,39.026-52.419,74.319h147.803
-		C171.006,164.082,149.678,134.917,121.178,125.08z"/>
+  <path fill="#C5C5C5" d="M200-0.5H0v200h26.099c2.885-35.293,24.07-64.381,52.419-74.319C64.372,117.596,54.75,102.674,54.75,85.5
+    c0-24.853,20.146-45,45-45c24.853,0,45,20.147,45,45c0,17.095-9.533,31.963-23.572,39.58c28.5,9.837,49.828,39.002,52.724,74.42
+    H200V-0.5z"/>
+  <path fill="#FFFFFF" d="M121.178,125.08c14.039-7.617,23.572-22.485,23.572-39.58c0-24.853-20.147-45-45-45
+    c-24.854,0-45,20.147-45,45c0,17.174,9.622,32.096,23.768,39.681c-28.349,9.938-49.534,39.026-52.419,74.319h147.803
+    C171.006,164.082,149.678,134.917,121.178,125.08z"/>
 </g>
 </svg>

data/app/assets/images/decidim/icons.svg

@@ -220,6 +220,7 @@
   <symbol viewBox="0 0 8 8" id="icon-trash"><title>trash</title> <path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/> </symbol>
   <symbol viewBox="0 0 449.956 449.956" id="icon-twitter"><title>twitter</title><path d="M449.956 85.657c-17.702 7.614-35.408 12.37-53.102 14.28 19.985-11.992 33.503-28.932 40.546-50.82-18.28 10.847-37.787 18.268-58.532 22.267-18.274-19.414-40.73-29.125-67.383-29.125-25.502 0-47.246 8.99-65.24 26.98-17.984 17.98-26.977 39.73-26.977 65.23 0 6.85.76 13.892 2.284 21.13-37.688-1.908-73.042-11.37-106.068-28.41-33.024-17.035-61.05-39.73-84.08-68.09-8.376 14.27-12.564 29.785-12.564 46.534 0 15.798 3.71 30.456 11.136 43.97 7.422 13.512 17.417 24.455 29.98 32.83-14.85-.57-28.743-4.474-41.684-11.707v1.14c0 22.27 6.995 41.825 20.983 58.675C53.245 247.395 70.9 258 92.215 262.38c-7.993 2.09-16.084 3.137-24.267 3.137-5.33 0-11.136-.475-17.416-1.42 5.9 18.46 16.75 33.633 32.546 45.535 15.8 11.896 33.69 18.028 53.677 18.418-33.498 26.262-71.66 39.393-114.486 39.393-8.19 0-15.61-.373-22.27-1.14C42.82 393.9 90.03 407.7 141.61 407.7c32.74 0 63.48-5.18 92.21-15.557 28.747-10.368 53.298-24.266 73.666-41.685 20.362-17.415 37.925-37.448 52.674-60.097 14.75-22.65 25.738-46.29 32.977-70.94 7.23-24.65 10.848-49.342 10.848-74.09 0-5.33-.096-9.325-.287-11.99 18.087-13.13 33.504-29.024 46.258-47.673z"/></symbol>
   <symbol viewBox="0 0 8 8" id="icon-underline"><title>underline</title> <path d="M1 0v4c0 1.1 1.12 2 2.5 2h.5c1.1 0 2-.9 2-2v-4h-1v4c0 .55-.45 1-1 1s-1-.45-1-1v-4h-2zm-1 7v1h7v-1h-7z"/> </symbol>
+  <symbol viewBox="0 0 12 12" id="icon-verified-badge"><title>verified-badge</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-10.000000, -10.000000)"><g transform="translate(10.000000, 10.000000)"><circle fill="#EC6A5B" cx="6" cy="6" r="6"></circle><polygon fill="#FFFFFF" points="5.94339623 7.68870417 4.01701324 8.59483494 4.28350974 6.48272604 2.82644308 4.93063676 4.91752996 4.53141244 5.94339623 2.66603774 6.9692625 4.53141244 9.06034938 4.93063676 7.60328272 6.48272604 7.86977921 8.59483494"></polygon></g></g> </symbol>
   <symbol viewBox="0 0 8 8" id="icon-vertical-align-bottom"><title>vertical-align-bottom</title> <path d="M.09 0c-.06 0-.09.04-.09.09v4.81c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-4.81c0-.06-.04-.09-.09-.09h-1.81zm6 0c-.05 0-.09.04-.09.09v4.81c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-4.81c0-.06-.04-.09-.09-.09h-1.81zm-3 2c-.06 0-.09.04-.09.09v2.81c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-2.81c0-.06-.04-.09-.09-.09h-1.81zm-3.09 4v1h8v-1h-8z"/> </symbol>
   <symbol viewBox="0 0 8 8" id="icon-vertical-align-center"><title>vertical-align-center</title> <path d="M.09 0c-.06 0-.09.04-.09.09v1.91h2v-1.91c0-.06-.04-.09-.09-.09h-1.81zm6 0c-.05 0-.09.04-.09.09v1.91h2v-1.91c0-.06-.04-.09-.09-.09h-1.81zm-3 1c-.06 0-.09.04-.09.09v.91h2v-.91c0-.05-.04-.09-.09-.09h-1.81zm-3.09 2v1h8v-1h-8zm0 2v1.91c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-1.91h-2zm3 0v.91c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-.91h-2zm3 0v1.91c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-1.91h-2z"/> </symbol>
   <symbol viewBox="0 0 8 8" id="icon-vertical-align-top"><title>vertical-align-top</title> <path d="M0 0v1h8v-1h-8zm.09 2c-.06 0-.09.04-.09.09v4.81c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-4.81c0-.06-.04-.09-.09-.09h-1.81zm3 0c-.06 0-.09.04-.09.09v2.81c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-2.81c0-.06-.04-.09-.09-.09h-1.81zm3 0c-.05 0-.09.04-.09.09v4.81c0 .05.04.09.09.09h1.81c.05 0 .09-.04.09-.09v-4.81c0-.06-.04-.09-.09-.09h-1.81z"/> </symbol>

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

@@ -12,14 +12,17 @@
 // = require decidim/append_elements
 // = require decidim/user_registrations
 // = require decidim/account_form
-// = require decidim/select2
-// = require decidim/select2.field
+// = require decidim/data_picker
+// = require decidim/append_redirect_url_to_modals
 
 /* globals svg4everybody */
 
 window.Decidim = window.Decidim || {};
 
 $(() => {
+  if (window.Decidim.DataPicker) {
+    window.theDataPicker = new window.Decidim.DataPicker($(".data-picker"));
+  }
   $(document).foundation();
   svg4everybody();
   if (window.Decidim.formDatePicker) {

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

@@ -0,0 +1,84 @@
+/* eslint-disable multiline-ternary, no-ternary */
+// require self
+
+/*
+ *
+ * This is used to make sure users are redirected to
+ * the expected URL after sign in.
+ *
+ * When a button or link trigger a login modal we capture
+ * the event and inject the URL where the user should
+ * be redirected after sign in (the redirect_url param).
+ *
+ * The code is injected to any form or link in the modal
+ * and when the modal is closed we remove the injected
+ * code.
+ *
+ * In order for this to work the button or link must have
+ * a data-open attribute with the ID of the modal to open
+ * and a data-redirect-url attribute with the URL to redirect
+ * the user. If any of this is missing no code will be
+ * injected.
+ *
+ */
+$(() => {
+  const removeUrlParameter = (url, parameter) => {
+    const urlParts = url.split('?');
+
+    if (urlParts.length >= 2) {
+      // Get first part, and remove from array
+      const urlBase = urlParts.shift();
+
+      // Join it back up
+      const queryString = urlParts.join('?');
+
+      const prefix = `${encodeURIComponent(parameter)}=`;
+      const parts = queryString.split(/[&;]/g);
+
+      // Reverse iteration as may be destructive
+      for (let index = parts.length; index > 0; index -= 1) {
+        // Idiom for string.startsWith
+        if (parts[index].lastIndexOf(prefix, 0) !== -1) {
+          parts.splice(index, 1);
+        }
+      }
+
+      if (parts.length === 0) {
+        return urlBase;
+      }
+
+      return `${urlBase}?${parts.join('&')}`;
+    }
+
+    return url;
+  }
+
+  $(document).on("click.zf.trigger", (event) => {
+    const target = `#${$(event.target).data("open")}`;
+    const redirectUrl = $(event.target).data("redirectUrl");
+
+    if (target && redirectUrl) {
+      $("<input type='hidden' />").
+        attr("id", "redirect_url").
+        attr("name", "redirect_url").
+        attr("value", redirectUrl).
+        appendTo(`${target} form`);
+
+      $(`${target} a`).attr("href", (index, href) => {
+        const querystring = jQuery.param({"redirect_url": redirectUrl});
+        return href + (href.match(/\?/) ? '&' : '?') + querystring;
+      });
+    }
+  });
+
+  $(document).on('closed.zf.reveal', (event) => {
+    $("#redirect_url", event.target).remove();
+    $("a", event.target).attr("href", (index, href) => {
+      if (href && href.indexOf("redirect_url") !== -1) {
+        return removeUrlParameter(href, "redirect_url");
+      }
+
+      return href;
+    });
+  });
+});

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

@@ -0,0 +1,177 @@
+/**
+ * DataPicker component.
+ */
+((exports) => {
+  class DataPicker {
+    constructor(elements) {
+      this.modal = this._createModalContainer();
+      this.modal.appendTo($("body"));
+      this.current = null;
+
+      elements.each((_index, element) => {
+        let $element = $(element);
+        let input    = "hidden",
+            name     = $element.data('picker-name'),
+            values   = $(".picker-values", $element);
+
+        if ($element.hasClass("picker-multiple")) {
+          input = "checkbox";
+          name += "[]";
+        }
+
+        $("div", values).each((_index2, div) => {
+          let value = $("a", div).data("picker-value");
+          $(div).prepend($(`<input type="${input}" checked name="${name}" value="${value}"/>`));
+        });
+
+        $element.on("click", "a", (event) => {
+          event.preventDefault();
+          if ($element.hasClass('disabled')) {
+            return;
+          }
+          this._openPicker($element, event.target.parentNode);
+        });
+
+        $element.on("click", "input", (event) => {
+          this._removeValue($element, event.target.parentNode);
+        });
+      });
+    }
+
+    enabled(picker, value) {
+      $(picker).toggleClass("disabled", !value);
+      $("input", picker).attr("disabled", !value);
+    }
+
+    clear(picker) {
+      $(".picker-values", picker).html("");
+    }
+
+    save(picker) {
+      return $(".picker-values div:has(input:checked)", picker).map((_index, div) => {
+        let $link = $("a", div);
+        return {
+          value: $("input", div).val(),
+          text: $link.text(),
+          url: $link.attr("href")
+        };
+      }).get();
+    }
+
+    load(picker, savedData) {
+      this._setCurrentPicker($(picker), null);
+      $.each(savedData, (_index, data) => {
+        this._choose(data, false);
+      });
+    }
+
+    _createModalContainer() {
+      return $(`<div class="small reveal" id="data_picker-modal" aria-hidden="true" role="dialog" aria-labelledby="data_picker-title" data-reveal data-multiple-opened="true">
+                <div class="data_picker-modal-content"></div>
+                <button class="close-button" data-close type="button" data-reveal-id="data_picker-modal"><span aria-hidden="true">&times;</span></button>
+              </div>`);
+    }
+
+    _openPicker($picker, div) {
+      this._setCurrentPicker($picker, div);
+      this._load($("a", div).attr('href'));
+    }
+
+    _setCurrentPicker($picker, div) {
+      let currentDiv = false;
+      if (div && !$(div).hasClass("picker-prompt")) {
+        currentDiv = $(div);
+      }
+
+      this.current = {
+                        multiple: $picker.hasClass("picker-multiple"),
+                        picker: $picker,
+                        name: $picker.data('picker-name'),
+                        values: $picker.find(".picker-values"),
+                        div: currentDiv
+                      };
+    }
+
+    _load(url) {
+      $.ajax(url).done((resp) => {
+        let modalContent = $(".data_picker-modal-content", this.modal);
+        modalContent.html(resp);
+        this._handleLinks(modalContent);
+        this.modal.foundation('open');
+      });
+    }
+
+    _handleLinks(content) {
+      $("a", content).each((_index, link) => {
+        let $link = $(link);
+        $link.click((event) => {
+          event.preventDefault();
+          if ($link.data('data-close')) {
+            return;
+          }
+
+          let chooseUrl = $link.attr('href');
+          if (chooseUrl) {
+            if (typeof $link.data('picker-choose') === 'undefined') {
+              this._load(chooseUrl);
+            } else {
+              this._choose({url: chooseUrl, value: $link.data('picker-value') || "", text: $link.data('picker-text') || ""});
+            }
+          }
+        });
+      });
+    }
+
+    _choose(data, user = true) {
+      // Add or update value appearance
+      if (this.current.div) {
+        let link = $("a", this.current.div);
+        link.data("picker-value", data.value);
+        link.attr("href", data.url);
+        link.text(data.text);
+      } else {
+        let input = "hidden",
+            name  = this.current.name;
+
+        if (this.current.multiple) {
+          input = "checkbox";
+          name += "[]";
+        }
+        this.current.div = $(`<div><input type="${input}" checked name="${name}"/><a href="${data.url}" data-picker-value="${data.value}">${data.text}</a></div>`);
+        this.current.div.appendTo(this.current.values);
+      }
+
+      // Set input value
+      let $input = $("input", this.current.div);
+      $input.attr("value", data.value);
+
+      // Raise changed event
+      if (user) {
+        $input.trigger("change");
+        this._removeErrors();
+        this.modal.foundation('close');
+      }
+
+      // Unselect updated value and close modal
+      this.current.div = null;
+    }
+
+    _removeValue($picker, div) {
+      this._setCurrentPicker($picker, div);
+      this.current.div.fadeOut(500, () => {
+        this.current.div.remove();
+        this.current.div = null;
+      });
+    }
+
+    _removeErrors() {
+      let parent = this.current.picker.parent();
+      $(".is-invalid-input", parent).removeClass("is-invalid-input");
+      $(".is-invalid-label", parent).removeClass("is-invalid-label");
+      $(".form-error.is-visible", parent).removeClass("is-visible");
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.DataPicker = DataPicker;
+})(window);

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

@@ -11,7 +11,6 @@
       this.$form = $form;
       this.id = this.$form.attr('id') || this._getUID();
       this.mounted = false;
-      this.select2Filters = [];
 
       this._onFormChange = this._onFormChange.bind(this);
       this._onPopState = this._onPopState.bind(this);
@@ -32,10 +31,7 @@
     unmountComponent() {
       if (this.mounted) {
         this.mounted = false;
-        this.$form.off('change', 'input:not(.select2-search__field), select', this._onFormChange);
-        this.select2Filters.forEach((select) => {
-          select.destroy();
-        });
+        this.$form.off('change', 'input, select', this._onFormChange);
 
         exports.Decidim.History.unregisterCallback(`filters-${this.id}`)
       }
@@ -49,14 +45,10 @@
     mountComponent() {
       if (this.$form.length > 0 && !this.mounted) {
         this.mounted = true;
-        let select2Filters = this.select2Filters;
-        this.$form.find('select.select2').each(function(index, select) {
-          select2Filters.push(new window.Decidim.Select2Field(select));
-        });
-        this.$form.on('change', 'input:not(.select2-search__field), select', this._onFormChange);
+        this.$form.on('change', 'input, select', this._onFormChange);
 
-        exports.Decidim.History.registerCallback(`filters-${this.id}`, () => {
-          this._onPopState();
+        exports.Decidim.History.registerCallback(`filters-${this.id}`, (state) => {
+          this._onPopState(state);
         });
       }
     }
@@ -142,7 +134,9 @@
     _clearForm() {
       this.$form.find('input[type=checkbox]').attr('checked', false);
       this.$form.find('input[type=radio]').attr('checked', false);
-      this.$form.find('select.select2').val(null).trigger('change.select2');
+      this.$form.find('.data-picker').each((_index, picker) => {
+        exports.theDataPicker.clear(picker);
+      });
 
       // This ensure the form is reset in a valid state where a fieldset of
       // radio buttons has the first selected.
@@ -155,9 +149,10 @@
     /**
      * Handles the logic when going back to a previous state in the filter form.
      * @private
+     * @param {Object} state - state stored along with location URL
      * @returns {Void} - Returns nothing.
      */
-    _onPopState() {
+    _onPopState(state) {
       this._clearForm();
 
       const filterParams = this._parseLocationFilterValues();
@@ -184,16 +179,20 @@
             field = this.$form.find(`input#filter_${fieldId},select#filter_${fieldId}`);
 
             if (field.length > 0) {
-              if (field.hasClass("select2")) {
-                field.val(filterParams[fieldId]).trigger('change.select2');
-              } else {
-                field.val(filterParams[fieldId]);
-              }
+              field.val(filterParams[fieldId]);
             }
           }
         });
       }
 
+      // Retrieves picker information for selected values (value, text and link) from the state object
+      $(".data-picker", this.$form).each((_index, picker) => {
+        let pickerState = state[picker.id];
+        if (pickerState) {
+          exports.theDataPicker.load(picker, pickerState);
+        }
+      })
+
       // Only one instance should submit the form on browser history navigation
       if (this.popStateSubmiter) {
         exports.Rails.fire(this.$form[0], 'submit');
@@ -210,6 +209,7 @@
       const params = this.$form.serialize();
 
       let newUrl = '';
+      let newState = {};
 
       exports.Rails.fire(this.$form[0], 'submit');
 
@@ -219,7 +219,12 @@
         newUrl = `${formAction}&${params}`;
       }
 
-      exports.Decidim.History.pushState(newUrl);
+      // Stores picker information for selected values (value, text and link) in the state object
+      $(".data-picker", this.$form).each((_index, picker) => {
+        newState[picker.id] = exports.theDataPicker.save(picker);
+      })
+
+      exports.Decidim.History.pushState(newUrl, newState);
     }
 
     /**