Show only book covers in search page and show detail when clicking on its

1 files changed, 45 insertions, 0 deletions

diff --git a/src/main/scala/reading/component/widget/Popup.scala b/src/main/scala/reading/component/widget/Popup.scala
new file mode 100644
index 0000000..8e40d36
--- /dev/null
+++ b/src/main/scala/reading/component/widget/Popup.scala
@@ -0,0 +1,45 @@
+package reading.component.widget
+
+import org.scalajs.dom
+
+import rx._
+import Ctx.Owner.Unsafe._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.widget.style.{ Popup => PopupStyle }
+import reading.component.style.Col
+import reading.utils.{ RxAttr }
+
+object Popup {
+  def apply(onClose: => Unit)(content: HtmlTag): HtmlTag = {
+    dom.document.body.style.overflowY = "hidden"
+
+    div(
+      PopupStyle.render,
+      PopupStyle.popup,
+
+      div(
+        PopupStyle.curtain,
+        RxAttr(onclick, Rx(() => close(onClose)))
+      ),
+
+      div(
+        PopupStyle.content,
+        content,
+        div(
+          PopupStyle.cross,
+          RxAttr(onclick, Rx(() => close(onClose))),
+          Cross(20.px, Col.stiletto)
+        )
+      )
+    )
+  }
+
+  private def close(onClose: => Unit): Unit = {
+    dom.document.body.style.overflowY = "scroll"
+    onClose
+  }
+}