Skip to content

Commit 7e7fb3e

Browse files
jzohrabjzohrab
committed
Move text options to slide-in menu.
1 parent a08334c commit 7e7fb3e

File tree

3 files changed

+28
-95
lines changed

3 files changed

+28
-95
lines changed

‎lute/static/css/styles.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -860,6 +860,16 @@ table.statsWordsRead th, td { padding: 5px; }
860860
height: 32px;
861861
}
862862

863+
.text-options-button {
864+
border-radius: 5px;
865+
border: 2px solid aliceblue;
866+
width: 28px;
867+
height: 28px;
868+
background-position: center;
869+
background-repeat: no-repeat;
870+
background-size: cover;
871+
}
872+
863873
#text-options-container .btn {
864874
border-radius: 5px;
865875
border: 2px solid aliceblue;

‎lute/static/js/text-options.js

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,14 @@ let lhDefault;
66
let widthDefault;
77
let columnDefault;
88

9-
const textOptionsContainer = document.querySelector("#text-options-container");
10-
const textButton = document.querySelector("#text-options-btn");
119
const fontPlusButton = document.querySelector(".font-plus");
1210
const fontMinusButton = document.querySelector(".font-minus");
13-
const fontField = document.querySelector(".text-options-size input");
1411

1512
const lhPlusButton = document.querySelector(".lh-plus");
1613
const lhMinusButton = document.querySelector(".lh-minus");
17-
const lhField = document.querySelector(".text-options-lh input");
1814

1915
const widthPlusButton = document.querySelector(".width-plus");
2016
const widthMinusButton = document.querySelector(".width-minus");
21-
const widthField = document.querySelector(".text-options-width input");
2217

