MediaWiki:Common.js

Page de l’interface de MediaWiki

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  • Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
  • Opera : appuyez sur Ctrl + F5.
// Change table card to dark if it's has a color if isn't, apply this modification to the td (for buttons)
if (
  document.documentElement.classList.contains("skin-citizen-dark") &&
  !(
    window.location.pathname === "/index.php/Accueil" ||
    window.location.href.includes("?title=Accueil")
  )
) {
  document.querySelectorAll("table").forEach(function (table) {
    if (
      !(
        table.style.backgroundColor === "" ||
        table.style.backgroundColor === "transparent"
      )
    ) {
      table.style.backgroundColor = "#212630";
    } else {
      table.querySelectorAll("td").forEach(function (td) {
        if (
          !(
            td.style.backgroundColor === "" ||
            td.style.backgroundColor === "transparent"
          )
        ) {
          td.style.backgroundColor = "#212630";
          td.style.border = "2px solid rgb(101 133 209)";
          td.style.margin = "5px";
        }
      });
    }
  });
}

("use strict");

function _typeof(obj) {
  "@babel/helpers - typeof";
  return (
    (_typeof =
      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
        ? function (obj) {
            return typeof obj;
          }
        : function (obj) {
            return obj &&
              "function" == typeof Symbol &&
              obj.constructor === Symbol &&
              obj !== Symbol.prototype
              ? "symbol"
              : typeof obj;
          }),
    _typeof(obj)
  );
}
function _regeneratorRuntime() {
  "use strict";
  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime =
    function _regeneratorRuntime() {
      return exports;
    };
  var exports = {},
    Op = Object.prototype,
    hasOwn = Op.hasOwnProperty,
    defineProperty =
      Object.defineProperty ||
      function (obj, key, desc) {
        obj[key] = desc.value;
      },
    $Symbol = "function" == typeof Symbol ? Symbol : {},
    iteratorSymbol = $Symbol.iterator || "@@iterator",
    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
  function define(obj, key, value) {
    return (
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: !0,
        configurable: !0,
        writable: !0,
      }),
      obj[key]
    );
  }
  try {
    define({}, "");
  } catch (err) {
    define = function define(obj, key, value) {
      return (obj[key] = value);
    };
  }
  function wrap(innerFn, outerFn, self, tryLocsList) {
    var protoGenerator =
        outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
      generator = Object.create(protoGenerator.prototype),
      context = new Context(tryLocsList || []);
    return (
      defineProperty(generator, "_invoke", {
        value: makeInvokeMethod(innerFn, self, context),
      }),
      generator
    );
  }
  function tryCatch(fn, obj, arg) {
    try {
      return { type: "normal", arg: fn.call(obj, arg) };
    } catch (err) {
      return { type: "throw", arg: err };
    }
  }
  exports.wrap = wrap;
  var ContinueSentinel = {};
  function Generator() {}
  function GeneratorFunction() {}
  function GeneratorFunctionPrototype() {}
  var IteratorPrototype = {};
  define(IteratorPrototype, iteratorSymbol, function () {
    return this;
  });
  var getProto = Object.getPrototypeOf,
    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
  NativeIteratorPrototype &&
    NativeIteratorPrototype !== Op &&
    hasOwn.call(NativeIteratorPrototype, iteratorSymbol) &&
    (IteratorPrototype = NativeIteratorPrototype);
  var Gp =
    (GeneratorFunctionPrototype.prototype =
    Generator.prototype =
      Object.create(IteratorPrototype));
  function defineIteratorMethods(prototype) {
    ["next", "throw", "return"].forEach(function (method) {
      define(prototype, method, function (arg) {
        return this._invoke(method, arg);
      });
    });
  }
  function AsyncIterator(generator, PromiseImpl) {
    function invoke(method, arg, resolve, reject) {
      var record = tryCatch(generator[method], generator, arg);
      if ("throw" !== record.type) {
        var result = record.arg,
          value = result.value;
        return value &&
          "object" == _typeof(value) &&
          hasOwn.call(value, "__await")
          ? PromiseImpl.resolve(value.__await).then(
              function (value) {
                invoke("next", value, resolve, reject);
              },
              function (err) {
                invoke("throw", err, resolve, reject);
              }
            )
          : PromiseImpl.resolve(value).then(
              function (unwrapped) {
                (result.value = unwrapped), resolve(result);
              },
              function (error) {
                return invoke("throw", error, resolve, reject);
              }
            );
      }
      reject(record.arg);
    }
    var previousPromise;
    defineProperty(this, "_invoke", {
      value: function value(method, arg) {
        function callInvokeWithMethodAndArg() {
          return new PromiseImpl(function (resolve, reject) {
            invoke(method, arg, resolve, reject);
          });
        }
        return (previousPromise = previousPromise
          ? previousPromise.then(
              callInvokeWithMethodAndArg,
              callInvokeWithMethodAndArg
            )
          : callInvokeWithMethodAndArg());
      },
    });
  }
  function makeInvokeMethod(innerFn, self, context) {
    var state = "suspendedStart";
    return function (method, arg) {
      if ("executing" === state)
        throw new Error("Generator is already running");
      if ("completed" === state) {
        if ("throw" === method) throw arg;
        return doneResult();
      }
      for (context.method = method, context.arg = arg; ; ) {
        var delegate = context.delegate;
        if (delegate) {
          var delegateResult = maybeInvokeDelegate(delegate, context);
          if (delegateResult) {
            if (delegateResult === ContinueSentinel) continue;
            return delegateResult;
          }
        }
        if ("next" === context.method)
          context.sent = context._sent = context.arg;
        else if ("throw" === context.method) {
          if ("suspendedStart" === state)
            throw ((state = "completed"), context.arg);
          context.dispatchException(context.arg);
        } else
          "return" === context.method && context.abrupt("return", context.arg);
        state = "executing";
        var record = tryCatch(innerFn, self, context);
        if ("normal" === record.type) {
          if (
            ((state = context.done ? "completed" : "suspendedYield"),
            record.arg === ContinueSentinel)
          )
            continue;
          return { value: record.arg, done: context.done };
        }
        "throw" === record.type &&
          ((state = "completed"),
          (context.method = "throw"),
          (context.arg = record.arg));
      }
    };
  }
  function maybeInvokeDelegate(delegate, context) {
    var methodName = context.method,
      method = delegate.iterator[methodName];
    if (undefined === method)
      return (
        (context.delegate = null),
        ("throw" === methodName &&
          delegate.iterator["return"] &&
          ((context.method = "return"),
          (context.arg = undefined),
          maybeInvokeDelegate(delegate, context),
          "throw" === context.method)) ||
          ("return" !== methodName &&
            ((context.method = "throw"),
            (context.arg = new TypeError(
              "The iterator does not provide a '" + methodName + "' method"
            )))),
        ContinueSentinel
      );
    var record = tryCatch(method, delegate.iterator, context.arg);
    if ("throw" === record.type)
      return (
        (context.method = "throw"),
        (context.arg = record.arg),
        (context.delegate = null),
        ContinueSentinel
      );
    var info = record.arg;
    return info
      ? info.done
        ? ((context[delegate.resultName] = info.value),
          (context.next = delegate.nextLoc),
          "return" !== context.method &&
            ((context.method = "next"), (context.arg = undefined)),
          (context.delegate = null),
          ContinueSentinel)
        : info
      : ((context.method = "throw"),
        (context.arg = new TypeError("iterator result is not an object")),
        (context.delegate = null),
        ContinueSentinel);
  }
  function pushTryEntry(locs) {
    var entry = { tryLoc: locs[0] };
    1 in locs && (entry.catchLoc = locs[1]),
      2 in locs && ((entry.finallyLoc = locs[2]), (entry.afterLoc = locs[3])),
      this.tryEntries.push(entry);
  }
  function resetTryEntry(entry) {
    var record = entry.completion || {};
    (record.type = "normal"), delete record.arg, (entry.completion = record);
  }
  function Context(tryLocsList) {
    (this.tryEntries = [{ tryLoc: "root" }]),
      tryLocsList.forEach(pushTryEntry, this),
      this.reset(!0);
  }
  function values(iterable) {
    if (iterable) {
      var iteratorMethod = iterable[iteratorSymbol];
      if (iteratorMethod) return iteratorMethod.call(iterable);
      if ("function" == typeof iterable.next) return iterable;
      if (!isNaN(iterable.length)) {
        var i = -1,
          next = function next() {
            for (; ++i < iterable.length; )
              if (hasOwn.call(iterable, i))
                return (next.value = iterable[i]), (next.done = !1), next;
            return (next.value = undefined), (next.done = !0), next;
          };
        return (next.next = next);
      }
    }
    return { next: doneResult };
  }
  function doneResult() {
    return { value: undefined, done: !0 };
  }
  return (
    (GeneratorFunction.prototype = GeneratorFunctionPrototype),
    defineProperty(Gp, "constructor", {
      value: GeneratorFunctionPrototype,
      configurable: !0,
    }),
    defineProperty(GeneratorFunctionPrototype, "constructor", {
      value: GeneratorFunction,
      configurable: !0,
    }),
    (GeneratorFunction.displayName = define(
      GeneratorFunctionPrototype,
      toStringTagSymbol,
      "GeneratorFunction"
    )),
    (exports.isGeneratorFunction = function (genFun) {
      var ctor = "function" == typeof genFun && genFun.constructor;
      return (
        !!ctor &&
        (ctor === GeneratorFunction ||
          "GeneratorFunction" === (ctor.displayName || ctor.name))
      );
    }),
    (exports.mark = function (genFun) {
      return (
        Object.setPrototypeOf
          ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype)
          : ((genFun.__proto__ = GeneratorFunctionPrototype),
            define(genFun, toStringTagSymbol, "GeneratorFunction")),
        (genFun.prototype = Object.create(Gp)),
        genFun
      );
    }),
    (exports.awrap = function (arg) {
      return { __await: arg };
    }),
    defineIteratorMethods(AsyncIterator.prototype),
    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
      return this;
    }),
    (exports.AsyncIterator = AsyncIterator),
    (exports.async = function (
      innerFn,
      outerFn,
      self,
      tryLocsList,
      PromiseImpl
    ) {
      void 0 === PromiseImpl && (PromiseImpl = Promise);
      var iter = new AsyncIterator(
        wrap(innerFn, outerFn, self, tryLocsList),
        PromiseImpl
      );
      return exports.isGeneratorFunction(outerFn)
        ? iter
        : iter.next().then(function (result) {
            return result.done ? result.value : iter.next();
          });
    }),
    defineIteratorMethods(Gp),
    define(Gp, toStringTagSymbol, "Generator"),
    define(Gp, iteratorSymbol, function () {
      return this;
    }),
    define(Gp, "toString", function () {
      return "[object Generator]";
    }),
    (exports.keys = function (val) {
      var object = Object(val),
        keys = [];
      for (var key in object) keys.push(key);
      return (
        keys.reverse(),
        function next() {
          for (; keys.length; ) {
            var key = keys.pop();
            if (key in object)
              return (next.value = key), (next.done = !1), next;
          }
          return (next.done = !0), next;
        }
      );
    }),
    (exports.values = values),
    (Context.prototype = {
      constructor: Context,
      reset: function reset(skipTempReset) {
        if (
          ((this.prev = 0),
          (this.next = 0),
          (this.sent = this._sent = undefined),
          (this.done = !1),
          (this.delegate = null),
          (this.method = "next"),
          (this.arg = undefined),
          this.tryEntries.forEach(resetTryEntry),
          !skipTempReset)
        )
          for (var name in this)
            "t" === name.charAt(0) &&
              hasOwn.call(this, name) &&
              !isNaN(+name.slice(1)) &&
              (this[name] = undefined);
      },
      stop: function stop() {
        this.done = !0;
        var rootRecord = this.tryEntries[0].completion;
        if ("throw" === rootRecord.type) throw rootRecord.arg;
        return this.rval;
      },
      dispatchException: function dispatchException(exception) {
        if (this.done) throw exception;
        var context = this;
        function handle(loc, caught) {
          return (
            (record.type = "throw"),
            (record.arg = exception),
            (context.next = loc),
            caught && ((context.method = "next"), (context.arg = undefined)),
            !!caught
          );
        }
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i],
            record = entry.completion;
          if ("root" === entry.tryLoc) return handle("end");
          if (entry.tryLoc <= this.prev) {
            var hasCatch = hasOwn.call(entry, "catchLoc"),
              hasFinally = hasOwn.call(entry, "finallyLoc");
            if (hasCatch && hasFinally) {
              if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
              if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
            } else if (hasCatch) {
              if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
            } else {
              if (!hasFinally)
                throw new Error("try statement without catch or finally");
              if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
            }
          }
        }
      },
      abrupt: function abrupt(type, arg) {
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          if (
            entry.tryLoc <= this.prev &&
            hasOwn.call(entry, "finallyLoc") &&
            this.prev < entry.finallyLoc
          ) {
            var finallyEntry = entry;
            break;
          }
        }
        finallyEntry &&
          ("break" === type || "continue" === type) &&
          finallyEntry.tryLoc <= arg &&
          arg <= finallyEntry.finallyLoc &&
          (finallyEntry = null);
        var record = finallyEntry ? finallyEntry.completion : {};
        return (
          (record.type = type),
          (record.arg = arg),
          finallyEntry
            ? ((this.method = "next"),
              (this.next = finallyEntry.finallyLoc),
              ContinueSentinel)
            : this.complete(record)
        );
      },
      complete: function complete(record, afterLoc) {
        if ("throw" === record.type) throw record.arg;
        return (
          "break" === record.type || "continue" === record.type
            ? (this.next = record.arg)
            : "return" === record.type
            ? ((this.rval = this.arg = record.arg),
              (this.method = "return"),
              (this.next = "end"))
            : "normal" === record.type && afterLoc && (this.next = afterLoc),
          ContinueSentinel
        );
      },
      finish: function finish(finallyLoc) {
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          if (entry.finallyLoc === finallyLoc)
            return (
              this.complete(entry.completion, entry.afterLoc),
              resetTryEntry(entry),
              ContinueSentinel
            );
        }
      },
      catch: function _catch(tryLoc) {
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          if (entry.tryLoc === tryLoc) {
            var record = entry.completion;
            if ("throw" === record.type) {
              var thrown = record.arg;
              resetTryEntry(entry);
            }
            return thrown;
          }
        }
        throw new Error("illegal catch attempt");
      },
      delegateYield: function delegateYield(iterable, resultName, nextLoc) {
        return (
          (this.delegate = {
            iterator: values(iterable),
            resultName: resultName,
            nextLoc: nextLoc,
          }),
          "next" === this.method && (this.arg = undefined),
          ContinueSentinel
        );
      },
    }),
    exports
  );
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}
function _asyncToGenerator(fn) {
  return function () {
    var self = this,
      args = arguments;
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args);
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
      }
      _next(undefined);
    });
  };
}
function UpdateCounters(_x, _x2) {
  return _UpdateCounters.apply(this, arguments);
}
function _UpdateCounters() {
  _UpdateCounters = _asyncToGenerator(
    /*#__PURE__*/ _regeneratorRuntime().mark(function _callee(elm, value) {
      var count;
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1)
          switch ((_context.prev = _context.next)) {
            case 0:
              elm = document.getElementById(elm);
              _context.next = 3;
              return new Promise(function (r) {
                var interval = setInterval(function () {
                  var rect = elm.getBoundingClientRect();
                  if (
                    !(
                      rect.bottom < 0 ||
                      rect.top -
                        Math.max(
                          document.documentElement.clientHeight,
                          window.innerHeight
                        ) >=
                        0
                    )
                  ) {
                    clearInterval(interval);
                    r();
                  }
                }, 500);
              });
            case 3:
              count = 0;
            case 4:
              if (!(count <= value)) {
                _context.next = 11;
                break;
              }
              elm.innerText = count.toLocaleString(navigator.language, {
                notation: "compact",
                compactDisplay: "short",
                maximumFractionDigits: 1,
              });
              _context.next = 8;
              return new Promise(function (r) {
                setTimeout(r, 10);
              });
            case 8:
              count += Math.ceil(value / 100);
              _context.next = 4;
              break;
            case 11:
            case "end":
              return _context.stop();
          }
      }, _callee);
    })
  );
  return _UpdateCounters.apply(this, arguments);
}

