Merge pull request #97 from dancespiele/development

Release v0.9.2

crate/Cargo.toml

@@ -6,7 +6,7 @@ license = "MIT/Apache-2.0"
 name = "yew_style_page"
 readme = "./README.md"
 repository = "https://github.com/spielrs/yew-styles-page.git"
-version = "0.9.1"
+version = "0.9.2"
 
 [lib]
 crate-type = ["cdylib"]

crate/src/page/carousel_page.rs

@@ -1,6 +1,7 @@
 use super::highlighters::get_carousel;
 use yew::prelude::*;
 use yew::services::ConsoleService;
+use yew::utils::document;
 use yew_prism::Prism;
 use yew_styles::carousel::{Carousel, CarouselControls, CarouselDot, CarouselImage};
 use yew_styles::styles::Size;
@@ -13,6 +14,9 @@ pub struct CarouselPage {
 
 pub enum Msg {
     ChangeImage(usize),
+    Scroll(WheelEvent),
+    ShowScroll,
+    HideScroll,
     Prev,
     Next,
 }
@@ -74,6 +78,41 @@ impl Component for CarouselPage {
                     ConsoleService::error("no image active")
                 }
             }
+            Msg::Scroll(wheel_event) => {
+                let len = self.active_image.len();
+                let index_opt = self.active_image.to_vec().into_iter().position(|ai| ai);
+                for (i, _) in self.active_image.clone().into_iter().enumerate() {
+                    self.active_image[i] = false;
+                }
+
+                if wheel_event.delta_y() > 0.00 {
+                    if let Some(index) = index_opt {
+                        if index == 0 {
+                            self.active_image[len - 1] = true
+                        } else {
+                            self.active_image[index - 1] = true
+                        }
+                    } else {
+                        ConsoleService::error("no image active")
+                    }
+                } else if let Some(index) = index_opt {
+                    if index == len - 1 {
+                        self.active_image[0] = true
+                    } else {
+                        self.active_image[index + 1] = true
+                    }
+                } else {
+                    ConsoleService::error("no image active")
+                }
+            }
+            Msg::ShowScroll => {
+                let body_style = document().body().unwrap().style();
+                body_style.set_property("overflow", "hidden").unwrap();
+            }
+            Msg::HideScroll => {
+                let body_style = document().body().unwrap().style();
+                body_style.set_property("overflow", "scroll").unwrap();
+            }
         }
 
         true
