This repository has been archived by the owner on Jun 7, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Navbar.fs
57 lines (45 loc) · 1.53 KB
/
Navbar.fs
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
[<RequireQualifiedAccess>]
module Components.Navbar
open Lit
open Browser.Types
open Types
// uncomment the following lines to reproduce
//
// let MouseController: obj =
// Fable.Core.JsInterop.importMember "../Controllers/controllers.js"
// [<Fable.Core.Emit("new MouseController($0)")>]
// let createMouseCtrl host : {| x: float; y: float |} = Fable.Core.Util.jsNative
[<LitElement("flit-navbar")>]
let private NavBar () =
let host = LitElement.init ()
// the controller gets added to
// the host every time there is a re-render
// let mouseCtrl = createMouseCtrl host
let goback (ev: Event) =
let evt =
createEvent
"go-back"
{| bubbles = true
cancelable = true
composed = true |}
ev.target.dispatchEvent (evt)
let gotoPage page (ev: Event) =
let evt =
createCustomEvent
"go-to-page"
{| bubbles = true
cancelable = true
composed = true
detail = page |}
ev.target.dispatchEvent evt
html
// uncomment and move this line to the html string
//Cursor Position: {mouseCtrl.x} - {mouseCtrl.y}
$"""
<!-- This Lit "native" component works completely fine -->
<my-controlled-element></my-controlled-element>
<button @click={goback}>Back</button>
<button @click={gotoPage Page.Home}>Home</button>
<button @click={gotoPage Page.Notes}>Notes</button>
"""
let register () = ()