https://www.atelierdesarts.com/js/modal-map-area-galleria.js?v=20260212-1

1// modal-map-area-galleria.js
2// Supporto mappe immagine (ACDSee) + click su <area> che apre modal-con-zoom senza rompere le gallerie.
3// Requisito: modal-con-zoom.js deve essere caricato (definisce window.openOpera).
4
5(function(){
6  'use strict';
7
8  // ===== 1) Mappe <area> responsive (scala coords) =====
9  function scaleMap(imgEl){
10    var usemap = imgEl.getAttribute('usemap');
11    if (!usemap) return;
12
13    var name = usemap.replace('#','');
14    var map = document.querySelector('map[name="'+ name +'"]');
15    if (!map) return;
16
17    var natW = imgEl.naturalWidth || imgEl.width;
18    var natH = imgEl.naturalHeight || imgEl.height;
19    if (!natW || !natH) return;
20
21    var curW = imgEl.clientWidth || imgEl.width;
22    var curH = imgEl.clientHeight || imgEl.height;
23    if (!curW || !curH) return;
24
25    var sx = curW / natW;
26    var sy = curH / natH;
27
28    map.querySelectorAll('area[coords]').forEach(function(area){
29      var raw = area.dataset.origCoords || area.getAttribute('coords');
30      if (!raw) return;
31      if (!area.dataset.origCoords) area.dataset.origCoords = raw;
32
33      var nums = raw.split(',').map(function(n){ return parseFloat(n); });
34      for (var i=0; i<nums.length; i+=2){
35        nums[i]   = Math.round(nums[i]   * sx);
36        nums[i+1] = Math.round(nums[i+1] * sy);
37      }
38      area.coords = nums.join(',');
39    });
40  }
41
42  function initResponsiveAreas(){
43    var imgs = Array.prototype.slice.call(document.querySelectorAll('img[usemap]') || []);
44    imgs.forEach(function(img){
45      img.style.maxWidth = '100%';
46      img.style.height   = 'auto';
47      img.style.display  = 'block';
48
49      if (img.complete && img.naturalWidth) scaleMap(img);
50      else img.addEventListener('load', function(){ scaleMap(img); }, { once:true });
51
52      if ('ResizeObserver' in window){
53        var ro = new ResizeObserver(function(){ scaleMap(img); });
54        ro.observe(img);
55      } else {
56        window.addEventListener('resize', function(){ scaleMap(img); }, { passive:true });
57        window.addEventListener('orientationchange', function(){ scaleMap(img); }, { passive:true });
58      }
59    });
60  }
61
62  // ===== 2) Click su <area> -> openOpera(area.href, {el: area}) =====
63  document.addEventListener('click', function(e){
64    var area = e.target && e.target.closest ? e.target.closest('area[href]') : null;
65    if (!area) return;
66
67    // Evita navigazione al jpg (apri modale)
68    e.preventDefault();
69    e.stopPropagation();
70    if (e.stopImmediatePropagation) e.stopImmediatePropagation();
71
72    var href = area.getAttribute('href');
73    if (!href) return;
74
75    if (typeof window.openOpera === 'function'){
76      // NB: openOpera con el=area funziona perché modal-con-zoom è stato patchato per gestire AREA
77      window.openOpera(href, { el: area, mode: 'fit' });
78    } else {
79      // fallback: se per qualche motivo la modale non c'è, apri il link
80      window.location.href = href;
81    }
82  }, true);
83
84  function boot(){
85    initResponsiveAreas();
86  }
87  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
88  else boot();
89})();