ExultCorp · simondate · Jan 17, 2017 · Jan 18, 2017 · Jan 18, 2017 · Jan 18, 2017
diff --git a/.bowerrc b/.bowerrc
diff --git a/README.md b/README.md
@@ -139,3 +139,12 @@ This component has been tested to the standard Adapt browser specification.
 ##Important
 
 Please feel free to add issues and updates needed in the component.
+
+----------------------------
+
+**Version number:**  3.0.0
+**Framework versions:** 5+
+**Author / maintainer:** Newgen Enterprise (formerly Exult)
+**Accessibility support:** does not conform to WAI AA
+**RTL support:** Yes
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera
diff --git a/assets/flip_1.png b/assets/flip_1.png
diff --git a/assets/flip_2.png b/assets/flip_2.png
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
     "name": "adapt-contrib-flipcard",
-    "framework": "^2.0.0",
-    "version": "2.0.2",
+    "framework": ">=5.0.0",
+    "version": "3.0.0",
     "homepage": "https://github.com/ExultCorp/adapt-contrib-flipcard",
     "issues": "https://github.com/ExultCorp/adapt-contrib-flipcard/issues",
     "repository": "git://github.com/ExultCorp/adapt-contrib-flipcard.git",

diff --git a/example.json b/example.json
@@ -26,7 +26,8 @@
                 "alt": "flipcard item 1 graphic alt text here."
             },
             "backTitle": "Heading 2",
-            "backBody": "<ul><li>This is list item 1.</li><li>This is list item 2.</li></ul>"
+            "backBody": "<ul><li>This is list item 1.</li><li>This is list item 2.</li></ul>",
+            "_showTitleFront": true
         }
     ]
 },
@@ -59,7 +60,8 @@
                 "alt": "flipcard item 1 graphic alt text here."
             },
             "backTitle": "Heading 2",
-            "backBody": "<ul><li>This is list item 1.</li><li>This is list item 2.</li></ul>"
+            "backBody": "<ul><li>This is list item 1.</li><li>This is list item 2.</li></ul>",
+            "_showTitleFront": true
         }
     ]
 }

diff --git a/less/flipcard.less b/less/flipcard.less
@@ -3,106 +3,128 @@
 @flipcard-item-rotate-Y-plus180deg: rotateY(180deg);
 @flipcard-item-rotate-Y-0deg: rotateY(0deg);
 
