first commit

.gitignore

@@ -0,0 +1,3 @@
+build/
+node_modules/
+vendor/

README.md

@@ -0,0 +1,20 @@
+# Connector Mobilizon
+
+## Development
+
+### Setup
+1. Make sure `npm` and `composer` are installed.
+2. Run: `npm install`
+3. Run: `php composer.phar install`
+
+### Development build
+1. Build: `npm run build-dev`
+
+### Release procedure
+1. Build: `npm run build-prod`
+2. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
+3. Make sure screenshots are up-to-date.
+
+### Other commands
+- Run tests: `npm test`
+- Delete build folder: `gulp clean`

composer.json

@@ -0,0 +1,5 @@
+{
+    "require": {
+        "bartlett/php-compatinfo": "^5.4"
+    }
+}

gulpfile.js

@@ -0,0 +1,79 @@
+const { dest, series, src } = require('gulp');
+
+const del = require('del');
+const replace = require('gulp-replace');
+const webpack = require('webpack-stream');
+
+const PACKAGE = require('./package.json');
+
+const FOLDER_SOURCE = './source'
+const FOLDER_BUILD = './build';
+
+let mode = 'development';
+
+
+function clean(cb) {
+  del(FOLDER_BUILD);
+  cb();
+}
+
+const eventsLoaderOutputPath = PACKAGE.name + '/front/events-loader';
+const eventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js';
+
+function bundleFrontend() {
+  return src(FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js')
+    .pipe(webpack({
+      mode,
+      entry: {
+        [eventsLoaderOutputPath]: eventsLoaderInputPath,
+      },
+      output: {
+        filename: '[name].js',
+      },
+    }))
+    .pipe(dest(FOLDER_BUILD));
+  }
+
+function copyBackend() {
+  return src([
+    FOLDER_SOURCE + '/**/*.php',
+    FOLDER_SOURCE + '/**/*.txt'
+  ])
+    .pipe(dest(FOLDER_BUILD));
+}
+
+function injectMetadata() {
+  return src([
+    FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js',
+    FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php',
+    FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php',
+    FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt'
+  ], { base: './' })
+    .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-license>', PACKAGE.license))
+    .pipe(replace('<wordpress-minimum-version>', PACKAGE.additionalDetails.wordpressMinimumVersion))
+    .pipe(replace('<wordpress-name>', PACKAGE.name))
+    .pipe(replace('<wordpress-nice-name>', PACKAGE.additionalDetails.niceName))
+    .pipe(replace('<wordpress-php-minimum-version>', PACKAGE.additionalDetails.phpMinimumVersion))
+    .pipe(replace('<wordpress-tested-up-to-version>', PACKAGE.additionalDetails.wordpressTestedUpToVersion))
+    .pipe(replace('<wordpress-version>', PACKAGE.version))
+    .pipe(dest('.'));
+}
+
+exports.front = bundleFrontend;
+exports.copy = copyBackend;
+exports.inject = injectMetadata;
+
+const build = series(clean, bundleFrontend, copyBackend, injectMetadata);
+
+const buildDev = series((cb) => { mode = 'development'; cb(); }, build);
+
+const buildProd = series((cb) => { mode = 'production'; cb(); }, build);
+
+
+exports.clean = clean;
+exports.dev = buildDev;
+exports.default = buildDev;
+exports.prod = buildProd;

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "connector-mobilizon",
+  "version": "0.1.0",
+  "description": "Display mobilizon events in WordPress.",
+  "private": true,
+  "scripts": {
+    "build-dev": "gulp dev",
+    "build-prod": "ava && gulp prod",
+    "test": "ava"
+  },
+  "author": {
+    "name": "Daniel Waxweiler",
+    "url": "https://www.danielwaxweiler.net/"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "graphql": "^15.4.0",
+    "graphql-request": "^3.4.0",
+    "luxon": "^1.25.0"
+  },
+  "devDependencies": {
+    "ava": "^3.15.0",
+    "del": "^6.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"
+  },
+  "ava": {
+    "files": [
+      "./source/**/*test.js"
+    ],
+    "require": [
+      "esm"
+    ]
+  },
+  "additionalDetails": {
+    "niceName": "Connector for Mobilizon",
+    "phpMinimumVersion": 5.4,
+    "wordpressMinimumVersion": 5.6,
+    "wordpressTestedUpToVersion": 5.6
+  }
+}

