Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#271 Support for Popover API #272

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions WebSharper.UI.Tests/Main.fs
Original file line number Diff line number Diff line change
Expand Up @@ -693,6 +693,9 @@ module Main =
p [] [text (" You typed: " + rv.V.y.z)]
V(ul [] (rv.V.y.z |> Seq.map (fun c -> li [] [text (string c)]))).V
p [Attr.ClassPred "is-green" (rv.V.y.z = "green")] [text "this should be bordered with green iff you typed \"green\"."]

dialog [attr.id "my-popover"; attr.popover "manual"; attr.style "background-color: darkslategray; color:white;"] [text "Popover attempt"]
button [attr.popovertarget "my-popover"; attr.popovertargetaction "toggle"] [text "Open/Close dialog"]
rd.V
]
|> Doc.RunAppend JS.Document.Body
27 changes: 27 additions & 0 deletions WebSharper.UI/HTML.Client.fs
Original file line number Diff line number Diff line change
Expand Up @@ -1128,6 +1128,33 @@ module HtmlExtensions =
/// Create an animated HTML attribute "poster" whose value is computed from the given reactive view.
[<JavaScript; Inline>]
static member posterAnim view convert trans = Client.Attr.Animated "poster" trans view convert
/// Create an HTML attribute "popover" with the given reactive value.
[<JavaScript; Inline>]
static member popoverDyn view = Client.Attr.Dynamic "popover" view
/// `popover v p` sets an HTML attribute "popover" with reactive value v when p is true, and unsets it when p is false.
[<JavaScript; Inline>]
static member popoverDynPred view pred = Client.Attr.DynamicPred "popover" pred view
/// Create an animated HTML attribute "popover" whose value is computed from the given reactive view.
[<JavaScript; Inline>]
static member popoverAnim view convert trans = Client.Attr.Animated "popover" trans view convert
/// Create an HTML attribute "popovertarget" with the given reactive value.
[<JavaScript; Inline>]
static member popovertargetDyn view = Client.Attr.Dynamic "popovertarget" view
/// `popovertarget v p` sets an HTML attribute "popovertarget" with reactive value v when p is true, and unsets it when p is false.
[<JavaScript; Inline>]
static member popovertargetDynPred view pred = Client.Attr.DynamicPred "popovertarget" pred view
/// Create an animated HTML attribute "popovertarget" whose value is computed from the given reactive view.
[<JavaScript; Inline>]
static member popovertargetAnim view convert trans = Client.Attr.Animated "popovertarget" trans view convert
/// Create an HTML attribute "popovertargetaction" with the given reactive value.
[<JavaScript; Inline>]
static member popovertargetactionDyn view = Client.Attr.Dynamic "popovertargetaction" view
/// `popovertargetaction v p` sets an HTML attribute "popovertargetaction" with reactive value v when p is true, and unsets it when p is false.
[<JavaScript; Inline>]
static member popovertargetactionDynPred view pred = Client.Attr.DynamicPred "popovertargetaction" pred view
/// Create an animated HTML attribute "popovertargetaction" whose value is computed from the given reactive view.
[<JavaScript; Inline>]
static member popovertargetactionAnim view convert trans = Client.Attr.Animated "popovertargetaction" trans view convert
/// Create an HTML attribute "preload" with the given reactive value.
[<JavaScript; Inline>]
static member preloadDyn view = Client.Attr.Dynamic "preload" view
Expand Down
18 changes: 18 additions & 0 deletions WebSharper.UI/HTML.fs
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,9 @@ module Html =
/// Create an HTML element <div> with attributes and children.
[<JavaScript; Inline>]
let div ats ch = Doc.Element "div" ats ch
/// Create an HTML element <dialog> with attributes and children.
[<JavaScript; Inline>]
let dialog ats ch = Doc.Element "dialog" ats ch
/// Create an HTML element <dl> with attributes and children.
[<JavaScript; Inline>]
let dl ats ch = Doc.Element "dl" ats ch
Expand Down Expand Up @@ -523,6 +526,9 @@ module Html =
/// Create an HTML element <div> with attributes and children.
[<JavaScript; Inline>]
let div ats ch = Elt.div ats ch :> Doc
/// Create an HTML element <dialog> with attributes and children.
[<JavaScript; Inline>]
let dialog ats ch = Elt.dialog ats ch :> Doc
/// Create an HTML element <dl> with attributes and children.
[<JavaScript; Inline>]
let dl ats ch = Elt.dl ats ch :> Doc
Expand Down Expand Up @@ -1761,6 +1767,18 @@ module Html =
/// The value can be reactive using `view.V`.
[<JavaScript; Inline; Macro(typeof<Macros.AttrCreate>, "placeholder")>]
static member placeholder value = Attr.Create "placeholder" value
/// Create an HTML attribute "popover" with the given value, which must be either "auto" or "manual".
/// The value can be reactive using `view.V`.
[<JavaScript; Inline; Macro(typeof<Macros.AttrCreate>, "popover")>]
static member popover value = Attr.Create "popover" value
/// Create an HTML attribute "popovertarget" with the given value, which must be an HTML id.
/// The value can be reactive using `view.V`.
[<JavaScript; Inline; Macro(typeof<Macros.AttrCreate>, "popovertarget")>]
static member popovertarget value = Attr.Create "popovertarget" value
/// Create an HTML attribute "popovertargetaction" with the given value, which must be either "show", "hide" or "toggle".
/// The value can be reactive using `view.V`.
[<JavaScript; Inline; Macro(typeof<Macros.AttrCreate>, "popovertargetaction")>]
static member popovertargetaction value = Attr.Create "popovertargetaction" value
/// Create an HTML attribute "poster" with the given value.
/// The value can be reactive using `view.V`.
[<JavaScript; Inline; Macro(typeof<Macros.AttrCreate>, "poster")>]
Expand Down