app/assets/javascripts/application.js

   1 //= require jquery3
   2 //= require jquery_ujs
   3 //= require jquery.throttle-debounce
   4 //= require js-cookie/dist/js.cookie
   5 //= require popper
   6 //= require bootstrap-sprockets
   7 //= require osm
   8 //= require leaflet/dist/leaflet-src
   9 //= require leaflet.osm
  10 //= require leaflet.map
  11 //= require leaflet.zoom
  12 //= require leaflet.locationfilter
  13 //= require i18n
  14 //= require make-plural/cardinals
  15 //= require matomo
  16 //= require richtext
  17
  18 {
  19   const application_data = $("head").data();
  20   const locale = application_data.locale;
  21
  22   I18n.default_locale = OSM.DEFAULT_LOCALE;
  23   I18n.locale = locale;
  24
  25   // '-' are replaced with '_' in https://github.com/eemeli/make-plural/tree/main/packages/plurals
  26   const pluralizer = plurals[locale.replace(/\W+/g, "_")] || plurals[locale.split("-")[0]];
  27   if (pluralizer) {
  28     I18n.pluralization[locale] = (count) => [pluralizer(count), "other"];
  29   }
  30
  31   OSM.preferred_editor = application_data.preferredEditor;
  32   OSM.preferred_languages = application_data.preferredLanguages;
  33
  34   if (application_data.user) {
  35     OSM.user = application_data.user;
  36
  37     if (application_data.userHome) {
  38       OSM.home = application_data.userHome;
  39     }
  40   }
  41
  42   if (application_data.location) {
  43     OSM.location = application_data.location;
  44   }
  45 }
  46
  47 /*
  48  * Called as the user scrolls/zooms around to manipulate hrefs of the
  49  * view tab and various other links
  50  */
  51 window.updateLinks = function (loc, zoom, layers, object) {
  52   $(".geolink").each(function (index, link) {
  53     let href = link.href.split(/[?#]/)[0];
  54     const queryArgs = new URLSearchParams(link.search),
  55           editlink = $(link).hasClass("editlink");
  56
  57     for (const arg of ["node", "way", "relation", "changeset", "note"]) {
  58       queryArgs.delete(arg);
  59     }
  60
  61     if (object && editlink) {
  62       queryArgs.set(object.type, object.id);
  63     }
  64
  65     const query = queryArgs.toString();
  66     if (query) href += "?" + query;
  67
  68     const hashArgs = {
  69       lat: loc.lat,
  70       lon: "lon" in loc ? loc.lon : loc.lng,
  71       zoom: zoom
  72     };
  73
  74     if (layers && !editlink) {
  75       hashArgs.layers = layers;
  76     }
  77
  78     href += OSM.formatHash(hashArgs);
  79
  80     link.href = href;
  81   });
  82
  83   // Disable the button group and also the buttons to avoid
  84   // inconsistent behaviour when zooming
  85   const editDisabled = zoom < 13;
  86   $("#edit_tab")
  87     .tooltip({ placement: "bottom" })
  88     .tooltip(editDisabled ? "enable" : "disable")
  89     .toggleClass("disabled", editDisabled)
  90     .find("a")
  91     .toggleClass("disabled", editDisabled);
  92 };
  93
  94 $(function () {
  95   // NB: Turns Turbo Drive off by default. Turbo Drive must be opt-in on a per-link and per-form basis
  96   // See https://turbo.hotwired.dev/reference/drive#turbo.session.drive
  97   Turbo.session.drive = false;
  98
  99   const $expandedSecondaryMenu = $("header nav.secondary > ul"),
 100         $collapsedSecondaryMenu = $("#compact-secondary-nav > ul"),
 101         secondaryMenuItems = [],
 102         breakpointWidth = 768;
 103   let moreItemWidth = 0;
 104
 105   OSM.csrf = {};
 106   OSM.csrf[($("meta[name=csrf-param]").attr("content"))] = $("meta[name=csrf-token]").attr("content");
 107
 108   function updateHeader() {
 109     const windowWidth = $(window).width();
 110
 111     if (windowWidth < breakpointWidth) {
 112       $("body").addClass("small-nav");
 113       expandAllSecondaryMenuItems();
 114     } else {
 115       $("body").removeClass("small-nav");
 116       const availableWidth = $expandedSecondaryMenu.width();
 117       secondaryMenuItems.forEach(function (item) {
 118         $(item[0]).remove();
 119       });
 120       let runningWidth = 0,
 121           i = 0,
 122           requiredWidth;
 123       for (; i < secondaryMenuItems.length; i++) {
 124         runningWidth += secondaryMenuItems[i][1];
 125         if (i < secondaryMenuItems.length - 1) {
 126           requiredWidth = runningWidth + moreItemWidth;
 127         } else {
 128           requiredWidth = runningWidth;
 129         }
 130         if (requiredWidth > availableWidth) {
 131           break;
 132         }
 133         expandSecondaryMenuItem($(secondaryMenuItems[i][0]));
 134       }
 135       for (; i < secondaryMenuItems.length; i++) {
 136         collapseSecondaryMenuItem($(secondaryMenuItems[i][0]));
 137       }
 138     }
 139   }
 140
 141   function expandAllSecondaryMenuItems() {
 142     secondaryMenuItems.forEach(function (item) {
 143       expandSecondaryMenuItem($(item[0]));
 144     });
 145   }
 146
 147   function expandSecondaryMenuItem($item) {
 148     $item.children("a")
 149       .removeClass("dropdown-item")
 150       .addClass("nav-link")
 151       .addClass(function () {
 152         return $(this).hasClass("active") ? "text-secondary-emphasis" : "text-secondary";
 153       });
 154     $item.addClass("nav-item").insertBefore("#compact-secondary-nav");
 155     toggleCompactSecondaryNav();
 156   }
 157
 158   function collapseSecondaryMenuItem($item) {
 159     $item.children("a")
 160       .addClass("dropdown-item")
 161       .removeClass("nav-link text-secondary text-secondary-emphasis");
 162     $item.removeClass("nav-item").appendTo($collapsedSecondaryMenu);
 163     toggleCompactSecondaryNav();
 164   }
 165
 166   function toggleCompactSecondaryNav() {
 167     $("#compact-secondary-nav").toggle(
 168       $collapsedSecondaryMenu.find("li").length > 0
 169     );
 170   }
 171
 172   /*
 173    * Chrome 60 and later seem to fire the "ready" callback
 174    * before the DOM is fully ready causing us to measure the
 175    * wrong sizes for the header elements - use a 0ms timeout
 176    * to defer the measurement slightly as a workaround.
 177    */
 178   setTimeout(function () {
 179     $expandedSecondaryMenu.find("li:not(#compact-secondary-nav)").each(function () {
 180       secondaryMenuItems.push([this, $(this).width()]);
 181     });
 182     moreItemWidth = $("#compact-secondary-nav").width();
 183
 184     updateHeader();
 185
 186     $(window).resize(updateHeader);
 187     $(document).on("turbo:render", updateHeader);
 188   }, 0);
 189
 190   $("#menu-icon").on("click", function (e) {
 191     e.preventDefault();
 192     $("header").toggleClass("closed");
 193   });
 194
 195   $("nav.primary li a").on("click", function () {
 196     $("header").toggleClass("closed");
 197   });
 198
 199   $("#edit_tab")
 200     .attr("title", I18n.t("javascripts.site.edit_disabled_tooltip"));
 201 });