Skip to content

Commit

Permalink
Merge branch 'misc_js_refactoring' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzohrab
jzohrab committed Jan 4, 2025
2 parents 8c6f245 + a16000a commit f716f2d
Showing 1 changed file with 93 additions and 99 deletions.
192 changes: 93 additions & 99 deletions lute/templates/read/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,19 +195,20 @@ <h2>&#127881;</h2>
const theText = document.getElementById("thetext");
const focusChk = document.getElementById("focus");

// fixes the "bug" where if right pane is opened in mobile view and after the screen is resized up,
// right pane doesn't translate up to 0 because of inline transform property
// this one is not super important
// because the mobile size won't be resized to a desktop size in a real use case
// Fixes a dev-only "bug" where the right pane doesn't translate up
// to zero, due to the inline transform property, if it's first
// opened in mobile view, and the screen is then resized to desktop
// size. This handler is only useful during dev: during actual use,
// the mobile size won't be resized to desktop size.
mediaTablet.addEventListener("change", function() {
if (!mediaTablet.matches) {
readPaneRight.style.removeProperty("transform");
}
})

// This must be "pointerup", and not "click", to properly display
// the term form when a multi-word term is created on mobile,
// because the "touchend" event cancels the click event.
// Display the term form when a multi-word term is created on
// mobile. This must be "pointerup", and not "click", because the
// "touchend" event cancels the click event.
document.addEventListener("pointerup", (event) => {
mouseY = event.clientY;
scrollY = window.scrollY;
Expand All @@ -223,6 +224,67 @@ <h2>&#127881;</h2>
localStorage.setItem(`focusMode-book${book_id}`, `${focusChk.checked}`)
})

let _close_slide_in_menu_on_click_away = function(event) {
const tgt = event.target;
if (!tgt.closest("#reading_menu") && !tgt.closest(".hamburger-btn"))
$("#reading_menu").removeClass("open-menu");
if (!tgt.closest("#read_pane_right") && tgt.parentNode != readPaneRight && !tgt.classList.contains("textitem")) {
closeRightPane();
}
};

let _lute_form_event_handler = function(event) {
if (event.data.event === "LuteTermFormOpened") {
LookupButton.TERM_FORM_CONTAINER = wordFrame.contentDocument.getElementById("term-form-container");
loadDictionaries();
}

if (event.data.event === "LuteTermFormOpened" && mediaTablet.matches) {
readPaneRight.classList.add("open-dict");
btmMarginCont.classList.add("open-dict");

const mousePosPercent = mouseY / viewportHeight * 100;
const dict_transform = `translateY(${Math.round(mousePosPercent) + 10}%)`;
document.querySelector("#read_pane_right.open-dict").style.transform = dict_transform;
readPaneRight.style.opacity = "1";

// Add margin to the bottom of readLeft so it's fully scrollable
// to the bottom when the dict is over text
const viewportHeight = document.documentElement.clientHeight;
const mt = `calc(${viewportHeight - mouseY + 70}px - var(--player-height))`;
document.querySelector(".open-dict.btm-margin-container").style.marginTop = mt;

// Sometimes there's an unnecessary text scroll when clicking on
// a word. Return to the previous scroll position
window.scrollTo(0, scrollY);
}

// When term form posts data (either updating or deleting terms),
// reload the full reading screen.
if (event.data.event === "LuteTermFormPosted") {
const bookid = $('#book_id').val();
const pagenum = $('#page_num').val();
const url = `/read/refresh_page/${bookid}/${pagenum}`;
const marked = $('.kwordmarked');
let marked_id = "nomatches"
if (marked.length != 0) {
marked_id = $(marked[0]).attr('id');
}

// Force remove the old popup.
// ref https://stackoverflow.com/questions/19266886/tooltip-not-disappearing
$('div.ui-tooltip').remove();

$(".dictcontainer").css('display', 'none');

$('#thetext').load(url, function() {
const re_marked = $(`#${marked_id}`);
re_marked.removeClass('kwordmarked');
re_marked.addClass('wordhover');
});
};
};

