chandlerswift/maps.chandlerswift.com
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Make menu off-canvas

Browse source
This commit is contained in:
Chandler Swift 2023-07-03 22:13:15 -05:00
parent 06b2b5103a
commit fd7dca3b11
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
5 changed files with 61 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chandler Swift's Maps</title> <title>Chandler Swift's Maps</title>
</head> </head>
<body> <body class="nav-open">
<noscript>Sorry, but you'll need JavaScript enabled for any of this to work!</noscript> <noscript>Sorry, but you'll need JavaScript enabled for any of this to work!</noscript>
<aside> <aside>
<h1>Chandler's Maps</h1> <h1>Chandler's Maps</h1>

6
main.js
View file

@ -1,10 +1,14 @@
import './style.css'; import './style.css';
import {Map, View} from 'ol'; 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'; import layerCategories from './layers/index.js';
const map = new Map({ const map = new Map({
controls: defaultControls().extend([new ToggleMenuControl()]),
target: 'map', target: 'map',
layers: [], layers: [],
view: new View({ view: new View({

14
style.css
View file

@ -4,17 +4,29 @@ html, body {
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
#map { #map {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: min(max(200px, 20%), 400px); left: 0;
right: 0; right: 0;
transition: 0.25s;
}
.nav-open #map {
left: min(max(200px, 20%), 400px);
} }
aside { aside {
width: min(max(200px, 20%), 400px); width: min(max(200px, 20%), 400px);
margin-left: max(min(-200px, -20%), -400px);
padding: 0 1em; padding: 0 1em;
transition: 0.25s;
}
.nav-open aside {
margin-left: 0;
} }
aside ul { aside ul {

14
ui/controls.css Normal file
View file

@ -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 */
}

28
ui/controls.js vendored Normal file
View file

@ -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);
}
}