Utilisateur:Lepticed7/Sliders.js

Note : après avoir enregistré 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 pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
Opera : Allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d'exploration → Images et fichiers en cache.

const observer = new MutationObserver(() => {
  const $cvs = $("canvas");
	if ($cvs.length !== 0) {
    init();
    observer.disconnect();
  }
});
observer.observe(document.getElementById("bodyContent"), { childList: true, subtree: true });

function init() {
  var slidersValues = {
    // min, max, default value
    brightness: [0, 200, 100],
    contrast: [0, 200, 100],
    grayscale: [0, 100, 0],
    invert: [0, 100, 0],
    saturate: [0, 500, 100],
    sepia: [0, 100, 0]
  };

  var sliders = {};
  var $table = $("<table style='text-align: center; margin: 0.5em auto;'>");
  var $nameRow = $("<tr>");
  var $sliderRow = $("<tr>");
  var $valueRow = $("<tr>");
  var $resetButton = $("<button type='button'>Reset</button>");

  $table.append($nameRow, $sliderRow, $valueRow);
  $("#editform").before($table);
  $table.after($("<div style='text-align: center'>").append($resetButton));

  for (var i in slidersValues) {
    if (slidersValues.hasOwnProperty(i)) {
      var sv = slidersValues[i];
      sliders[i] = 
        [$("<input type='range' id='slider_" + i + "' min='" + sv[0] + "' max='" + sv[1] + "' value='" + sv[2] + "'>"),
         $("<input type='number' name='" + i + "' min='" + sv[0] + "' max='" + sv[1] + "'>")];
      sliders[i][0].on("input", updateFilters);
      sliders[i][1].on("change", onNumberUpdate);
      $nameRow.append("<th style='padding:0 0.8em;'><label for='slider_" + i + "'>" + i + "</label></th>");
      $sliderRow.append($("<td style='padding:0 0.8em;'>").append(sliders[i][0]));
      $valueRow.append($("<td style='padding:0 0.8em;'>").append(sliders[i][1]));
    }
  }
  
  $resetButton.on("click", resetFilters);

  var ctx = $("canvas")[0].getContext("2d");

  function updateFilters () {
    var filter = "";
    
    for (var i in sliders) {
      if (sliders.hasOwnProperty(i)) {
        var value = sliders[i][0].val();
        filter += i + "(" + (value / 100) + ") ";
        sliders[i][1].val(value);
      }
    }
    ctx.filter = filter;
    mw.proofreadpage.openseadragon.viewer.forceRedraw();
  }

  function onNumberUpdate(e) {
    var target = e.target;
    sliders[target.name][0].val($(target).val());
    updateFilters();
  }
  
  function resetFilters() {
    for (var i in sliders) {
      if (sliders.hasOwnProperty(i)) {
        var value = slidersValues[i][2];
        sliders[i][0].val(value);
        sliders[i][0].val(value);
      }
    }
    updateFilters();
  }

  updateFilters();
}