decidim-core 0.26.5 → 0.27.0.rc1

data/app/packs/src/decidim/sw/a2hs.js

@@ -0,0 +1,28 @@
+const visitedPages = JSON.parse(sessionStorage.getItem("visitedPages")) || []
+const DELAYED_VISITS = 2
+let deferredPrompt = null
+
+const shouldCountVisitedPages = () => sessionStorage.getItem("userChoice") !== "dismissed" && visitedPages.length < DELAYED_VISITS && !visitedPages.includes(location.pathname)
+const shouldPrompt = () => deferredPrompt && sessionStorage.getItem("userChoice") !== "dismissed" && visitedPages.length >= DELAYED_VISITS
+
+window.addEventListener("beforeinstallprompt", (event) => {
+  deferredPrompt = event
+
+  // allow the user browse through different locations before prompt them anything
+  if (shouldCountVisitedPages()) {
+    sessionStorage.setItem("visitedPages", JSON.stringify([...visitedPages, location.pathname]))
+  }
+});
+
+// to trigger the prompt, it must be a "user gesture"
+window.addEventListener("click", async (event) => {
+  if (shouldPrompt()) {
+    event.preventDefault()
+    deferredPrompt.prompt()
+
+    const { outcome } = await deferredPrompt.userChoice;
+    // store the user choice to avoid asking again in the current session
+    sessionStorage.setItem("userChoice", outcome)
+    sessionStorage.removeItem("visitedPages")
+  }
+});

data/app/packs/src/decidim/sw/index.js

@@ -0,0 +1,3 @@
+import "./loader"
+import "./a2hs"
+import "./push-permissions"

data/app/packs/src/decidim/sw/loader.js

@@ -0,0 +1,18 @@
+// check if the browser supports serviceWorker at all
+window.addEventListener("load", async () => {
+  if ("serviceWorker" in navigator) {
+    await navigator.serviceWorker.register("/sw.js", { scope: "/" });
+
+    const mandatoryElements = document.querySelector(".js-sw-mandatory");
+    // Opera uses Opera for versions <= 12 and OPR for versions > 12
+    const isOperaMini =
+      ((navigator.userAgent.indexOf("OPR") > -1) || (navigator.userAgent.indexOf("Opera") > -1)) &&
+      (navigator.userAgent.indexOf("Mini") > -1);
+
+    if (mandatoryElements && isOperaMini) {
+      mandatoryElements.classList.add("hide")
+    }
+  } else {
+    console.log("Your browser doesn't support service workers 🤷‍♀️");
+  }
+});

data/app/packs/src/decidim/sw/push-permissions.js

