feat: prettier scrollbars

1 files changed, 57 insertions, 22 deletions

diff --git a/src/components/message_composer.rs b/src/components/message_composer.rs
index 09e5f80..6b34298 100644
--- a/src/components/message_composer.rs
+++ b/src/components/message_composer.rs
@@ -1,6 +1,9 @@
 use filamento::chat::Body;
 use jid::BareJID;
+use js_sys::{wasm_bindgen::UnwrapThrowExt, Object, Reflect, JSON};
 use leptos::{html::Div, prelude::*, task::spawn_local};
+use overlay_scrollbars::OverlayScrollbars;
+use tracing::debug;
 
 use crate::client::Client;
 
@@ -60,35 +63,67 @@ pub fn ChatViewMessageComposer(chat: BareJID) -> impl IntoView {
     // };
     //
 
+    let composer: NodeRef<Div> = NodeRef::new();
+
+    let _scrollbars = Effect::new(move |_| {
+        if let Some(buffer) = composer.get() {
+            if let Some(viewport) = message_input.get() {
+                let scrollbars_obj = Object::new();
+                Reflect::set(&scrollbars_obj, &"theme".into(), &"os-macaw".into()).unwrap_throw();
+                Reflect::set(&scrollbars_obj, &"autoHide".into(), &"leave".into()).unwrap_throw();
+                let options_obj = Object::new();
+                Reflect::set(&options_obj, &"scrollbars".into(), &scrollbars_obj).unwrap_throw();
+
+                let elements_obj = Object::new();
+                Reflect::set(&elements_obj, &"viewport".into(), &viewport.into()).unwrap_throw();
+                let element_obj = Object::new();
+                Reflect::set(&elements_obj, &"elements".into(), &elements_obj).unwrap_throw();
+                Reflect::set(&element_obj, &"target".into(), &buffer.into()).unwrap_throw();
+                // let element = Object::define_property(&Object::define_property(&Object::new(), &"target".into(), &buffer.into()), &"elements".into(), &Object::define_property(&Object::new(), &"viewport".into(), &viewport.into()));
+                debug!(
+                    "scrollable element: {}",
+                    JSON::stringify(&element_obj.clone().into()).unwrap_throw()
+                );
+                debug!(
+                    "scrollable options: {}",
+                    JSON::stringify(&options_obj.clone().into()).unwrap_throw()
+                );
+                OverlayScrollbars(element_obj, options_obj);
+            }
+        }
+    });
+
     // TODO: placeholder
     view! {
         <form class="new-message-composer panel">
-            <div
-                class="text-box"
-                on:input:target=move |ev| {
-                    new_message.set(ev.target().text_content().unwrap_or_default())
-                }
-                node_ref=message_input
-                contenteditable
-                on:keydown=move |ev| {
-                    match ev.key_code() {
-                        16 => set_shift_pressed.set(true),
-                        13 => {
-                            if !shift_pressed.get() {
-                                ev.prevent_default();
-                                send_message();
+            <div class="overlay-scroll" node_ref=composer>
+                <div
+                    class="text-box"
+                    on:input:target=move |ev| {
+                        new_message.set(ev.target().text_content().unwrap_or_default())
+                    }
+                    node_ref=message_input
+                    contenteditable
+                    on:keydown=move |ev| {
+                        match ev.key_code() {
+                            16 => set_shift_pressed.set(true),
+                            13 => {
+                                if !shift_pressed.get() {
+                                    ev.prevent_default();
+                                    send_message();
+                                }
                             }
+                            _ => {}
                         }
-                        _ => {}
                     }
-                }
-                on:keyup=move |ev| {
-                    match ev.key_code() {
-                        16 => set_shift_pressed.set(false),
-                        _ => {}
+                    on:keyup=move |ev| {
+                        match ev.key_code() {
+                            16 => set_shift_pressed.set(false),
+                            _ => {}
+                        }
                     }
-                }
-            ></div>
+                ></div>
+            </div>
         // <input hidden type="submit" />
         </form>
     }