Warning: Reason support is experimental. We are looking for beta-tester and contributors.

Module Ot_popup

module Ot_popup : sig..end

Popup widget


val hcf : 
  ?a:[< Html_types.div_attrib ] Eliom_content.Html.attrib list ->
  ?header:[< Html_types.header_content_fun ] Eliom_content.Html.elt list ->
  ?footer:[< Html_types.footer_content_fun ] Eliom_content.Html.elt list ->
  [< Html_types.div_content ] Eliom_content.Html.elt list ->
  [> `Section ] Eliom_content.Html.elt

Section with header, content and footer. header and footer are empty by default This is just a short Header and footer can be empty (default) and have fix size. Content has scrollbar if too high.

val popup : 
  ?a:[< Html_types.div_attrib ] Eliom_content.Html.attrib list ->
  ?close_button:Html_types.button_content Eliom_content.Html.elt list ->
  ?confirmation_onclose:(unit -> bool Lwt.t) ->
  ?onclose:(unit -> unit Lwt.t) ->
  ?disable_background:bool ->
  ?setup_form:[ `OnPopup | `OnSignal of bool React.S.t ] ->
  ?ios_scroll_pos_fix:bool ->
  ((unit -> unit Lwt.t) ->
   [< Html_types.div_content ] Eliom_content.Html.elt Lwt.t) ->
  [> `Div ] Eliom_content.Html.elt Lwt.t

popup ?a ?close_button ?confirmation_onclose ?onclose gen_content Display a modal popup. Returns the popup container, in case you need it.

Use close_button if you want to add a button to close the popup.

confirmation_on_close is used to ask confirmation to the user when closing the popup with the close button. Meaningless if not closeable.

onclose is a hook called just after the popup has been actually closed.

gen_content is a function taking the function closing the popup as parameter, and returning the popup content.

For ios_scroll_pos_fix see Ot_drawer.drawer.

If disable_background (default: true) is true then the tabIndex of all the elements not in the popup are set to -1 with the effect that they can not be selected using the TAB key. When the popup is closed their old tabIndex value is restored. Note, that some elements that are tabbable in some browsers but not by specification (scrollable div's) are not affected.

If setup_form is provided, the popup is scanned for a form element and setup_tabcycle_auto is applied to it (if no form element is found the whole popup is scanned). This happens either once the popup opens (if setup_form equals `OnPopup) or with `OnSignal the tabcycling can be switched on (popup is rescanned) and off with a boolean signal.

val resetup_form_signal : 
  unit -> [> `OnSignal of bool React.S.t ] * (unit -> unit Lwt.t)
val ask_question : 
  ?a:[< Html_types.div_attrib ] Eliom_content.Html.attrib list ->
  ?a_hcf:[< Html_types.div_attrib ] Eliom_content.Html.attrib list ->
  ?disable_background:bool ->
  ?setup_form:[ `OnPopup | `OnSignal of bool React.S.t ] ->
  header:[< Html_types.header_content ] Eliom_content.Html.elt list ->
  buttons:([< Html_types.button_content_fun ] Eliom_content.Html.elt
   list * (unit -> 'a Lwt.t) * string list)
   list ->
  [< Html_types.div_content ] Eliom_content.Html.elt list -> 'a Lwt.t

ask_question ?a ?a_hcf question buttons Prompt a user, wait for its response and return the selected value. question is the content of the popup header buttons is the list of available answers. Each button is a triple of (content, action, classes). action () is called to return the value when the corresponding button is clicked.

val confirm : 
  ?a:[< Html_types.div_attrib ] Eliom_content.Html.attrib list ->
  ?disable_background:bool ->
  ?setup_form:[ `OnPopup | `OnSignal of bool React.S.t ] ->
  [< Html_types.header_content_fun ] Eliom_content.Html.elt list ->
  ([< Html_types.button_content_fun ] as 'a) Eliom_content.Html.elt list ->
  'a Eliom_content.Html.elt list -> bool Lwt.t

Shortcut using ask_question for prompting the user with a question and returning a boolean. confirm ?a question yes no a is a traditional optional attributes to add to the popup question is the content of the popup header yes is the content of the 'yes' button (returning true) no is the content of the 'no' button (returning false)

class type tabbable = object..end

An HTML element which can be selected by pressing the tab key

val setup_tabcycle : #tabbable Js.t list -> unit Lwt.t

setup_tabcycle makes a form in a popup more user-friendly, by focussing on the first element of the form and forcing tab keys to cycle through the elements of the form only (and not the elements of the page behind the popup). Note: you get proper tab cycles only for three or more elements! The list does not need to be complete, as only the first, the second, the next to last, and the last element matter.

val setup_tabcycle_auto : Dom_html.element Js.t -> unit Lwt.t

setup_tabcycle_auto scans an element for tabbable elements (buttons, inputs) and feeds them to setup_tabcycle