Class: FlipCard

PR. FlipCard

The flip widget creates a page-flip effect, for legacy reasons it is sometimes referred to as a page-flip widget. However, the flip effect does not need to be restricted to flipping a whole page (even though the CSS class names seem to suggest this), the widget can be placed within any element that is required to flip.

The flip widget has a more complex markup arrangement that many other widgets and also requires that an element be placed as a parent of the widget element. The widget requires two elements to be placed inside of it, one that corresponds to the front-face and one that corresponds to the back-face. These face elements can contain any of elements, including other widgets. See the example markup for the specification of the required HTML.

The flip widget is controlled via a button which fires a PAGE_FLIP event, due to this the flip widget requires an ID for the button to reference it by. All of the classes required for the flip widget are contained with common.css.

HTML Parameters

These parameters are required

id="{{id}}" Required
The ID of the flip widget, required as the widget is controlled via a button.
data-widget="FLIP" Required
The identifier for the widget type.

Example

Flip HTML Specification

The following example shows the HTML structure for creating a page flip along with the accompanying button to initiate the flip behaviour. The inline style on the containing element is required to give dimensions to the widget although should be extracted into a stylesheet. An ID is required on the widget element because it is referenced by the button.

<!-- Flip Widget -->
<div class="page card-perspective" style="width:100%; height:100%">
  <div id="uniqueid1" class="card flipped" data-widget="FLIP">
    <div class="back face"><!-- Content omitted for brevity --></div>
    <div class="front face"><!-- Content omitted for brevity --></div>
  </div>
</div>

<!-- Flip Button -->
<div id="uniqueid2" data-widget="BUTTON" data-action="PAGE_FLIP" data-target="uniqueid1">
  <img src="assets/button.png" />
</div>
Author:
  • AppStudio Widgets
Source:
  • widgets/FlipWidget.js, line 2

Extends

  • PR.BaseWidget

Members

backHTMLDivElement

The element for the back face.

Source:
  • widgets/FlipWidget.js, line 73

currentFaceString

Currently displayed face.

Source:
  • widgets/FlipWidget.js, line 61

elHTMLDivElement

The HTML div that the widget is attached to

Source:
  • widgets/FlipWidget.js, line 55

frontHTMLDivElement

The element for the front face.

Source:
  • widgets/FlipWidget.js, line 67

isAndroidBoolean

Keeps track of whether we're on a droid device
Droid app currently disables HW acceleration - when it is switched on then android can
use the same flipping code as everyone else

Source:
  • widgets/FlipWidget.js, line 81

Methods

initialize( )

Acts like a constructor, this function triggered by default when you create an object.

Throws:
Error HTML Element not attached.
Source:
  • widgets/FlipWidget.js, line 89

onFlip_( )

The flip effect triggers by passing a card container to this method.

Source:
  • widgets/FlipWidget.js, line 153

resetMargins_( el )

Resets the offset margins for scrolling flips

Parameters:
Name Type Description
el HTMLElement
Source:
  • widgets/FlipWidget.js, line 272

setMargins_( el )

Sets the offset margins for scrolling flips

Parameters:
Name Type Description
el HTMLElement
Source:
  • widgets/FlipWidget.js, line 255
Top