function SwitchMainForm(mode) {
  let form = document.getElementById("main-form");
  let hidden_input = form.querySelector("input[type='hidden']");
  let input = form.querySelector("input:not([type='hidden'])");
  let button = form.querySelector("button");

  switch (mode) {
    case "search":
      hidden_input.value = "title";
      hidden_input.name = "Sp%C3%A9cial%3ARecherche";

      input.name = "search";
      input.placeholder = "Rechercher";
      input.removeAttribute("dir");

      button.removeAttribute("name");
      button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>`;
      break;

    case "new-article":
      hidden_input.value = "edit";
      hidden_input.name = "action";

      input.name = "title";
      input.placeholder = "Créer un article";
      input.dir = "ltr";

      button.name = "create";
      /* button.onclick = function () {
        console.log("hellllloo")
        confetti();
      }; */
      button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>`;
      break;
  }
}

if (
  window.location.pathname === "/index.php/Accueil" ||
  window.location.href.includes("?title=Accueil")
) {
  if (!CSS.supports("selector(:has(+ *)")) {
    var body_container = document.getElementsByClassName(
      "citizen-body-container"
    )[0];
    body_container.style.setProperty("display", "block", "important");
    body_container.style.setProperty("margin", "0", "important");
    body_container.style.setProperty("padding", "0", "important");
    document
      .getElementsByClassName("mw-body-header")[0]
      .style.setProperty("display", "none", "important");
    document
      .getElementsByClassName("mw-body-footer")[0]
      .style.setProperty("display", "none", "important");
    document
      .getElementById("citizen-body-header-sticky-sentinel")
      .style.setProperty("display", "none", "important");
    document
      .getElementsByClassName("citizen-footer")[0]
      .style.setProperty("margin-top", "0", "important");
    document
      .getElementsByClassName("mw-body")[0]
      .style.setProperty("margin-top", "-1rem");
  }

  fetch(
    "https://wikithionville.fr/api.php?action=query&meta=userinfo|siteinfo&uiprop=rights|editcount|realname&siprop=statistics&format=json"
  )
    .then(function (res) {
      return res.json();
    })
    .then(function (res) {
      if (res.query.userinfo.rights.includes("edit")) {
        SwitchMainForm("new-article");
      }
      document.getElementsByClassName("counters")[0].style.display = "flex";
      UpdateCounters("counter_articles", res.query.statistics.articles);
      UpdateCounters("counter_pages", res.query.statistics.pages);
      UpdateCounters("counter_utilisateurs", res.query.statistics.users);
      if (res.query.userinfo.editcount > 0) {
        document.getElementById("ccard_contribperso").style.display = "flex";
        UpdateCounters("counter_contribperso", res.query.userinfo.editcount);
      }
    });
  document.addEventListener("scroll", function () {
    UpdateScroll();
  });
  UpdateScroll();
  addPopCarouselBtns();
  initCards();
}

[].forEach.call(
  document.getElementsByClassName("text-marquee"),
  function (marquee) {
    var text_elm = marquee.querySelector("*");
    var ofw = marquee.clientWidth - text_elm.scrollWidth;
    var duration = Math.max(Math.round(-ofw / 15), 1);
    if (ofw < 0) {
      marquee.style.animation =
        duration + "s linear infinite alternate paused gardient_slide";
      text_elm.style.setProperty("--ofw", ofw + "px");
      text_elm.style.animation =
        duration + "s linear infinite alternate paused text_slide";
    }
  }
);

function UpdateScroll() {
  var scroll = window.scrollY + window.innerHeight / 3;
  [].forEach.call(document.getElementsByClassName("panel"), function (panel) {
    if (
      panel.offsetTop <= scroll &&
      panel.offsetTop + panel.clientHeight > scroll
    ) {
      document.getElementById("wiki-home").style.backgroundColor =
        panel.getAttribute("bg");
/*       [].forEach.call(
        document.querySelectorAll("#categories .marklist img.inverted"),
        function (markimg) {
          if (panel.id === "categories") {
            markimg.classList.remove("y");
          } else {
            markimg.classList.add("y");
          }
        }
      ); */
      [].forEach.call(
        document.querySelectorAll("#progress a"),
        function (prog) {
          if (prog.getAttribute("href") === "#" + panel.id) {
            prog.classList.add("active");
          } else {
            prog.classList.remove("active");
          }
        }
      );
    }
  });
  document.getElementById("img-beffroi").style.transform =
    "translate3d(-".concat(
      Math.min(
        (window.scrollY / document.getElementById("plusdinfo").offsetTop) * 30,
        30
      ),
      "vw, 0, 0)"
    );
}

