MediaWiki:Common.js: Difference between revisions

Revision as of 10:06, 11 January 2026

/* Landrace.wiki – Leaflet map with SMW Ask API support (robust + HTML entity decode) */
(function () {
  var LVER = '1.9.4';
  var CDN  = 'https://unpkg.com/leaflet@' + LVER + '/dist/';

  function addCSS(href, id) {
    if (id && document.getElementById(id)) return;
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = href;
    if (id) l.id = id;
    document.head.appendChild(l);
  }

  function addJS(src, cb) {
    if (window.L && typeof window.L.map === 'function') return cb();
    var existing = document.querySelector('script[data-lw-leaflet="1"]');
    if (existing) { existing.addEventListener('load', cb); return; }
    var s = document.createElement('script');
    s.src = src;
    s.setAttribute('data-lw-leaflet', '1');
    s.onload = cb;
    s.onerror = function () { console.error('[lw-map] Leaflet failed to load:', src); };
    document.head.appendChild(s);
  }

  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);
    });
  }

  function decodeHTML(s) {
    // Converts &deg; &#039; &quot; etc into real characters
    var str = String(s == null ? '' : s);
    if (!str) return '';
    var t = document.createElement('textarea');
    t.innerHTML = str;
    return t.value;
  }

  function stripTags(s) {
    return String(s == null ? '' : s).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
  }

  // Conservation Priority colors: Critical / High / Medium / Low
  function statusColor(s) {
    return ({
      'Critical': '#e74c3c',
      'High':     '#e67e22',
      'Medium':   '#f1c40f',
      'Low':      '#2ecc71'
    })[s] || '#3498db';
  }

  function popupForAccession(p) {
    var title = [p.id, p.name].filter(Boolean).join(' — ');
    var status = p.status ? esc(p.status) : '';
    var link = p.page_url ? '<br><a href="' + esc(p.page_url) + '">Open accession</a>' : '';
    return '<b>' + esc(title) + '</b>' + (status ? '<br>' + status : '') + link;
  }

  // ---- Coordinate parsing ----

  function dmsToDecimal(deg, min, sec, hemi) {
    var d = parseFloat(deg);
    var m = min != null && min !== '' ? parseFloat(min) : 0;
    var s = sec != null && sec !== '' ? parseFloat(sec) : 0;
    if (isNaN(d) || isNaN(m) || isNaN(s)) return null;
    var dec = Math.abs(d) + (m / 60) + (s / 3600);
    var H = String(hemi || '').toUpperCase();
    if (H === 'S' || H === 'W') dec = -dec;
    if (d < 0) dec = -Math.abs(dec);
    return dec;
  }

  // Parse two DMS coords from a string (handles ° ' " and prime symbols, with or without commas)
  function parseDMSPair(str) {
    var s = stripTags(decodeHTML(str));
    // Example: 26° 23' 50.60" N, 89° 29' 43.50" E
    var re = /(\-?\d+(?:\.\d+)?)\s*(?:°|º|d)?\s*(\d+(?:\.\d+)?)?\s*(?:'|′|m)?\s*(\d+(?:\.\d+)?)?\s*(?:"|″|s)?\s*([NSEW])/gi;
    var matches = [];
    var m;
    while ((m = re.exec(s)) !== null) {
      matches.push({ deg: m[1], min: m[2], sec: m[3], hemi: m[4] });
      if (matches.length >= 2) break;
    }
    if (matches.length < 2) return null;

    var a = matches[0], b = matches[1];
    var lat = dmsToDecimal(a.deg, a.min, a.sec, a.hemi);
    var lon = dmsToDecimal(b.deg, b.min, b.sec, b.hemi);

    // If first hemi is E/W, they’re swapped
    var h0 = String(a.hemi).toUpperCase();
    if (h0 === 'E' || h0 === 'W') {
      var tmp = lat; lat = lon; lon = tmp;
    }

    if (lat == null || lon == null || isNaN(lat) || isNaN(lon)) return null;
    return { lat: lat, lon: lon };
  }

  function parseLatLonString(str) {
    var s = stripTags(decodeHTML(str));
    if (!s) return null;

    // DMS first
    var dms = parseDMSPair(s);
    if (dms) return dms;

    // "lat, lon"
    var parts = s.split(',').map(function (x) { return x.trim(); }).filter(Boolean);
    if (parts.length === 2) {
      var lat1 = parseFloat(parts[0]);
      var lon1 = parseFloat(parts[1]);
      if (!isNaN(lat1) && !isNaN(lon1)) return { lat: lat1, lon: lon1 };
    }

    // "lat lon" (space separated)
    var nums = s.match(/-?\d+(?:\.\d+)?/g);
    if (nums && nums.length >= 2) {
      var lat2 = parseFloat(nums[0]);
      var lon2 = parseFloat(nums[1]);
      if (!isNaN(lat2) && !isNaN(lon2)) return { lat: lat2, lon: lon2 };
    }

    return null;
  }

  function parseSMWCoord(coord) {
    if (coord == null) return null;

    if (typeof coord === 'string') return parseLatLonString(coord);

    if (typeof coord === 'object') {
      var lat = coord.lat != null ? coord.lat : coord.latitude;
      var lon = coord.lon != null ? coord.lon : (coord.lng != null ? coord.lng : (coord.long != null ? coord.long : coord.longitude));

      // Some SMW outputs wrap values
      if (lat && typeof lat === 'object' && lat.value != null) lat = lat.value;
      if (lon && typeof lon === 'object' && lon.value != null) lon = lon.value;

      // If strings, try full parsing (handles DMS + HTML entities)
      if (typeof lat === 'string' || typeof lon === 'string') {
        var s = '';
        if (lat != null) s += String(lat) + ' ';
        if (lon != null) s += String(lon);
        var parsed = parseLatLonString(s);
        if (parsed) return parsed;

        // fallback: parseFloat if they’re plain decimals-as-strings
        var latf = parseFloat(stripTags(decodeHTML(lat)));
        var lonf = parseFloat(stripTags(decodeHTML(lon)));
        if (!isNaN(latf) && !isNaN(lonf)) return { lat: latf, lon: lonf };
      }

      // If numbers
      if (lat != null && lon != null && !isNaN(lat) && !isNaN(lon)) return { lat: lat, lon: lon };

      // Last resort: stringify entire object and try parsing
      try {
        return parseLatLonString(JSON.stringify(coord));
      } catch (e) {
        return null;
      }
    }

    return null;
  }

  function smwToGeoJSON(data) {
    var features = [];
    var results = (data && data.query && data.query.results) ? data.query.results : (data && data.results ? data.results : null);

    if (!results) {
      console.log('[lw-map] No results in SMW response');
      return { type: 'FeatureCollection', features: [] };
    }

    for (var pageName in results) {
      if (!Object.prototype.hasOwnProperty.call(results, pageName)) continue;

      var item = results[pageName] || {};
      var printouts = item.printouts || {};

      var coordsArr = printouts['Has GPS coordinates'];
      if (!coordsArr || !coordsArr.length) continue;

      var parsed = parseSMWCoord(coordsArr[0]);
      if (!parsed) {
        console.log('[lw-map] Could not parse coords for', pageName, coordsArr[0]);
        continue;
      }

      var lat = parsed.lat;
      var lon = parsed.lon;
      if (lat == null || lon == null || isNaN(lat) || isNaN(lon)) continue;

      var nameArr = printouts['Has descriptive name'];
      var name = (nameArr && nameArr.length) ? nameArr[0] : pageName;

      var statusArr = printouts['Has conservation priority'];
      var status = (statusArr && statusArr.length) ? statusArr[0] : '';

      var idArr = printouts['Has accession ID'];
      var idVal = (idArr && idArr.length) ? idArr[0] : '';
      if (idVal && typeof idVal === 'object' && idVal.fulltext) idVal = idVal.fulltext;

      var pageUrl = item.fullurl || (window.mw && mw.util && mw.util.getUrl ? mw.util.getUrl(pageName) : ('/wiki/' + encodeURIComponent(pageName)));

      features.push({
        type: 'Feature',
        properties: {
          id: idVal || '',
          name: name || pageName,
          status: status || '',
          page_url: pageUrl
        },
        geometry: { type: 'Point', coordinates: [lon, lat] }
      });
    }

    console.log('[lw-map] Converted', features.length, 'features from SMW');
    return { type: 'FeatureCollection', features: features };
  }

  function fetchSMW(askQuery, callback) {
    if (!window.mw || !mw.config) {
      callback(new Error('MediaWiki config not available'), null);
      return;
    }
    var apiUrl = mw.config.get('wgScriptPath') + '/api.php';
    var params = new URLSearchParams({ action: 'ask', query: askQuery, format: 'json' });

    fetch(apiUrl + '?' + params.toString())
      .then(function (r) { if (!r.ok) throw new Error('SMW API error: ' + r.status); return r.json(); })
      .then(function (data) { callback(null, smwToGeoJSON(data)); })
      .catch(function (err) { console.error('[lw-map] SMW fetch error:', err); callback(err, null); });
  }

  function buildLegendControl() {
    var legend = L.control({ position: 'bottomleft' });
    legend.onAdd = function () {
      var div = L.DomUtil.create('div', 'lw-legend-map');
      div.style.cssText =
        'background:white;padding:12px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.2);' +
        'border:1px solid #ccc;font-size:12px;line-height:1.4;';
      var html = '<div style="font-weight:700;margin-bottom:8px;color:#333;">Conservation Priority</div>';
      [['Critical','#e74c3c'],['High','#e67e22'],['Medium','#f1c40f'],['Low','#2ecc71']].forEach(function (it) {
        html += '<div style="display:flex;align-items:center;margin:6px 0;">' +
                  '<div style="width:12px;height:12px;background:'+it[1]+';border-radius:50%;margin-right:8px;border:1px solid rgba(0,0,0,0.2);"></div>' +
                  '<span style="color:#555;">'+esc(it[0])+'</span>' +
                '</div>';
      });
      div.innerHTML = html;
      return div;
    };
    return legend;
  }

  function initOne(el) {
    if (el.dataset.init) return;
    el.dataset.init = '1';
    if (el.clientHeight < 100) el.style.height = '70vh';

    var map = L.map(el, { minZoom: 2, maxZoom: 15, zoomControl: true }).setView([26.4, 89.5], 8);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OSM' }).addTo(map);
    buildLegendControl().addTo(map);

    if (!el.dataset.smwQuery) return;

    fetchSMW(el.dataset.smwQuery, function (err, geojson) {
      if (err || !geojson || !geojson.features || !geojson.features.length) {
        var msg = L.control({ position: 'topright' });
        msg.onAdd = function () {
          var d = L.DomUtil.create('div');
          d.style.cssText =
            'background: rgba(255,255,255,0.95);padding:8px 10px;border-radius:6px;' +
            'font-size:12px;color:#b00;border:1px solid #ccc;max-width:280px;';
          d.innerHTML = '<b>No accessions found</b><br>Query returned 0 mappable results (coords missing or unparsed).';
          return d;
        };
        msg.addTo(map);
        return;
      }

      var layer = L.geoJSON(geojson, {
        pointToLayer: function (f, ll) {
          return L.circleMarker(ll, {
            radius: 6, color: '#fff', weight: 2,
            fillColor: statusColor((f.properties || {}).status),
            fillOpacity: 0.95
          });
        },
        onEachFeature: function (f, ly) {
          var p = (f && f.properties) ? f.properties : {};
          ly.bindPopup(popupForAccession(p));
          var tip = p.id || p.name || '';
          if (tip) ly.bindTooltip(esc(tip), { direction: 'top', offset: [0, -8], opacity: 0.9 });
        }
      }).addTo(map);

      var b = layer.getBounds();
      if (b && b.isValid()) map.fitBounds(b.pad(0.2), { maxZoom: 12 });
      setTimeout(function () { map.invalidateSize(true); }, 100);
    });
  }

  function init(root) {
    (root || document).querySelectorAll('.lw-map').forEach(initOne);
  }

  addCSS(CDN + 'leaflet.css', 'leaflet-css');
  addJS(CDN + 'leaflet.js', function () {
    init();
    if (window.mw && mw.hook) {
      mw.hook('wikipage.content').add(function ($c) {
        init($c && $c[0] ? $c[0] : document);
      });
    }
  });
})();