@@ -99,10 +138,14 @@ impl Component for CarouselPage {
                 <h2>{"Carousel properties"}</h2>
                 <h3>{"Carousel Container"}</h3>
                 <ul>
+                    <li><b>{"onwheel_signal: "}</b>{"wheel event for carousel."}</li>
+                    <li><b>{"onmouseover_signal: "}</b>{"mouse over event for carousel."}</li>
+                    <li><b>{"onmouseleave_signal: "}</b>{"mouse leave event for carousel."}</li>
                     <li><b>{"key: "}</b>{"general property to add keys."}</li>
                     <li><b>{"code_ref: "}</b>{"general property to get the ref of the component."}</li>
                     <li><b>{"id: "}</b>{"general property to add custom id"}</li>
                     <li><b>{"class_name: "}</b>{"general property to add custom class styles"}</li>
+
                 </ul>
 
                 <h3>{"Carousel Controls"}</h3>
@@ -141,7 +184,11 @@ impl Component for CarouselPage {
 
                 <h2>{"Visual example"}</h2>
                 <div>
-                    <Carousel class_name="fill-background">
+                    <Carousel
+                        class_name="fill-background"
+                        onwheel_signal= self.link.callback(Msg::Scroll)
+                        onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+                        onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
                         {get_images(self.images.to_vec(), self.active_image.to_vec())}
                         {get_dots(self.active_image.to_vec(), self.link.clone())}
                         {get_controls(self.link.clone())}

crate/src/page/highlighters.rs

@@ -424,7 +424,14 @@ pub fn get_spinner() -> String {
 }
 
 pub fn get_carousel() -> String {
-    "<Carousel class_name=\"fill-background\">
+    "<Carousel
+    class_name=\"fill-background\"
+    onwheel_signal= self.link.callback(Msg::Scroll)
+    onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+    onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
+    <CarouselImage active=active_image[1] img_src=image.to_owned()/>
+    <CarouselImage active=active_image[2] img_src=image.to_owned()/>
+    <CarouselImage active=active_image[3] img_src=image.to_owned()/>
     <CarouselDot active=active_image[1] onclick_signal = link.callback(move |_| Msg::ChangeImage(1))/>
     <CarouselDot active=active_image[2] onclick_signal = link.callback(move |_| Msg::ChangeImage(2))/>
     <CarouselDot active=active_image[3] onclick_signal = link.callback(move |_| Msg::ChangeImage(3))/>

crate/yew_styles/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew_styles"
-version = "0.9.1"
+version = "0.9.2"
 description = "Framework styles for yew"
 documentation = "https://docs.rs/crate/yew_styles"
 authors = ["Francisco Jesus Navarro Cortes <[email protected]>"]

crate/yew_styles/src/components/carousel/carousel_container.rs

@@ -14,22 +14,27 @@ use yew::{utils, App};
 /// use super::highlighters::get_carousel;
 /// use yew::prelude::*;
 /// use yew::services::ConsoleService;
+/// use yew::utils::document;
+/// use yew_prism::Prism;
 /// use yew_styles::carousel::{Carousel, CarouselControls, CarouselDot, CarouselImage};
 /// use yew_styles::styles::Size;
 ///
-/// pub struct App {
+/// pub struct CarouselPage {
 ///     link: ComponentLink<Self>,
 ///     images: Vec<&'static str>,
 ///     active_image: Vec<bool>,
 /// }
 ///
 /// pub enum Msg {
 ///     ChangeImage(usize),
+///     Scroll(WheelEvent),
+///     ShowScroll,
+///     HideScroll,
 ///     Prev,
 ///     Next,
 /// }
 ///
-/// impl Component for App {
+/// impl Component for CarouselPage {
 ///     type Message = Msg;
 ///     type Properties = ();
 ///
@@ -86,6 +91,41 @@ use yew::{utils, App};
 ///                     ConsoleService::error("no image active")
 ///                 }
 ///             }
+///             Msg::Scroll(wheel_event) => {
+///                 let len = self.active_image.len();
+///                 let index_opt = self.active_image.to_vec().into_iter().position(|ai| ai);
+///                 for (i, _) in self.active_image.clone().into_iter().enumerate() {
+///                     self.active_image[i] = false;
+///                 }
+///
+///                 if wheel_event.delta_y() > 0.00 {
+///                     if let Some(index) = index_opt {
+///                         if index == 0 {
+///                             self.active_image[len - 1] = true
+///                         } else {
+///                             self.active_image[index - 1] = true
+///                         }
+///                     } else {
+///                         ConsoleService::error("no image active")
+///                     }
+///                 } else if let Some(index) = index_opt {
+///                     if index == len - 1 {
+///                         self.active_image[0] = true
+///                     } else {
+///                         self.active_image[index + 1] = true
+///                     }
+///                 } else {
+///                     ConsoleService::error("no image active")
+///                 }
+///             }
+///             Msg::ShowScroll => {
+///                 let body_style = document().body().unwrap().style();
+///                 body_style.set_property("overflow", "hidden").unwrap();
+///             }
+///             Msg::HideScroll => {
+///                 let body_style = document().body().unwrap().style();
+///                 body_style.set_property("overflow", "scroll").unwrap();
+///             }
 ///         }
 ///
 ///         true
@@ -135,22 +175,37 @@ use yew::{utils, App};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <CarouselControls
-///             controls_size=Size::Small
-///             prev_signal=link.callback(|_| Msg::Prev)
-///             next_signal=link.callback(|_| Msg::Next)/>
+///         <Carousel
+///             class_name="fill-background"
+///             onwheel_signal= self.link.callback(Msg::Scroll)
+///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
+///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
+///             {get_dots(self.active_image.to_vec(), self.link.clone())}
+///             {get_controls(self.link.clone())}
+///         </Carousel>
 ///     }
 /// }
 /// ```
 pub struct Carousel {
     props: Props,
+    link: ComponentLink<Self>,
 }
 
 #[derive(Clone, Properties, PartialEq)]
 pub struct Props {
     /// General property to get the ref of the component
     #[prop_or_default]
     pub code_ref: NodeRef,
+    /// wheel event for carousel
+    #[prop_or(Callback::noop())]
+    pub onwheel_signal: Callback<WheelEvent>,
+    /// mouse over event for carousel
+    #[prop_or(Callback::noop())]
+    pub onmouseover_signal: Callback<MouseEvent>,
+    /// mouse leave event for carousel
+    #[prop_or(Callback::noop())]
+    pub onmouseleave_signal: Callback<MouseEvent>,
     /// General property to add keys
     #[prop_or_default]
     pub key: String,
@@ -163,16 +218,34 @@ pub struct Props {
     pub children: Children,
 }
 
+pub enum Msg {
+    Wheel(WheelEvent),
+    MouseOver(MouseEvent),
+    MouseLeave(MouseEvent),
+}
+
 impl Component for Carousel {
-    type Message = ();
+    type Message = Msg;
     type Properties = Props;
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self { props, link }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        false
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Wheel(wheel_event) => {
+                self.props.onwheel_signal.emit(wheel_event);
+            }
+            Msg::MouseOver(mouse_event) => {
+                self.props.onmouseover_signal.emit(mouse_event);
+            }
+            Msg::MouseLeave(mouse_event) => {
+                self.props.onmouseleave_signal.emit(mouse_event);
+            }
+        }
+
+        true
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
@@ -190,6 +263,9 @@ impl Component for Carousel {
                 class=classes!("carousel-container", self.props.class_name.clone())
                 id=self.props.id.clone()
                 key=self.props.key.clone()
+                onwheel=self.link.callback(Msg::Wheel)
+                onmouseover=self.link.callback(Msg::MouseOver)
+                onmouseleave=self.link.callback(Msg::MouseLeave)
                 ref=self.props.code_ref.clone()
             >
                 {self.props.children.clone()}
@@ -205,6 +281,9 @@ fn should_create_carousel_container_component() {
         id: String::from("carousel-id-test"),
         key: "".to_string(),
         code_ref: NodeRef::default(),
+        onwheel_signal: Callback::noop(),
+        onmouseover_signal: Callback::noop(),
+        onmouseleave_signal: Callback::noop(),
         children: Children::new(vec![html! {<div id="result">{"result"}</div>}]),
     };