release version 0.6.0

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:ava/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "ava"
+  ],
+  "ignorePatterns": [
+    "gulpfile.js"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ]
+  }
+}

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '39 19 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build-prod

.gitignore

@@ -1,3 +1,4 @@
 build/
+coverage/
 node_modules/
 vendor/

README.md

@@ -1,5 +1,9 @@
 # Connector for Mobilizon
 
+Connector for Mobilizon allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
+
+More details can be found in the [WordPress Plugin Directory](https://wordpress.org/plugins/connector-mobilizon/).
+
 ## Development
 
 ### Setup
@@ -13,10 +17,19 @@
 
 ### Release procedure
 1. Make sure `changelog.txt` is up-to-date. Use a new version number and copy over the new section into `readme.txt`.
-2. Build: `npm run build-prod`
-3. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
-4. Make sure screenshots are up-to-date.
+2. Update `package.json` with the same version number.
+3. Update the `package-lock.json`: `npm i --package-lock-only`
+4. Build: `npm run build-prod`
+5. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
+6. Make sure screenshots are up-to-date.
+7. Copy the built plugin into `/trunk` of SVN.
+8. Create a new tag of the new version: `svn cp trunk tags/<version>`
+9. Check the version number occurences in both folders.
+10. Commit everything together to the release SVN: `svn ci -m "release version <version>"`
+11. Commit and tag the new version in `git` too.
 
 ### Other commands
+- Run ESLint: `npm run eslint`
+- Run JavaScript code coverage with tests: `npm run coverage`
 - Run tests: `npm test`
 - Delete build folder: `gulp clean`

assets/icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(3.1904,0,0,3.1904,-120.199,-271.206)">
+        <circle cx="37.675" cy="125.127" r="29.385" style="fill:rgb(71,68,103);"/>
+    </g>
+    <g transform="matrix(1.26548,0,0,2.29215,-58.5821,-124.97)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+    <g transform="matrix(1.18916,0.432821,-0.783962,2.15392,28.3042,-121.978)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+    <g transform="matrix(1.18916,-0.432821,0.783962,2.15392,-144.737,-97.4496)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+</svg>

gulpfile.js

@@ -32,7 +32,7 @@ function bundleFrontend() {
       },
     }))
     .pipe(dest(FOLDER_BUILD));
