Webru

Frequently used javascript functions for Rust and WebAssembly

webru is a binding for web-sys

This crate assumes that you will only use this crate inside browser. Not any other javascript runtime such as Node.js

Usage

Using some global objects and functions

```rust use webru::{alert, body, createelement, prompt}; use websys::{Element, HtmlElement};

// get the body let body: HtmlElement = body();

// show an alert alert("We use cookies to improve your experience.");

// Get the name from the user using "prompt" method let name: Option = prompt("What is your name?");

// creating a

tag using javascript document.createElement() method // This function will return the newly created element/tag let h1: Element = create_element("h1");

// adding some attributes to

tag h1.setid("heading-1"); // html id property h1.setclass_name("heading"); // html class property`

match name { Some(name) if name.len() > 0 => { // if user entered a name then set the inner html of

tag h1.setinnerhtml(&format!("Hello {}", name)); } _ => h1.setinnerhtml("Hello World!"), }

// pushing the

tag into the DOM body.append_child(&h1).unwrap();

```

Using setTimeout and setInterval

```rust use std::cell::Cell; use weblog::console_log;

{ use crate::{clearinterval, setinterval, set_timeout};

let number = Cell::new(0);

// javascript `setInterval()` method
let interval_id: i32 = set_interval(
    move || {
        console_log!("Number: {}", number.get());

        // increment the number after every second
        number.set(number.get() + 1);
    },
    1000, // 1 second
)
.unwrap();

// javascript `setTimeout()` method
set_timeout(
    move || {
        console_log!("Stopping interval");

        // stop the interval after 5 seconds
        clear_interval(interval_id);
    },
    10000, // 10 seconds
)
.unwrap();

} // Alternatively, you can use Timeout and Interval structs instead of set_timeout and set_interval { use crate::{Interval, Timeout};

let number: Cell<i32> = Cell::new(0);

// javascript `setInterval()` method
let interval: Interval = Interval::start(
    move || {
        console_log!("Number: {}", number.get());

        // increment the number after every second
        number.set(number.get() + 1);
    },
    1000, // 1 second
);

// javascript `setTimeout()` method
Timeout::start(
    move || {
        console_log!("Stopping interval");

        // stop the interval after 5 seconds
        interval.stop();
    },
    10000, // 10 seconds
);

} ```

Using selectors

```rust use webru::{body, createelement, getelementbyid, getelementsbyclassnameinsidevec}; use websys::{Element, HtmlElement};

let class_name = "active-element";

// creating some elements with the class name "active-element" adding it to the DOM { let h11: Element = createelement("h1"); h11.setclassname(classname); h11.setid("heading-1"); h11.setinner_html("I am heading 1");

let h1_2: Element = create_element("h1");
h1_2.set_class_name(class_name);
h1_2.set_id("heading-2");
h1_2.set_inner_html("I am heading 2");

let h1_3: Element = create_element("h1");
h1_3.set_class_name(class_name);
h1_3.set_id("heading-3");
h1_3.set_inner_html("I am heading 3");

// render the elements into the DOM
let body: HtmlElement = body();
body.append_child(&h1_1).unwrap();
body.append_child(&h1_2).unwrap();
body.append_child(&h1_3).unwrap();

} // selecting all elements with the class name "active-element" { let elements: Vec = getelementsbyclassnameinsidevec(classname);

// iterating over the elements
let mut number = 0;

for element in elements {
    number += 1;    

    assert_eq!(element.class_name(), class_name);
    assert_eq!(element.id(), format!("heading-{}", number));
}

} // selecting the element with the id "heading-3" { let element: Option = getelementby_id("heading-3");

assert_eq!(element.unwrap().class_name(), class_name);

} ```

Using javascript callback

```rust use webru::{body, callback, createelement}; use std::cell::Cell; use wasmbindgen::JsCast; use websys::HtmlElement; use weblog::consolelog;

let count = Cell::new(0);

// "onclick" event handler for the