blasthavers/worldwideportal
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more keyboard bindings.

Browse Source
This commit is contained in:
Condorra 2024-10-09 22:33:53 +11:00
parent c6ed9b2b19
commit 83d77363e4
2 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -43,7 +43,6 @@
<link data-trunk rel="copy-file" href="node_modules/style-mod/src/style-mod.js" data-target-path="style-mod"></link> <link data-trunk rel="copy-file" href="node_modules/style-mod/src/style-mod.js" data-target-path="style-mod"></link>
<link data-trunk rel="copy-file" href="node_modules/crelt/index.js" data-target-path="crelt"></link> <link data-trunk rel="copy-file" href="node_modules/crelt/index.js" data-target-path="crelt"></link>
<link data-trunk rel="copy-file" href="node_modules/w3c-keyname/index.js" data-target-path="w3c-keyname"></link> <link data-trunk rel="copy-file" href="node_modules/w3c-keyname/index.js" data-target-path="w3c-keyname"></link>
<script type="module" src="codemirror/index.js"></script>
</head> </head>
<body></body> <body></body>
</html> </html>

46
src/editor_view.rs
View File

@ -4,7 +4,7 @@ use anyhow::Error;
use itertools::Itertools; use itertools::Itertools;
use wasm_bindgen::{closure::Closure, prelude::wasm_bindgen, JsCast}; use wasm_bindgen::{closure::Closure, prelude::wasm_bindgen, JsCast};
use wasm_bindgen_futures::js_sys::{Function, Object, Reflect}; use wasm_bindgen_futures::js_sys::{Function, Object, Reflect};
use web_sys::{window, HtmlElement}; use web_sys::{console, window, HtmlElement, KeyboardEvent};
use yew::{ use yew::{
function_component, html, use_effect_with, use_memo, use_node_ref, use_state, use_state_eq, function_component, html, use_effect_with, use_memo, use_node_ref, use_state, use_state_eq,
AttrValue, Callback, Html, Properties, UseStateHandle, AttrValue, Callback, Html, Properties, UseStateHandle,
@ -152,13 +152,16 @@ fn editor_nav(props: &EditorViewDetailProps) -> Html {
.available_files .available_files
.iter() .iter()
.map(|f| { .map(|f| {
let mut classes = vec!["list-group-item"]; let mut classes = vec!["list-group-item", "pe-auto"];
let mut aria_current = None; let mut aria_current = None;
if *f == props.editor_state.open_file { if *f == props.editor_state.open_file {
aria_current = Some("true"); aria_current = Some("true");
classes.push("active"); classes.push("active");
} }
html! { <li aria-current={aria_current} class={classes.iter().join(" ")}>{f}</li>} html! { <li aria-current={aria_current} tabindex={0}
class={classes.iter().join(" ")}
style="cursor: pointer"
>{f}</li>}
}) })
.collect::<Vec<Html>>() .collect::<Vec<Html>>()
} }
@ -366,6 +369,7 @@ fn load_file_contents(file: &str) -> anyhow::Result<String> {
fn editor_area(props: &EditorViewDetailProps) -> Html { fn editor_area(props: &EditorViewDetailProps) -> Html {
let node_ref = use_node_ref(); let node_ref = use_node_ref();
let editor_state = props.editor_state.clone(); let editor_state = props.editor_state.clone();
let closures = use_state(|| EditorKeepClosures { let closures = use_state(|| EditorKeepClosures {
change_closure: Closure::new(move |view_update: ViewUpdate| { change_closure: Closure::new(move |view_update: ViewUpdate| {
if view_update.doc_changed() { if view_update.doc_changed() {
@ -506,8 +510,40 @@ pub fn editor_view(props: &EditorViewProps) -> Html {
editor_state: editor_state.clone(), editor_state: editor_state.clone(),
}; };
let current_script = editor_state.open_file.clone();
let set_err_state = editor_state.clone();
let set_err = Rc::new(move |msg: Option<&str>| {
let mut new_state = (*set_err_state.as_ref()).clone();
new_state.error_msg = msg.map(|v| AttrValue::from(String::from(v)));
set_err_state.set(new_state.into());
});
let editor_ref = use_node_ref();
let global_layout = props.global_layout.clone();
let frame = props.frame.clone();
let editor_closure: UseStateHandle<Option<Rc<Closure<dyn FnMut(KeyboardEvent)>>>> =
use_state(|| None);
let editor_ref_eff = editor_ref.clone();
let global_memo = props.global_memo.clone();
use_effect_with((), move |()| {
if let Some(editor_node) = editor_ref_eff.get() {
let closure = Closure::new(move |ev: KeyboardEvent| {
console::log_1(&ev);
if ev.code() == "Enter" && ev.get_modifier_state("Control") {
run_script(&current_script, &global_memo, set_err.clone());
ev.prevent_default();
} else if ev.code() == "Escape" {
close_editor(&frame, &global_layout);
}
});
let _ = editor_node
.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref());
editor_closure.set(Some(closure.into()));
}
});
html! { html! {
<> <div class="w-100 h-100" ref={editor_ref.clone()}>
{match editor_state.error_msg.as_ref() { {match editor_state.error_msg.as_ref() {
None => { html! { <></> }} None => { html! { <></> }}
Some(msg) => { Some(msg) => {
@ -526,6 +562,6 @@ pub fn editor_view(props: &EditorViewProps) -> Html {
first={html!{<EditorNav ..detail_props.clone() />}} first={html!{<EditorNav ..detail_props.clone() />}}
second={html!{<EditorArea ..detail_props.clone()/>}} second={html!{<EditorArea ..detail_props.clone()/>}}
/> />
</> </div>
} }
} }