mirror of
https://github.com/hkalexling/Mango.git
synced 2026-01-24 00:03:14 -05:00
118 lines
5.4 KiB
Plaintext
118 lines
5.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html class="reader-bg">
|
|
|
|
<% page = "Reader" %>
|
|
<%= render_component "head" %>
|
|
|
|
<body style="position:relative;" x-data="readerComponent()" x-init="init($nextTick)" @resize.window="resized()">
|
|
<div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0'">
|
|
|
|
<div @keydown.window.debounce="keyHandler($event)"></div>
|
|
|
|
<div class="uk-container uk-container-small">
|
|
<div id="alert"></div>
|
|
<div x-show="loading">
|
|
<div :class="alertClass" x-show="msg" uk-alert>
|
|
<p x-text="msg"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
|
|
<div x-show="!loading && mode === 'continuous'" x-cloak>
|
|
<template x-for="item in items">
|
|
<img
|
|
uk-img
|
|
class="uk-align-center"
|
|
:style="item.style"
|
|
:data-src="item.url"
|
|
:width="item.width"
|
|
:height="item.height"
|
|
:id="item.id"
|
|
@click="showControl($event)"
|
|
/>
|
|
</template>
|
|
<%- 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>
|
|
<%- else -%>
|
|
<button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
|
|
<%- end -%>
|
|
</div>
|
|
|
|
<div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
|
|
|
|
<img uk-img :class="{
|
|
'uk-align-center': true,
|
|
'uk-animation-slide-left': flipAnimation === 'left',
|
|
'uk-animation-slide-right': flipAnimation === 'right'
|
|
}" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="showControl($event)" :style="`
|
|
width:${mode === 'width' ? '100vw' : 'auto'};
|
|
height:${mode === 'height' ? '100vh' : 'auto'};
|
|
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;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-sections" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-margin-auto-vertical">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h3 class="uk-modal-title break-word"><%= entry.display_name %></h3>
|
|
<p class="uk-text-meta uk-margin-remove-bottom break-word"><%= entry.zip_path %></p>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<div class="uk-margin">
|
|
<p id="progress-label"></p>
|
|
</div>
|
|
<div class="uk-margin">
|
|
<label class="uk-form-label" for="page-select">Jump to page</label>
|
|
<div class="uk-form-controls">
|
|
<select id="page-select" class="uk-select" @change="pageChanged()">
|
|
<%- (1..entry.pages).each do |p| -%>
|
|
<option value="<%= p %>"><%= p %></option>
|
|
<%- end -%>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="uk-margin">
|
|
<label class="uk-form-label" for="mode-select">Mode</label>
|
|
<div class="uk-form-controls">
|
|
<select id="mode-select" class="uk-select" @change="modeChanged($nextTick)">
|
|
<option value="continuous">Continuous</option>
|
|
<option value="paged">Paged</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-danger" type="button" @click="redirect('<%= exit_url %>')">Exit Reader</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const base_url = "<%= base_url %>";
|
|
const page = <%= page_idx %>;
|
|
const tid = "<%= title.id %>";
|
|
const eid = "<%= entry.id %>";
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
|
|
<script src="<%= base_url %>js/alert.js"></script>
|
|
<script src="<%= base_url %>js/uikit.min.js"></script>
|
|
<script src="<%= base_url %>js/uikit-icons.min.js"></script>
|
|
<script src="<%= base_url %>js/reader.js"></script>
|
|
</body>
|
|
|
|
<style>
|
|
img[data-src][src*='data:image'] { background: white; }
|
|
#root img { width: 100%; }
|
|
</style>
|
|
|
|
</html>
|