source/connector-mobilizon/connector-mobilizon.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * 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>
+ */
+
+require_once __DIR__ . '/includes/constants.php';
+require_once __DIR__ . '/includes/settings.php';
+require_once __DIR__ . '/includes/events-list-shortcut.php';
+require_once __DIR__ . '/includes/events-list-widget.php';
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+function mobilizon_connector_activate() {
+	MobilizonConnector\Settings::setDefaultOptions();
+}
+register_activation_hook(__FILE__, 'mobilizon_connector_activate');
+
+function mobilizon_connector_initialize() {
+  MobilizonConnector\Settings::init();
+  MobilizonConnector\EventsListShortcut::init();
+}
+add_action('init', 'mobilizon_connector_initialize');
+
+function mobilizon_connector_load_scripts() {
+  wp_enqueue_script(MobilizonConnector\NAME . '-js', plugins_url('front/events-loader.js', __FILE__ ));
+}
+add_action('wp_enqueue_scripts', 'mobilizon_connector_load_scripts');
+
+function mobilizon_connector_register_events_list_widget() {
+  register_widget('MobilizonConnector\EventsListWidget');
+}
+add_action('widgets_init', 'mobilizon_connector_register_events_list_widget');

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

@@ -0,0 +1,42 @@
+import test from 'ava';
+import { DateTimeWrapper } from './date-time-wrapper';
+
+test('#getShortDate usual date', t => {
+  const d = new DateTimeWrapper('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')
+})
+
+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')
+  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')
+  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')
+  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')
+  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')
+  t.false(d.equalsDate(e))
+})

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

@@ -0,0 +1,24 @@
+import { DateTime } from 'luxon';
+
+export class DateTimeWrapper {
+
+  constructor(text) {
+    this.dateTime = DateTime.fromISO(text)
+  }
+
+  getShortDate() {
+    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
+  }
+
+  get24Time() {
+    return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
+  }
+
+  equalsDate(other) {
+    return this.dateTime &&
+      other.dateTime &&
+      this.dateTime.day === other.dateTime.day &&
+      this.dateTime.month === other.dateTime.month &&
+      this.dateTime.year === other.dateTime.year
+  }
+}

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

