os_template/demo_carousel3.eliom at master · ocsigen/os_template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
(* This file was generated by Ocsigen Start.
   Feel free to use it, modify it, and redistribute it as you wish. *)
(* Wheel demo *)
open%shared Eliom.Content.Html
open%shared Eliom.Content.Html.F

(* Page for this demo *)
let%shared page () =
  let carousel_pages =
    [ [%i18n Demo.S.monday] ^ " 1"
    ; [%i18n Demo.S.tuesday] ^ " 1"
    ; [%i18n Demo.S.wednesday] ^ " 1"
    ; [%i18n Demo.S.thursday] ^ " 1"
    ; [%i18n Demo.S.friday] ^ " 1"
    ; [%i18n Demo.S.saturday] ^ " 1"
    ; [%i18n Demo.S.sunday] ^ " 1"
    ; [%i18n Demo.S.monday] ^ " 2"
    ; [%i18n Demo.S.tuesday] ^ " 2"
    ; [%i18n Demo.S.wednesday] ^ " 2"
    ; [%i18n Demo.S.thursday] ^ " 2"
    ; [%i18n Demo.S.friday] ^ " 2"
    ; [%i18n Demo.S.saturday] ^ " 2"
    ; [%i18n Demo.S.sunday] ^ " 2"
    ; [%i18n Demo.S.monday] ^ " 3"
    ; [%i18n Demo.S.tuesday] ^ " 3"
    ; [%i18n Demo.S.wednesday] ^ " 3"
    ; [%i18n Demo.S.thursday] ^ " 3"
    ; [%i18n Demo.S.friday] ^ " 3"
    ; [%i18n Demo.S.saturday] ^ " 3"
    ; [%i18n Demo.S.sunday] ^ " 3"
    ; [%i18n Demo.S.monday] ^ " 4"
    ; [%i18n Demo.S.tuesday] ^ " 4"
    ; [%i18n Demo.S.wednesday] ^ " 4"
    ; [%i18n Demo.S.thursday] ^ " 4"
    ; [%i18n Demo.S.friday] ^ " 4"
    ; [%i18n Demo.S.saturday] ^ " 4"
    ; [%i18n Demo.S.sunday] ^ " 4"
    ; [%i18n Demo.S.monday] ^ " 5"
    ; [%i18n Demo.S.tuesday] ^ " 5"
    ; [%i18n Demo.S.wednesday] ^ " 5"
    ; [%i18n Demo.S.thursday] ^ " 5"
    ; [%i18n Demo.S.friday] ^ " 5"
    ; [%i18n Demo.S.saturday] ^ " 5"
    ; [%i18n Demo.S.sunday] ^ " 5" ]
  in
  let length = List.length carousel_pages in
  let carousel_content = List.map (fun p -> D.div [txt p]) carousel_pages in
  let carousel_change_signal =
    [%client
      (React.E.create ()
       : ([`Goto of int | `Next | `Prev] as 'a) React.E.t
         * (?step:React.step -> 'a -> unit))]
  in
  let update = [%client fst ~%carousel_change_signal] in
  let change = [%client fun a -> snd ~%carousel_change_signal ?step:None a] in
  let carousel, pos, _swipe_pos =
    Ot.Carousel.wheel
      ~a:[a_class ["demo-carousel3"]]
      ~update ~vertical:true ~inertia:1. ~position:10 ~transition_duration:3.
      ~face_size:25 carousel_content
  in
  Lwt.return
    [ h1 [%i18n Demo.carousel_wheel]
    ; p [%i18n Demo.carousel_third_example_1]
    ; carousel
    ; div
        [ Ot.Carousel.previous ~a:[a_class ["demo-prev"]] ~change ~pos []
        ; Ot.Carousel.next
            ~a:[a_class ["demo-next"]]
            ~change ~pos
            ~vis_elts:(Eliom.Shared.React.S.const 1)
            ~length [] ] ]

(* Service registration is done on both sides (shared section),
   so that pages can be generated from the server
   (first request, crawling, search engines ...)
   or the client (subsequent link clicks, or mobile app ...). *)
let%shared () =
  Project_name_base.App.register ~service:Demo_services.demo_carousel3
    ( Project_name_page.Opt.connected_page @@ fun myid_o () () ->
      let%lwt p = page () in
      Project_name_container.page
        ~a:[a_class ["os-page-demo-carousel3"]]
        myid_o p )