|
|
|
@ -99,8 +99,21 @@
|
|
|
|
|
<div class="slider">
|
|
|
|
|
<label for="fader">{{ _('Font Sizes') }}</label>
|
|
|
|
|
<input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="font" id="font">
|
|
|
|
|
<label class="item">{{_('Font')}}:</label>
|
|
|
|
|
<button type="button" id="default" onclick="selectFont(this.id)"><span>✓</span>{{_('Default')}}</button>
|
|
|
|
|
<button type="button" id="Yahei" onclick="selectFont(this.id)"><span></span>{{_('Yahei')}}</button>
|
|
|
|
|
<button type="button" id="SimSun" onclick="selectFont(this.id)"><span></span>{{_('SimSun')}}</button>
|
|
|
|
|
<button type="button" id="KaiTi" onclick="selectFont(this.id)"><span></span>{{_('KaiTi')}}</button>
|
|
|
|
|
<button type="button" id="Arial" onclick="selectFont(this.id)"><span></span>{{_('Arial')}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layou" id="layout">
|
|
|
|
|
<label class="item">{{ _('Spread') }}:</label>
|
|
|
|
|
<button type="button" id="spread" onclick="spread(this.id)"><span>✓</span>{{_('Two columns')}}</button>
|
|
|
|
|
<button type="button" id="nonespread" onclick="spread(this.id)"><span></span>{{_('One column')}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="closer icon-cancel-circled"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -139,7 +152,7 @@
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function selectTheme (id) {
|
|
|
|
|
var tickSpans = document.getElementById("themes").querySelectorAll("span");
|
|
|
|
|
let tickSpans = document.getElementById("themes").querySelectorAll("span");
|
|
|
|
|
|
|
|
|
|
// Remove tick mark from all theme buttons
|
|
|
|
|
tickSpans.forEach(function (tickSpan) {
|
|
|
|
@ -164,10 +177,38 @@
|
|
|
|
|
fontSizeFader.addEventListener("change", function () {
|
|
|
|
|
reader.rendition.themes.fontSize(`${this.value}%`);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
let defaultFont;
|
|
|
|
|
|
|
|
|
|
function selectFont(id) {
|
|
|
|
|
if (!defaultFont) {
|
|
|
|
|
defaultFont = reader.rendition.getContents()[0]?.css('font-family');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
spans = document.getElementById("font").querySelectorAll("span");
|
|
|
|
|
for(var i = 0; i < spans.length; i++) {
|
|
|
|
|
spans[i].textContent = "";
|
|
|
|
|
}
|
|
|
|
|
document.getElementById(id).querySelector("span").textContent = "✓";
|
|
|
|
|
|
|
|
|
|
if (id == 'default') {
|
|
|
|
|
reader.rendition.themes.font(defaultFont);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
reader.rendition.themes.font(id);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function spread(id) {
|
|
|
|
|
spans = document.getElementById("layout").querySelectorAll("span");
|
|
|
|
|
for(var i = 0; i < spans.length; i++) {
|
|
|
|
|
spans[i].textContent = "";
|
|
|
|
|
}
|
|
|
|
|
document.getElementById(id).querySelector("span").textContent = "✓";
|
|
|
|
|
reader.rendition.spread(id==='spread'?true:'none');
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|