Add detailed book page instead of a modal.

6 files changed, 70 insertions, 138 deletions

diff --git a/src/main/scala/reading/component/widget/Animate.scala b/src/main/scala/reading/component/widget/Animate.scala
index 0e848aa..6328177 100644
--- a/src/main/scala/reading/component/widget/Animate.scala
+++ b/src/main/scala/reading/component/widget/Animate.scala
@@ -14,16 +14,16 @@ object Animate {
     transition: (Double, Double) => Double,
     animate: (Double, HTMLElement) => Unit,
     onEnd: => Unit = ()
-  ): Unit = {
+  ): Unit =
     animationFrames.get(id) match {
-      case Some(animationFrame) => window.cancelAnimationFrame(animationFrame)
-      case None => ()
+      case Some(animationFrame) =>
+        ()
+      case None =>
+        val animationFrame = window.requestAnimationFrame(ts =>
+          frame(id, ts, duration, transition, animate, onEnd)(ts))
+        animationFrames.put(id, animationFrame)
+        ()
     }
-    val animationFrame = window.requestAnimationFrame(ts =>
-      frame(id, ts, duration, transition, animate, onEnd)(ts))
-    animationFrames.put(id, animationFrame)
-    ()
-  }
 
   private def frame(
     id: String,
@@ -44,6 +44,7 @@ object Animate {
           animationFrames.put(id, animationFrame)
         } else {
           animate(1, element)
+          animationFrames.remove(id)
           onEnd
         }
       case _ =>
diff --git a/src/main/scala/reading/component/widget/AnimateMethod.scala b/src/main/scala/reading/component/widget/AnimateMethod.scala
new file mode 100644
index 0000000..dfe3e46
--- /dev/null
+++ b/src/main/scala/reading/component/widget/AnimateMethod.scala
@@ -0,0 +1,29 @@
+package reading.component.widget
+
+object AnimateMethod {
+  def fadeOut(id: String, onEnd: => Unit = ()): Unit =
+    Animate(
+      id = id,
+      duration = 100,
+      transition = Transition.linear,
+      animate =
+      (progress, element) => {
+        element.style.opacity = s"${1 - progress}"
+        element.style.transform = s"translateX(${20 * progress}px)"
+      },
+      onEnd = onEnd
+    )
+
+  def fadeIn(id: String, onEnd: => Unit = ()): Unit =
+    Animate(
+      id = id,
+      duration = 100,
+      transition = Transition.easeIn,
+      animate =
+      (progress, element) => {
+        element.style.opacity = s"${progress}"
+        element.style.transform = s"translateX(${20 * (1 - progress)}px)"
+      },
+      onEnd = onEnd
+    )
+}
diff --git a/src/main/scala/reading/component/widget/Input.scala b/src/main/scala/reading/component/widget/Input.scala
index 7dac47a..1a1157e 100644
--- a/src/main/scala/reading/component/widget/Input.scala
+++ b/src/main/scala/reading/component/widget/Input.scala
@@ -2,14 +2,15 @@ package reading.component.widget
 
 import scalatags.JsDom.all._
 
-import org.scalajs.dom.KeyboardEvent
 import org.scalajs.dom.html.Input
+import org.scalajs.dom.KeyboardEvent
 
 import scalacss.Defaults._
 import scalacss.ScalatagsCss._
 
 import rx._
 
+import reading.component.style.{ Color => C }
 import reading.component.widget.style.{ Input => InputStyle }
 
 object Input {
@@ -17,28 +18,38 @@ object Input {
     style: StyleA,
     query: Var[String],
     label: String = "",
-    onEnter: => Unit = ()
+    onEnter: => Unit = (),
+    maxLength: Option[Int] = None
   )(
     implicit
     ctx: Ctx.Owner
   ): Frag = {
     val inputBox = input(
-      InputStyle.render,
       InputStyle.input,
-      style,
       placeholder := label,
       onkeyup := { (e: KeyboardEvent) =>
         val input = e.target.asInstanceOf[Input]
         query() = input.value
         input.value = input.value
         if (e.keyCode == 13) onEnter
-      }
+      },
+      maxlength := maxLength.map(_.toString).getOrElse("")
     ).render
 
     query.trigger {
       inputBox.value = query.now
     }
 
-    inputBox
+    div(
+      InputStyle.render,
+      InputStyle.parent,
+      style,
+      inputBox,
+      span(
+        InputStyle.clear,
+        onclick := (() => query() = ""),
+        Cross(15.px, C.gray.value)
+      )
+    )
   }
 }
