wathiede/letterbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Releases Wiki Activity

web: more accurate reading progress bar

Browse Source
This commit is contained in:
Bill Thiede 2024-09-09 20:21:13 -07:00
parent baba720749
commit 4b8923d852
7 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/Cargo.toml
View File

@ -41,7 +41,9 @@ wasm-opt = ['-Os']
version = "0.3.58"
features = [
"Clipboard",
"DomRect",
"Element",
"MediaQueryList",
"Navigator",
"Window"
"Window",
]

29
web/src/state.rs
View File

@ -4,6 +4,7 @@ use graphql_client::GraphQLQuery;
use log::{error, info, warn};
use seed::{prelude::*, *};
use thiserror::Error;
use web_sys::HtmlElement;
use crate::{
api,
@ -39,9 +40,7 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
// 'notmuch new' on the server periodically?
orders.stream(streams::interval(30_000, || Msg::RefreshStart));
orders.subscribe(on_url_changed);
orders.stream(streams::window_event(Ev::Scroll, |_| {
compute_scroll_ratio()
}));
orders.stream(streams::window_event(Ev::Scroll, |_| Msg::WindowScrolled));
build_info::build_info!(fn bi);
Model {
@ -50,6 +49,7 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
refreshing_state: RefreshingState::None,
tags: None,
read_completion_ratio: 0.,
content_el: ElRef::<HtmlElement>::default(),
versions: Version {
client: version,
server: None,
@ -521,6 +521,27 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
.expect("failed to copy to clipboard");
});
}
Msg::WindowScrolled => {
if let Some(el) = model.content_el.get() {
let ih = window()
.inner_height()
.expect("window height")
.unchecked_into::<js_sys::Number>()
.value_of();
let r = el.get_bounding_client_rect();
info!(
"window scrolled {}x{}@{},{}",
r.width(),
r.height(),
r.x(),
r.y(),
);
let end = r.height() - ih;
let y = -r.y();
orders.send_msg(Msg::SetProgress((y / end).max(0.)));
}
}
Msg::SetProgress(ratio) => {
model.read_completion_ratio = ratio;
}
@ -543,6 +564,7 @@ pub struct Model {
pub refreshing_state: RefreshingState,
pub tags: Option<Vec<Tag>>,
pub read_completion_ratio: f64,
pub content_el: ElRef<HtmlElement>,
pub versions: Version,
}
@ -647,6 +669,7 @@ pub enum Msg {
CopyToClipboard(String),
WindowScrolled,
SetProgress(f64),
UpdateServerVersion(String),
}

4
web/src/view/desktop.rs
View File

@ -16,11 +16,11 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
Context::ThreadResult {
thread: ShowThreadQueryThread::EmailThread(thread),
open_messages,
} => view::thread(thread, open_messages, show_icon_text),
} => view::thread(thread, open_messages, show_icon_text, &model.content_el),
Context::ThreadResult {
thread: ShowThreadQueryThread::NewsPost(post),
..
} => view::news_post(post, show_icon_text),
} => view::news_post(post, show_icon_text, &model.content_el),
Context::SearchResult {
query,
results,

4
web/src/view/mobile.rs
View File

@ -19,11 +19,11 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
Context::ThreadResult {
thread: ShowThreadQueryThread::EmailThread(thread),
open_messages,
} => view::thread(thread, open_messages, show_icon_text),
} => view::thread(thread, open_messages, show_icon_text, &model.content_el),
Context::ThreadResult {
thread: ShowThreadQueryThread::NewsPost(post),
..
} => view::news_post(post, show_icon_text),
} => view::news_post(post, show_icon_text, &model.content_el),
Context::SearchResult {
query,
results,

28
web/src/view/mod.rs
View File

@ -6,9 +6,10 @@ use std::{
use chrono::{DateTime, Datelike, Duration, Local, Utc};
use human_format::{Formatter, Scales};
use itertools::Itertools;
use log::{error, info};
use log::{debug, error, info};
use seed::{prelude::*, *};
use seed_hooks::{state_access::CloneState, topo, use_state};
use web_sys::HtmlElement;
use crate::{
api::urls,
@ -795,6 +796,7 @@ fn thread(
thread: &ShowThreadQueryThreadOnEmailThread,
open_messages: &HashSet<String>,
show_icon_text: bool,
content_el: &ElRef<HtmlElement>,
) -> Node<Msg> {
// TODO(wathiede): show per-message subject if it changes significantly from top-level subject
let subject = if thread.subject.is_empty() {
@ -867,13 +869,12 @@ fn thread(
],
],
],
messages,
/* TODO(wathiede): plumb in orignal id
a![
attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
"Original"
],
*/
div![el_ref(content_el), messages] /* TODO(wathiede): plumb in orignal id
a![
attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
"Original"
],
*/
]
}
@ -1074,7 +1075,11 @@ pub fn tags(model: &Model) -> Node<Msg> {
]
]
}
fn news_post(post: &ShowThreadQueryThreadOnNewsPost, show_icon_text: bool) -> Node<Msg> {
fn news_post(
post: &ShowThreadQueryThreadOnNewsPost,
show_icon_text: bool,
content_el: &ElRef<HtmlElement>,
) -> Node<Msg> {
// TODO(wathiede): show per-message subject if it changes significantly from top-level subject
let subject = &post.title;
set_title(subject);
@ -1114,6 +1119,7 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, show_icon_text: bool) -> No
div![C!["header"], render_news_post_header(&post)],
div![
C!["body", "news-post", format!("site-{}", post.slug)],
el_ref(content_el),
raw![&post.body]
]
],
@ -1190,7 +1196,7 @@ fn reading_progress(ratio: f64) -> Node<Msg> {
"progress",
"is-success",
"is-small",
IF!(percent<5. => "is-invisible")
IF!(percent<1. => "is-invisible")
],
attrs! {
At::Value=>percent,
@ -1200,7 +1206,7 @@ fn reading_progress(ratio: f64) -> Node<Msg> {
]
}
pub fn versions(versions: &crate::state::Version) -> Node<Msg> {
info!("versions {versions:?}");
debug!("versions {versions:?}");
aside![
C!["tags-menu", "menu"],
p![C!["menu-label"], "Versions"],

4
web/src/view/tablet.rs
View File

@ -14,11 +14,11 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
Context::ThreadResult {
thread: ShowThreadQueryThread::EmailThread(thread),
open_messages,
} => view::thread(thread, open_messages, show_icon_text),
} => view::thread(thread, open_messages, show_icon_text, &model.content_el),
Context::ThreadResult {
thread: ShowThreadQueryThread::NewsPost(post),
..
} => view::news_post(post, show_icon_text),
} => view::news_post(post, show_icon_text, &model.content_el),
Context::SearchResult {
query,
results,

5
web/static/style.css
View File

@ -345,7 +345,12 @@ display: none;
}
progress.read-progress {
border-radius: 0;
position: fixed;
top: 0;
z-index: 999;
}
progress.read-progress.is-small {
height: .25rem;
}