@@ -0,0 +1,62 @@
+import { DateTimeWrapper } from './date-time-wrapper';
+import * as GraphqlWrapper from './graphql-wrapper'
+import * as HtmlCreator from './html-creator'
+
+const NAME = '<wordpress-name>';
+
+function displayEvents(data, lists) {
+  for (let list of lists) {
+    const maxEventsCount = list.getAttribute('data-maximum')
+    const events = data.events.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, lists) {
+  console.error(data)
+  for (let list of lists) {
+    for (let i = 0; i < list.children.length; i++) {
+      list.children[i].style.display = 'block'
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const eventLists = document.getElementsByClassName(NAME + '_events-list');
+  if (eventLists.length) {
+    // Currently, the URL is the same for all widgets, so just take the first one.
+    const url = eventLists[0].getAttribute('data-url') + '/api';
+
+    let maxEventsCount = 0
+    for (let list of eventLists) {
+      maxEventsCount = Math.max(maxEventsCount, list.getAttribute('data-maximum'))
+    }
+
+    GraphqlWrapper.getEvents({ url, limit: maxEventsCount })
+      .then((data) => displayEvents(data, eventLists))
+      .catch((data) => displayErrorMessage(data, eventLists))
+  }
+})

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

@@ -0,0 +1,19 @@
+import { request, gql } from 'graphql-request'
+
+export function getEvents({ url, limit }) {  
+  const query = gql`
+  query {
+    events(limit:${limit}) {
+      elements {
+        id,
+        title,
+        url,
+        beginsOn,
+        endsOn
+      },
+      total
+    }
+  }
+  `
+  return request(url, query)
+}

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

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

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

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

source/connector-mobilizon/includes/constants.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+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

@@ -0,0 +1,36 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+class EventsListShortcut {
+  
+  public static function init() {
+    add_shortcode(NAME . '-events-list', 'MobilizonConnector\EventsListShortcut::inflate');
+  }
+
+  public static function inflate($atts = [], $content = null) {
+    // Normalize attribute keys, lowercase.
+    $atts = array_change_key_case((array) $atts, CASE_LOWER);
+ 
+    // Override default attributes with user attributes.
+    $atts_with_overriden_defaults = shortcode_atts(
+      array(
+        'events-count' => DEFAULT_EVENTS_COUNT,
+      ), $atts
+    );
+
+    $classNamePrefix = NAME;
+    $eventsCount = $atts_with_overriden_defaults['events-count'];
+    $url = Settings::getUrl();
+    $textDomain = TEXT_DOMAIN;
+
+    ob_start();
+    require dirname(__DIR__) . '/view/events-list.php';
+    $output = ob_get_clean();
+    return $output;
+  }
+}

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

@@ -0,0 +1,55 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+class EventsListWidget extends \WP_Widget {
+
+  public function __construct() {
+    parent::__construct(
+      NAME . '-events-list',
+      NICE_NAME . ' ' . esc_html__('Events List', TEXT_DOMAIN),
+      array(
+        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', TEXT_DOMAIN),
+      ),
+    );
+  }
+
+  public function widget($args, $options) {
+    echo $args['before_widget'];
+
+    if (!empty($options['title'])) {
+      echo $args['before_title'].apply_filters('widget_title', $options['title']).$args['after_title'];
+    }
+
+    $classNamePrefix = NAME;
+    $eventsCount = $options['eventsCount'];
+    $url = Settings::getUrl();
+    $textDomain = TEXT_DOMAIN;
+
+    require dirname(__DIR__) . '/view/events-list.php';
+
+    echo $args['after_widget'];
+  }
+
+  public function form($options) {
+    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', TEXT_DOMAIN);
+    $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
+    $textDomain = TEXT_DOMAIN;
+    
+    require dirname(__DIR__) . '/view/events-list-widget/form.php';
+  }
+
+  public function update($new_options, $old_options) {
+    if (!current_user_can('edit_theme_options')) {
+      return;
+    }
+    $options = array();
+    $options['title'] = !empty($new_options['title']) ? sanitize_text_field($new_options['title']) : '';
+    $options['eventsCount'] = !empty($new_options['eventsCount']) ? sanitize_text_field($new_options['eventsCount']) : 5;
+    return $options;
+  }
+}

source/connector-mobilizon/includes/settings.php

@@ -0,0 +1,100 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+class Settings {
+
+  private static $DEFAULT_OPTION_URL = 'https://mobilizon.fr';
+  private static $PAGE_NAME = 'wordpress_mobilizon';
+  private static $OPTIONS_GROUP_NAME = 'wordpress_mobilizon';
+  private static $OPTION_NAME_URL = 'wordpress_mobilizon_url';
+  private static $SETTING_FIELD_NAME_URL = 'wordpress_mobilizon_field_url';
+  private static $SETTINGS_SECTION_NAME = 'wordpress_mobilizon_section_general';
+
+  public static function init() {
+    add_action('admin_init', 'MobilizonConnector\Settings::init_settings');
+    add_action('admin_menu', 'MobilizonConnector\Settings::register_settings_page');
+  }
+
+  public static function init_settings() {
+    register_setting(
+      self::$OPTIONS_GROUP_NAME,
+      self::$OPTION_NAME_URL,
+      'MobilizonConnector\Settings::validate_field_url'
+    );
+
+    add_settings_section(
+      self::$SETTINGS_SECTION_NAME,
+      __('General Settings', TEXT_DOMAIN),
+      '',
+      self::$PAGE_NAME
+    );
+
+    add_settings_field(
+      self::$SETTING_FIELD_NAME_URL,
+      __('URL', TEXT_DOMAIN),
+      'MobilizonConnector\Settings::output_field_url',
+      self::$PAGE_NAME,
+      self::$SETTINGS_SECTION_NAME,
+      array(
+        'label_for' => self::$SETTING_FIELD_NAME_URL
+      )
+    );
+  }
+
+  public static function output_field_url($args) {
+    $textDomain = TEXT_DOMAIN;
+    $url = self::getUrl();
+    require dirname(__DIR__) . '/view/settings/url-field.php';
+  }
+
+  public static function validate_field_url($input) {
+    $validated = esc_url_raw($input);
+    if ($validated !== $input) {
+      add_settings_error(
+        self::$OPTION_NAME_URL,
+        'wordpress_mobilizon_field_url_error',
+        __('The URL is invalid.', TEXT_DOMAIN),
+        'error'
+      );
+    }
+    if(substr($validated, -1) == '/') {
+      $validated = substr($validated, 0, strlen($validated) - 1);
+    }
+    return $validated;
+  }
+
+  public static function register_settings_page() {
+    add_options_page(
+      NICE_NAME . ' ' . __('Settings', TEXT_DOMAIN),
+      NICE_NAME,
+      'manage_options',
+      NAME . '-settings',
+      'MobilizonConnector\Settings::output_settings_page'
+    );
+  }
+
+  public static function output_settings_page() {
+    if (!current_user_can('manage_options')) {
+      return;
+    }
+    require dirname(__DIR__) . '/view/settings/page.php';
+  }
+
+  public static function getUrl() {
+    return get_option(self::$OPTION_NAME_URL);
+  }
+
+  public static function setDefaultOptions() {
+    add_option(self::$OPTION_NAME_URL, self::$DEFAULT_OPTION_URL);
+  }
+
+  public static function deleteAllOptions() {
+    delete_option(self::$OPTION_NAME_URL);
+  }
+
+}

source/connector-mobilizon/readme.txt

@@ -0,0 +1,30 @@
+=== <wordpress-nice-name> ===
+Contributors: dwaxweiler
+Tags: mobilizon, events
+Stable tag: <wordpress-version>
+Requires at least: <wordpress-minimum-version>
+Tested up to: <wordpress-tested-up-to-version>
+Requires PHP: <wordpress-php-minimum-version>
+License: <wordpress-license>
+
+<wordpress-description>
+
+== Description ==
+
+<wordpress-nice-name> allows you to display the upcoming events of one Mobilizon instance.
+[Mobilizon](https://joinmobilizon.org/) is an event listening tool.
+
+You can display the upcoming events using a widget and everywhere else using a shortcut.
+
+Shortcut format with limiting the number of events to show to 3: `[<wordpress-name>-events-list events-count=3]`
+
+== Screenshots ==
+1. Events list
+2. General settings
+3. Widget creation
+4. Shortcut creation
+
+== Changelog ==
+
+= 0.1.0 =
+* initial release

source/connector-mobilizon/uninstall.php

@@ -0,0 +1,10 @@
+<?php
+require_once __DIR__ . '/includes/constants.php';
+require_once __DIR__ . '/includes/settings.php';
+
+// If uninstall.php is not called by WordPress, exit.
+if (!defined('WP_UNINSTALL_PLUGIN')) {
+  exit;
+}
+
+MobilizonConnector\Settings::deleteAllOptions();

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

@@ -0,0 +1,14 @@
+<?php
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<p>
+  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title', $textDomain); ?>:</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>
+  <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>

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

@@ -0,0 +1,11 @@
+<?php
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
+  data-maximum="<?php echo esc_attr($eventsCount); ?>"
+  data-url="<?php echo esc_attr($url); ?>">
+  <li style="display: none;"><?php echo esc_html_e('The events could not be loaded!', $textDomain); ?></li>
+</ul>

source/connector-mobilizon/view/settings/page.php

@@ -0,0 +1,16 @@
+<?php
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="wrap">
+  <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
+  <form action="options.php" method="post">
+    <?php
+    settings_fields(self::$OPTIONS_GROUP_NAME);
+    do_settings_sections(self::$PAGE_NAME);
+    submit_button('Save');
+    ?>
+  </form>
+</div>

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

@@ -0,0 +1,14 @@
+<?php
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<input class="regular-text code"
+  id="<?php echo esc_attr($args['label_for']); ?>"
+  name="<?php echo esc_attr(self::$OPTION_NAME_URL); ?>"
+  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); ?>
+</p>