https://www.puteaux.fr/wp-content/mu-plugins/df-wheelzoom.js

1(function () {
2
3  function ready(f){
4    if (document.readyState !== 'loading') f();
5    else document.addEventListener('DOMContentLoaded', f);
6  }
7  function clamp(v,a,b){ return Math.max(a,Math.min(b,v)); }
8
9  function getContainer(){
10    return document.querySelector('.df-lightbox-wrapper .df-container.df-fullscreen') ||
11           document.querySelector('.df-container.df-fullscreen') ||
12           document.querySelector('.df-lightbox-wrapper .df-container');
13  }
14
15  function isFullscreen(c){
16    if (!c) return false;
17    if (c.className.indexOf('df-fullscreen') !== -1) return true;
18    var lb = c.closest('.df-lightbox-wrapper');
19    if (!lb) return false;
20    var s = getComputedStyle(lb);
21    return s.display !== 'none' && s.visibility !== 'hidden';
22  }
23
24  var MIN = 1, MAX = 4;
25  var scale = 1, tx = 0, ty = 0;
26  var dragging = false, sx = 0, sy = 0, stx = 0, sty = 0;
27  var pinchStartDist = 0, pinchStartScale = 1;
28
29  function ensureWrap(c){
30    var v = c.querySelector('.df-viewer-container');
31    if (!v) return null;
32
33    if (v.parentNode.className.indexOf('df-wheelzoom-wrap') !== -1)
34      return v.parentNode;
35
36    var w = document.createElement('div');
37    w.className = 'df-wheelzoom-wrap';
38    w.style.cssText =
39      'position:relative;width:100%;height:100%;overflow:hidden;' +
40      'transform-origin:0 0;touch-action:none;cursor:grab;';
41
42    v.parentNode.insertBefore(w, v);
43    w.appendChild(v);
44
45    // Pan (1 doigt/souris) seulement si zoom > 1
46    w.addEventListener('pointerdown', function(e){
47      if (scale <= 1) return;
48      dragging = true;
49      sx = e.clientX; sy = e.clientY;
50      stx = tx; sty = ty;
51      try { w.setPointerCapture(e.pointerId); } catch(_) {}
52      w.style.cursor = 'grabbing';
53      e.preventDefault();
54    });
55
56    w.addEventListener('pointermove', function(e){
57      if (!dragging) return;
58      tx = stx + (e.clientX - sx);
59      ty = sty + (e.clientY - sy);
60      apply(w);
61      e.preventDefault();
62    });
63
64    function endDrag(){
65      dragging = false;
66      w.style.cursor = 'grab';
67    }
68    w.addEventListener('pointerup', endDrag);
69    w.addEventListener('pointercancel', endDrag);
70
71    // Pinch (2 doigts)
72    w.addEventListener('touchstart', function(e){
73      if (e.touches.length !== 2) return;
74      pinchStartDist = dist(e.touches[0], e.touches[1]);
75      pinchStartScale = scale;
76    }, { passive:false });
77
78    w.addEventListener('touchmove', function(e){
79      if (e.touches.length !== 2) return;
80
81      var d = dist(e.touches[0], e.touches[1]);
82      var ns = clamp(pinchStartScale * (d / pinchStartDist), MIN, MAX);
83
84      var r = w.getBoundingClientRect();
85      var cx = (e.touches[0].clientX + e.touches[1].clientX)/2 - r.left;
86      var cy = (e.touches[0].clientY + e.touches[1].clientY)/2 - r.top;
87
88      var ratio = ns / scale;
89      tx = cx - (cx - tx) * ratio;
90      ty = cy - (cy - ty) * ratio;
91      scale = ns;
92
93      if (scale <= MIN + 0.001) { reset(w); return; }
94      apply(w);
95      e.preventDefault();
96    }, { passive:false });
97
98    return w;
99  }
100
101  function apply(w){
102    w.style.transform = 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')';
103    w.style.willChange = 'transform';
104  }
105
106  function reset(w){
107    scale = 1; tx = 0; ty = 0;
108    w.style.transform = '';
109    w.style.cursor = 'grab';
110  }
111
112  function dist(a,b){
113    var dx = a.clientX - b.clientX;
114    var dy = a.clientY - b.clientY;
115    return Math.sqrt(dx*dx + dy*dy);
116  }
117
118  ready(function(){
119
120    // Molette desktop (uniquement fullscreen)
121    window.addEventListener('wheel', function(e){
122      var c = getContainer();
123      if (!isFullscreen(c)) return;
124      var w = ensureWrap(c);
125      if (!w) return;
126
127      var r = w.getBoundingClientRect();
128      if (e.clientX < r.left || e.clientX > r.right ||
129          e.clientY < r.top  || e.clientY > r.bottom) return;
130
131      e.preventDefault();
132
133      var ns = clamp(scale * (e.deltaY < 0 ? 1.15 : 0.87), MIN, MAX);
134      var ratio = ns / scale;
135
136      var mx = e.clientX - r.left;
137      var my = e.clientY - r.top;
138
139      tx = mx - (mx - tx) * ratio;
140      ty = my - (my - ty) * ratio;
141      scale = ns;
142
143      if (scale <= MIN + 0.001) { reset(w); return; }
144      apply(w);
145    }, { passive:false, capture:true });
146
147    // Boutons + / -
148    document.addEventListener('click', function(e){
149      var plus  = e.target.closest && e.target.closest('.df-ui-zoomin');
150      var minus = e.target.closest && e.target.closest('.df-ui-zoomout');
151      if (!plus && !minus) return;
152
153      var c = getContainer();
154      if (!isFullscreen(c)) return;
155
156      var w = ensureWrap(c);
157      if (!w) return;
158
159      e.preventDefault();
160      e.stopPropagation();
161
162      var r = w.getBoundingClientRect();
163      var ns = clamp(scale * (plus ? 1.25 : 0.8), MIN, MAX);
164      var ratio = ns / scale;
165
166      tx = r.width/2  - (r.width/2  - tx) * ratio;
167      ty = r.height/2 - (r.height/2 - ty) * ratio;
168      scale = ns;
169
170      if (scale <= MIN + 0.001) { reset(w); return; }
171      apply(w);
172    }, true);
173
174  });
175
176})();