Merge pull request #163 from Zzull/topBot_drawer

Vertical drawer

Author: balat

css/ot_drawer.css

@@ -52,7 +52,7 @@ html.ot-drawer-open, html.ot-drawer-open > body {
 .ot-drawer {
 
     position: fixed;
-    top: 0;
+    width: 100%;
     height: 100%;
     z-index: 1;
 
@@ -63,10 +63,8 @@ html.ot-drawer-open, html.ot-drawer-open > body {
      * with overflow-y: auto ; touch-action: pan-y; */
     overflow: visible ;
 
-    transform: translateX(0);
     transition: -webkit-transform .2s ease-out;
     transition: transform .2s ease-out;
-    width: calc(100% - 50px) ;
 
     /* We set up drawer so that the default transform is the identity
      * Otherwise, with Firefox, a transition is performed on page
@@ -76,23 +74,54 @@ html.ot-drawer-open, html.ot-drawer-open > body {
 }
 
 @media (min-width: 720px) {
-    .ot-drawer {
+    .ot-drawer.ot-dr-left, .ot-drawer.ot-dr-right {
         width: 300px;
     }
+
+    .ot-drawer.ot-dr-top, .ot-drawer.ot-dr-bottom {
+        height: 300px;
+    }
+}
+
+@media (max-width: 720px) {
+    .ot-drawer.ot-dr-left, .ot-drawer.ot-dr-right {
+        width: calc(100% - 50px);
+    }
+
+    .ot-drawer.ot-dr-top, .ot-drawer.ot-dr-bottom {
+        height: calc(100% - 50px);
+    }
 }
 
-.ot-drawer.ot-dr-left { right: 100% ; }
-.ot-drawer.ot-dr-right { left: 100% ; }
+.ot-drawer.ot-dr-top { bottom: 100% ; }
+.ot-drawer.ot-dr-right { left: 100% ; top: 0 }
+.ot-drawer.ot-dr-bottom { top: 100% ; }
+.ot-drawer.ot-dr-left { right: 100% ; top: 0 }
 
 .ot-dr-toggle-button::before { content: "≡"; }
-.ot-drawer-bckgrnd.ot-dr-open .ot-dr-toggle-button::before { content: "⟨"; }
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-top .ot-dr-toggle-button::before {
+    content: "︿" ;
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-right .ot-dr-toggle-button::before {
+    content: "⟩" ;
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-bottom .ot-dr-toggle-button::before {
+    content: "﹀" ;
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-left .ot-dr-toggle-button::before {
+    content: "⟨" ;
+}
+
 .ot-drawer-bckgrnd.ot-dr-open .ot-dr-toggle-button {
     background-color: #445;
 }
 
 .ot-drawer > .ot-dr-toggle-button {
     position: absolute ;
-    top: 0 ;
     cursor: pointer ;
     height: 50px;
     width: 50px;
@@ -103,6 +132,21 @@ html.ot-drawer-open, html.ot-drawer-open > body {
     outline: none;
 }
 
+.ot-drawer.ot-dr-top > .ot-dr-toggle-button {
+    top: 100% ;
+    right: calc(50% - 25px) ;
+}
+
+.ot-drawer.ot-dr-right > .ot-dr-toggle-button,
+.ot-drawer.ot-dr-left > .ot-dr-toggle-button {
+    top: 0 ;
+}
+
+.ot-drawer.ot-dr-bottom > .ot-dr-toggle-button {
+    bottom: 100% ;
+    left: calc(50% - 25px) ;
+}
+
 .ot-drawer.ot-dr-left > .ot-dr-toggle-button { left: 100% ; }
 .ot-drawer.ot-dr-right > .ot-dr-toggle-button { right: 100% ; }
 
@@ -114,5 +158,15 @@ html.ot-drawer-open, html.ot-drawer-open > body {
 
 .ot-drawer-bckgrnd.ot-dr-open .ot-drawer.ot-dr-right {
     -webkit-transform: translateX(-100%);
-    transform: translate(-100%);
+    transform: translateX(-100%);
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-drawer.ot-dr-top  {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%);
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-drawer.ot-dr-bottom {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
 }

src/widgets/ot_drawer.eliom

@@ -95,8 +95,10 @@ let%shared drawer
   in
   let d = D.div ~a:[a_class [ "ot-drawer"
                             ; match position with
-                            | `Left -> "ot-dr-left"
-                            | `Right -> "ot-dr-right"]]
+                            | `Top -> "ot-dr-top"
+                            | `Right -> "ot-dr-right"
+                            | `Bottom -> "ot-dr-bottom"
+                            | `Left -> "ot-dr-left"]]
       (toggle_button :: (content :> Html_types.div_content elt list))
   in
   let bckgrnd_init_class = if opened then ["ot-dr-open"] else [] in
@@ -193,10 +195,15 @@ let%shared drawer
           animation_frame_requested := false;
           (match !action with
            | `Move delta ->
-             let s = Js.string ((if ~%position = `Right
-                                 then "translateX(calc(-100% + "
-                                 else "translateX(calc(100% + ")^
-                                string_of_int delta^"px))") in
+             let s =
+               (match ~%position with
+                | `Top -> "translateY(calc(100% + "
+                | `Right -> "translateX(calc(-100% + "
+                | `Bottom -> "translateY(calc(-100% + "
+                | `Left -> "translateX(calc(100% + ")
+               |> (fun t -> Printf.sprintf "%s%dpx" t delta)
+               |> Js.string
+             in
              (Js.Unsafe.coerce (dr##.style))##.transform := s;
              (Js.Unsafe.coerce (dr##.style))##.webkitTransform := s
            | `Close ->
@@ -226,26 +233,36 @@ let%shared drawer
     let status = ref Stopped in
     let onpan ev _ =
       let left = clX ev - !startx in
+      let top = clY ev - !starty in
       if !status = Start
-      then begin
-        status := if abs (clY ev - !starty) > abs left
-          then Aborted (* vertical scrolling *)
-          else if abs left > Ot_swipe.threshold
-          then begin (* We decide to take the event *)
+      then
+        status :=
+          if ((~%position = `Top || ~%position = `Bottom)
+              && abs left > abs top)
+          || ((~%position = `Left || ~%position = `Right)
+              && abs top > abs left)
+          then Aborted (* Orthogonal scrolling *)
+          else if ((~%position = `Top || ~%position = `Bottom)
+                   && abs top <= Ot_swipe.threshold)
+               || ((~%position = `Left || ~%position = `Right) &&
+                   abs left <= Ot_swipe.threshold)
+          then !status
+          else begin (* We decide to take the event *)
             Manip.Class.add ~%bckgrnd "ot-swiping";
             (Js.Unsafe.coerce (dr##.style))##.transition :=
               Js.string "-webkit-transform 0s, transform 0s";
             In_progress
-          end
-          else !status
-      end;
+          end;
       if !status = In_progress
       then begin
         Dom.preventDefault ev;
         Dom_html.stopPropagation ev;
-        if (~%position = `Left && left <= 0)
-        || (~%position = `Right && left >= 0)
-        then perform_animation (`Move left)
+        let move = ref 0 in
+        if (~%position = `Top && top <= 0 && (move := top; true))
+        || (~%position = `Right && left >= 0 && (move := left; true))
+        || (~%position = `Bottom && top >= 0 && (move := top; true))
+        || (~%position = `Left && left <= 0 && (move := left; true))
+        then perform_animation (`Move !move)
         else Lwt.return_unit
       end
       else Lwt.return_unit
@@ -257,9 +274,12 @@ let%shared drawer
         (Js.Unsafe.coerce (dr##.style))##.transition :=
           Js.string "-webkit-transform .35s, transform .35s";
         let width = dr##.offsetWidth in
-        let delta = float_of_int (clX ev - !startx) in
-        if (~%position = `Left && delta < -0.3 *. float width)
-        || (~%position = `Right && delta > 0.3 *. float width)
+        let deltaX = float_of_int (clX ev - !startx) in
+        let deltaY = float_of_int (clY ev - !starty) in
+        if (~%position = `Top && deltaY < -0.3 *. float width)
+        || (~%position = `Right && deltaX > 0.3 *. float width)
+        || (~%position = `Bottom && deltaY > 0.3 *. float width)
+        || (~%position = `Left && deltaX < -0.3 *. float width)
         then perform_animation `Close
         else perform_animation `Open
       end

src/widgets/ot_drawer.eliomi

@@ -43,7 +43,7 @@
 *)
 val drawer :
   ?a:[< Html_types.div_attrib] Eliom_content.Html.attrib list ->
-  ?position:[ `Left | `Right ] ->
+  ?position:[ `Top | `Right | `Bottom | `Left ] ->
   ?opened:bool ->
   ?swipe:bool ->
   ?onclose:(unit -> unit) Eliom_client_value.t ->