Skip to content

Commit

Permalink
add simple nav, run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
squi-ddy committed Dec 28, 2023
1 parent 63a45b7 commit 7e0412b
Show file tree
Hide file tree
Showing 9 changed files with 202 additions and 130 deletions.
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
# NUSH Flipbook

NUSH Flipbook displays PDF Yearbooks interactively.

37 changes: 37 additions & 0 deletions files/assets/css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.main {
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 100vw;
height: 100vh;
}

.navbar {
display: flex;
width: 100%;
justify-content: center;
background-color: black;
}

.nav-link {
color: white;
padding: 8px;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.nav-link:visited {
color: white;
}

.nav-link:hover {
background-color: dimgrey;
}

.nav-link:active {
background-color: dimgrey;
}

.active-nav-link {
background-color: dimgrey;
}
48 changes: 27 additions & 21 deletions files/assets/js/index.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,45 @@
const validFlipbooks = ["2020", "2019", "2018"]
let flipBook = location.search.length === 0 ? validFlipbooks[0] : location.search.substring(1);
const validFlipbooks = ["2020", "2019", "2018"];
let flipBook =
location.search.length === 0
? validFlipbooks[0]
: location.search.substring(1);
if (!validFlipbooks.includes(flipBook)) {
flipBook = validFlipbooks[0];
}

document.title = `NUSH Year Book ${flipBook}`;

// set the active navlink
$(`#nav-${flipBook}`).addClass("active-nav-link");

const options = {
pdf: `./assets/Yearbook-${flipBook}.pdf`,
controlsProps: {
downloadURL: `./assets/Yearbook-${flipBook}.pdf`
downloadURL: `./assets/Yearbook-${flipBook}.pdf`,
},
template: {
html: './assets/templates/default-book-view.html',
styles: [
'./assets/templates/black-book-view.css'
],
html: "./assets/templates/default-book-view.html",
styles: ["./assets/templates/black-book-view.css"],
sounds: {
startFlip: './assets/sounds/start-flip.mp3',
endFlip: './assets/sounds/end-flip.mp3'
startFlip: "./assets/sounds/start-flip.mp3",
endFlip: "./assets/sounds/end-flip.mp3",
},
links: [{
rel: 'stylesheet',
href: './assets/css/fontawesome.min.css'
},{
rel: 'stylesheet',
href: './assets/css/solid.min.css'
}],
script: './assets/templates/default-book-view.js',
}
links: [
{
rel: "stylesheet",
href: "./assets/css/fontawesome.min.css",
},
{
rel: "stylesheet",
href: "./assets/css/solid.min.css",
},
],
script: "./assets/templates/default-book-view.js",
},
};

const book = $("#flipbook").FlipBook(options);

var home = () => {
book.ctrl.goToPage(2)
}

book.ctrl.goToPage(2);
};
2 changes: 1 addition & 1 deletion files/assets/js/remap.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
window.PDFJS_LOCALE = {
pdfJsWorker: './assets/js/pdf.worker.js',
pdfJsWorker: "./assets/js/pdf.worker.js",
};
12 changes: 6 additions & 6 deletions files/assets/js/removeSw.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
}
});
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (let registration of registrations) {
registration.unregister();
}
});
} else {
console.log("Service worker not available.");
}
60 changes: 30 additions & 30 deletions files/assets/templates/black-book-view.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
.flip-book .view .fnav {
}

.flip-book .view .prev, .flip-book .view .next {
.flip-book .view .prev,
.flip-book .view .next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
Expand All @@ -26,7 +27,6 @@
right: 20px;
}


.flip-book .view .fnav a {
font-size: 72pt;
color: #666;
Expand Down Expand Up @@ -82,12 +82,12 @@
}

.flip-book .loading-progress .progress::after {
content: ' ';
content: " ";
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-image: url('../images/light-loader.gif');
background-image: url("../images/light-loader.gif");
}

.flip-book .page-loading {
Expand All @@ -105,19 +105,19 @@
}

.flip-book .page-loading::after {
content: ' ';
content: " ";
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-image: url('../images/light-loader.gif');
background-image: url("../images/light-loader.gif");
}

.flip-book .loading-progress .caption {
background-color: #555;
border: 1px solid #333;
padding: 7px 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10pt;
border-radius: 5px;
font-style: italic;
Expand All @@ -141,18 +141,16 @@
transition: opacity 1s ease;
}



