Use Rust for the front-end too (#374)
Rust can compile to WASM, so let's use it for front-end code as well. To compile the front-end: ``` cargo install cargo-web cargo web deploy -p plume-front ```
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
[package]
|
||||
name = "plume-front"
|
||||
version = "0.1.0"
|
||||
authors = ["Plume contributors"]
|
||||
|
||||
[dependencies]
|
||||
stdweb = "0.4"
|
||||
@@ -0,0 +1,67 @@
|
||||
#[macro_use]
|
||||
extern crate stdweb;
|
||||
|
||||
use stdweb::{unstable::TryFrom, web::{*, event::*}};
|
||||
|
||||
fn main() {
|
||||
auto_expand();
|
||||
menu();
|
||||
search();
|
||||
}
|
||||
|
||||
/// Auto expands the editor when adding text
|
||||
fn auto_expand() {
|
||||
match document().query_selector("#plume-editor") {
|
||||
Ok(Some(x)) => HtmlElement::try_from(x).map(|article_content| {
|
||||
let offset = article_content.offset_height() - (article_content.get_bounding_client_rect().get_height() as i32);
|
||||
article_content.add_event_listener(move |_: KeyDownEvent| {
|
||||
let article_content = document().query_selector("#plume-editor").ok();
|
||||
js! {
|
||||
@{&article_content}.style.height = "auto";
|
||||
@{&article_content}.style.height = @{&article_content}.scrollHeight - @{offset} + "px";
|
||||
}
|
||||
});
|
||||
}).ok(),
|
||||
_ => None
|
||||
};
|
||||
}
|
||||
|
||||
/// Toggle menu on mobile device
|
||||
///
|
||||
/// It should normally be working fine even without this code
|
||||
/// But :focus-within is not yet supported by Webkit/Blink
|
||||
fn menu() {
|
||||
document().get_element_by_id("menu")
|
||||
.map(|button| {
|
||||
document().get_element_by_id("content")
|
||||
.map(|menu| {
|
||||
button.add_event_listener(|_: ClickEvent| {
|
||||
document().get_element_by_id("menu").map(|menu| menu.class_list().add("show"));
|
||||
});
|
||||
menu.add_event_listener(|_: ClickEvent| {
|
||||
document().get_element_by_id("menu").map(|menu| menu.class_list().remove("show"));
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/// Clear the URL of the search page before submitting request
|
||||
fn search() {
|
||||
document().get_element_by_id("form")
|
||||
.map(|form| {
|
||||
form.add_event_listener(|_: SubmitEvent| {
|
||||
document().query_selector_all("#form input").map(|inputs| {
|
||||
for input in inputs {
|
||||
js! {
|
||||
if (@{&input}.name === "") {
|
||||
@{&input}.name = @{&input}.id
|
||||
}
|
||||
if (@{&input}.name && !@{&input}.value) {
|
||||
@{&input}.name = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}).ok();
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user