@@ -0,0 +1,87 @@
+window.addEventListener("DOMContentLoaded", async () => {
+  const GRANTED_PERMISSION = "granted"
+
+  const hideReminder = function() {
+    const reminder = document.querySelector("#push-notifications-reminder")
+    reminder.classList.add("hide")
+  }
+
+  const subscribeToNotifications = async (registration) => {
+    const permission = await window.Notification.requestPermission();
+
+    if (registration && permission === GRANTED_PERMISSION) {
+      const vapidElement = document.querySelector("#vapidPublicKey")
+      // element could not exist in DOM
+      if (vapidElement) {
+        const vapidPublicKeyElement = JSON.parse(vapidElement.value)
+        const subscription = await registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: new Uint8Array(vapidPublicKeyElement)
+        });
+
+        if (subscription) {
+          await fetch("/notifications_subscriptions", {
+            headers: {
+              "Content-Type": "application/json",
+              "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content
+            },
+            method: "POST",
+            body: JSON.stringify(subscription)
+          });
+        }
+      }
+      hideReminder()
+    } else {
+      throw new Error("Permission not granted for Notification");
+    }
+  }
+
+  const unsubscribeFromNotifications = async (registration) => {
+    /* eslint-disable no-shadow */
+    const currentSubscription = await registration.pushManager.getSubscription()
+    const auth = currentSubscription.toJSON().keys.auth
+    await fetch(`/notifications_subscriptions/${auth}`, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content
+      },
+      method: "DELETE"
+    });
+  }
+
+  const setToggleState = async (registration, toggle) => {
+    const currentSubscription = await registration.pushManager.getSubscription()
+    let toggleChecked = false
+
+    if (window.Notification.permission === GRANTED_PERMISSION) {
+      hideReminder()
+      if (currentSubscription) {
+        const auth = currentSubscription.toJSON().keys.auth
+        const subKeys = JSON.parse(document.querySelector("#subKeys").value)
+        // Subscribed && browser notifications enabled
+        if (subKeys.includes(auth)) {
+          toggleChecked = true
+        }
+      }
+    }
+    toggle.checked = toggleChecked
+  }
+
+  if ("serviceWorker" in navigator) {
+    const toggle = document.getElementById("allow_push_notifications")
+
+    if (toggle) {
+      const registration = await navigator.serviceWorker.ready
+
+      setToggleState(registration, toggle)
+
+      toggle.addEventListener("change", async ({ target }) => {
+        if (target.checked) {
+          await subscribeToNotifications(registration);
+        } else {
+          await unsubscribeFromNotifications(registration)
+        }
+      })
+    }
+  }
+});

data/app/packs/src/decidim/sw/sw.js

@@ -0,0 +1,80 @@
+import {
+  imageCache,
+  staticResourceCache,
+  offlineFallback
+} from "workbox-recipes";
+import { registerRoute } from "workbox-routing";
+import { NetworkFirst, NetworkOnly } from "workbox-strategies";
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
+import { ExpirationPlugin } from "workbox-expiration";
+
+
+// https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug#debugging_workbox
+self.__WB_DISABLE_DEV_LOGS = true
+
+/**
+ * This is a workaround to bypass a webpack compilation error
+ *
+ * The InjectManifest function requires the __WB_MANIFEST somewhere in this file,
+ * however, we cannot add precacheAndRoute as the issue suggests,
+ * as the other workbox-recipes won't work properly
+ *
+ * See more: https://github.com/GoogleChrome/workbox/issues/2519#issuecomment-634164566
+ */
+// eslint-disable-next-line no-unused-vars
+const dummy = self.__WB_MANIFEST;
+
+self.addEventListener("push", (event) => {
+  const { title, ...opts } = event.data.json();
+  event.waitUntil(self.registration.showNotification(title, { ...opts }));
+});
+
+// Event handler for click on the notification event
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  // Get all the Window clients
+  event.waitUntil(
+    self.clients.matchAll({ type: "window" }).then((clientsArr) => {
+      const windowToFocus = clientsArr.find((windowClient) => windowClient.url === event.notification.data.url);
+      if (windowToFocus) {
+        // If a Window tab matching the targeted URL already exists, focus that
+        windowToFocus.focus()
+      } else {
+        // Otherwise, open a new tab to the applicable URL and focus it
+        self.clients.
+          openWindow(event.notification.data.url).
+          then((windowClient) => windowClient && windowClient.focus());
+      }
+    })
+  );
+});
+
+// avoid caching admin or users paths
+registerRoute(
+  ({ url }) => ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
+  new NetworkOnly()
+);
+
+// https://developers.google.com/web/tools/workbox/modules/workbox-recipes#pattern_3
+registerRoute(
+  ({ request }) => request.mode === "navigate",
+  new NetworkFirst({
+    networkTimeoutSeconds: 3,
+    cacheName: "pages",
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200]
+      }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 60 * 60
+      })
+    ]
+  }),
+);
+
+// common recipes
+staticResourceCache();
+
+imageCache();
+
+offlineFallback({ pageFallback: "/offline" });

data/app/packs/src/decidim/vizzs/areachart.js