function addPopCarouselBtns() {
  let popular_ul = document.querySelector(".home-header #popular ul");
  let btn_next = document.getElementById("popular-next");
  let btn_prev = document.getElementById("popular-prev");
  if (!popular_ul) return;

  let updateSize = function () {
    if (popular_ul.scrollWidth - popular_ul.clientWidth > 0) {
      btn_next.style.display = "block";
      btn_prev.style.display = "block";
    } else {
      btn_next.style.display = "none";
      btn_prev.style.display = "none";
    }
  };

  btn_next.addEventListener("click", () => {
    popular_ul.scrollTo({
      left: Math.min(
        popular_ul.scrollWidth,
        popular_ul.scrollLeft + popular_ul.clientWidth * 0.8
      ),
      behavior: "smooth",
    });
  });

  btn_prev.addEventListener("click", () => {
    popular_ul.scrollTo({
      left: Math.max(0, popular_ul.scrollLeft - popular_ul.clientWidth * 0.8),
      behavior: "smooth",
    });
  });

  window.addEventListener("resize", updateSize);
  updateSize();

  popular_ul.querySelectorAll("li").forEach((article) => {
    fetch(
      `https://wikithionville.fr/api.php?action=query&redirects&prop=images&titles=${new URL(
        article.querySelector("a").href,
        "https://wikithionville.fr"
      ).searchParams.get("title")}`
    )
      .then(function (res) {
        return res.json();
      })
      .then(function (res) {
        let img_name =
          res?.query?.pages?.[Object.keys(res?.query?.pages)[0]]?.images?.[0]
            ?.title;
        let img_elm = article.querySelector("img");
        img_elm.loading = "lazy";
        img_elm.src = `https://wikithionville.fr/index.php?title=Sp%C3%A9cial:Redirection/file/${img_name}`;
      });

    article.addEventListener("click", () => {
      article.querySelector("a").click();
    });
  });
}

function initCards() {
  [].forEach.call(document.getElementsByClassName("card-li"), function (cardli) {
    const allCards = cardli.querySelectorAll(".card-container");
    cardli.addEventListener("mousemove", (ev) => {
      allCards.forEach((e) => {
        const blob = e.querySelector(".blob");
        const fblob = e.querySelector(".fakeblob");
        const rec = fblob.getBoundingClientRect();


        blob.animate(
          [{
              transform: `translate3d(${ev.clientX - rec.left - (rec.width / 2)}px,${ev.clientY - rec.top - (rec.height / 2)}px, 0)`,
          }],
          {
            duration: 200,
            fill: "forwards",
          }
        );
      });
    }, {passive: true,});
  });
}