web: more accurate reading progress bar

web/src/state.rs

@@ -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),
 }