app/assets/javascripts/index_modules/element.js

   1 let abortController = null;
   2 const languagesToRequest = [...new Set(OSM.preferred_languages.map(l => l.toLowerCase()))];
   3 const wikisToRequest = [...new Set([...OSM.preferred_languages, "en"].map(l => l.split("-")[0] + "wiki"))];
   4 const isOfExpectedLanguage = ({ language }) => languagesToRequest[0].startsWith(language) || language === "mul";
   5
   6 export function element(type) {
   7   return function () {
   8     const page = {};
   9
  10     page.pushstate = page.popstate = function (path, id, version) {
  11       OSM.loadSidebarContent(path, function () {
  12         page._addObject(type, id, version);
  13         $(".numbered_pagination").trigger("numbered_pagination:enable");
  14         abortController = new AbortController();
  15       });
  16     };
  17
  18     page.load = function (path, id, version) {
  19       page._addObject(type, id, version, true);
  20       $(".numbered_pagination").trigger("numbered_pagination:enable");
  21       abortController = new AbortController();
  22     };
  23
  24     page.unload = function () {
  25       page._removeObject();
  26       $(".numbered_pagination").trigger("numbered_pagination:disable");
  27       abortController?.abort();
  28     };
  29
  30     page._addObject = function () {};
  31     page._removeObject = function () {};
  32
  33     return page;
  34   };
  35 };
  36
  37 export function mappedElement(type) {
  38   return function (map) {
  39     const page = element(type)(map);
  40
  41     page._addObject = function (type, id, version, center) {
  42       const hashParams = OSM.parseHash();
  43       map.addObject({ type: type, id: parseInt(id, 10), version: version && parseInt(version, 10) }, function (bounds) {
  44         if (!hashParams.center && bounds.isValid() &&
  45             (center || !map.getBounds().contains(bounds))) {
  46           OSM.router.withoutMoveListener(function () {
  47             map.fitBounds(bounds);
  48           });
  49         }
  50       });
  51     };
  52
  53     page._removeObject = function () {
  54       map.removeObject();
  55     };
  56
  57     return page;
  58   };
  59 };
  60
  61 $(document).on("click", "button.wdt-preview", e => previewWikidataValue($(e.currentTarget)));
  62
  63 function previewWikidataValue($btn) {
  64   if (!OSM.WIKIDATA_API_URL) return;
  65   const items = $btn.data("qids");
  66   if (!items?.length) return;
  67   $btn.prop("disabled", true);
  68   fetch(OSM.WIKIDATA_API_URL + "?" + new URLSearchParams({
  69     action: "wbgetentities",
  70     format: "json",
  71     origin: "*",
  72     ids: items.join("|"),
  73     props: "labels|sitelinks/urls|claims|descriptions",
  74     languages: languagesToRequest.join("|"),
  75     languagefallback: 1,
  76     sitefilter: wikisToRequest.join("|")
  77   }), {
  78     headers: { "Api-User-Agent": "OSM-TagPreview (https://github.com/openstreetmap/openstreetmap-website)" },
  79     signal: abortController?.signal
  80   })
  81     .then(response => response.ok ? response.json() : Promise.reject(response))
  82     .then(({ entities }) => {
  83       if (!entities) return Promise.reject(entities);
  84       $btn
  85         .closest("tr")
  86         .after(
  87           items
  88             .filter(qid => entities[qid])
  89             .map(qid => getLocalizedResponse(entities[qid]))
  90             .filter(data => data.label || data.icon || data.description || data.article)
  91             .map(data => renderWikidataResponse(data, $btn.siblings(`a[href*="wikidata.org/entity/${data.qid}"]`)))
  92         );
  93     })
  94     .catch(() => $btn.prop("disabled", false));
  95 }
  96
  97 function getLocalizedResponse(entity) {
  98   const siteScheme = OSM.isDark("bs") ? "Q6545942" : "Q101608434";
  99   const scheme = ({ qualifiers }) => qualifiers?.P8798?.some(q => q?.datavalue?.value?.id === siteScheme) ?? 0;
 100   const rank = ({ rank }) => ({ preferred: 2, normal: 0, deprecated: -2 })[rank] ?? 0;
 101   const toBestClaim = (out, claim) => (rank(claim) + scheme(claim) > rank(out) + scheme(out)) ? claim : out;
 102   const toFirstOf = (property) => (out, localization) => out ?? property[localization];
 103   const data = {
 104     qid: entity.id,
 105     label: languagesToRequest.reduce(toFirstOf(entity.labels), null),
 106     icon: [
 107       "P8972", // small logo or icon
 108       "P154", // logo image
 109       "P14" // traffic sign
 110     ].reduce((out, prop) => out ?? entity.claims[prop]?.reduce(toBestClaim)?.mainsnak?.datavalue?.value, null),
 111     description: languagesToRequest.reduce(toFirstOf(entity.descriptions), null),
 112     article: wikisToRequest.reduce(toFirstOf(entity.sitelinks), null)
 113   };
 114   if (data.article) data.article.language = data.article.site.replace("wiki", "");
 115   return data;
 116 }
 117
 118 function renderWikidataResponse({ icon, label, article, description }, $link) {
 119   const localeName = new Intl.DisplayNames(OSM.preferred_languages, { type: "language" });
 120   const cell = $("<td>")
 121     .attr("colspan", 2)
 122     .addClass("bg-body-tertiary");
 123
 124   if (icon && OSM.WIKIMEDIA_COMMONS_URL) {
 125     let src = OSM.WIKIMEDIA_COMMONS_URL + "Special:Redirect/file/" + encodeURIComponent(icon) + "?mobileaction=toggle_view_desktop";
 126     if (!icon.endsWith(".svg")) src += "&width=128";
 127     $("<a>")
 128       .attr("href", OSM.WIKIMEDIA_COMMONS_URL + "File:" + encodeURIComponent(icon) + `?uselang=${OSM.i18n.locale}`)
 129       .append($("<img>").attr({ src, height: "32" }))
 130       .addClass("float-end mb-1 ms-2")
 131       .appendTo(cell);
 132   }
 133   if (label) {
 134     const link = $link.clone()
 135       .text(label.value)
 136       .attr("dir", "auto")
 137       .appendTo(cell);
 138     if (!isOfExpectedLanguage(label)) {
 139       link.attr("lang", label.language);
 140       link.after($("<sup>").text(" " + localeName.of(label.language)));
 141     }
 142   }
 143   if (article) {
 144     const link = $("<a>")
 145       .attr("href", article.url + `?uselang=${OSM.i18n.locale}`)
 146       .text(label ? OSM.i18n.t("javascripts.element.wikipedia") : article.title)
 147       .attr("dir", "auto")
 148       .appendTo(cell);
 149     if (label) {
 150       link.before(" (");
 151       link.after(")");
 152     }
 153     if (!isOfExpectedLanguage(article)) {
 154       link.attr("lang", article.language);
 155       link.after($("<sup>").text(" " + localeName.of(article.language)));
 156     }
 157   }
 158   if (description) {
 159     const text = $("<div>")
 160       .text(description.value)
 161       .addClass("small")
 162       .attr("dir", "auto")
 163       .appendTo(cell);
 164     if (!isOfExpectedLanguage(description)) {
 165       text.attr("lang", description.language);
 166     }
 167   }
 168   return $("<tr>").append(cell);
 169 }