Make menu off-canvas

2023-07-03 22:13:15 -05:00 · 2023-07-03 22:13:15 -05:00 · fd7dca3b11
parent 06b2b5103a
commit fd7dca3b11
5 changed files with 61 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chandler Swift's Maps</title>
  </head>
-  <body>
+  <body class="nav-open">
    <noscript>Sorry, but you'll need JavaScript enabled for any of this to work!</noscript>
    <aside>
      <h1>Chandler's Maps</h1>
--- a/main.js
+++ b/main.js
@ -1,10 +1,14 @@
 import './style.css';
 import {Map, View} from 'ol';
-import {fromLonLat} from 'ol/proj.js';
+import {fromLonLat, get} from 'ol/proj.js';
+import {defaults as defaultControls} from 'ol/control.js';
+
+import ToggleMenuControl from './ui/controls.js';

 import layerCategories from './layers/index.js';

 const map = new Map({
+  controls: defaultControls().extend([new ToggleMenuControl()]),
  target: 'map',
  layers: [],
  view: new View({
--- a/style.css
+++ b/style.css
@ -4,17 +4,29 @@ html, body {
  margin: 0;
  height: 100%;
 }
+
 #map {
  position: absolute;
  top: 0;
  bottom: 0;
-  left: min(max(200px, 20%), 400px);
+  left: 0;
  right: 0;
+  transition: 0.25s;
+}
+
+.nav-open #map {
+  left: min(max(200px, 20%), 400px);
 }

 aside {
  width: min(max(200px, 20%), 400px);
+  margin-left: max(min(-200px, -20%), -400px);
  padding: 0 1em;
+  transition: 0.25s;
+}
+
+.nav-open aside {
+  margin-left: 0;
 }

 aside ul {
--- a/ui/controls.css
+++ b/ui/controls.css
@ -0,0 +1,14 @@
+.show-menu {
+    top: .5em;
+    left: .5em;
+}
+.ol-zoom {
+    top: calc(1.375em + 2 * 0.5em);
+}
+
+.ol-touch .show-menu {
+    top: .5em; /* TODO */
+}
+.ol-touch .ol-zoom {
+    top: calc(1.375em * 1.5 + 2 * 0.5em); /* menu button at 1.5x scale, plus 2x padding */
+}
--- a/ui/controls.js
+++ b/ui/controls.js
@ -0,0 +1,28 @@
+// https://openlayers.org/en/latest/examples/custom-controls.html
+
+import {Control} from 'ol/control.js';
+
+import './controls.css'
+
+export default class ToggleMenuControl extends Control {
+    /**
+     * @param {Object} [opt_options] Control options.
+     */
+    constructor(opt_options) {
+        const options = opt_options || {};
+
+        const button = document.createElement('button');
+        button.innerHTML = '≡';
+
+        const element = document.createElement('div');
+        element.className = 'show-menu ol-unselectable ol-control';
+        element.appendChild(button);
+
+        super({
+            element: element,
+            target: options.target,
+        });
+
+        button.addEventListener('click', () => document.body.classList.toggle("nav-open"), false);
+    }
+}