.ctrl {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ctrl ul {
margin: 0;
padding: 0;
}
.ctrl .fnavbar {
text-align: center;
background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
background-repeat: repeat-x;
padding: 3px;
overflow: visible;
Expand All @@ -167,7 +165,7 @@
display: inline-block;
text-align: left;
}
.ctrl .fnavbar .fnav li{
.ctrl .fnavbar .fnav li {
font-size: 12pt;
margin: 0;
width: auto;
Expand All @@ -178,33 +176,34 @@
.ctrl .fnavbar .fnav .hidden {
display: none;
}
.ctrl .fnavbar .fnav .fnav-item>a {
.ctrl .fnavbar .fnav .fnav-item > a {
padding: 10px;
display: inline-block;
color: #ccc;
}
.ctrl .fnavbar .fnav>.active>a {
.ctrl .fnavbar .fnav > .active > a {
color: #fff;
}
.ctrl .fnavbar .fnav .fnav-item>a:hover {
.ctrl .fnavbar .fnav .fnav-item > a:hover {
color: #fff;
cursor: pointer;
}
.ctrl .fnavbar .fnav .fnav-item>a:active {
.ctrl .fnavbar .fnav .fnav-item > a:active {
text-shadow: 0 0 2px #fff;
}
.ctrl .fnavbar .fnav>.disabled>a {
.ctrl .fnavbar .fnav > .disabled > a {
color: #888;
}
.ctrl .fnavbar .fnav>.disabled>a:hover {
.ctrl .fnavbar .fnav > .disabled > a:hover {
color: #888;
cursor: not-allowed;
}
.ctrl .fnavbar .fnav>.active {
.ctrl .fnavbar .fnav > .active {
background: #222;
}

.ctrl .fnavbar .fnav .dropdown, .ctrl .fnavbar .fnav .dropup {
.ctrl .fnavbar .fnav .dropdown,
.ctrl .fnavbar .fnav .dropup {
position: relative;
}
.ctrl .fnavbar .fnav .dropdown .menu {
Expand Down Expand Up @@ -276,7 +275,8 @@
font-size: 0;
}

.ctrl .pages .number, .ctrl .pages .amount {
.ctrl .pages .number,
.ctrl .pages .amount {
width: 50px;
height: 20px;
text-align: center;
Expand Down Expand Up @@ -322,14 +322,15 @@
.flip-book .float-wnd .header {
border-radius: 4px 4px 0 0;
background-color: #3c3c3c;
background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
background-repeat: repeat-x;
padding: 7px 10px;
border: 1px solid #444;
border-bottom: none;
color: #fff;
font-weight: bold;
cursor: move;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.flip-book .float-wnd .header .close {
Expand Down Expand Up @@ -357,7 +358,7 @@
/* toc */

.ctrl .toc {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ctrl .toc a {
Expand Down Expand Up @@ -394,7 +395,6 @@
color: #fff;
}


.ctrl .toc .toc-view {
padding: 10px 0;
max-height: 80vh;
Expand Down Expand Up @@ -425,7 +425,9 @@
border-right: 2px solid #1a1a1a;
}

.ctrl .bookmarks .white-space, .ctrl .bookmarks .togle, .ctrl .bookmarks .togle i {
.ctrl .bookmarks .white-space,
.ctrl .bookmarks .togle,
.ctrl .bookmarks .togle i {
width: 18px;
height: 18px;
}
Expand Down Expand Up @@ -483,7 +485,7 @@
}

.ctrl .bookmarks .togle::before {
content: ' ';
content: " ";
position: absolute;
left: 50%;
top: 50%;
Expand All @@ -508,7 +510,6 @@
transition: transform 0.2s;
}


.ctrl .thumbnails .item a {
color: #fff;
font-size: 14px;
Expand All @@ -529,15 +530,15 @@
position: relative;
}
.ctrl .thumbnails .loading::after {
content: ' ';
content: " ";
position: absolute;
width: 40px;
height: 40px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
background-image: url('../images/light-loader.gif');
background-image: url("../images/light-loader.gif");
}
.ctrl .thumbnails .item {
display: inline-block;
Expand All @@ -555,7 +556,6 @@
height: 20px;
}


.ctrl .search .result {
padding: 7px 10px;
cursor: pointer;
Expand Down
2 changes: 1 addition & 1 deletion files/assets/templates/default-book-view.html
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
<a href="#"><div class="icon-caret"><span class="icon"><i class="fa fa-cog" title="<$tr>Settings</$tr>"></i> <i class="caret"></i></span></div></a>
<ul class="menu hidden">
<li class="cmdSmartPan"><a href="#"><span class="icon"><i class="fa fa-eye"></i></span> <$tr>Smart pan</$tr></a></li>
<li class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file-o"></i></span> <$tr>Single page</$tr></a></li>
<li class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file"></i></span> <$tr>Single page</$tr></a></li>
<li class="cmdSounds"><a href="#"><span class="icon"><i class="fa fa-volume-up"></i></span> <$tr>Sounds</$tr></a></li>
<li class="cmdStats"><a href="#"><span class="icon"><i class="fa fa-line-chart"></i></span> <$tr>Stats</$tr></a></li>
<li class="divider"></li>
Expand Down
Loading

0 comments on commit 7e0412b

Please sign in to comment.