Back to Questions
772
views2
comments
Trying to use an HTML5/CSS animation example with Websharper
websharperhtml5

Inspired by this article on animation effects, I would like to translate the following HTML into Websharper:

1
2
3
4
5
6
7
8
9
10

  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
          <div class="front">
              <!-- front content -->
          </div>
          <div class="back">
              <!-- back content -->
          </div>
      </div>
  </div>

Here is part of my first (non-working) stab at this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    [<Direct "this.classList.toggle('hover');" >]
    let toggle() = X<unit>

    // skipped definitions.....

    let showAnswer () =
      Div [Attr.Class "flip-container"] -<[
             Attr.Style <| "width: " + width] -< [
            Div [Attr.Class "flipper"] -<[
              Div [Attr.Class "back"] -< [
                welcome]
              Div [Attr.Class "front"] -< [
                hover]]
        ] |>! OnEvent "touchstart" (fun element event ->
            toggle()
          )

I am hoping there is enough there to uncover any misunderstandings I may have in how to approach this problem.

I have managed to get simpler examples working; it is the toggle I am struggling with, I fully expect I am way off in trying to use [<Direct ...>].

The fragment is from an SPA Client.fs.

edit I added the missing Div [Attr.Class "flipper"] -<[ line from my code (cut and paste error-sorry).

.

Yes, here the problem is your use of this in the Direct function. It will refer to the this defined in the context of the toggle function itself, rather than the callback that calls it.

The DOM element is available in the callback as element.Dom. So you can do something like this:

1
2
3
4
5
6
7
8
9

// $element refers to the function's argument called element.
[<Direct "$element.classList.toggle('hover');">]
let toggle (element: Dom.Element) = X<unit>

let showAnswer () =
  Div [ (* ... *) ]
  |>! OnEvent "touchstart" (fun element event ->
    toggle element.Dom
  )
By on 5/6/2015 10:17 AM ()

I just tried your code, and it works very well. I thank you.

By on 5/6/2015 10:45 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper