2018-02-23 21:50:03 -05:00
|
|
|
#![feature(trace_macros)]
|
|
|
|
#![feature(log_syntax)]
|
|
|
|
|
2018-02-21 01:37:09 -05:00
|
|
|
#[macro_use]
|
|
|
|
extern crate stdweb;
|
|
|
|
|
|
|
|
#[macro_use]
|
|
|
|
extern crate dominator;
|
|
|
|
|
|
|
|
use std::rc::Rc;
|
|
|
|
use stdweb::web::{document, HtmlElement};
|
|
|
|
use stdweb::web::event::ClickEvent;
|
|
|
|
use stdweb::web::IParentNode;
|
|
|
|
|
|
|
|
use dominator::{Dom, signal};
|
|
|
|
use dominator::signal::Signal;
|
|
|
|
|
|
|
|
|
|
|
|
fn main() {
|
|
|
|
stylesheet!("div", {
|
|
|
|
style("border", "5px solid black");
|
|
|
|
});
|
|
|
|
|
|
|
|
let foobar = class! {
|
|
|
|
style("border-right", "10px solid purple");
|
|
|
|
};
|
|
|
|
|
|
|
|
/*let media_query = stylesheet!(format!("@media (max-width: 500px) .{}", foobar), {
|
|
|
|
style("border-left", "10px solid teal");
|
|
|
|
});*/
|
|
|
|
|
2018-02-21 03:08:36 -05:00
|
|
|
let mut count = 0;
|
|
|
|
|
|
|
|
let (sender_elements, receiver_elements) = signal::unsync::mutable(count);
|
|
|
|
|
|
|
|
|
2018-02-23 21:50:03 -05:00
|
|
|
let mut width: u32 = 10;
|
|
|
|
|
|
|
|
let (sender1, receiver1) = signal::unsync::mutable(width);
|
|
|
|
let (sender2, receiver2) = signal::unsync::mutable(vec![width]);
|
|
|
|
let (sender3, receiver3) = signal::unsync::mutable(vec![width]);
|
|
|
|
|
|
|
|
|
|
|
|
trace_macros!(true);
|
|
|
|
|
|
|
|
/*let style_width = receiver1.switch(move |x| {
|
|
|
|
receiver2.clone().switch(move |y| {
|
|
|
|
receiver3.clone().map(move |z| {
|
|
|
|
Some(format!("{}px", x + y[0] + z[0]))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
});*/
|
|
|
|
|
|
|
|
let style_width = map_rc! {
|
|
|
|
let x: Rc<u32> = receiver1,
|
|
|
|
let y: Rc<Vec<u32>> = receiver2,
|
|
|
|
let _z: Rc<Vec<u32>> = receiver3 =>
|
|
|
|
Some(format!("{}px", *x + y[0]))
|
|
|
|
};
|
2018-02-21 01:37:09 -05:00
|
|
|
|
2018-02-23 21:50:03 -05:00
|
|
|
trace_macros!(false);
|
2018-02-21 01:37:09 -05:00
|
|
|
|
2018-02-21 03:08:36 -05:00
|
|
|
|
2018-02-21 01:37:09 -05:00
|
|
|
html!("div", {
|
|
|
|
style("border", "10px solid blue");
|
2018-02-21 03:08:36 -05:00
|
|
|
children([
|
2018-02-21 01:37:09 -05:00
|
|
|
html!("div", {
|
2018-02-23 21:50:03 -05:00
|
|
|
style("width", style_width);
|
2018-02-21 01:37:09 -05:00
|
|
|
style("height", "50px");
|
|
|
|
style("background-color", "green");
|
|
|
|
event(move |event: ClickEvent| {
|
2018-02-21 03:08:36 -05:00
|
|
|
count += 1;
|
2018-02-23 21:50:03 -05:00
|
|
|
width += 5;
|
2018-02-21 03:08:36 -05:00
|
|
|
|
2018-02-21 01:37:09 -05:00
|
|
|
console!(log, &event);
|
2018-02-21 03:08:36 -05:00
|
|
|
|
2018-02-23 21:50:03 -05:00
|
|
|
sender1.set(width).unwrap();
|
|
|
|
sender2.set(vec![width]).unwrap();
|
|
|
|
sender3.set(vec![width]).unwrap();
|
2018-02-21 03:08:36 -05:00
|
|
|
sender_elements.set(count).unwrap();
|
2018-02-21 01:37:09 -05:00
|
|
|
});
|
2018-02-21 03:08:36 -05:00
|
|
|
children(receiver_elements.map(|count| {
|
|
|
|
(0..count).map(|_| {
|
|
|
|
html!("div", {
|
|
|
|
style("border", "5px solid red");
|
|
|
|
style("width", "50px");
|
|
|
|
style("height", "50px");
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}));
|
2018-02-21 01:37:09 -05:00
|
|
|
}),
|
|
|
|
|
|
|
|
html!("div", {
|
|
|
|
style("width", "50px");
|
|
|
|
style("height", "50px");
|
|
|
|
style("background-color", "red");
|
2018-02-21 03:08:36 -05:00
|
|
|
children([
|
2018-02-21 01:37:09 -05:00
|
|
|
html!("div", {
|
|
|
|
style("width", "10px");
|
|
|
|
style("height", "10px");
|
|
|
|
style("background-color", "orange");
|
|
|
|
})
|
2018-02-21 03:08:36 -05:00
|
|
|
].as_mut());
|
2018-02-21 01:37:09 -05:00
|
|
|
}),
|
|
|
|
|
|
|
|
html!("div", {
|
|
|
|
style("width", "50px");
|
|
|
|
style("height", "50px");
|
|
|
|
style("background-color", "red");
|
|
|
|
class(&foobar, true);
|
2018-02-21 03:08:36 -05:00
|
|
|
children([
|
2018-02-21 01:37:09 -05:00
|
|
|
html!("div", {
|
|
|
|
style("width", "10px");
|
|
|
|
style("height", "10px");
|
|
|
|
style("background-color", "orange");
|
|
|
|
})
|
2018-02-21 03:08:36 -05:00
|
|
|
].as_mut());
|
2018-02-21 01:37:09 -05:00
|
|
|
}),
|
|
|
|
|
|
|
|
Dom::with_state(Rc::new(vec![1, 2, 3]), |a| {
|
|
|
|
html!("div", {
|
|
|
|
style("width", "100px");
|
|
|
|
style("height", "100px");
|
|
|
|
style("background-color", "orange");
|
|
|
|
class("foo", true);
|
|
|
|
class("bar", false);
|
|
|
|
event(clone!({ a } move |event: ClickEvent| {
|
|
|
|
console!(log, &*a, &event);
|
|
|
|
}));
|
|
|
|
})
|
|
|
|
}),
|
|
|
|
|
|
|
|
html!("input", {
|
|
|
|
focused(true);
|
|
|
|
}),
|
2018-02-21 03:08:36 -05:00
|
|
|
].as_mut());
|
2018-02-21 01:37:09 -05:00
|
|
|
}).insert_into(
|
|
|
|
&document().query_selector("body").unwrap().unwrap()
|
|
|
|
);
|
|
|
|
}
|