Skip to content

Instantly share code, notes, and snippets.

@Kimserey

Kimserey/Client.fs

Last active December 6, 2016 08:19
Show Gist options
  • Save Kimserey/674185ed0db02e7af434 to your computer and use it in GitHub Desktop.
Save Kimserey/674185ed0db02e7af434 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Client.fs
namespace UINextRouterTest
open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client
[<JavaScript>]
module Client =
type PageType = Home | About
let Panel title body =
divAttr [attr.``class`` "panel panel-default"]
[ divAttr [attr.``class`` "panel-heading"] [text title]
divAttr [attr.``class`` "panel-body"] body ]
let HomePage go =
Panel <| "Home"
<| [p [ text "Blabla some stuff in the home" ]
Doc.Link "link to go to about" [] (fun _ -> go About)]
:> Doc
let AboutPage go =
Panel <| "About page"
<| [p [ text "Blabla about stuff about in the about" ]
Doc.Link "link to go to home" [] (fun _ -> go Home)]
:> Doc
let NavBar r =
let makeLink title pgTy curr =
liAttr <| [if curr = pgTy then yield attr.``class`` "active"]
<| [ Doc.Link title [] (fun _ -> Var.Set r pgTy) ]
let links =
View.FromVar r
|> View.Map (fun pgTy -> Doc.Concat [ makeLink "Home" Home pgTy
makeLink "About" About pgTy ])
|> Doc.EmbedView
Doc.Concat
[ navAttr [ attr.``class`` "navbar navbar-default" ]
[ divAttr [ attr.``class`` "container-fluid" ]
[ ulAttr [ attr.``class`` "nav navbar-nav" ] [links] ] ] ]
let routeMap =
RouteMap.Create (fun pageType -> match pageType with
| Home -> []
| About -> ["about"])
(fun route -> match route with
| [] -> Home
| ["about"] -> About
| _ -> failwith "404")
let Main =
let router = RouteMap.Install routeMap
let renderMain r =
View.FromVar r
|> View.Map (fun pty ->
let go = Var.Set r
match pty with
| Home -> HomePage go
| About -> AboutPage go)
|> View.Map (fun doc -> divAttr [attr.``class`` "container"] [doc])
|> Doc.EmbedView
Doc.RunById "nav" (NavBar router)
Doc.RunById "main" (renderMain router)
//added comment to test paket
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>UINextRouterTest</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="Content/UINextRouterTest.css" />
<script type="text/javascript" src="Content/UINextRouterTest.head.js"></script>
</head>
<body>
<div id="nav"></div>
<div id="main"></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="Content/UINextRouterTest.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment