WebSharper Popover API Binding

This repository provides an F# WebSharper binding for the Popover API, enabling WebSharper applications to show and hide HTML popovers using the native browser API.

Repository Structure

The repository consists of two main projects:

1. Binding Project:

   • Contains the F# WebSharper binding for the Popover API.

2. Sample Project:

   • Demonstrates how to use the Popover API with WebSharper syntax.
   • Includes a GitHub Pages demo: View Demo

Installation

To use this package in your WebSharper project, add the NuGet package:

   dotnet add package WebSharper.Popover

Building

Prerequisites

• .NET SDK installed on your machine.

Steps

1. Clone the repository:

   git clone https://github.com/dotnet-websharper/popover.git
   cd popover

2. Build the Binding Project:

   dotnet build WebSharper.Popover/WebSharper.Popover.fsproj

3. Build and Run the Sample Project:

   cd WebSharper.Popover.Sample
   dotnet build
   dotnet run

Example Usage

Below is an example of how to use the Popover API in a WebSharper project:

namespace WebSharper.Popover.Sample

open WebSharper
open WebSharper.Popover
open WebSharper.JavaScript
open WebSharper.UI.Client
open WebSharper.UI.Server
open WebSharper.UI.Templating

module Templates =
    type MainTemplate = Template<"index.html", ClientLoad.FromDocument>
[<JavaScript>]
module Client =

    [<SPAEntryPoint>]
    let Main () =

            Templates.MainTemplate.PopoverSample()
                .PopoverInit(fun (el:Dom.Element) ->
                    let pop = As<HTMLElement>(el)
                    pop.OnToggle <- (fun evt ->
                        if evt.NewState <> evt.OldState then
                            Console.Log $"Popover state: {evt.NewState}"
                        )

                    let popbtn = As<HTMLButtonElement>(JS.Document.GetElementById("open-btn"))
                    popbtn.PopoverTargetAction <- TargetActionType.Toggle
                    popbtn.PopoverTargetElement <- el
                )
                .Doc()
                |> Doc.RunById "main"

This example demonstrates how to programmatically control the visibility of a native popover element using WebSharper and the Popover API.

Browser Support

• The Popover API is supported in most modern browsers. Check the compatibility table on MDN for more details.