decidim-core 0.26.5 → 0.27.0.rc1

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

@@ -1,5 +1,4 @@
-/* eslint no-unused-vars: 0 */
-import Tribute from "src/decidim/vendor/tribute"
+import AutoComplete from "src/decidim/autocomplete";
 
 const updateSubmitButton = ($fieldContainer, $selectedItems) => {
   const $form = $fieldContainer.closest("form");
@@ -16,200 +15,101 @@ const updateSubmitButton = ($fieldContainer, $selectedItems) => {
 }
 
 $(() => {
-  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>`;
+  const $fieldContainer = $(".multiple-mentions");
+  if ($fieldContainer.length < 1) {
+    return;
   }
 
-  // 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);
-    };
+  const allMessages = window.Decidim.config.get("messages");
+  const messages = allMessages.mentionsModal || {};
+
+  const $searchInput = $("input", $fieldContainer);
+  const $selectedItems = $(`ul.${$searchInput.data().selected}`);
+  const options = $fieldContainer.data();
+  let selected = [];
+  const iconsPath = window.Decidim.config.get("icons_path");
+  const removeLabel = messages.removeRecipient || "Remove recipient %name%";
+
+  let emptyFocusElement = $fieldContainer[0].querySelector(".empty-list");
+  if (!emptyFocusElement) {
+    emptyFocusElement = document.createElement("div");
+    emptyFocusElement.tabIndex = "-1";
+    emptyFocusElement.className = "empty-list";
+    $selectedItems.before(emptyFocusElement);
   }
 
-  /* 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");
+  updateSubmitButton($fieldContainer, $selectedItems);
+  const autoComplete = new AutoComplete($searchInput[0], {
+    dataMatchKeys: ["name", "nickname"],
+    dataSource: (query, callback) => {
+      $.post("/api", {
+        "query": `
+          {
+            users(filter:{wildcard:"${query}",excludeIds:[]})
+              {
+                id,nickname,name,avatarUrl,__typename,...on UserGroup{membersCount},...on User{
+                  directMessagesEnabled
+                }
+              }
+          }`
+      }).then((response) => {
+        callback(response.data.users);
       });
-
-      updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
-      // Clean input
-      return "";
     },
-    menuItemTemplate: function(item) {
-      let svg = "";
-      let enabled = item.original.directMessagesEnabled === "true";
-      if (window.Decidim && item.original.__typename === "UserGroup") {
-        enabled = true;
-        const iconsPath = window.Decidim.config.get("icons_path");
-        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#icon-members"/></svg></span>`;
+    dataFilter: (list) => {
+      return list.filter(
+        (item) => !selected.includes(item.value.id)
+      );
+    },
+    modifyResult: (element, value) => {
+      $(element).html(`
+        <span class="author__avatar"><img src="${value.avatarUrl}" alt="${value.name}"></span>
+        <strong>${value.nickname}</strong>
+        <small>${value.name}</small>
+      `);
+      if (value.directMessagesEnabled === "false") {
+        $(element).addClass("disabled");
+        $(element).append(`<span>${$searchInput.data().directMessagesDisabled}</span>`);
+      }
+      if (value.membersCount) {
+        $(element).append(`<span class="is-group">${value.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#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) {
-    updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
-
-    // 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");
-      }
-    });
-  };
+  $searchInput.on("selection", (event) => {
+    const feedback = event.detail;
+    const selection = feedback.selection;
+    const id = selection.value.id;
+    if (selected.length >= 9 || selection.value.directMessagesEnabled === "false") {
+      return;
+    }
 
-  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);
-        updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
-      }
-    });
-    // Allow delete with keypress on element in recipients list
-    $element.on("keypress", (event) => {
-      let $target = event.target.parentNode;
-      if ($target.tagName === "LABEL") {
-        deleteRecipient($target);
-        updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
+    const label = removeLabel.replace("%name%", selection.value.name);
+    $selectedItems.append(`
+      <li tabindex="-1">
+        <input type="hidden" name="${options.name}" value="${id}">
+        <img src="${selection.value.avatarUrl}" class="author__avatar" alt="${selection.value.name}">
+        <b>${selection.value.name}</b>
+        <button type="button" class="float-right" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">&times;</button>
+      </li>
+    `);
+
+    autoComplete.setInput("");
+    selected.push(id);
+    updateSubmitButton($fieldContainer, $selectedItems);
+
+    $selectedItems.find(`*[data-remove="${id}"]`).on("keypress click", (evt) => {
+      const target = evt.target.parentNode;
+      if (target.tagName === "LI") {
+        const focusElement = target.nextElementSibling || target.previousElementSibling || emptyFocusElement;
+
+        selected = selected.filter((identifier) => identifier !== id);
+        target.remove();
+
+        updateSubmitButton($fieldContainer, $selectedItems);
+        focusElement.focus();
       }
-    });
-  };
-
-  // 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);
-  }
-});
+    })
+  })
+})

data/app/packs/src/decidim/map/icon.js

@@ -1,10 +1,11 @@
 import * as L from "leaflet";
-import { SVGIcon } from "leaflet-svgicon"
+import { SVGIcon } from "src/decidim/map/svg-icon";
 
 L.DivIcon.SVGIcon = SVGIcon;
 L.DivIcon.SVGIcon.DecidimIcon = L.DivIcon.SVGIcon.extend({
   options: {
     fillColor: "#ef604d",
+    fillOpacity: 1,
     opacity: 0
   },
   _createPathDescription: function() {

data/app/packs/src/decidim/map/svg-icon.js

@@ -0,0 +1,248 @@
+/* eslint prefer-reflect: 0 */
+
+// Leaflet-SVGIcon
+// SVG icon for any marker class
+//
+// Copyright (c) 2016 University of New Hampshire - The MIT License
+// Author: Ilya Atkin <ilya.atkin@unh.edu>
+// Originally copied from https://github.com/iatkin/leaflet-svgicon
+//
+
+let SVGIcon = L.DivIcon.extend({
+  options: {
+    "circleText": "",
+    "className": "svg-icon",
+    // defaults to [iconSize.x/2, iconSize.x/2]
+    "circleAnchor": null,
+    // defaults to color
+    "circleColor": null,
+    // defaults to opacity
+    "circleOpacity": null,
+    "circleFillColor": "rgb(255,255,255)",
+    // default to opacity
+    "circleFillOpacity": null,
+    "circleRatio": 0.5,
+    // defaults to weight
+    "circleWeight": null,
+    "color": "rgb(0,102,255)",
+    // defaults to color
+    "fillColor": null,
+    "fillOpacity": 0.4,
+    "fontColor": "rgb(0, 0, 0)",
+    "fontOpacity": "1",
+    // defaults to iconSize.x/4
+    "fontSize": null,
+    "fontWeight": "normal",
+    // defaults to [iconSize.x/2, iconSize.y] (point tip)
+    "iconAnchor": null,
+    "iconSize": L.point(32, 48),
+    "opacity": 1,
+    "popupAnchor": null,
+    "shadowAngle": 45,
+    "shadowBlur": 1,
+    "shadowColor": "rgb(0,0,10)",
+    "shadowEnable": false,
+    "shadowLength": 0.75,
+    "shadowOpacity": 0.5,
+    "shadowTranslate": L.point(0, 0),
+    "weight": 2
+  },
+  initialize: function(_options) {
+    let options = L.Util.setOptions(this, _options)
+
+    // iconSize needs to be converted to a Point object if it is not passed as one
+    options.iconSize = L.point(options.iconSize)
+
+    // in addition to setting option dependant defaults, Point-based options are converted to Point objects
+    if (options.circleAnchor) {
+      options.circleAnchor = L.point(options.circleAnchor)
+    } else {
+      options.circleAnchor = L.point(Number(options.iconSize.x) / 2, Number(options.iconSize.x) / 2)
+    }
+    if (!options.circleColor) {
+      options.circleColor = options.color
+    }
+    if (!options.circleFillOpacity) {
+      options.circleFillOpacity = options.opacity
+    }
+    if (!options.circleOpacity) {
+      options.circleOpacity = options.opacity
+    }
+    if (!options.circleWeight) {
+      options.circleWeight = options.weight
+    }
+    if (!options.fillColor) {
+      options.fillColor = options.color
+    }
+    if (!options.fontSize) {
+      options.fontSize = Number(options.iconSize.x / 4)
+    }
+    if (options.iconAnchor) {
+      options.iconAnchor = L.point(options.iconAnchor)
+    }
+    else {
+      options.iconAnchor = L.point(Number(options.iconSize.x) / 2, Number(options.iconSize.y))
+    }
+    if (options.popupAnchor) {
+      options.popupAnchor = L.point(options.popupAnchor)
+    }
+    else {
+      options.popupAnchor = L.point(0, (-0.75) * (options.iconSize.y))
+    }
+
+    options.html = this._createSVG()
+  },
+  _createCircle: function() {
+    let cx = Number(this.options.circleAnchor.x)
+    let cy = Number(this.options.circleAnchor.y)
+    let radius = this.options.iconSize.x / 2 * Number(this.options.circleRatio)
+    let fill = this.options.circleFillColor
+    let fillOpacity = this.options.circleFillOpacity
+    let stroke = this.options.circleColor
+    let strokeOpacity = this.options.circleOpacity
+    let strokeWidth = this.options.circleWeight
+    let className = `${this.options.className}-circle`
+
+    let circle = `<circle class="${className}" cx="${cx}" cy="${cy}" r="${radius
+    }" fill="${fill}" fill-opacity="${fillOpacity
+    }" stroke="${stroke}" stroke-opacity=${strokeOpacity}" stroke-width="${strokeWidth}"/>`
+
+    return circle
+  },
+  _createPathDescription: function() {
+    let height = Number(this.options.iconSize.y)
+    let width = Number(this.options.iconSize.x)
+    let weight = Number(this.options.weight)
+    let margin = weight / 2
+
+    let startPoint = `M ${margin} ${width / 2} `
+    let leftLine = `L ${width / 2} ${height - weight} `
+    let rightLine = `L ${width - margin} ${width / 2} `
+    let arc = `A ${width / 4} ${width / 4} 0 0 0 ${margin} ${width / 2} Z`
+
+    let description = startPoint + leftLine + rightLine + arc
+
+    return description
+  },
+  _createPath: function() {
+    let pathDescription = this._createPathDescription()
+    let strokeWidth = this.options.weight
+    let stroke = this.options.color
+    let strokeOpacity = this.options.opacity
+    let fill = this.options.fillColor
+    let fillOpacity = this.options.fillOpacity
+    let className = `${this.options.className}-path`
+
+    let path = `<path class="${className}" d="${pathDescription
+    }" stroke-width="${strokeWidth}" stroke="${stroke}" stroke-opacity="${strokeOpacity
+    }" fill="${fill}" fill-opacity="${fillOpacity}"/>`
+
+    return path
+  },
+  _createShadow: function() {
+    let pathDescription = this._createPathDescription()
+    let strokeWidth = this.options.weight
+    let stroke = this.options.shadowColor
+    let fill = this.options.shadowColor
+    let className = `${this.options.className}-shadow`
+
+    let origin = `${this.options.iconSize.x / 2}px ${this.options.iconSize.y}px`
+    let rotation = this.options.shadowAngle
+    let height = this.options.shadowLength
+    let opacity = this.options.shadowOpacity
+    let blur = this.options.shadowBlur
+    let translate = `${this.options.shadowTranslate.x}px, ${this.options.shadowTranslate.y}px`
+
+    let blurFilter = `<filter id='iconShadowBlur'><feGaussianBlur in='SourceGraphic' stdDeviation='${blur}'/></filter>`
+
+    let shadow = `<path filter="url(#iconShadowBlur") class="${className}" d="${pathDescription}" fill="${fill}" stroke-width="${strokeWidth}" stroke="${stroke}" style="opacity: ${opacity}; transform-origin: ${origin}; transform: rotate(${rotation}deg) translate(${translate}) scale(1, ${height})" />`
+
+    return blurFilter + shadow
+  },
+  _createSVG: function() {
+    let path = this._createPath()
+    let circle = this._createCircle()
+    let text = this._createText()
+    let shadow = ""
+    if (this.options.shadowEnable) {
+      shadow = this._createShadow()
+    }
+
+    let className = `${this.options.className}-svg`
+    let width = this.options.iconSize.x
+    let height = this.options.iconSize.y
+
+    if (this.options.shadowEnable) {
+      width += this.options.iconSize.y * this.options.shadowLength - (this.options.iconSize.x / 2)
+      width = Math.max(width, 32)
+      height += this.options.iconSize.y * this.options.shadowLength
+    }
+
+    let style = `width:${width}px; height:${height}`
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="${className}" style="${style}">${shadow}${path}${circle}${text}</svg>`
+
+    return svg
+  },
+  _createText: function() {
+    let fontSize = `${this.options.fontSize}px`
+    let fontWeight = this.options.fontWeight
+    let lineHeight = Number(this.options.fontSize)
+
+    let coordX = this.options.circleAnchor.x
+    // 35% was found experimentally
+    let coordY = this.options.circleAnchor.y + (lineHeight * 0.35)
+    let circleText = this.options.circleText
+    let textColor = this.options.fontColor.replace("rgb(", "rgba(").replace(")", `,${this.options.fontOpacity})`)
+
+    let text = `<text text-anchor="middle" x="${coordX}" y="${coordY}" style="font-size: ${fontSize}; font-weight: ${fontWeight}" fill="${textColor}">${circleText}</text>`
+
+    return text
+  }
+})
+
+let SVGMarker = L.Marker.extend({
+  options: {
+    "iconFactory": L.divIcon.svgIcon,
+    "iconOptions": {}
+  },
+  initialize: function(latlng, _options) {
+    let options = L.Util.setOptions(this, _options)
+    options.icon = options.iconFactory(options.iconOptions)
+    this._latlng = latlng
+  },
+  onAdd: function(map) {
+    L.Marker.prototype.onAdd.call(this, map)
+  },
+  setStyle: function(style) {
+    if (this._icon) {
+      //      let svg = this._icon.children[0]
+      let iconBody = this._icon.children[0].children[0]
+      let iconCircle = this._icon.children[0].children[1]
+
+      if (style.color && !style.iconOptions) {
+        let stroke = style.color.replace("rgb", "rgba").replace(")", `,${this.options.icon.options.opacity})`)
+        let fill = style.color.replace("rgb", "rgba").replace(")", `,${this.options.icon.options.fillOpacity})`)
+        iconBody.setAttribute("stroke", stroke)
+        iconBody.setAttribute("fill", fill)
+        iconCircle.setAttribute("stroke", stroke)
+
+        this.options.icon.fillColor = fill
+        this.options.icon.color = stroke
+        this.options.icon.circleColor = stroke
+      }
+      if (style.opacity) {
+        this.setOpacity(style.opacity)
+      }
+      if (style.iconOptions) {
+        if (style.color) {
+          style.iconOptions.color = style.color
+        }
+        let iconOptions = L.Util.setOptions(this.options.icon, style.iconOptions)
+        this.setIcon(L.divIcon.svgIcon(iconOptions))
+      }
+    }
+  }
+});
+
+export { SVGMarker, SVGIcon }
+

data/app/packs/src/decidim/security/selfxss_warning.js

@@ -1,10 +1,14 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, no-process-env, no-undef */
 
 $(() => {
   if (!console) {
     return;
   }
 
+  if (process.env.NODE_ENV === "development") {
+    return;
+  }
+
   const allMessages = window.Decidim.config.get("messages");
   if (!allMessages) {
     return;

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

@@ -1,4 +1,4 @@
-import moment from "moment"
+import dayjs from "dayjs"
 
 $(() => {
   let sessionTimeOutEnabled = true;
@@ -8,20 +8,20 @@ $(() => {
   const heartbeatPath = $timeoutModal.data("heartbeat-path");
   const interval = parseInt($timeoutModal.data("session-timeout-interval"), 10);
   const preventTimeOutSeconds = $timeoutModal.data("prevent-timeout-seconds");
-  let endsAt = moment().add(timeoutInSeconds, "seconds");
-  let lastAction = moment();
+  let endsAt = dayjs().add(timeoutInSeconds, "seconds");
+  let lastAction = dayjs();
   const $continueSessionButton = $("#continueSession");
-  let lastActivityCheck = moment();
+  let lastActivityCheck = dayjs();
   // 5 * 60 seconds = 5 Minutes
   const activityCheckInterval = 5 * 60;
-  const preventTimeOutUntil = moment().add(preventTimeOutSeconds, "seconds");
+  const preventTimeOutUntil = dayjs().add(preventTimeOutSeconds, "seconds");
 
   // Ajax request is made at timeout_modal.html.erb
   $continueSessionButton.on("click", () => {
     $timeoutModal.foundation("close");
     // In admin panel we have to hide all overlays
     $(".reveal-overlay").css("display", "none");
-    lastActivityCheck = moment();
+    lastActivityCheck = dayjs();
   })
 
   if (isNaN(interval)) {
@@ -43,7 +43,7 @@ $(() => {
     if (!secondsUntilExpiration) {
       return;
     }
-    endsAt = moment().add(secondsUntilExpiration, "seconds");
+    endsAt = dayjs().add(secondsUntilExpiration, "seconds");
   }
 
   const sessionTimeLeft = () => {
@@ -66,27 +66,27 @@ $(() => {
   }
 
   const userBeenActiveSince = (seconds) => {
-    return (moment() - lastAction) / 1000 < seconds;
+    return (dayjs() - lastAction) / 1000 < seconds;
   }
 
   const exitInterval = setInterval(() => {
-    const timeSinceLastActivityCheckInSeconds = Math.round((moment() - lastActivityCheck) / 1000);
+    const timeSinceLastActivityCheckInSeconds = Math.round((dayjs() - lastActivityCheck) / 1000);
 
     const popupOpen = $("#timeoutModal").parent().css("display") === "block";
     if (!popupOpen && timeSinceLastActivityCheckInSeconds >= activityCheckInterval) {
-      lastActivityCheck = moment();
+      lastActivityCheck = dayjs();
       if (userBeenActiveSince(activityCheckInterval)) {
         heartbeat();
         return;
       }
     }
 
-    const timeRemaining = Math.round((endsAt - moment()) / 1000);
+    const timeRemaining = Math.round((endsAt - dayjs()) / 1000);
     if (timeRemaining > 170) {
       return;
     }
 
-    if (moment() < preventTimeOutUntil) {
+    if (dayjs() < preventTimeOutUntil) {
       heartbeat();
       return;
     }
@@ -106,13 +106,13 @@ $(() => {
   }, interval);
 
   $(document).mousemove(() => {
-    lastAction = moment();
+    lastAction = dayjs();
   })
   $(document).scroll(() => {
-    lastAction = moment();
+    lastAction = dayjs();
   })
   $(document).keypress(() => {
-    lastAction = moment();
+    lastAction = dayjs();
   })
 
   // Devise restarts its own timer on ajax requests,