Skip to content

Commit

Permalink
Add dropdown context menu and sheet modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@CurbaiCode
CurbaiCode committed Aug 1, 2024
1 parent 7e899cb commit 6b88834
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 84 deletions.
126 changes: 72 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,63 +11,81 @@
<link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<header>
<div>
<ul id="head-left">
<li><button id="prev" style="visibility:hidden"><i id="prev-icon" class="gs" data-icon="chevron-left"></i><span id="prev-label"></span></button></li>
</ul>
<div id="head-center">
<h1 id="title">Home</h1>
<div id="main">
<header>
<div>
<ul class="head-left">
<li><button id="prev" style="visibility:hidden"><i id="prev-icon" class="gs" data-icon="chevron-left"></i><span id="prev-label"></span></button></li>
</ul>
<div class="head-center">
<h1 id="title">Home</h1>
</div>
<ul class="head-right">
<section id="toolbar" class="hidden">
<li><button onclick="modal()"><span>Settings</span><i class="gs">gear</i></button></li>
</section>
<li><button onclick="menu('toolbar')"><i class="gs">chevron-down</i></button></li>
</ul>
</div>
</header>
<main id="content">
<section id="home">
<h2>Recents</h2>
<ul id="recents" class="list"></ul>
<h2>Bookmarks</h2>
<ul id="bookmarks"></ul>
</section>
<section id="library">
<ul id="collections" class="tiles"></ul>
</section>
<section id="collection">
<ul id="books" class="tiles"></ul>
</section>
<section id="book">
<ul id="parts" class="list"></ul>
</section>
<section id="part">
<ul id="chapters" class="list"></ul>
</section>
<section id="reader">
<div id="head">
<div id="superhead" style="display:none">
<h2 id="heading"></h2>
<h4 id="subheading"></h4>
<p id="intro"></p>
</div>
<h3 id="chapter"></h3>
<p><em id="summary"></em></p>
</div>
<article id="article"></article>
</section>
<aside id="inspector">
<ul id="notes"></ul>
</aside>
</main>
<nav>
<div>
<ul id="nav">
<li id="home-tab" class="active"><button onclick="slide('home', 'home', null, false)"><i class="gs" data-icon="house-fill"></i><span>Home</span></button></li>
<li id="lib-tab" ><button onclick="slide('library', 'lib', null, false)"><i class="gs" data-icon="book-fill"></i><span>Library</span></button></li>
</ul>
</div>
<ul id="head-right">
<li id="menu"><button><i class="gs">sliders</i></button></li>
</ul>
</div>
</header>
<main id="main">
<section id="home">
<h2>Recents</h2>
<ul id="recents" class="list"></ul>
<h2>Bookmarks</h2>
<ul id="bookmarks"></ul>
</section>
<section id="library">
<ul id="collections" class="tiles"></ul>
</section>
<section id="collection">
<ul id="books" class="tiles"></ul>
</section>
<section id="book">
<ul id="parts" class="list"></ul>
</section>
<section id="part">
<ul id="chapters" class="list"></ul>
</section>
<section id="reader">
<div id="head">
<div id="superhead" style="display:none">
<h2 id="heading"></h2>
<h4 id="subheading"></h4>
<p id="intro"></p>
</nav>
</div>
<aside id="modal">
<header>
<div>
<ul class="head-left"></ul>
<div class="head-center">
<h1 id="modal-title">Modal</h1>
</div>
<h3 id="chapter"></h3>
<p><em id="summary"></em></p>
<ul class="head-right">
<li><button onclick="document.body.classList.remove('modal')">Done</button></li>
</ul>
</div>
<article id="article"></article>
</section>
<aside id="inspector">
<ul id="notes"></ul>
</aside>
</main>
<nav>
<div>
<ul id="nav">
<li id="home-tab" class="active"><button onclick="slide('home', 'home', null, false)"><i class="gs" data-icon="house-fill"></i><span>Home</span></button></li>
<li id="lib-tab" ><button onclick="slide('library', 'lib', null, false)"><i class="gs" data-icon="book-fill"></i><span>Library</span></button></li>
<!-- <li id="search-tab"><button onclick="slide('search', 'search', null, false)"><i class="gs" data-icon="magnifyingglass"></i><span>Search</span></button></li> -->
</ul>
</div>
</nav>
</header>
<section id="settings">Settings</section>
</aside>
<script src="https://cdn.jsdelivr.net/gh/CurbaiCode/[email protected]/scripts/gustsymbols.min.js"></script>
<script src="scripts/msgpackr.min.js"></script>
<script src="scripts/main.js"></script>
Expand Down
28 changes: 19 additions & 9 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ function parse(el, type, text) {
for (var verse of t.split("\n")) {
++u;
if (!first) { // First verse is the container
console.log(u, originalLen);
if (u <= originalLen) {
t = t.replace(verse, '<li id="p' + (v + u - 1) + '"><span>' + verse + "</span></li>");
} else {
Expand Down Expand Up @@ -186,7 +185,7 @@ var prev = document.getElementById("prev");
var prevIcon = document.getElementById("prev-icon");
var prevLabel = document.getElementById("prev-label");
var title = document.getElementById("title");
var pages = document.getElementById("main").children;
var pages = document.getElementById("content").children;
var tabs = document.getElementById("nav").children;
function previous(action, label, hide = "") {
switch (hide) {
Expand Down Expand Up @@ -233,12 +232,6 @@ function slide(page, tab, data = undefined, load = true) {
}
}
switch (page) {
case "search":
console.log("SEARCH WIP");
previous(function () { console.log("CANCEL SEARCH IGNORED") }, "Cancel", "icon");
document.title = "Search | Sprym";
title.textContent = "Search";
break;
case "home":
previous(function () {}, "", "button");
document.title = "Sprym";
Expand Down Expand Up @@ -395,7 +388,6 @@ function bookCatalog() { // Get parts
var label = document.createElement("p");
label.textContent = part.name;
(function () {
var b = book;
var p = part;
if (p.type == "skip") {
if (p.id == "stp") {
Expand Down Expand Up @@ -585,3 +577,21 @@ function note(link) {
// readLines("/eng/scriptures/nt.spr/matt/2.sch", [2, 3, 6, 18, 20, 21, 22], function (selection) {
// console.log(selection);
// });

function menu(target) {
var el = document.getElementById(target);
if (el.classList.contains("hidden")) {
el.classList.remove("hidden");
setTimeout(function () {
document.addEventListener("click", function () {
this.removeEventListener("click", arguments.callee);
el.classList.add("hidden");
});
}, 0);
} else {
el.classList.add("hidden");
}
}
function modal() {
document.body.classList.add("modal");
}
Loading

0 comments on commit 6b88834

Please sign in to comment.