diff --git a/src/main/scala/reading/component/widget/Modal.scala b/src/main/scala/reading/component/widget/Modal.scala
deleted file mode 100644
index db1f7e6..0000000
--- a/src/main/scala/reading/component/widget/Modal.scala
+++ /dev/null
@@ -1,59 +0,0 @@
-package reading.component.widget
-
-import scala.util.Random
-
-import org.scalajs.dom.raw.HTMLElement
-import scalacss.Defaults._
-import scalacss.ScalatagsCss._
-import scalatags.JsDom.all._
-
-import reading.component.widget.style.{ Modal => ModalStyle }
-
-object Modal {
-  def apply(onClose: => Unit)(content: Frag): Frag = {
-    val modalId = s"modal${Random.nextInt}"
-
-    Animate(
-      id = modalId,
-      duration = 250,
-      transition = Transition.easeOut,
-      animate =
-      (progress, element) => {
-        element.style.opacity = s"$progress"
-        element.childNodes(2) match {
-          case e: HTMLElement => e.style.transform = s"scale(${0.85 + 0.15 * progress})"
-        }
-      }
-    )
-
-    div(
-      ModalStyle.render,
-      ModalStyle.modal,
-      id := modalId,
-
-      div(
-        ModalStyle.curtain,
-        onclick := (() => close(modalId, onClose))
-      ),
-
-      div(
-        ModalStyle.content,
-        content,
-        button(
-          ModalStyle.close,
-          onclick := (() => 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}"
-    )
-}
diff --git a/src/main/scala/reading/component/widget/style/Input.scala b/src/main/scala/reading/component/widget/style/Input.scala
index 967393b..9453640 100644
--- a/src/main/scala/reading/component/widget/style/Input.scala
+++ b/src/main/scala/reading/component/widget/style/Input.scala
@@ -7,10 +7,25 @@ import reading.component.style.{ Color => C }
 object Input extends StyleSheet.Inline {
   import dsl._
 
+  val parent = style(
+    position.relative
+  )
+
   val input = style(
+    height(45.px),
     border(1.px, solid, C.mickado.value),
     borderRadius(2.px),
     padding(10.px),
     &.hover(borderColor(C.gray.value))
   )
+
+  val clear = style(
+    position.absolute,
+    top(0.px),
+    right(10.px),
+    display.flex,
+    height(100.%%),
+    alignItems.center,
+    cursor.pointer
+  )
 }
diff --git a/src/main/scala/reading/component/widget/style/Modal.scala b/src/main/scala/reading/component/widget/style/Modal.scala
deleted file mode 100644
index faf325d..0000000
--- a/src/main/scala/reading/component/widget/style/Modal.scala
+++ /dev/null
@@ -1,65 +0,0 @@
-package reading.component.widget.style
-
-import scalacss.Defaults._
-
-import reading.Media
-import reading.component.style.{ Color => C, Button }
-
-object Modal extends StyleSheet.Inline {
-  import dsl._
-
-  val modal = style(
-    display.flex,
-    justifyContent.center,
-    position.fixed,
-    width(100.%%),
-    height(100.%%),
-    top(0.px),
-    right(0.px),
-    bottom(0.px),
-    left(0.px),
-    opacity(0),
-    overflowY.scroll
-  )
-
-  val curtain = style(
-    Media.desktop(
-      width(100.%%),
-      height(100.%%),
-      position.fixed,
-      top(0.px),
-      left(0.px),
-      backgroundColor(C.black.value),
-      opacity(0.7),
-      cursor.pointer
-    ),
-    Media.mobile(
-      display.none
-    )
-  )
-
-  val content = style(
-    position.relative,
-    backgroundColor(C.white.value),
-    margin.auto,
-    Media.desktop(
-      width(50.%%),
-      borderRadius(5.px)
-    ),
-    Media.mobile(
-      width(100.%%),
-      height(100.%%),
-      overflowY.auto
-    ),
-    padding(30.px, 30.px, 0.px, 30.px)
-  )
-
-  val close = style(
-    Media.desktop(display.none),
-    Media.mobile(
-      Button.simple,
-      marginTop(20.px),
-      marginBottom(30.px)
-    )
-  )
-}