-.flipcard-component {
-    .flipcard-item {
+.flipcard__item {
+  position: relative;
+  float: left;
+  width: 50%;
+  height: 320px;
+  color: @font-color-inverted;
+
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+  -ms-perspective: 600px;
+  -o-perspective: 600px;
+  perspective: 600px;
+
+  html.size-medium &,
+  html.size-small & {
+    width: 100%;
+  }
+
+  &-face {
+    position: absolute;
+    z-index: 110;
+    top: 0;
+    left: 0;
+    float: none;
+    overflow: hidden;
+    width: 98%;
+    height: 98%;
+    margin: 1%;
+    cursor: pointer;
+    border: 1px solid @item-color;
+    background: @item-color;
+
+    -webkit-transition: @flipcard-item-transition;
+    -moz-transition: @flipcard-item-transition;
+    -ms-transition: @flipcard-item-transition;
+    -o-transition: @flipcard-item-transition;
+    transition: @flipcard-item-transition;
+
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    -ms-transform-style: preserve-3d;
+    -o-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -o-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+
+  &-front {
+    -webkit-transform: @flipcard-item-rotate-Y-0deg;
+    -moz-transform: @flipcard-item-rotate-Y-0deg;
+    -ms-transform: @flipcard-item-rotate-Y-0deg;
+    -o-transform: @flipcard-item-rotate-Y-0deg;
+    transform: @flipcard-item-rotate-Y-0deg;
+
+    .flipcard__item-frontImage {
+      width: 100%;
+      height: auto;
+    }
+
+    .flipcard__item-front-title {
+      position: absolute;
+      background-color: rgba(100,100,100,0.8);
+      font-weight: 300;
+      line-height: 120%;
+      width: 100%;
+      font-size: 130%;
+      height: 20%;
+      padding-top: 15px;
+      padding-bottom: 15px;
+      top: 35%;
+      opacity: .8;
+
+      .flipcard__item-front-title-inner {
+        color: white;
+        text-align: center;
         position: relative;
-        float: left;
-        width: 50%;
-        height: 320px;
-        color: @item-text-color;
-
-        -webkit-perspective: 600px;
-        -moz-perspective: 600px;
-        -ms-perspective: 600px;
-        -o-perspective: 600px;
-        perspective: 600px;
-
-        html.size-medium &,
-        html.size-small & {
-            width: 100%;
-        }
-
-        .flipcard-item-face {
-            position: absolute;
-            z-index: 110;
-            top: 0;
-            left: 0;
-            float: none;
-            overflow: hidden;
-            width: 98%;
-            height: 98%;
-            margin: 1%;
-            cursor: pointer;
-            border: 1px solid @secondary-color;
-            background: @primary-color;
-
-            -webkit-transition: @flipcard-item-transition;
-            -moz-transition: @flipcard-item-transition;
-            -ms-transition: @flipcard-item-transition;
-            -o-transition: @flipcard-item-transition;
-            transition: @flipcard-item-transition;
-
-            -webkit-transform-style: preserve-3d;
-            -moz-transform-style: preserve-3d;
-            -ms-transform-style: preserve-3d;
-            -o-transform-style: preserve-3d;
-            transform-style: preserve-3d;
-
-            -webkit-backface-visibility: hidden;
-            -moz-backface-visibility: hidden;
-            -ms-backface-visibility: hidden;
-            -o-backface-visibility: hidden;
-            backface-visibility: hidden;
-
-            &.flipcard-item-front {
-                -webkit-transform: @flipcard-item-rotate-Y-0deg;
-                -moz-transform: @flipcard-item-rotate-Y-0deg;
-                -ms-transform: @flipcard-item-rotate-Y-0deg;
-                -o-transform: @flipcard-item-rotate-Y-0deg;
-                transform: @flipcard-item-rotate-Y-0deg;
-
-                .flipcard-item-frontImage {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-
-            &.flipcard-item-back {
-                padding: @item-padding;
-
-                -webkit-box-sizing: border-box;
-                -moz-box-sizing: border-box;
-                -ms-box-sizing: border-box;
-                -o-box-sizing: border-box;
-                box-sizing: border-box;
-
-                -webkit-transform: @flipcard-item-rotate-Y-minus180deg;
-                -moz-transform: @flipcard-item-rotate-Y-minus180deg;
-                -ms-transform: @flipcard-item-rotate-Y-minus180deg;
-                -o-transform: @flipcard-item-rotate-Y-minus180deg;
-                transform: @flipcard-item-rotate-Y-minus180deg;
-            }
-        }
-
-        &.flipcard-flip {
-            .flipcard-item-front {
-                -webkit-transform: @flipcard-item-rotate-Y-plus180deg;
-                -moz-transform: @flipcard-item-rotate-Y-plus180deg;
-                -ms-transform: @flipcard-item-rotate-Y-plus180deg;
-                -o-transform: @flipcard-item-rotate-Y-plus180deg;
-                transform: @flipcard-item-rotate-Y-plus180deg;
-            }
-
-            .flipcard-item-back {
-                overflow-x: hidden;
-                overflow-y: auto;
-
-                -webkit-transform: @flipcard-item-rotate-Y-0deg;
-                -moz-transform: @flipcard-item-rotate-Y-0deg;
-                -ms-transform: @flipcard-item-rotate-Y-0deg;
-                -o-transform: @flipcard-item-rotate-Y-0deg;
-                transform: @flipcard-item-rotate-Y-0deg;
-            }
-        }
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &-back {
+    padding: @item-padding;
+
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+
+    -webkit-transform: @flipcard-item-rotate-Y-minus180deg;
+    -moz-transform: @flipcard-item-rotate-Y-minus180deg;
+    -ms-transform: @flipcard-item-rotate-Y-minus180deg;
+    -o-transform: @flipcard-item-rotate-Y-minus180deg;
+    transform: @flipcard-item-rotate-Y-minus180deg;
+  }
+
+  &.flipcard-flip {
+    .flipcard__item-front {
+      -webkit-transform: @flipcard-item-rotate-Y-plus180deg;
+      -moz-transform: @flipcard-item-rotate-Y-plus180deg;
+      -ms-transform: @flipcard-item-rotate-Y-plus180deg;
+      -o-transform: @flipcard-item-rotate-Y-plus180deg;
+      transform: @flipcard-item-rotate-Y-plus180deg;
+    }
+
+    .flipcard__item-back {
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      -webkit-transform: @flipcard-item-rotate-Y-0deg;
+      -moz-transform: @flipcard-item-rotate-Y-0deg;
+      -ms-transform: @flipcard-item-rotate-Y-0deg;
+      -o-transform: @flipcard-item-rotate-Y-0deg;
+      transform: @flipcard-item-rotate-Y-0deg;
     }
+  }
 }
diff --git a/properties.schema b/properties.schema
@@ -17,7 +17,7 @@
       "type": "string",
       "required": true,
       "enum": ["full-width", "half-width", "both"],
-      "default": "both",
+      "default": "full-width",
       "editorOnly": true
     },
     "instruction": {
@@ -26,7 +26,8 @@
       "default": "",
       "inputType": "Text",
       "validators": [],
-      "help": "This is the instruction text"
+      "help": "This is the instruction text",
+      "translatable": true
     },
     "_flipType": {
       "type": "string",
@@ -36,7 +37,7 @@
       "title": "Set flip type",
       "default": "allFlip",
       "validators": ["required"],
-      "help": "'singleFlip' or 'allFlip'"
+      "help": "'singleFlip': only one backface visible at a time; 'allFlip': more than one backface may be visible at a time"
     },
     "_flipTime": {
       "type": "number",
@@ -66,7 +67,8 @@
                 "default": "",
                 "inputType": "Text",
                 "validators": [],
-                "help": "The alternative text for this image"
+                "help": "The alternative text for this image",
+                "translatable": true
               },
               "src": {
                 "type": "string",
@@ -85,7 +87,20 @@
             "title": "Item Title",
             "default": "",
             "validators": [],
-            "help": "Enter a title text for back side of flipcard element"
+            "help": "Enter a title text for back side of flipcard element",
+            "translatable": true
+          },
+          "_showTitleFront": {
+            "type": "boolean",
+            "required": false,
+            "inputType": {
+              "type": "Boolean",
+              "options": [false, true]
+            },
+            "title": "Show title on front",
+            "default": false,
+            "help": "Set to true to show the title on the flipcard's front",
+            "translatable": true
           },
           "backBody": {
             "type": "string",
@@ -94,10 +109,11 @@
             "title": "Item Body",
             "default": "",
             "validators": [],
-            "help": "Enter body text for back side of flipcard element"
+            "help": "Enter body text for back side of flipcard element",
+            "translatable": true
           }
         }
       }
     }
   }
-}
+}
diff --git a/templates/flipcard.hbs b/templates/flipcard.hbs
@@ -1,21 +1,26 @@
 {{! Maintainers - Himanshu Rajotia <[email protected]>}}
-<div class="flipcard-inner component-inner" role="region" aria-label="{{_globals._components._flipcard.ariaRegion}}">
+<div class="flipcard__inner component__inner" role="region" aria-label="{{_globals._components._flipcard.ariaRegion}}">
     {{> component this}}
-    <div class="flipcard-widget component-widget clearfix">
+    <div class="flipcard__widget component__widget clearfix">
         {{#each _items}}
-        <div class="flipcard-item component-item item-{{@index}}">
-            <div class="flipcard-item-face flipcard-item-front">
-                <img src="{{frontImage.src}}" class="flipcard-item-frontImage" aria-label="{{frontImage.alt}}" tabindex="0">
+        <div class="flipcard__item component__item item-{{@index}}">
+            <div class="flipcard__item-face flipcard__item-front">
+                <img src="{{frontImage.src}}" class="flipcard__item-frontImage" aria-label="{{frontImage.alt}}" tabindex="0">
+                {{#if _showTitleFront}}
+                <div class="flipcard__item-front-title">
+                    <div class="flipcard__item-front-title-inner">{{{backTitle}}}</div>
+                </div>
+                {{/if}}
             </div>
 
-            <div class="flipcard-item-face flipcard-item-back">
+            <div class="flipcard__item-face flipcard__item-back">
                 {{#if backTitle}}
-                <div class="flipcard-item-back-title">
+                <div class="flipcard__item-back-title">
                 {{{backTitle}}}
                 </div>
                 {{/if}}
                 {{#if backBody}}
-                <div class="flipcard-item-back-body">
+                <div class="flipcard__item-back-body">
                 {{{backBody}}}
                 </div>
                 {{/if}}