-  }
+}
 
 function copyBackend() {
   return src([
@@ -52,6 +52,7 @@ function injectMetadata() {
     .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
     .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
     .pipe(replace('<wordpress-description>', PACKAGE.description))
+    .pipe(replace('<wordpress-donation-link>', PACKAGE.funding.url))
     .pipe(replace('<wordpress-license>', PACKAGE.license))
     .pipe(replace('<wordpress-minimum-version>', PACKAGE.additionalDetails.wordpressMinimumVersion))
     .pipe(replace('<wordpress-name>', PACKAGE.name))

package.json

@@ -1,33 +1,43 @@
 {
   "name": "connector-mobilizon",
-  "version": "0.2.1",
-  "description": "Display mobilizon events in WordPress.",
+  "version": "0.6.0",
+  "description": "Display Mobilizon events in WordPress.",
   "private": true,
   "scripts": {
     "build-dev": "gulp dev",
     "build-prod": "ava && gulp prod",
+    "coverage": "c8 --all --reporter=html --reporter=text --include=source/**/*.js ava",
+    "eslint": "npx eslint source/**/*.js",
     "test": "ava"
   },
   "author": {
     "name": "Daniel Waxweiler",
     "url": "https://www.danielwaxweiler.net/"
   },
+  "funding": {
+    "type": "individual",
+    "url": "https://paypal.me/dwaxweiler"
+  },
   "license": "Apache-2.0",
   "dependencies": {
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
-    "luxon": "^1.25.0"
+    "luxon": "^1.27.0",
+    "object-hash": "^2.2.0"
   },
   "devDependencies": {
     "ava": "^3.15.0",
+    "c8": "^7.7.2",
     "del": "^6.0.0",
+    "eslint": "^7.27.0",
+    "eslint-plugin-ava": "^12.0.0",
     "esm": "^3.2.25",
     "gulp": "^4.0.2",
-    "gulp-replace": "^1.0.0",
-    "jsdom": "^16.4.0",
-    "webpack": "^5.11.1",
-    "webpack-cli": "^4.3.1",
-    "webpack-stream": "^6.1.1"
+    "gulp-replace": "^1.1.3",
+    "jsdom": "^16.6.0",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-stream": "^6.1.2"
   },
   "ava": {
     "files": [
@@ -41,6 +51,6 @@
     "niceName": "Connector for Mobilizon",
     "phpMinimumVersion": 5.4,
     "wordpressMinimumVersion": 5.6,
-    "wordpressTestedUpToVersion": 5.6
+    "wordpressTestedUpToVersion": 5.7
   }
 }

source/connector-mobilizon/changelog.txt

@@ -1,22 +1,61 @@
 ### [Unreleased]
-Added
-Changed
-Deprecated
-Removed
-Fixed
-Security
+#### Added
+#### Changed
+#### Deprecated
+#### Removed
+#### Fixed
+#### Security
+
+### [0.6.0] - 2021-06-02
+#### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
+#### Changed
+- Update dependencies
+#### Fixed
+- Capitalise Mobilizon name in description
+
+### [0.5.0] - 2021-05-06
+#### Added
+- Localise dates based on the WordPress locale and time zone
+#### Changed
+- Clearly list features in `readme.txt` description
+- Update dev dependencies c8, eslint, gulp-replace, webpack
+#### Fixed
+- Improve translatability
+
+### [0.4.0] - 2021-04-20
+#### Added
+- Show events' location if set: `description` and `locality` fields
+- Plugin icon
+#### Changed
+- Update dev dependencies eslint, jsdom, webpack
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
 
 ### [0.2.1] - 2021-01-15
-Changed
+#### Fixed
 - Add missing backtick to `readme.txt`
 
 ### [0.2.0] - 2021-01-15
-Added
+#### Added
 - `changelog.txt`
 - Changelog maintenance steps to `README.md`
 - Link to Github repository in `readme.txt`
 - Option to show events of a specific group by indicating its name
-Changed
+#### Changed
 - Use same Markdown style in `README.md` as in other documents
 
 ### [0.1.0] - 2021-01-09

source/connector-mobilizon/connector-mobilizon.php

@@ -1,10 +1,10 @@
 <?php
 /**
- * Plugin Name: 	    <wordpress-nice-name>
- * Author: 				    <wordpress-author-name>
- * Author URI:		    <wordpress-author-url>
- * Description: 	    <wordpress-description>
- * Version:				    <wordpress-version>
+ * Plugin Name:       <wordpress-nice-name>
+ * Author:            <wordpress-author-name>
+ * Author URI:        <wordpress-author-url>
+ * Description:       <wordpress-description>
+ * Version:           <wordpress-version>
  * Requires at least: <wordpress-minimum-version>
  * Requires PHP:      <wordpress-php-minimum-version>
  * License:           <wordpress-license>

source/connector-mobilizon/front/date-time-wrapper-test.js

@@ -1,43 +1,43 @@
-import test from 'ava';
-import { DateTimeWrapper } from './date-time-wrapper';
+import test from 'ava'
+import DateTimeWrapper from './date-time-wrapper'
 
 test('#getShortDate usual date', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
   t.is(d.getShortDate(), '24/12/2020')
 })
 
 test('#get24Time usual time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  t.is(d.get24Time(), '17:45')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.get24Time(), '16:45')
 })
 
 test('#equalsDate same date, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-12-24T17:46:01Z')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-12-24T17:46:01Z' })
   t.true(d.equalsDate(e))
 })
 
 test('#equalsDate different date, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2021-11-25T17:46:01Z')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2021-11-25T17:46:01Z' })
   t.false(d.equalsDate(e))
 })
 
 test('#equalsDate different day, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-12-25T17:46:01Z')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-12-25T17:46:01Z' })
   t.false(d.equalsDate(e))
 })
 
 test('#equalsDate different month, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-11-24T17:46:01Z')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-11-24T17:46:01Z' })
   t.false(d.equalsDate(e))
 })
 
 test('#equalsDate different year, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2021-12-24T17:46:01Z')
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2021-12-24T17:46:01Z' })
   t.false(d.equalsDate(e))
 })
 
@@ -51,3 +51,8 @@ test('#getCurrentDatetimeAsString correct format', t => {
   t.is(d[19], '.')
   t.is(d[d.length-3], ':')
 })
+
+test('#getShortOffsetName usual time', t => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.getShortOffsetName(), 'UTC')
+})

source/connector-mobilizon/front/date-time-wrapper.js

@@ -1,15 +1,19 @@
-import { DateTime } from 'luxon';
+import { DateTime } from 'luxon'
 
-export class DateTimeWrapper {
+export default class DateTimeWrapper {
 
-  constructor(text) {
-    this.dateTime = DateTime.fromISO(text)
+  constructor({ locale = 'en-GB', text, timeZone = 'utc' } = {}) {
+    this.dateTime = DateTime.fromISO(text, { locale, zone: timeZone })
   }
 
   getShortDate() {
     return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
   }
 
+  getShortOffsetName() {
+    return this.dateTime.offsetNameShort
+  }
+
   get24Time() {
     return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
   }
@@ -23,6 +27,6 @@ export class DateTimeWrapper {
   }
 
   static getCurrentDatetimeAsString() {
-    return DateTime.local().toString();
+    return DateTime.now().toString()
   }
 }

source/connector-mobilizon/front/events-displayer-test.js

@@ -0,0 +1,61 @@
+import test from 'ava'
+import { JSDOM } from 'jsdom'
+
+import { displayEvents, displayErrorMessage } from './events-displayer'
+
+let document
+
+test.before(() => {
+  document = new JSDOM().window.document
+})
+
+test.beforeEach(t => {
+  t.context.list = document.createElement('ul')
+  t.context.list.setAttribute('data-locale', 'en-GB')
+  t.context.list.setAttribute('data-maximum', '2')
+  t.context.list.setAttribute('data-time-zone', 'utc')
+  const listElement = document.createElement('li')
+  listElement.setAttribute('style', 'display: none;')
+  t.context.list.appendChild(listElement)
+})
+
+test('#displayEvents one event', t => {
+  const list = t.context.list
+  const data = {
+    events: {
+      elements: [
+        {
+          title: 'a',
+          url: 'b',
+          beginsOn: '2021-04-15T10:30:00Z',
+          endsOn: '2021-04-15T15:30:00Z',
+          physicalAddress: {
+            description: 'c',
+            locality: 'd'
+          }
+        }
+      ]
+    }
+  }
+  displayEvents({ data, document, list })
+  t.is(list.children.length, 2)
+  t.is(list.children[1].childNodes[0].tagName, 'A')
+  t.is(list.children[1].childNodes[0].getAttribute('href'), 'b')
+  t.is(list.children[1].childNodes[0].childNodes[0].nodeValue, 'a')
+  t.is(list.children[1].childNodes[1].tagName, 'BR')
+  t.is(list.children[1].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
+  t.is(list.children[1].childNodes[3].tagName, 'BR')
+  t.is(list.children[1].childNodes[4].nodeValue, 'c, d')
+})
+
+test('#displayErrorMessage no children added', t => {
+  const list = t.context.list
+  displayErrorMessage({ data: '', list })
+  t.is(list.children.length, 1)
+})
+
+test('#displayErrorMessage error message display', t => {
+  const list = t.context.list
+  displayErrorMessage({ data: '', list })
+  t.is(list.children[0].style.display, 'block')
+})

source/connector-mobilizon/front/events-displayer.js

@@ -0,0 +1,51 @@
+import Formatter from './formatter'
+import { createAnchorElement } from './html-creator'
+
+export function displayEvents({ data, document, list }) {
+  const locale = list.getAttribute('data-locale')
+  const maxEventsCount = list.getAttribute('data-maximum')
+  const timeZone = list.getAttribute('data-time-zone')
+  const isShortOffsetNameShown = list.hasAttribute('data-is-short-offset-name-shown')
+  const events = data.events ? data.events.elements : data.group.organizedEvents.elements
+  const eventsCount = Math.min(maxEventsCount, events.length)
+  for (let i = 0; i < eventsCount; i++) {
+    const li = document.createElement('li')
+
+    const a = createAnchorElement({ document, text: events[i].title, url: events[i].url })
+    li.appendChild(a)
+
+    const br = document.createElement('br')
+    li.appendChild(br)
+
+    const date = Formatter.formatDate({
+      locale,
+      start: events[i].beginsOn,
+      end: events[i].endsOn,
+      timeZone,
+      isShortOffsetNameShown,
+    })
+    const textnode = document.createTextNode(date)
+    li.appendChild(textnode)
+
+    if (events[i].physicalAddress) {
+      const location = Formatter.formatLocation({
+        description: events[i].physicalAddress.description,
+        locality: events[i].physicalAddress.locality
+      })
+      if (location) {
+        const brBeforeLocation = document.createElement('br')
+        li.appendChild(brBeforeLocation)
+
+        const textnodeLocation = document.createTextNode(location)
+        li.appendChild(textnodeLocation)
+      }
+    }
+
+    list.appendChild(li)
+  }
+}
+
+export function displayErrorMessage({ data, list }) {
+  console.error(data)
+  list.children[0].style.display = 'block'
+}

source/connector-mobilizon/front/events-loader.js

@@ -1,59 +1,22 @@
-import { DateTimeWrapper } from './date-time-wrapper';
+import { displayEvents, displayErrorMessage } from './events-displayer'
 import * as GraphqlWrapper from './graphql-wrapper'
-import * as HtmlCreator from './html-creator'
 
-const NAME = '<wordpress-name>';
-
-function displayEvents(data, list) {
-  const maxEventsCount = list.getAttribute('data-maximum')
-  const events = data.events ? data.events.elements : data.group.organizedEvents.elements
-  const eventsCount = Math.min(maxEventsCount, events.length)
-  for (let i = 0; i < eventsCount; i++) {
-    const li = document.createElement('li')
-    
-    const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
-    li.appendChild(a)
-
-    const br = document.createElement('br')
-    li.appendChild(br)
-
-    const beginsOn = new DateTimeWrapper(events[i].beginsOn)
-    const endsOn = new DateTimeWrapper(events[i].endsOn)
-    let dateText = beginsOn.getShortDate()
-    dateText += ' ' + beginsOn.get24Time()
-    dateText += ' - '
-    if (!beginsOn.equalsDate(endsOn)) {
-        dateText += endsOn.getShortDate() + ' '
-    }
-    dateText += endsOn.get24Time()
-    const textnode = document.createTextNode(dateText);
-    li.appendChild(textnode)
-
-    list.appendChild(li)
-  }
-}
-
-function displayErrorMessage(data, list) {
-  console.error(data)
-  for (let i = 0; i < list.children.length; i++) {
-    list.children[i].style.display = 'block'
-  }
-}
+const NAME = '<wordpress-name>'
 
 document.addEventListener('DOMContentLoaded', () => {
   const eventLists = document.getElementsByClassName(NAME + '_events-list')
   for (let list of eventLists) {
     const url = list.getAttribute('data-url') + '/api'
-    const limit = list.getAttribute('data-maximum')
+    const limit = parseInt(list.getAttribute('data-maximum'))
     const groupName = list.getAttribute('data-group-name')
     if (groupName) {
       GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
-        .then((data) => displayEvents(data, list))
-        .catch((data) => displayErrorMessage(data, list))
+        .then((data) => displayEvents({ data, document, list }))
+        .catch((data) => displayErrorMessage({ data, list }))
     } else {
       GraphqlWrapper.getUpcomingEvents({ url, limit })
-        .then((data) => displayEvents(data, list))
-        .catch((data) => displayErrorMessage(data, list))
+        .then((data) => displayEvents({ data, document, list }))
+        .catch((data) => displayErrorMessage({ data, list }))
     }
   }
 })

source/connector-mobilizon/front/formatter-test.js

@@ -0,0 +1,37 @@
+import test from 'ava'
+import Formatter from './formatter'
+
+test('#formatDate one date', t => {
+  const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-15T15:30:00Z' })
+  t.is(date, '15/04/2021 10:30 - 15:30')
+})
+
+test('#formatDate one date with short offset name', t => {
+  const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-15T15:30:00Z', isShortOffsetNameShown: true })
+  t.is(date, '15/04/2021 10:30 - 15:30 (UTC)')
+})
+
+test('#formatDate two dates', t => {
+  const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-16T15:30:00Z' })
+  t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30')
+})
+
+test('#formatDate two dates with short offset name', t => {
+  const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-16T15:30:00Z', isShortOffsetNameShown: true })
+  t.is(date, '15/04/2021 10:30 (UTC) - 16/04/2021 15:30 (UTC)')
+})
+
+test('#formatLocation both parameters', t => {
+  const date = Formatter.formatLocation({ description: 'a', locality: 'b' })
+  t.is(date, 'a, b')
+})
+
+test('#formatLocation description only', t => {
+  const date = Formatter.formatLocation({ description: 'a' })
+  t.is(date, 'a')
+})
+
+test('#formatLocation locality only', t => {
+  const date = Formatter.formatLocation({ locality: 'a' })
+  t.is(date, 'a')
+})

source/connector-mobilizon/front/formatter.js

@@ -0,0 +1,39 @@
+import DateTimeWrapper from './date-time-wrapper'
+
+export default class Formatter {
+  
+  static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
+    const startDateTime = new DateTimeWrapper({ locale, text: start, timeZone })
+    const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
+    let dateText = startDateTime.getShortDate()
+    dateText += ' ' + startDateTime.get24Time()
+    if (!startDateTime.equalsDate(endDateTime)) {
+      if (isShortOffsetNameShown) {
+        dateText += ' (' + startDateTime.getShortOffsetName() + ')'
+      }
+      dateText += ' - '
+      dateText += endDateTime.getShortDate() + ' '
+    } else {
+      dateText += ' - '
+    }
+    dateText += endDateTime.get24Time()
+    if (isShortOffsetNameShown) {
+      dateText += ' (' + endDateTime.getShortOffsetName() + ')'
+    }
+    return dateText
+  }
+
+  static formatLocation({ description, locality }) {
+    let location = ''
+    if (description) {
+      location += description
+    }
+    if (location && locality) {
+      location += ', '
+    }
+    if (locality) {
+      location += locality
+    }
+    return location
+  }
+}

source/connector-mobilizon/front/graphql-wrapper.js

@@ -1,41 +1,64 @@
-import { request, gql } from 'graphql-request'
-import { DateTimeWrapper } from './date-time-wrapper'
+import SessionCache from './session-cache'
+import { request } from 'graphql-request'
+import DateTimeWrapper from './date-time-wrapper'
 
 export function getUpcomingEvents({ url, limit }) {
-  const query = gql`
-  query {
-    events(limit:${limit}) {
-      elements {
-        id,
-        title,
-        url,
-        beginsOn,
-        endsOn
-      },
-      total
-    }
-  }
-  `
-  return request(url, query)
-}
-
-export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
-  const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString();
-  const query = gql`
-  query {
-    group(preferredUsername:"${groupName}") {
-      organizedEvents(afterDatetime:"${afterDatetime}", limit:${limit}) {
+  const query = `
+    query ($limit: Int) {
+      events(limit: $limit) {
         elements {
           id,
           title,
           url,
           beginsOn,
-          endsOn
+          endsOn,
+          physicalAddress {
+            description,
+            locality
+          }
         },
         total
       }
     }
-  }
   `
-  return request(url, query)
+  const dataInCache = SessionCache.get(sessionStorage, { url, query, variables: { limit }})
+  if (dataInCache !== null)
+    return Promise.resolve(dataInCache)
+  return request(url, query, { limit })
+    .then((data) => {
+      SessionCache.add(sessionStorage, { url, query, variables: { limit }}, data)
+      return Promise.resolve(data)
+    })
+}
+
+export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
+  const query = `
+    query ($afterDatetime: DateTime, $groupName: String, $limit: Int) {
+      group(preferredUsername: $groupName) {
+        organizedEvents(afterDatetime: $afterDatetime, limit: $limit) {
+          elements {
+            id,
+            title,
+            url,
+            beginsOn,
+            endsOn,
+            physicalAddress {
+              description,
+              locality
+            }
+          },
+          total
+        }
+      }
+    }
+  `
+  const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString()
+  const dataInCache = SessionCache.get(sessionStorage, { url, query, variables: { afterDatetime, groupName, limit }})
+  if (dataInCache !== null)
+    return Promise.resolve(dataInCache)
+  return request(url, query, { afterDatetime, groupName, limit })
+    .then((data) => {
+      SessionCache.add(sessionStorage, { url, query, variables: { afterDatetime, groupName, limit }}, data)
+      return Promise.resolve(data)
+    })
 }

source/connector-mobilizon/front/html-creator-test.js

@@ -1,15 +1,17 @@
-import test from 'ava';
-import { JSDOM } from 'jsdom';
+import test from 'ava'
+import { JSDOM } from 'jsdom'
 
-import * as HtmlCreator from './html-creator';
+import { createAnchorElement } from './html-creator'
+
+let document
 
 test.beforeEach(() => {
-  global.document = new JSDOM().window.document
+  document = new JSDOM().window.document
 })
 
-test('createAnchorElement() usual parameters', t => {
-  const a = HtmlCreator.createAnchorElement({ text: 'a', url: 'b' })
+test('#createAnchorElement usual parameters', t => {
+  const a = createAnchorElement({ document, text: 'a', url: 'b' })
   t.is(a.tagName, 'A')
   t.is(a.innerHTML, 'a')
-	t.is(a.getAttribute('href'), 'b')
+  t.is(a.getAttribute('href'), 'b')
 })

source/connector-mobilizon/front/html-creator.js

@@ -1,4 +1,4 @@
-export function createAnchorElement({ text, url }) {
+export function createAnchorElement({ document, text, url }) {
   const a = document.createElement('a')
   a.setAttribute('href', url)
   a.setAttribute('target', '_blank')

source/connector-mobilizon/front/object-hash-wrapper-test.js

@@ -0,0 +1,6 @@
+import test from 'ava'
+import hash from './object-hash-wrapper'
+
+test('#hash object', t => {
+  t.is(hash({foo: 'bar'}), 'a75c05bdca7d704bdfcd761913e5a4e4636e956b')
+})

source/connector-mobilizon/front/object-hash-wrapper.js

@@ -0,0 +1,5 @@
+import objectHash from 'object-hash'
+
+export default function hash(object) {
+  return objectHash(object)
+}

source/connector-mobilizon/front/session-cache-test.js

@@ -0,0 +1,34 @@
+import test from 'ava'
+import SessionCache from './session-cache'
+
+const fakeStorage = {
+
+  elements: {},
+
+  clear() {
+    this.elements = {}
+  },
+
+  getItem(key) {
+    const value = this.elements[key]
+    if (value === undefined) return null
+    return value
+  },
+
+  setItem(key, value) {
+    this.elements[key] = value
+  }
+}
+
+test.afterEach(() => {
+  fakeStorage.clear()
+})
+
+test('#add & #get', t => {
+  SessionCache.add(fakeStorage, { a: 'b' }, { c: 'd' })
+  t.deepEqual(SessionCache.get(fakeStorage, { a: 'b' }), { c: 'd' })
+})
+
+test('#get no entry', t => {
+  t.is(SessionCache.get(fakeStorage, { a: 'bb' }), null)
+})

source/connector-mobilizon/front/session-cache.js

@@ -0,0 +1,24 @@
+import hash from './object-hash-wrapper'
+
+const MAX_AGE_IN_MS = 120000
+
+export default class SessionCache {
+
+  static add(storage, parameters, data) {
+    const key = hash(parameters)
+    const timestamp = Date.now()
+    const value = {
+      data,
+      timestamp,
+    }
+    storage.setItem(key, JSON.stringify(value))
+  }
+
+  static get(storage, parameters) {
+    const key = hash(parameters)
+    const value = JSON.parse(storage.getItem(key))
+    if (value && value.timestamp && value.timestamp > Date.now() - MAX_AGE_IN_MS)
+      return value.data
+    return null
+  }
+}

source/connector-mobilizon/includes/constants.php

@@ -9,4 +9,3 @@ if (!defined('ABSPATH')) {
 const DEFAULT_EVENTS_COUNT = 5;
 const NAME = '<wordpress-name>';
 const NICE_NAME = '<wordpress-nice-name>';
-const TEXT_DOMAIN = '<wordpress-name>';

source/connector-mobilizon/includes/events-list-shortcut.php

@@ -26,9 +26,11 @@ class EventsListShortcut {
 
     $classNamePrefix = NAME;
     $eventsCount = $atts_with_overriden_defaults['events-count'];
+    $locale = str_replace('_', '-', get_locale());
     $groupName = $atts_with_overriden_defaults['group-name'];
     $url = Settings::getUrl();
-    $textDomain = TEXT_DOMAIN;
+    $timeZone = get_option('timezone_string');
+    $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
 
     ob_start();
     require dirname(__DIR__) . '/view/events-list.php';

source/connector-mobilizon/includes/events-list-widget.php

@@ -11,9 +11,9 @@ class EventsListWidget extends \WP_Widget {
   public function __construct() {
     parent::__construct(
       NAME . '-events-list',
-      NICE_NAME . ' ' . esc_html__('Events List', TEXT_DOMAIN),
+      NICE_NAME . ' ' . __('Events List', 'connector-mobilizon'),
       array(
-        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', TEXT_DOMAIN),
+        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
       ),
     );
   }
@@ -27,9 +27,11 @@ class EventsListWidget extends \WP_Widget {
 
     $classNamePrefix = NAME;
     $eventsCount = $options['eventsCount'];
+    $locale = str_replace('_', '-', get_locale());
     $groupName = isset($options['groupName']) ? $options['groupName'] : '';
     $url = Settings::getUrl();
-    $textDomain = TEXT_DOMAIN;
+    $timeZone = get_option('timezone_string');
+    $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
 
     require dirname(__DIR__) . '/view/events-list.php';
 
@@ -37,10 +39,9 @@ class EventsListWidget extends \WP_Widget {
   }
 
   public function form($options) {
-    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', TEXT_DOMAIN);
+    $title = !empty($options['title']) ? $options['title'] : __('Events', 'connector-mobilizon');
     $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
     $groupName = !empty($options['groupName']) ? $options['groupName'] : '';
-    $textDomain = TEXT_DOMAIN;
     
     require dirname(__DIR__) . '/view/events-list-widget/form.php';
   }

source/connector-mobilizon/includes/settings.php

@@ -9,9 +9,12 @@ if (!defined('ABSPATH')) {
 class Settings {
 
   private static $DEFAULT_OPTION_URL = 'https://mobilizon.fr';
+  private static $DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN = false;
   private static $PAGE_NAME = 'wordpress_mobilizon';
   private static $OPTIONS_GROUP_NAME = 'wordpress_mobilizon';
+  private static $OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_is_short_offset_name_shown';
   private static $OPTION_NAME_URL = 'wordpress_mobilizon_url';
+  private static $SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_field_is_short_offset_name_shown';
   private static $SETTING_FIELD_NAME_URL = 'wordpress_mobilizon_field_url';
   private static $SETTINGS_SECTION_NAME = 'wordpress_mobilizon_section_general';
 
@@ -21,6 +24,10 @@ class Settings {
   }
 
   public static function init_settings() {
+    register_setting(
+      self::$OPTIONS_GROUP_NAME,
+      self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+    );
     register_setting(
       self::$OPTIONS_GROUP_NAME,
       self::$OPTION_NAME_URL,
@@ -29,14 +36,14 @@ class Settings {
 
     add_settings_section(
       self::$SETTINGS_SECTION_NAME,
-      __('General Settings', TEXT_DOMAIN),
+      __('General Settings', 'connector-mobilizon'),
       '',
       self::$PAGE_NAME
     );
 
     add_settings_field(
       self::$SETTING_FIELD_NAME_URL,
-      __('URL', TEXT_DOMAIN),
+      __('URL', 'connector-mobilizon'),
       'MobilizonConnector\Settings::output_field_url',
       self::$PAGE_NAME,
       self::$SETTINGS_SECTION_NAME,
@@ -44,10 +51,24 @@ class Settings {
         'label_for' => self::$SETTING_FIELD_NAME_URL
       )
     );
+    add_settings_field(
+      self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN,
+      __('Display named offset', 'connector-mobilizon'),
+      'MobilizonConnector\Settings::output_field_is_short_offset_name_shown',
+      self::$PAGE_NAME,
+      self::$SETTINGS_SECTION_NAME,
+      array(
+        'label_for' => self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+      )
+    );
+  }
+
+  public static function output_field_is_short_offset_name_shown($args) {
+    $isShortOffsetNameShown = self::isShortOffsetNameShown();
+    require dirname(__DIR__) . '/view/settings/is-short-offset-name-shown-field.php';
   }
 
   public static function output_field_url($args) {
-    $textDomain = TEXT_DOMAIN;
     $url = self::getUrl();
     require dirname(__DIR__) . '/view/settings/url-field.php';
   }
@@ -58,7 +79,7 @@ class Settings {
       add_settings_error(
         self::$OPTION_NAME_URL,
         'wordpress_mobilizon_field_url_error',
-        __('The URL is invalid.', TEXT_DOMAIN),
+        __('The URL is invalid.', 'connector-mobilizon'),
         'error'
       );
     }
@@ -70,7 +91,7 @@ class Settings {
 
   public static function register_settings_page() {
     add_options_page(
-      NICE_NAME . ' ' . __('Settings', TEXT_DOMAIN),
+      NICE_NAME . ' ' . __('Settings', 'connector-mobilizon'),
       NICE_NAME,
       'manage_options',
       NAME . '-settings',
@@ -85,15 +106,21 @@ class Settings {
     require dirname(__DIR__) . '/view/settings/page.php';
   }
 
+  public static function isShortOffsetNameShown() {
+    return get_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
+  }
+
   public static function getUrl() {
     return get_option(self::$OPTION_NAME_URL);
   }
 
   public static function setDefaultOptions() {
+    add_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN, self::$DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN);
     add_option(self::$OPTION_NAME_URL, self::$DEFAULT_OPTION_URL);
   }
 
   public static function deleteAllOptions() {
+    delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
     delete_option(self::$OPTION_NAME_URL);
   }
 

source/connector-mobilizon/readme.txt

@@ -1,5 +1,6 @@
 # <wordpress-nice-name>
 Contributors: dwaxweiler
+Donate link: <wordpress-donation-link>
 Tags: mobilizon, events
 Stable tag: <wordpress-version>
 Requires at least: <wordpress-minimum-version>
@@ -11,9 +12,16 @@ License: <wordpress-license>
 
 ## Description
 
-<wordpress-nice-name> allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform.
+<wordpress-nice-name> allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
 
-You can display the upcoming events using a widget and everywhere else using a shortcut.
+Features
+- Display events as widget and as shortcut
+- Display events' title, date, and location if available
+- Cache requests' responses for 2 minutes in the browser's `sessionStorage`
+- Configure number of events to show per widget and per shortcut
+- Optionally filter events by a specific group per widget and per shortcut
+- Set the URL of the Mobilizon instance in the settings
+- Toggle adding named offset in brackets after the time in the settings
 
 Shortcut format with limiting the number of events to show to 3 for example: `[<wordpress-name>-events-list events-count=3]`
 Optionally, you can only show the events of a specific group by indicatings its name: `[<wordpress-name>-events-list events-count=3 group-name="mygroup"]`
@@ -28,17 +36,56 @@ The source code is available on [Github](https://github.com/dwaxweiler/connector
 
 ## Changelog
 
+### [0.6.0] - 2021-06-02
+#### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
+#### Changed
+- Update dependencies
+#### Fixed
+- Capitalise Mobilizon name in description
+
+### [0.5.0] - 2021-05-06
+#### Added
+- Localise dates based on the WordPress locale and time zone
+#### Changed
+- Clearly list features in `readme.txt` description
+- Update dev dependencies c8, eslint, gulp-replace, webpack
+#### Fixed
+- Improve translatability
+
+### [0.4.0] - 2021-04-20
+#### Added
+- Show events' location if set: `description` and `locality` fields
+- Plugin icon
+#### Changed
+- Update dev dependencies eslint, jsdom, webpack
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
 ### [0.2.1] - 2021-01-15
-Changed
+#### Fixed
 - Add missing backtick to `readme.txt`
 
 ### [0.2.0] - 2021-01-15
-Added
+#### Added
 - `changelog.txt`
 - Changelog maintenance steps to `README.md`
 - Link to Github repository in `readme.txt`
 - Option to show events of a specific group by indicating its name
-Changed
+#### Changed
 - Use same Markdown style in `README.md` as in other documents
 
 ### [0.1.0] - 2021-01-09

source/connector-mobilizon/view/events-list-widget/form.php

@@ -5,14 +5,14 @@ if (!defined('ABSPATH')) {
 }
 ?>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title', $textDomain); ?>:</label> 
+  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Title', 'connector-mobilizon'); ?>:</label>
   <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
 </p>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_attr_e('Number of events to show', $textDomain); ?>:</label>
+  <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_html_e('Number of events to show', 'connector-mobilizon'); ?>:</label>
   <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>" name="<?php echo esc_attr($this->get_field_name('eventsCount')); ?>" type="number" value="<?php echo esc_attr($eventsCount); ?>" min="1">
 </p>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_attr_e('Group name (optional)', $textDomain); ?>:</label> 
+  <label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_html_e('Group name (optional)', 'connector-mobilizon'); ?>:</label>
   <input class="widefat" id="<?php echo esc_attr($this->get_field_id('groupName')); ?>" name="<?php echo esc_attr($this->get_field_name('groupName')); ?>" type="text" value="<?php echo esc_attr($groupName); ?>">
 </p>

source/connector-mobilizon/view/events-list.php

@@ -6,7 +6,10 @@ if (!defined('ABSPATH')) {
 ?>
 <ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
   data-url="<?php echo esc_attr($url); ?>"
+  data-locale="<?php echo esc_attr($locale); ?>"
   data-maximum="<?php echo esc_attr($eventsCount); ?>"
-  data-group-name="<?php echo esc_attr($groupName); ?>">
-  <li style="display: none;"><?php echo esc_html_e('The events could not be loaded!', $textDomain); ?></li>
+  data-group-name="<?php echo esc_attr($groupName); ?>"
+  data-time-zone="<?php echo esc_attr($timeZone); ?>"
+  <?php echo $isShortOffsetNameShown ? 'data-is-short-offset-name-shown' : ''; ?>>
+  <li style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></li>
 </ul>

source/connector-mobilizon/view/settings/is-short-offset-name-shown-field.php

@@ -0,0 +1,13 @@
+<?php
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<input id="<?php echo esc_attr($args['label_for']); ?>"
+  name="<?php echo esc_attr(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN); ?>"
+  type="checkbox"
+  <?php echo $isShortOffsetNameShown == true ? 'checked' : ''; ?>>
+<p class="description">
+  <?php esc_html_e('The time zone of this WordPress installation is used. Whether the current offset should be displayed in brackets after the time, e.g. 10:00 (UTC)', 'connector-mobilizon'); ?>
+</p>

source/connector-mobilizon/view/settings/url-field.php

@@ -10,5 +10,5 @@ if (!defined('ABSPATH')) {
   type="url"
   value="<?php echo esc_attr($url); ?>">
 <p class="description">
-  <?php esc_html_e('The URL of the Mobilizon instance whose events you want to list, e.g. https://example.net', $textDomain); ?>
+  <?php esc_html_e('The URL of the Mobilizon instance whose events you want to list, e.g. https://example.net', 'connector-mobilizon'); ?>
 </p>