Dynamic HTML title

This commit is contained in:
Alex Ling 2020-12-31 14:07:10 +00:00
parent 5685dd1cc5
commit af0913df64
5 changed files with 37 additions and 32 deletions

View File

@ -10,12 +10,12 @@ struct ReaderRouter
next layout "reader-error" if entry.err_msg next layout "reader-error" if entry.err_msg
# load progress # load progress
page = [1, entry.load_progress username].max page_idx = [1, entry.load_progress username].max
# start from page 1 if the user has finished reading the entry # start from page 1 if the user has finished reading the entry
page = 1 if entry.finished? username page_idx = 1 if entry.finished? username
redirect env, "/reader/#{title.id}/#{entry.id}/#{page}" redirect env, "/reader/#{title.id}/#{entry.id}/#{page_idx}"
rescue e rescue e
Logger.error e Logger.error e
env.response.status_code = 404 env.response.status_code = 404
@ -30,8 +30,10 @@ struct ReaderRouter
title = (Library.default.get_title env.params.url["title"]).not_nil! title = (Library.default.get_title env.params.url["title"]).not_nil!
entry = (title.get_entry env.params.url["entry"]).not_nil! entry = (title.get_entry env.params.url["entry"]).not_nil!
page = env.params.url["page"].to_i page_idx = env.params.url["page"].to_i
raise "" if page > entry.pages || page <= 0 if page_idx > entry.pages || page_idx <= 0
raise "Page #{page_idx} not found."
end
exit_url = "#{base_url}book/#{title.id}" exit_url = "#{base_url}book/#{title.id}"

View File

@ -19,6 +19,7 @@ macro layout(name)
rescue e rescue e
message = e.to_s message = e.to_s
Logger.error message Logger.error message
page = "Error"
render "src/views/message.html.ecr", "src/views/layout.html.ecr" render "src/views/message.html.ecr", "src/views/layout.html.ecr"
end end
end end

View File

@ -1,7 +1,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="X-UA-Compatible" content="IE=edge"> <meta name="X-UA-Compatible" content="IE=edge">
<title>Mango</title> <title>Mango - <%= page.split("-").map(&.capitalize).join(" ") %></title>
<meta name="description" content="Mango - Manga Server and Web Reader"> <meta name="description" content="Mango - Manga Server and Web Reader">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<%= base_url %>css/uikit.css" /> <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<% page = "Login" %>
<%= render_component "head" %> <%= render_component "head" %>
<body> <body>

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="reader-bg"> <html class="reader-bg">
<% page = "Reader" %>
<%= render_component "head" %> <%= render_component "head" %>
<body style="position:relative;"> <body style="position:relative;">
@ -8,14 +9,14 @@
id="root" id="root"
:style="mode === 'continuous' ? '' : 'padding:0'" :style="mode === 'continuous' ? '' : 'padding:0'"
x-data="{ x-data="{
loading: true, loading: true,
mode: 'continuous', // can be 'continuous', 'height' or 'width' mode: 'continuous', // can be 'continuous', 'height' or 'width'
msg: 'Loading the web reader. Please wait...', msg: 'Loading the web reader. Please wait...',
alertClass: 'uk-alert-primary', alertClass: 'uk-alert-primary',
items: [], items: [],
curItem: {}, curItem: {},
flipAnimation: null flipAnimation: null
}"> }">
<div @keydown.window.debounce="keyHandler($event)"></div> <div @keydown.window.debounce="keyHandler($event)"></div>
@ -29,18 +30,18 @@
</div> </div>
<div <div
:class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}"> :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
<div x-show="!loading && mode === 'continuous'" x-cloak> <div x-show="!loading && mode === 'continuous'" x-cloak>
<template x-for="item in items"> <template x-for="item in items">
<img <img
uk-img uk-img
class="uk-align-center" class="uk-align-center"
:data-src="item.url" :data-src="item.url"
:width="item.width" :width="item.width"
:height="item.height" :height="item.height"
:id="item.id" :id="item.id"
:onclick="`showControl('${item.id}')`" :onclick="`showControl('${item.id}')`"
/> />
</template> </template>
<%- if next_entry_url -%> <%- if next_entry_url -%>
<button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button> <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
@ -52,14 +53,14 @@
<div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh"> <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
<img uk-img :class="{ <img uk-img :class="{
'uk-align-center': true, 'uk-align-center': true,
'uk-animation-slide-left': flipAnimation === 'left', 'uk-animation-slide-left': flipAnimation === 'left',
'uk-animation-slide-right': flipAnimation === 'right' 'uk-animation-slide-right': flipAnimation === 'right'
}" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" :onclick="`showControl('${curItem.id}')`" :style="` }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" :onclick="`showControl('${curItem.id}')`" :style="`
width:${mode === 'width' ? '100vw' : 'auto'}; width:${mode === 'width' ? '100vw' : 'auto'};
height:${mode === 'height' ? '100vh' : 'auto'}; height:${mode === 'height' ? '100vh' : 'auto'};
margin-bottom:0; margin-bottom:0;
`" /> `" />
<div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div> <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
<div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div> <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
@ -107,7 +108,7 @@
<script> <script>
const base_url = "<%= base_url %>"; const base_url = "<%= base_url %>";
const page = <%= page %>; const page = <%= page_idx %>;
const tid = "<%= title.id %>"; const tid = "<%= title.id %>";
const eid = "<%= entry.id %>"; const eid = "<%= entry.id %>";
</script> </script>