mapshaper 0.7.1 → 0.7.3

package/www/page.css

@@ -170,7 +170,7 @@ body.map-view {
 	position: absolute;
 	top: 0px;
 	right: 0px;
-	margin: 0 6px 3px 0;	
+	margin: 0 3px 3px 0;
 }
 
 .btn.header-btn {
@@ -207,6 +207,63 @@ body.map-view {
 	vertical-align: -1px;
 }
 
+/* --- Hamburger menu (post-edit overflow links) --- */
+
+#header-menu-btn {
+	cursor: pointer;
+	padding: 8px 7px 4px 7px;
+	user-select: none;
+	/* All header buttons are 29px tall, so top-align the hamburger to keep its
+	   row baseline-neutral. Without this, the SVG-only button (no text) makes
+	   its inline-block baseline = bottom edge, which drags the surrounding
+	   text-containing buttons down to match. */
+	vertical-align: top;
+}
+
+#header-menu-btn svg {
+	display: block;
+	fill: currentColor;
+}
+
+#header-menu-dropdown {
+	position: absolute;
+	top: 30px;
+	right: 0;
+	min-width: 180px;
+	background-color: #fff;
+	color: #333;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+	padding: 4px 0;
+	z-index: 50;
+}
+
+.header-menu-item {
+	display: block;
+	padding: 4px 14px;
+	color: #333;
+	font-size: 14px;
+	line-height: 1.3;
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.header-menu-item:hover,
+.header-menu-item:focus {
+	background-color: #e6f7ff;
+	color: #1A6A96;
+	outline: none;
+}
+
+.header-menu-item.header-menu-sponsor svg {
+	width: 12px;
+	height: 12px;
+	fill: #d63384;
+	vertical-align: -1px;
+	margin-right: 6px;
+}
+
 .separator {
 	border-left: 1px solid white;
 	height: 10px;
@@ -427,6 +484,14 @@ div.alert-box {
 	margin: 0 0 5px 0;
 }
 
+input[type=text]:focus,
+input[type=number]:focus,
+textarea:focus {
+	outline: none;
+	border-color: #d3aa00;
+	box-shadow: 0 0 0 2px rgba(212, 168, 0, 0.4);
+}
+
 ::placeholder {
 	color: #aaa;
 	opacity: 1;
@@ -495,13 +560,6 @@ div.alert-box {
 	padding-left: 12px;
 }
 
-.info-box,.popup {
-	border-radius: 9px;
-	border: 1px solid #d5d5d5;
-	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
-	background-color: #fff;
-}
-
 .contextmenu {
 	position: absolute;
 	border-radius: 6px;
@@ -518,6 +576,12 @@ div.alert-box {
 	padding: 6px;
 }
 
+.info-box,.popup {
+	border-radius: 11px;
+	border: 1px solid #d5d5d5;
+	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
+	background-color: #fff;
+}
 
 .info-box {
 	min-width: 230px;
@@ -525,7 +589,8 @@ div.alert-box {
 	text-align: left;
 	margin-top: 12px;
 	margin-right: 20px;
-	padding: 12px 16px 12px 18px;
+	/* padding: 12px 16px 12px 18px; */
+	padding: 15px 17px 13px 19px;
 	vertical-align: top;
 	display: inline-block;
 	/* border: 1px solid #aaa; */
@@ -575,7 +640,7 @@ div.alert-box {
 .info-box p {
 	white-space: pre-line;
 	margin: 0 0 6px 0;
-	line-height: 1.2;
+	line-height: 1.25;
 	/* font-size: 90%; */
 }
 
@@ -1552,6 +1617,119 @@ body.pan.panning .map-layers:not(.drawing) {
 	cursor: default;
 }
 
+/* --- FLOATING TOOLBAR --- */
+
+/*
+ * Anchored at bottom-center of the map area. Multiple toolbars stack
+ * vertically (newest on top). Designed to host buttons and other small
+ * controls; the inner content slot leaves room for a future drag handle.
+ */
+
+.floating-toolbar-stack {
+	position: absolute;
+	z-index: 25;
+	bottom: 24px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column-reverse;
+	align-items: center;
+	gap: 8px;
+	pointer-events: none;
+}
+
+.floating-toolbar {
+	pointer-events: auto;
+	display: flex;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.96);
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+	padding: 4px;
+	opacity: 0;
+	transform: translateY(6px);
+	transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.floating-toolbar.visible {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.floating-toolbar-content {
+	display: flex;
+	align-items: center;
+	gap: 0;
+}
+
+.floating-toolbar-separator {
+	width: 1px;
+	height: 18px;
+	margin: 0 4px;
+	background-color: #ddd;
+}
+
+.floating-toolbar-btn {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border-radius: 5px;
+	cursor: pointer;
+	user-select: none;
+}
+
+.floating-toolbar-btn svg {
+	width: 24px;
+	height: 24px;
+}
+
+.floating-toolbar-btn svg * {
+	fill: #1385B7;
+	transition: fill 100ms ease;
+}
+
+.floating-toolbar-btn:hover:not(.disabled) {
+	background-color: #e6f7ff;
+}
+
+.floating-toolbar-btn:hover:not(.disabled) svg * {
+	fill: #166689;
+}
+
+.floating-toolbar-btn:active:not(.disabled) {
+	background-color: #cdebf9;
+}
+
+.floating-toolbar-btn.disabled {
+	cursor: default;
+}
+
+.floating-toolbar-btn.disabled svg * {
+	fill: #b8c4ca;
+}
+
+/* Tooltip shown above the button on hover */
+.floating-toolbar-btn[data-tooltip]:hover:not(.disabled)::after {
+	content: attr(data-tooltip);
+	position: absolute;
+	bottom: calc(100% + 8px);
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: rgba(40, 40, 40, 0.92);
+	color: #fff;
+	font-size: 11px;
+	line-height: 1;
+	white-space: nowrap;
+	padding: 5px 7px;
+	border-radius: 4px;
+	pointer-events: none;
+	z-index: 1;
+}
+
 .zoom-box {
 	position: absolute;
 	border: 1px solid #cc6acc;

package/www/docs/_assets/cmd-search.js

@@ -1,213 +0,0 @@
-// Jump-to-command dropdown for the command reference page.
-//
-// The build script wraps each command in <section class="cmd-section"
-// data-id="-clip" data-name="-clip" data-options="..."> and tags the H2
-// above each group as <h2 class="cmd-category">. We use that to populate a
-// dropdown of matching commands beneath the search input. Selecting an item
-// jumps to the corresponding section -- the page itself is never filtered.
-
-(function () {
-  'use strict';
-
-  var input = document.querySelector('.cmd-search-input');
-  var panel = document.querySelector('.cmd-search-results');
-  if (!input || !panel) return;
-
-  var statusEl = panel.querySelector('.cmd-search-status');
-  var listEl = panel.querySelector('.cmd-search-list');
-  var sections = Array.prototype.slice.call(
-    document.querySelectorAll('.cmd-section')
-  );
-  if (!sections.length) return;
-
-  // Build a flat command index. We walk the article in document order so we
-  // can attach the most recent h2.cmd-category to each section.
-  var article = sections[0].closest('.docs-article') || document;
-  var commands = (function () {
-    var out = [];
-    var currentCat = '';
-    var nodes = article.querySelectorAll('h2.cmd-category, section.cmd-section');
-    for (var i = 0; i < nodes.length; i++) {
-      var n = nodes[i];
-      if (n.tagName === 'H2') {
-        currentCat = (n.textContent || '').trim();
-      } else {
-        var name = n.dataset.name || '';
-        var opts = n.dataset.options || '';
-        var id = n.dataset.id || '';
-        if (!id) continue;
-        out.push({
-          id: id,
-          name: name,
-          options: opts,
-          category: currentCat,
-          haystack: (name + ' ' + opts).toLowerCase(),
-          el: n
-        });
-      }
-    }
-    return out;
-  })();
-
-  var MAX_RESULTS = 60;
-  var activeIdx = -1;
-  var results = [];
-
-  function render() {
-    var raw = input.value.trim();
-    var tokens = raw.toLowerCase().split(/\s+/).filter(Boolean);
-
-    if (!tokens.length) {
-      close();
-      return;
-    }
-
-    // Score-free matching: every token must appear in the name + options
-    // string. We deliberately don't search the full body text -- the dropdown
-    // is for jumping to a known command, not for free-text search.
-    results = commands.filter(function (c) {
-      return tokens.every(function (t) { return c.haystack.indexOf(t) !== -1; });
-    });
-
-    var truncated = results.length > MAX_RESULTS;
-    var shown = truncated ? results.slice(0, MAX_RESULTS) : results;
-
-    listEl.innerHTML = shown.map(function (c, i) {
-      return '<li role="option" id="cmd-result-' + i + '" class="cmd-result">' +
-        '<a href="#' + escapeAttr(c.id) + '" class="cmd-result-link" tabindex="-1">' +
-          '<span class="cmd-result-name">' + escapeHtml(c.name) + '</span>' +
-          (c.category
-            ? '<span class="cmd-result-cat">' + escapeHtml(c.category) + '</span>'
-            : '') +
-        '</a>' +
-      '</li>';
-    }).join('');
-
-    if (!results.length) {
-      statusEl.textContent = 'No commands match \u201c' + raw + '\u201d.';
-    } else if (truncated) {
-      statusEl.textContent = 'Showing first ' + MAX_RESULTS + ' of ' +
-        results.length + ' matches.';
-    } else if (results.length === 1) {
-      statusEl.textContent = '1 match (press Enter to jump).';
-    } else {
-      statusEl.textContent = results.length + ' matches.';
-    }
-
-    open();
-    setActive(results.length ? 0 : -1);
-  }
-
-  function open() {
-    panel.hidden = false;
-    input.setAttribute('aria-expanded', 'true');
-  }
-
-  function close() {
-    panel.hidden = true;
-    input.setAttribute('aria-expanded', 'false');
-    input.removeAttribute('aria-activedescendant');
-    activeIdx = -1;
-    results = [];
-    listEl.innerHTML = '';
-    statusEl.textContent = '';
-  }
-
-  function setActive(idx) {
-    var items = listEl.querySelectorAll('.cmd-result');
-    if (activeIdx >= 0 && items[activeIdx]) {
-      items[activeIdx].classList.remove('is-active');
-    }
-    activeIdx = idx;
-    if (idx < 0 || !items[idx]) {
-      input.removeAttribute('aria-activedescendant');
-      return;
-    }
-    items[idx].classList.add('is-active');
-    input.setAttribute('aria-activedescendant', 'cmd-result-' + idx);
-    // Keep the highlighted item visible inside the (scrollable) dropdown.
-    var el = items[idx];
-    var top = el.offsetTop;
-    var bottom = top + el.offsetHeight;
-    if (top < listEl.scrollTop) {
-      listEl.scrollTop = top;
-    } else if (bottom > listEl.scrollTop + listEl.clientHeight) {
-      listEl.scrollTop = bottom - listEl.clientHeight;
-    }
-  }
-
-  function jumpTo(idx) {
-    if (idx < 0 || idx >= results.length) return;
-    var c = results[idx];
-    // Use the anchor's href so the browser updates location.hash and triggers
-    // its native scroll-to-anchor behaviour (which respects scroll-margin-top).
-    var link = listEl.querySelectorAll('.cmd-result-link')[idx];
-    if (link) link.click();
-    close();
-    input.blur();
-  }
-
-  function escapeHtml(s) {
-    return String(s).replace(/[&<>"']/g, function (c) {
-      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;',
-                '"': '&quot;', "'": '&#39;' })[c];
-    });
-  }
-  function escapeAttr(s) { return escapeHtml(s); }
-
-  input.addEventListener('input', render);
-  input.addEventListener('focus', function () {
-    if (input.value.trim()) render();
-  });
-
-  input.addEventListener('keydown', function (e) {
-    if (e.key === 'ArrowDown') {
-      if (panel.hidden) { render(); return; }
-      e.preventDefault();
-      if (results.length) setActive((activeIdx + 1) % results.length);
-    } else if (e.key === 'ArrowUp') {
-      if (panel.hidden) return;
-      e.preventDefault();
-      if (results.length) {
-        setActive(activeIdx <= 0 ? results.length - 1 : activeIdx - 1);
-      }
-    } else if (e.key === 'Enter') {
-      if (panel.hidden || activeIdx < 0) return;
-      e.preventDefault();
-      jumpTo(activeIdx);
-    } else if (e.key === 'Escape') {
-      if (!panel.hidden) {
-        e.preventDefault();
-        close();
-      } else if (input.value) {
-        e.preventDefault();
-        input.value = '';
-      }
-    }
-  });
-
-  // Mouse interaction with the dropdown.
-  listEl.addEventListener('mousemove', function (e) {
-    var li = e.target.closest('.cmd-result');
-    if (!li) return;
-    var idx = Array.prototype.indexOf.call(listEl.children, li);
-    if (idx !== activeIdx) setActive(idx);
-  });
-
-  listEl.addEventListener('click', function (e) {
-    var link = e.target.closest('.cmd-result-link');
-    if (!link) return;
-    // Let cmd/ctrl/middle-click open in new tab as normal; otherwise
-    // intercept so we can close the dropdown after navigation.
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
-    // Default <a> click handles the scroll; just tidy up the UI.
-    setTimeout(close, 0);
-  });
-
-  // Click outside the wrap closes the dropdown.
-  document.addEventListener('click', function (e) {
-    if (panel.hidden) return;
-    if (e.target.closest('.cmd-search-wrap')) return;
-    close();
-  });
-})();