diff options
Diffstat (limited to 'src/main/scala/reading/component/widget/Modal.scala')
-rw-r--r-- | src/main/scala/reading/component/widget/Modal.scala | 36 |
1 files changed, 31 insertions, 5 deletions
diff --git a/src/main/scala/reading/component/widget/Modal.scala b/src/main/scala/reading/component/widget/Modal.scala index fe10d1f..02c42be 100644 --- a/src/main/scala/reading/component/widget/Modal.scala +++ b/src/main/scala/reading/component/widget/Modal.scala @@ -1,24 +1,41 @@ package reading.component.widget -import rx._ -import Ctx.Owner.Unsafe._ +import scala.util.Random -import scalatags.JsDom.all._ +import org.scalajs.dom.raw.HTMLElement +import rx._ +import rx.Ctx.Owner.Unsafe._ import scalacss.Defaults._ import scalacss.ScalatagsCss._ +import scalatags.JsDom.all._ import reading.component.widget.style.{ Modal => ModalStyle } import reading.utils.{ RxAttr } object Modal { def apply(onClose: => Unit)(content: HtmlTag): HtmlTag = { + val modalId = s"modal${Random.nextInt}" + + Animate( + id = modalId, + duration = 300, + transition = Transition.easeOut, + animate = (progress, element) => { + element.style.opacity = s"$progress" + element.childNodes(2) match { + case e: HTMLElement => e.style.transform = s"translateY(${40 * (progress - 1)}px)" + } + } + ) + div( ModalStyle.render, ModalStyle.modal, + id := modalId, div( ModalStyle.curtain, - RxAttr(onclick, Rx(() => onClose)) + RxAttr(onclick, Rx(() => close(modalId, onClose))) ), div( @@ -26,10 +43,19 @@ object Modal { content, button( ModalStyle.close, - RxAttr(onclick, Rx(() => onClose)), + RxAttr(onclick, Rx(() => close(modalId, onClose))), "Fermer" ) ) ) } + + private def close(modalId: String, onClose: => Unit): Unit = + Animate( + id = modalId, + duration = 300, + transition = Transition.linear, + onEnd = onClose, + animate = (progress, element) => element.style.opacity = s"${1 - progress}" + ) } |