Skip to content

Commit

Permalink
Move text options to slide-in menu.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzohrab
jzohrab committed Dec 21, 2023
1 parent a08334c commit 7e7fb3e
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 95 deletions.
10 changes: 10 additions & 0 deletions lute/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -860,6 +860,16 @@ table.statsWordsRead th, td { padding: 5px; }
height: 32px;
}

.text-options-button {
border-radius: 5px;
border: 2px solid aliceblue;
width: 28px;
height: 28px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#text-options-container .btn {
border-radius: 5px;
border: 2px solid aliceblue;
Expand Down
66 changes: 1 addition & 65 deletions lute/static/js/text-options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,14 @@ let lhDefault;
let widthDefault;
let columnDefault;

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

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

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

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

fontField.value = `${fontSize}px`;
lhField.value = `${lhSize.toFixed(1)}`;
widthField.value = `${Math.round(width)}%`;

textItems.forEach((item) => {
setFontSize(item, `${convertPixelsToRem(fontSize)}rem`);
setLineHeight(item, Number(lhSize.toPrecision(2)));
Expand All @@ -59,23 +50,6 @@ const domObserver = new MutationObserver((mutationList, observer) => {

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

textButton.addEventListener("click", ()=> {
textOptionsContainer.classList.toggle("hide-text-options");
});

// stop propagation so clicking anything inside the popup
// doesn't trigger text button click event
textOptionsContainer.addEventListener("click", (e)=> {
e.stopPropagation();
});

// clicking away closes the popup
document.addEventListener("click", (e) => {
if (!e.target.closest("#text-options-btn")) {
textOptionsContainer.classList.add("hide-text-options");
}
});

fontPlusButton.addEventListener("click", () => {
resizeFont("+");
});
Expand Down Expand Up @@ -117,41 +91,6 @@ function changeColumnCount(num) {
localStorage.setItem("columnCount", num);
}

fontField.addEventListener("change", (e) => {
let size = parseFloat(e.target.value);
size = clamp(size, 1, 50);
e.target.value = `${size}px`;

textItems.forEach((item) => {
setFontSize(item, `${convertPixelsToRem(size)}rem`);
});

localStorage.setItem("fontSize", size);
});

lhField.addEventListener("change", (e) => {
let size = parseFloat(e.target.value);
size = clamp(size, 1, 5);
e.target.value = size;

textItems.forEach((item) => {
setLineHeight(item, size);
});

localStorage.setItem("lineHeight", size.toPrecision(2));
});

widthField.addEventListener("change", (e) => {
let size = parseFloat(e.target.value);
size = clamp(size, 25, 75);
e.target.value = `${size}%`;

readPaneLeft.style.width = `${size}%`;
readPaneRight.style.width = `${(100 - size) * getReadPaneWidthRatio()}%`;

localStorage.setItem("textWidth", size);
});

function getFontSize(element) {
const elementComputedStyle = window.getComputedStyle(element);
return parseFloat(elementComputedStyle.fontSize);
Expand Down Expand Up @@ -194,7 +133,6 @@ function resizeLineHeight(operation) {
setLineHeight(item, Number(newSize.toPrecision(2)));
});

lhField.value = Number(newSize.toPrecision(2)).toFixed(1);
localStorage.setItem("lineHeight", newSize.toPrecision(2));
}

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

fontField.value = `${newSize}px`;
localStorage.setItem("fontSize", newSize);
}

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

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

Expand Down Expand Up @@ -255,4 +191,4 @@ function clamp (num, min, max) {
// viewport width. it can be less than that. but for the right side it's an absolute percentage value
function getReadPaneWidthRatio() {
return parseFloat(window.getComputedStyle(readPaneContainer).getPropertyValue("width")) / parseFloat(document.documentElement.clientWidth);
}
}
47 changes: 17 additions & 30 deletions lute/templates/read/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,24 @@
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>

<ul id="reading_menu">
<li>
<button class="text-options-button font-minus" title="Decrease font size"></button>
<button class="text-options-button font-plus" title="Increase font size"></button>
</li>
<li>
<button class="text-options-button lh-minus" title="Decrease line height"></button>
<button class="text-options-button lh-plus" title="Increase line height"></button>
</li>
<li>
<button class="text-options-button width-minus" title="Decrease content width"></button>
<button class="text-options-button width-plus" title="Increase content width"></button>
</li>
<li>
<button class="text-options-button column-one" title="One column text">&#124;</button>
<button class="text-options-button column-two" title="Two column text">&#124;&#124;</button>
<button class="text-options-button column-three" title="Three column text">&#124;&#124;&#124;</button>
</li>
{% if book.source_uri %}
<li><a href="{{ book.source_uri }}" target="_blank" tabindex="-1">Show source URL</a></li>
{% endif %}
Expand Down Expand Up @@ -74,35 +90,6 @@ <h2 style="margin: 0px">
id="navNext10"
onclick="goto_relative_page(10)"
>&#187;</span>

<a id="text-options-btn">
<img
src="{{ url_for('static', filename='icn/text.svg') }}"
title="Text Options" />
<div id="text-options-container" class="hide-text-options">
<div class="text-options-triangle"></div>
<div class="text-options-size row">
<button class="btn row-elem font-minus" title="Decrease font size"></button>
<input id="font-size">
<button class="btn row-elem font-plus" title="Increase font size"></button>
</div>
<div class="text-options-lh row">
<button class="btn row-elem lh-minus" title="Decrease line height"></button>
<input id="line-height">
<button class="btn row-elem lh-plus" title="Increase line height"></button>
</div>
<div class="text-options-width row">
<button class="btn row-elem width-minus" title="Decrease content width"></button>
<input id="content-width">
<button class="btn row-elem width-plus" title="Increase content width"></button>
</div>
<div class="text-options-column row">
<button class="column-one column-btn" title="One column text">&#124;</button>
<button class="column-two column-btn" title="Two column text">&#124;&#124;</button>
<button class="column-three column-btn" title="Three column text">&#124;&#124;&#124;</button>
</div>
</div>
</a>
</h2>
</div>

Expand Down

0 comments on commit 7e7fb3e

Please sign in to comment.