@@ -1,10 +1,15 @@
-/* global d3 */
 /* eslint-disable require-jsdoc, id-length, no-undefined, no-unused-vars, multiline-ternary, no-ternary, no-nested-ternary, no-invalid-this */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
 /* eslint no-unused-vars: 0 */
 
-import * as d3 from "d3";
+import { select, mouse } from "d3-selection";
+import { min, max, extent, ascending, bisector } from "d3-array";
+import { scaleTime, scaleLinear } from "d3-scale";
+import { axisLeft, axisBottom } from "d3-axis";
+import { timeMonth } from "d3-time";
+import { timeFormat, isoParse } from "d3-time-format";
+import { area, line } from "d3-shape";
 
 // lib
 export default function areachart(opts = {}) {
@@ -12,12 +17,12 @@ export default function areachart(opts = {}) {
   const parseData = (data) => {
     // format the data
     data.forEach((d) => {
-      d.key = d3.isoParse(d.key)
+      d.key = isoParse(d.key)
       d.value = Number(d.value)
     });
 
     // order by date
-    return data.sort((x, y) => d3.ascending(x.key, y.key))
+    return data.sort((x, y) => ascending(x.key, y.key))
   }
 
   // OPTIONAL: Helper function to accumulates all data values
@@ -32,7 +37,7 @@ export default function areachart(opts = {}) {
   let data = parseData(opts.data)
   let title = opts.title
   let objectName = opts.objectName || ""
-  let container = d3.select(opts.container)
+  let container = select(opts.container)
   let showAxis = opts.axis || false
   let ratio = (opts.ratio || "").split(":").reduce((a, b) => a / b) || (4 / 3)
   let showTooltip = Object.is(opts.tip, undefined) ? true : opts.tip
@@ -52,20 +57,20 @@ export default function areachart(opts = {}) {
 
   let width = Number(container.node().getBoundingClientRect().width) - margin.left - margin.right
   let height = (width / ratio) - margin.top - margin.bottom
-  let titlePadding = d3.min([width / 10, 32])
+  let titlePadding = min([width / 10, 32])
 
   // set the ranges
-  let x = d3.scaleTime().range([0, width]);
-  let y = d3.scaleLinear().range([height, 0]);
+  let x = scaleTime().range([0, width]);
+  let y = scaleLinear().range([height, 0]);
 
   // define the area
-  let area = d3.area()
+  let _area = area()
     .x((d) => x(d.key))
     .y0(height)
     .y1((d) => y(d.value));
 
   // define the line
-  let valueline = d3.line()
+  let valueline = line()
     .x((d) => x(d.key))
     .y((d) => y(d.value));
 
@@ -76,8 +81,8 @@ export default function areachart(opts = {}) {
     .attr("transform", `translate(${margin.left},${margin.top})`);
 
   // scale the range of the data
-  x.domain(d3.extent(data, (d) => d.key));
-  y.domain([0, d3.max(data, (d) => d.value)]).nice();
+  x.domain(extent(data, (d) => d.key));
+  y.domain([0, max(data, (d) => d.value)]).nice();
 
   // add the valueline path.
   let topLine = svg.append("path")
@@ -89,7 +94,7 @@ export default function areachart(opts = {}) {
   svg.append("path")
     .data([data])
     .attr("class", "area")
-    .attr("d", area)
+    .attr("d", _area)
 
   if (showTooltip) {
     // tooltip
@@ -98,7 +103,7 @@ export default function areachart(opts = {}) {
       .attr("r", 6)
       .style("display", "none")
 
-    let tooltip = d3.select("body").append("div")
+    let tooltip = select("body").append("div")
       .attr("id", `${container.node().id}-tooltip`)
       .attr("class", "chart-tooltip")
       .style("opacity", 0)
@@ -113,8 +118,8 @@ export default function areachart(opts = {}) {
         tooltip.style("opacity", 0)
       })
       .on("mousemove", function() {
-        let x0 = x.invert(d3.mouse(this)[0])
-        let i = d3.bisector((d) => d.key).left(data, x0, 1)
+        let x0 = x.invert(mouse(this)[0])
+        let i = bisector((d) => d.key).left(data, x0, 1)
         let d0 = data[i - 1]
         let d1 = data[i]
         let d = (x0 - d0.key > d1.key - x0) ? d1 : d0
@@ -127,7 +132,7 @@ export default function areachart(opts = {}) {
 
         let tooltipContent = `
           <div class="tooltip-content">
-            ${d3.timeFormat("%e %B %Y")(d.key)}<br />
+            ${timeFormat("%e %B %Y")(d.key)}<br />
             ${d.value.toLocaleString()} ${objectName}
           </div>`
 
@@ -139,11 +144,11 @@ export default function areachart(opts = {}) {
   }
 
   if (showAxis) {
-    let xAxis = d3.axisBottom(x)
-      .ticks(d3.timeMonth)
-      .tickFormat(d3.timeFormat("%b %y"))
+    let xAxis = axisBottom(x)
+      .ticks(timeMonth)
+      .tickFormat(timeFormat("%b %y"))
       .tickSize(-height)
-    let yAxis = d3.axisLeft(y)
+    let yAxis = axisLeft(y)
       .ticks(5)
       .tickSize(8)
 
@@ -200,10 +205,10 @@ export default function areachart(opts = {}) {
         .text(title)
         .call(function(fulltext, wrapwidth, start = 0) {
           fulltext.each(function() {
-            let text = d3.select(this)
+            let text = select(this)
             let word = ""
             let words = text.text().split(/\s+/).reverse()
-            let line = []
+            let _line = []
             let lineNumber = 0
             let lineHeight = 1.1
             let _x = text.attr("x")
@@ -217,12 +222,12 @@ export default function areachart(opts = {}) {
 
             /* eslint-disable no-cond-assign, no-plusplus */
             while (word = words.pop()) {
-              line.push(word);
-              tspan.text(line.join(" "));
+              _line.push(word);
+              tspan.text(_line.join(" "));
               if (tspan.node().getComputedTextLength() > wrapwidth) {
-                line.pop()
-                tspan.text(line.join(" "))
-                line = [word]
+                _line.pop()
+                tspan.text(_line.join(" "))
+                _line = [word]
                 tspan = text.append("tspan")
                   .attr("x", _x)
                   .attr("y", _y)

data/app/packs/src/decidim/vizzs/linechart.js

@@ -1,9 +1,15 @@
 /* eslint-disable require-jsdoc, max-lines, id-length, no-invalid-this, no-cond-assign, no-unused-vars, max-params, no-undefined, no-sequences, multiline-ternary, no-ternary */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
-/* global d3, DATACHARTS, fetchDatacharts */
+/* global DATACHARTS, fetchDatacharts */
 
-import * as d3 from "d3"
+import { select, mouse } from "d3-selection";
+import { extent, ascending } from "d3-array";
+import { scaleTime, scaleLinear } from "d3-scale";
+import { axisLeft, axisBottom } from "d3-axis";
+import { timeMonth } from "d3-time";
+import { timeFormat, isoParse } from "d3-time-format";
+import { line } from "d3-shape";
 
 export default function renderLineCharts() {
   // lib
@@ -15,9 +21,9 @@ export default function renderLineCharts() {
     let data = opts.data
     let title = opts.title
     let subtitle = opts.subtitle
-    let container = d3.select(opts.container)
+    let container = select(opts.container)
     let ratio = opts.ratio
-    let xTickFormat = opts.xTickFormat || d3.timeFormat("%b %y")
+    let xTickFormat = opts.xTickFormat || timeFormat("%b %y")
     let showTooltip = opts.tip !== "false"
 
     // precalculation
@@ -40,13 +46,13 @@ export default function renderLineCharts() {
     let height = (width / ratio) - margin.top - margin.bottom
 
     // set the ranges
-    const x = d3.scaleTime().range([0, width])
-    const y = d3.scaleLinear().range([height, 0])
+    const x = scaleTime().range([0, width])
+    const y = scaleLinear().range([height, 0])
 
     // set the scales
-    x.domain(d3.extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.key))))]))
+    x.domain(extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.key))))]))
     // group names
-    y.domain(d3.extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))]))
+    y.domain(extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))]))
 
     // container
     let svg = container.append("svg")
@@ -103,23 +109,22 @@ export default function renderLineCharts() {
       .attr("transform", `translate(${margin.left},${margin.top - headerHeight})`)
       .attr("class", "group")
 
-    let line = d3.line()
-      // .curve(d3.curveBasis)
+    let _line = line()
       .x((d) => x(d.key))
       .y((d) => y(d.value))
 
     let cat = g.selectAll("path")
       .data(data)
       .enter().append("path")
-      .attr("d", (d) => line(d.value))
+      .attr("d", (d) => _line(d.value))
       .attr("class", (d) =>  `line type-${keys.indexOf(d.key)}`)
 
     // axis
-    let xAxis = d3.axisBottom(x)
-      .ticks(d3.timeMonth.every(4))
+    let xAxis = axisBottom(x)
+      .ticks(timeMonth.every(4))
       .tickSize(-height)
       .tickFormat(xTickFormat)
-    let yAxis = d3.axisLeft(y)
+    let yAxis = axisLeft(y)
       .ticks(5)
 
     let _xAxis = (xg) => {
@@ -146,7 +151,7 @@ export default function renderLineCharts() {
 
     // tooltip
     if (showTooltip) {
-      let tooltip = d3.select("body").append("div")
+      let tooltip = select("body").append("div")
         .attr("id", `${container.node().id}-tooltip`)
         .attr("class", "chart-tooltip")
         .style("opacity", 0)
@@ -159,7 +164,7 @@ export default function renderLineCharts() {
           tooltip.style("opacity", 0)
         })
         .on("mousemove", function() {
-          let x0 = x.invert(d3.mouse(this)[0])
+          let x0 = x.invert(mouse(this)[0])
 
           let ge = []
           data.forEach((o) => {
@@ -225,10 +230,10 @@ export default function renderLineCharts() {
       // format the data
       data.forEach((d) => {
         d.value.forEach((f) => {
-          f.key = d3.isoParse(f.key)
+          f.key = isoParse(f.key)
         })
 
-        d.value.sort((x, y) => d3.ascending(x.key, y.key))
+        d.value.sort((x, y) => ascending(x.key, y.key))
       });
 
       return data

data/app/packs/src/decidim/vizzs/rowchart.js

@@ -1,9 +1,13 @@
 /* eslint-disable require-jsdoc, max-lines, id-length, no-invalid-this, no-cond-assign, no-unused-vars, max-params, no-sequences, no-ternary */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
-/* global d3, DATACHARTS, fetchDatacharts */
+/* global DATACHARTS, fetchDatacharts */
 
-import * as d3 from "d3"
+import { select } from "d3-selection";
+import { max } from "d3-array";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { axisLeft, axisBottom } from "d3-axis";
+import "d3-transition"
 
 export default function renderRowCharts() {
   // lib
@@ -15,14 +19,14 @@ export default function renderRowCharts() {
     let data = opts.data
     let title = opts.title
     let subtitle = opts.subtitle
-    let container = d3.select(opts.container)
+    let container = select(opts.container)
     let ratio = opts.ratio
     let xTickFormat = opts.xTickFormat
     let showTooltip = opts.tip !== "false"
 
     // precalculation
     // Explanation: get the inner values foreach object outer values, flat the array, remove duplicates
-    let maxValue = d3.max([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))])
+    let maxValue = max([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))])
     // Explanation: get the inner keys foreach object outer values, flat the array, remove duplicates
     let keys = [...new Set([].concat(...data.map((f) => f.value.map((d) => d.key))))]
 
@@ -57,9 +61,9 @@ export default function renderRowCharts() {
     let height = (width / ratio) - margin.top - margin.bottom
 
     // set the ranges
-    const x = d3.scaleLinear().rangeRound([0, width])
-    const y0 = d3.scaleBand().rangeRound([height, 0]).paddingInner(0.1)
-    const y1 = d3.scaleBand().padding(0.05)
+    const x = scaleLinear().rangeRound([0, width])
+    const y0 = scaleBand().rangeRound([height, 0]).paddingInner(0.1)
+    const y1 = scaleBand().padding(0.05)
 
     // set the scales
     x.domain([0, maxValue]).nice()
@@ -123,11 +127,11 @@ export default function renderRowCharts() {
       .attr("transform", `translate(${margin.left},${margin.top - headerHeight})`)
 
     // axis
-    let xAxis = d3.axisBottom(x)
+    let xAxis = axisBottom(x)
       .ticks(5)
       .tickSize(-height)
       .tickFormat(xTickFormat)
-    let yAxis = d3.axisLeft(y0)
+    let yAxis = axisLeft(y0)
 
     let _xAxis = (xg) => {
       xg.call(xAxis)
@@ -142,7 +146,7 @@ export default function renderRowCharts() {
       yg.selectAll(".tick text")
         .attr("class", "text-large")
         .each(function() {
-          let text = d3.select(this)
+          let text = select(this)
           let limitLength = margin.left - (gutter * 10)
 
           if (text.node().getComputedTextLength() > limitLength) {
@@ -210,7 +214,7 @@ export default function renderRowCharts() {
 
     // tooltip
     if (showTooltip) {
-      let tooltip = d3.select("body").append("div")
+      let tooltip = select("body").append("div")
         .attr("id", `${container.node().id}-tooltip`)
         .attr("class", "chart-tooltip")
         .style("opacity", 0)

data/app/packs/stylesheets/decidim/email.scss

@@ -25,13 +25,6 @@ body{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-
-  &.preview{
-    .see-on-website,
-    .unsubscribe{
-      cursor: not-allowed;
-    }
-  }
 }
 
 .ExternalClass{
@@ -1788,3 +1781,69 @@ th,
 td{
   box-sizing: border-box;
 }
+
+.email-notifications-digest{
+  .email-header{
+    margin-bottom: 32px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #2c2930;
+    display: inline-block;
+    width: 49%;
+
+    &--right{
+      text-align: right;
+    }
+  }
+
+  .email-intro{
+    font-size: 16px;
+    line-height: 21px;
+  }
+
+  .email-content-notifications{
+    background-color: #f4f4f4;
+    border-radius: 5px;
+    border: 1px #e5e5e5;
+    padding: 16px;
+    margin: 32px 0;
+  }
+
+  .email-content-notification{
+    p a{
+      color: #327f9b;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+
+  .email-element-separator{
+    margin: 24px 0;
+    color: #e5e5e5;
+    border-color: #e5e5e5;
+    height: 0;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  .email-notification-date{
+    color: #666d7a;
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .email-closing{
+    font-size: 14px;
+  }
+
+  .email-btn{
+    border: solid 1px;
+    margin: 0 33% 30px;
+    width: 33%;
+    text-align: center;
+    display: inline-block;
+    padding: 10px;
+    color: #5295ad;
+    text-decoration: none;
+  }
+}

data/app/packs/stylesheets/decidim/layouts/_user.scss

@@ -37,6 +37,14 @@
   }
 }
 
+.account-notification{
+  display: flex;
+
+  &.callout.flash{
+    margin-bottom: 1rem;
+  }
+}
+
 .badge-card__content{
   @extend .card__content;