Browse Source

Add a help menu

better-rectangles
Tissevert 8 months ago
parent
commit
a45d004b4c
3 changed files with 34 additions and 8 deletions
  1. +8
    -0
      css/toolbar/menu.css
  2. +15
    -8
      index.html
  3. +11
    -0
      js/Toolbar/Menu.js

+ 8
- 0
css/toolbar/menu.css View File

@ -1,5 +1,6 @@
.menu {
cursor: default;
display: inline-block;
}
.menu > * {
@ -8,6 +9,7 @@
.menu span {
position: relative; /* needed for z-index to work */
padding: 0.4em;
}
.menu ul {
@ -37,3 +39,9 @@
color: #888;
background: #ddd;
}
.menu a {
color: inherit;
cursor: inherit;
text-decoration: none;
}

+ 15
- 8
index.html View File

@ -8,14 +8,21 @@
</head>
<body>
<div id="toolbar">
<div id="file" class="menu">
<span>Fichier</span>
<ul>
<li id="loadALTO">Charger des fichiers ALTO</li>
<li id="saveALTO" class="disabled">Exporter la page courante modifiée</li>
<li id="loadScoria">Importer des scories</li>
<li id="saveScoria">Exporter les scories</li>
</ul>
<div id="menubar">
<div id="file" class="menu">
<span>Fichier</span>
<ul>
<li id="loadALTO">Charger des fichiers ALTO</li>
<li id="saveALTO" class="disabled">Exporter la page courante modifiée</li>
<li id="loadScoria">Importer des scories</li>
<li id="saveScoria">Exporter les scories</li>
</ul>
</div><div id="help" class="menu">
<span>Aide</span>
<ul>
<li><a href="https://git.marvid.fr/Tissevert/chaoui" target="_blank">À propos de ce logiciel</a></li>
</ul>
</div>
</div>
<span>
<label for="fileNumber">#</label><input id="fileNumber" type="number" name="fileNumber" min="0" max="0" step="1" value="0"/>


+ 11
- 0
js/Toolbar/Menu.js View File

@ -16,10 +16,21 @@ return {
function init() {
for(var i = 0; i < menus.length; i++) {
menus[i].querySelector('span').addEventListener('click', toggleMenu(menus[i]));
menus[i].querySelector('span').addEventListener('mouseenter', openMenu(menus[i]));
menus[i].querySelector('ul').addEventListener('click', closeMenu);
}
}
function openMenu(menu) {
return function() {
if(selectedMenu != undefined && selectedMenu != menu) {
menu.classList.add('open');
selectedMenu.classList.remove('open');
selectedMenu = menu;
}
}
}
function toggleMenu(menu) {
return function() {
if(selectedMenu == undefined) {


Loading…
Cancel
Save