NunoSempere/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'epub_reader_font/feat_font' into Develop

Browse Source
This commit is contained in:
Ozzie Isaacs 2024-07-07 10:31:49 +02:00
commit a0b776cbd1
3 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cps/static/css/main.css
View File

@ -551,7 +551,7 @@ input:-moz-placeholder { color: #454545; }
position: relative;
border-radius: 3px;
margin: 0 auto;
height: 320px;
/* height: 320px; */
}
.md-content > div {

18
cps/static/css/reader.css
View File

@ -27,3 +27,21 @@
border: none;
outline: none;
}
.item {
font-size: 20px;
font-weight: 400;
font-family: Open Sans;
padding-right: 10px;
color: white;
}
.item~button {
display: inline-block;
border: none;
text-align: center;
text-decoration: none;
margin-top: 5%;
margin-right: 1%;
font-size: 16px;
}

55
cps/templates/read.html
View File

@ -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>