2318
const oneColButton = document.querySelector(".column-one");
2419
const twoColButton = document.querySelector(".column-two");
@@ -41,10 +36,6 @@ const domObserver = new MutationObserver((mutationList, observer) => {
4136
const width = getFromLocalStorage("textWidth", widthDefault);
4237
const columnCount = getFromLocalStorage("columnCount", columnDefault);
4338

44-
fontField.value = `${fontSize}px`;
45-
lhField.value = `${lhSize.toFixed(1)}`;
46-
widthField.value = `${Math.round(width)}%`;
47-
4839
textItems.forEach((item) => {
4940
setFontSize(item, `${convertPixelsToRem(fontSize)}rem`);
5041
setLineHeight(item, Number(lhSize.toPrecision(2)));
@@ -59,23 +50,6 @@ const domObserver = new MutationObserver((mutationList, observer) => {
5950

6051
domObserver.observe(theText, {childList: true, subtree: true});
6152

62-
textButton.addEventListener("click", ()=> {
63-
textOptionsContainer.classList.toggle("hide-text-options");
64-
});
65-
66-
// stop propagation so clicking anything inside the popup
67-
// doesn't trigger text button click event
68-
textOptionsContainer.addEventListener("click", (e)=> {
69-
e.stopPropagation();
70-
});
71-
72-
// clicking away closes the popup
73-
document.addEventListener("click", (e) => {
74-
if (!e.target.closest("#text-options-btn")) {
75-
textOptionsContainer.classList.add("hide-text-options");
76-
}
77-
});
78-
7953
fontPlusButton.addEventListener("click", () => {
8054
resizeFont("+");
8155
});
@@ -117,41 +91,6 @@ function changeColumnCount(num) {
11791
localStorage.setItem("columnCount", num);
11892
}
11993

120-
fontField.addEventListener("change", (e) => {
121-
let size = parseFloat(e.target.value);
122-
size = clamp(size, 1, 50);
123-
e.target.value = `${size}px`;
124-
125-
textItems.forEach((item) => {
126-
setFontSize(item, `${convertPixelsToRem(size)}rem`);
127-
});
128-
129-
localStorage.setItem("fontSize", size);
130-
});
131-
132-
lhField.addEventListener("change", (e) => {
133-
let size = parseFloat(e.target.value);
134-
size = clamp(size, 1, 5);
135-
e.target.value = size;
136-
137-
textItems.forEach((item) => {
138-
setLineHeight(item, size);
139-
});
140-
141-
localStorage.setItem("lineHeight", size.toPrecision(2));
142-
});
143-
144-
widthField.addEventListener("change", (e) => {
145-
let size = parseFloat(e.target.value);
146-
size = clamp(size, 25, 75);
147-
e.target.value = `${size}%`;
148-
149-
readPaneLeft.style.width = `${size}%`;
150-
readPaneRight.style.width = `${(100 - size) * getReadPaneWidthRatio()}%`;
151-
152-
localStorage.setItem("textWidth", size);
153-
});
154-
15594
function getFontSize(element) {
15695
const elementComputedStyle = window.getComputedStyle(element);
15796
return parseFloat(elementComputedStyle.fontSize);
@@ -194,7 +133,6 @@ function resizeLineHeight(operation) {
194133
setLineHeight(item, Number(newSize.toPrecision(2)));
195134
});
196135

197-
lhField.value = Number(newSize.toPrecision(2)).toFixed(1);
198136
localStorage.setItem("lineHeight", newSize.toPrecision(2));
199137
}
200138

@@ -210,7 +148,6 @@ function resizeFont(operation) {
210148
setFontSize(item, `${convertPixelsToRem(newSize)}rem`);
211149
});
212150

213-
fontField.value = `${newSize}px`;
214151
localStorage.setItem("fontSize", newSize);
215152
}
216153

@@ -225,7 +162,6 @@ function changeTextWidth(operation) {
225162
readPaneLeft.style.width = `${newWidth}%`;
226163
readPaneRight.style.width = `${(100 - newWidth) * getReadPaneWidthRatio()}%`;
227164

228-
widthField.value = `${Math.round(newWidth)}%`;
229165
localStorage.setItem("textWidth", newWidth);
230166
}
231167

@@ -255,4 +191,4 @@ function clamp (num, min, max) {
255191
// viewport width. it can be less than that. but for the right side it's an absolute percentage value
256192
function getReadPaneWidthRatio() {
257193
return parseFloat(window.getComputedStyle(readPaneContainer).getPropertyValue("width")) / parseFloat(document.documentElement.clientWidth);
258-
}
194+
}

‎lute/templates/read/index.html

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,24 @@
3131
<span class="hamburger"></span>
3232
<span class="hamburger"></span>
3333
<span class="hamburger"></span>
34-
3534
<ul id="reading_menu">
35+
<li>
36+
<button class="text-options-button font-minus" title="Decrease font size"></button>
37+
<button class="text-options-button font-plus" title="Increase font size"></button>
38+
</li>
39+
<li>
40+
<button class="text-options-button lh-minus" title="Decrease line height"></button>
41+
<button class="text-options-button lh-plus" title="Increase line height"></button>
42+
</li>
43+
<li>
44+
<button class="text-options-button width-minus" title="Decrease content width"></button>
45+
<button class="text-options-button width-plus" title="Increase content width"></button>
46+
</li>
47+
<li>
48+
<button class="text-options-button column-one" title="One column text">&#124;</button>
49+
<button class="text-options-button column-two" title="Two column text">&#124;&#124;</button>
50+
<button class="text-options-button column-three" title="Three column text">&#124;&#124;&#124;</button>
51+
</li>
3652
{% if book.source_uri %}
3753
<li><a href="{{ book.source_uri }}" target="_blank" tabindex="-1">Show source URL</a></li>
3854
{% endif %}
@@ -74,35 +90,6 @@ <h2 style="margin: 0px">
7490
id="navNext10"
7591
onclick="goto_relative_page(10)"
7692
>&#187;</span>
77-
78-
<a id="text-options-btn">
79-
<img
80-
src="{{ url_for('static', filename='icn/text.svg') }}"
81-
title="Text Options" />
82-
<div id="text-options-container" class="hide-text-options">
83-
<div class="text-options-triangle"></div>
84-
<div class="text-options-size row">
85-
<button class="btn row-elem font-minus" title="Decrease font size"></button>
86-
<input id="font-size">
87-
<button class="btn row-elem font-plus" title="Increase font size"></button>
88-
</div>
89-
<div class="text-options-lh row">
90-
<button class="btn row-elem lh-minus" title="Decrease line height"></button>
91-
<input id="line-height">
92-
<button class="btn row-elem lh-plus" title="Increase line height"></button>
93-
</div>
94-
<div class="text-options-width row">
95-
<button class="btn row-elem width-minus" title="Decrease content width"></button>
96-
<input id="content-width">
97-
<button class="btn row-elem width-plus" title="Increase content width"></button>
98-
</div>
99-
<div class="text-options-column row">
100-
<button class="column-one column-btn" title="One column text">&#124;</button>
101-
<button class="column-two column-btn" title="Two column text">&#124;&#124;</button>
102-
<button class="column-three column-btn" title="Three column text">&#124;&#124;&#124;</button>
103-
</div>
104-
</div>
105-
</a>
10693
</h2>
10794
</div>
10895

0 commit comments

Comments
 (0)