Open Time

On reprend ce qu’on a commencé hier, avec la mise en place d’un widget, pour voir maintenant comment ça fonctionne du côté public, pour les visiteurs, donc.

Pour cela, on crée un fichier _public.php donc le code source est le suivant :

<?php
/**
 * @brief a11yConfig, a plugin for Dotclear 2
 *
 * @package Dotclear
 * @subpackage Plugins
 *
 * @author Franck Paul, Biou and contributors
 *
 * @copyright Franck Paul carnet.franck.paul@gmail.com
 * @copyright GPL-2.0 https://www.gnu.org/licenses/gpl-2.0.html
 */

if (!defined('DC_RC_PATH')) {return;}

require dirname(__FILE__) . '/_widgets.php';

$core->addBehavior('publicHeadContent', array('a11yconfigPublic', 'publicHeadContent'));

class a11yconfigPublic
{
    public static function publicHeadContent($core)
    {
        global $core;

        $core->blog->settings->addNamespace('a11yConfig');
        if (!(boolean) $core->blog->settings->a11yConfig->active) {
            return;
        }

        echo
        dcUtils::cssLoad($core->blog->getPF('a11yConfig/lib/css/accessconfig.min.css')) .
        dcUtils::cssLoad($core->blog->getPF('a11yConfig/css/public.css')) .
        dcUtils::jsLoad($core->blog->getPF('a11yConfig/js/public.js')) .
        dcUtils::jsLoad($core->blog->getPF('a11yConfig/lib/js/accessconfig.min.js'));
    }

    # Widget function
    public static function a11yconfigWidget($w)
    {
        global $core;

        $core->blog->settings->addNamespace('a11yConfig');
        if (!(boolean) $core->blog->settings->a11yConfig->active) {
            return;
        }

        if ($w->offline) {
            return;
        }

        $params = [
            "Prefix"                 => "a42-ac",
            "Modal"                  => true,
            "Font"                   => ($w->font ? true : false),
            "LineSpacing"            => ($w->linespacing ? true : false),
            "Justification"          => ($w->justification ? true : false),
            "Contrast"               => ($w->contrast ? true : false),
            "ImageReplacement"       => ($w->image ? true : false)
        ];

        $res =
        '<div class="widget" id="accessconfig" data-accessconfig-buttonname="' .
        ($w->buttonname ? html::escapeHTML($w->buttonname) : '') . '" ' .
        'data-accessconfig-params=\'' . json_encode($params) . '\'>' .
        '</div>';

        return $res;
    }
}

Deux choses dans ce fichier.

Premièrement un traitement lié à un behavior publicHeadContent — eh oui, encore, c’est très pratique les behaviors — pour charger dans l’entête de la page, la librairie d’Acess42, qui est composée d’un fichier CSS et d’un fichier Javascript, ainsi que deux autres fichiers supplémentaires, rendus nécessaires pour assurer le fonctionnement correct.

Le premier, css/public.css contient ceci :

/* Dyslexia font */

@font-face {
  font-family: 'opendys';
  src: url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff2') format('woff2'), url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

La gestion des « inclusions » étant protégée dans Dotclear, on ne peut, comme c’est fait dans la CSS originale, charger une police comme ceci :

/**
 * Dyslexia font 
 */
@font-face {
	font-family: 'opendys';
	src: url('fonts/opendyslexic-regular-webfont.woff2') format('woff2'),
		 url('fonts/opendyslexic-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

Le chemin fonts/… ne sera pas résolu vu que les fichiers composants un plugin sont chargés de façon différente, c’est la raison pour laquelle on reprend cette directive pour préciser les chemins nécessaires, index.php?pf=a11yConfig/lib/css/fonts/….

Le deuxième fichier, chargé avant le script d’Access42 permet de faire un pré-traitement sur les images de la page, pour autant qu’elles aient un attribut alt renseigné, afin que l’option « Remplacement des images » puisse fonctionner correctement ; en effet les images à traiter potentiellement doivent être affublées de la classe a42-ac-replace-img.

Le code de ce fichier js/public.js est le suivant :

'use strict';

function a11yconfig_load() {
  const images = document.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    if (images[i].alt !== '') {
      images[i].className += ' a42-ac-replace-img';
    }
  }
}
window.addEventListener('load', a11yconfig_load);

Rien de bien compliqué ici.

Revenons au code de notre fichier _public.php dont vous noterez au passage que les traitements sont à chaque fois soumis à la vérification que le plugin soit activé, sinon inutile d’aller plus loin.

Le deuxième traitement, qui est en fait la fonction « publique » d’affichage du widget, celle-là même qu’on a définit au moment de l’enregistrement du widget dans le fichier _widgets.php, sert à fournir le code HTML correspondant au widget.

Vous noterez aussi, qu’à la ligne 48, on vérifie qu’on a pas coché l’option « Désactivé » dans les options du widget avant d’aller plus loin.

Le code HTML est relativement simple puisque c’est la librairie d’Access42 qui se charge de l’essentiel. On récupère simplement les options du widget et on crée un élément HTML <div> contenant le nécessaire, ce qui donnera cet affichage (avec le thème Berlin) :

Un clic sur ce bouton provoquera alors l’affichage d’une « popup » :

Popup gérée par la librairie qui appliquera ensuite les choix faits par le lecteur…

On a donc, à ce stade, un plugin complet et fonctionnel, qui propose la mise en place d’un widget pour activer tout ou partie des possibilités proposées par la librairie d’Access42.

On verra dans la suite, comment injecter ce bouton autrement que via un widget, soit de façon automatique soit via une balise template, et si possible comment faire en sorte que cette librairie puisse aussi être utilisée du côté administration de Dotclear.