sytha / Comptoir Hardware Helper

// ==UserScript==
// @name         Comptoir Hardware Helper
// @namespace    http://www.comptoir-hardware.com
// @version      0.1
// @description  Make Comptoir Hardware Great Again™
// @author       sytha
// @match        http://www.comptoir-hardware.com/*
// @grant        none
// @license      GPL-3.0-or-later
// @updateURL    https://openuserjs.org/meta/sytha/Comptoir_Hardware_Helper.meta.js
// ==/UserScript==

(function() {
    "use strict";

    const animationDurations = 100;

    const imageLinks = document.querySelectorAll("img.zoum");
    imageLinks.forEach(element => {
        const targetImg = element.getAttribute("onclick").match(/popup\("(.*?)"/)[1];
        element.outerHTML = `<a title="${element.alt.replace(" [cliquer pour agrandir]", "")}" data-lightbox="page-images" data-href="/images/${targetImg}" class="glightbox">${element.outerHTML.replace(/onclick=".*"/, "")}</a>`;
        element.removeAttribute('onclick');
    });

    // Lightbox script from CloudFlare CDN
    const lbScript = document.createElement("script");
    lbScript.type = "text/javascript";
    lbScript.src = "https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js";
    // Lightbox style from CloudFlare CDN
    const lbStyle = document.createElement("link");
    lbStyle.href = "https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css";
    lbStyle.rel = "stylesheet";

    // Inject the script & style in the page <head>
    document.head.appendChild(lbScript);
    document.head.appendChild(lbStyle);

    lbScript.addEventListener("load", event => {
        document.querySelectorAll('.glightbox[data-href]').forEach(element => {
            element.setAttribute('href', element.getAttribute('data-href'));
            element.removeAttribute('data-href');
        });
        (function($) {
            lightbox.option({
                albumLabel: "Image %1 sur %2",
                resizeDuration: animationDurations,
                fadeDuration: animationDurations,
                imageFadeDuration: animationDurations,
            });
        })($.noConflict(true))
    });

})();