$(document).ready(function () {
const theTextReloadObs = new MutationObserver((mutationList, observer) => {
if (scrollYBeforeReload) window.scrollTo(0, scrollYBeforeReload);
Expand All @@ -241,40 +303,9 @@ <h2>&#127881;</h2>
}

createLookupButtons();
$(document).click(_close_slide_in_menu_on_click_away);

window.addEventListener("message", function(event) {
if (event.data.event === "LuteTermFormOpened") {
LookupButton.TERM_FORM_CONTAINER = wordFrame.contentDocument.getElementById("term-form-container");
loadDictionaries();
}

// When term form posts data (either updating or deleting terms),
// reload the full reading screen.
if (event.data.event === "LuteTermFormPosted") {
const bookid = $('#book_id').val();
const pagenum = $('#page_num').val();
const url = `/read/refresh_page/${bookid}/${pagenum}`;
const marked = $('.kwordmarked');
let marked_id = "nomatches"
if (marked.length != 0) {
marked_id = $(marked[0]).attr('id');
}

// Force remove the old popup.
// ref https://stackoverflow.com/questions/19266886/
// tooltip-not-disappearing
$('div.ui-tooltip').remove();

$(".dictcontainer").css('display', 'none');

$('#thetext').load(url, function() {
const re_marked = $(`#${marked_id}`);
re_marked.removeClass('kwordmarked');
re_marked.addClass('wordhover');
});
};

});
window.addEventListener("message", _lute_form_event_handler);

if (have_audio_file()) {
// Don't actually load the source -- for some reason,
Expand All @@ -283,41 +314,8 @@ <h2>&#127881;</h2>
// is handled in load_player_source().
$('div.audio-player-container').show();
}
goto_relative_page(0, true);

// If the css slide-in menu is open, clicking away from it closes the menu.
$(document).click(function(event) {
const menu = document.getElementById("reading_menu");
// const menuBtn = document.querySelector(".hamburger-btn");
const menu_clicked = event.target.closest("#reading_menu");
const menuBtn_clicked = event.target.closest(".hamburger-btn");
const rightPaneClicked = event.target.closest("#read_pane_right");
// if (event.target != menuBtn || event.target.parentNode != menuBtn)
if(!menu_clicked && !menuBtn_clicked)
menu.classList.remove("open-menu");

// close rightPane if it's not click, it's children not clicked or a word is not clicked
if(!rightPaneClicked && event.target.parentNode != readPaneRight && !event.target.classList.contains("textitem")) {
closeRightPane();
}
});
});

// mobile view
window.addEventListener("message", function(event) {
if (event.data.event === "LuteTermFormOpened" && mediaTablet.matches) {
const viewportHeight = document.documentElement.clientHeight;
const mousePosPercent = mouseY / viewportHeight * 100;
// move the rightPane to the mouse position + some offset
readPaneRight.classList.add("open-dict");
btmMarginCont.classList.add("open-dict");
document.querySelector("#read_pane_right.open-dict").style.transform = `translateY(${Math.round(mousePosPercent) + 10}%)`;
readPaneRight.style.opacity = "1";
// add margin to the bottom of readLeft so it's fully scrollable to the bottom when the dict is over text
document.querySelector(".open-dict.btm-margin-container").style.marginTop = `calc(${viewportHeight - mouseY + 70}px - var(--player-height))`;
// sometimes there's an unnecessary text scroll when clicking on a word. return to the previous scroll position
window.scrollTo(0, scrollY);
}
goto_relative_page(0, true);
});

let have_audio_file = function() {
Expand Down Expand Up @@ -360,22 +358,17 @@ <h2>&#127881;</h2>
let enable_page_nav_links = function() {
const pagenum = parseInt($('#page_num').val());
const maxpage = parseInt($('#page_count').val());
if (pagenum > 1) {
$('#navPrev').removeClass('read_page_disabled');
}
else {
$('#navPrev').addClass('read_page_disabled');
}
if (pagenum < maxpage) {
$('#navNext').removeClass('read_page_disabled');
}
else {
$('#navNext').addClass('read_page_disabled');
}
//toggleSliderStatus();
const set_enable = function(el_id, should_enable) {
const c = 'read_page_disabled';
if (should_enable)
$(el_id).removeClass(c);
else
$(el_id).addClass(c);
};
set_enable('#navPrev', pagenum > 1);
set_enable('#navNext', pagenum < maxpage);
};


// Show/hide footer controls.
let set_footer_control_visibility = function() {
const pagenum = parseInt($('#page_num').val());
Expand Down Expand Up @@ -442,17 +435,18 @@ <h2>&#127881;</h2>
actualPage = maxpage;

return actualPage;
}
/**
* Go to page relative to that stored in page_num input.
*
* On first load of page, initial_page_load is set to true.
*
* It appears that for Firefox the player source can't be set
* while the page content is being ajax'd in. This makes
* _NO SENSE AT ALL_ but moving the player source loading
* to the ajax "success" function worked. ???
*/
}

/**
* Go to page relative to that stored in page_num input.
*
* On first load of page, initial_page_load is set to true.
*
* It appears that for Firefox the player source can't be set
* while the page content is being ajax'd in. This makes
* _NO SENSE AT ALL_ but moving the player source loading
* to the ajax "success" function worked. ???
*/
function goto_relative_page(p, initial_page_load = false) {
const bookid = $('#book_id').val();
const actualPage = getActualPage(p);
Expand Down

0 comments on commit f716f2d

Please sign in to comment.