From ac6fcf83c2852e9bf5e4fa9f61877dfdcf63fe1a Mon Sep 17 00:00:00 2001
From: Felix Edelmann <fxedel@gmail.com>
Date: Thu, 4 Oct 2018 21:39:52 +0200
Subject: [PATCH 1/6] Refactor CSS styles

---
 flip-element.html | 54 +++++++++++++++++++----------------------------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/flip-element.html b/flip-element.html
index 3db8955..ed2a1d4 100644
--- a/flip-element.html
+++ b/flip-element.html
@@ -44,6 +44,7 @@
       * {
         box-sizing: border-box;
       }
+
       .container {
         z-index: 99;
         background-color: var(--flip-element-background-color, white);
@@ -53,6 +54,7 @@
         position: relative;
         width: 100%;
       }
+
       .card {
         position: relative;
         height: 100%;
@@ -60,34 +62,27 @@
         transition: 1s;
         width: 100%;
       }
-      #contentNode {
-        backface-visibility:hidden;
-        position: absolute;
-      }
-      .back { /* Background */
-        transform: rotateY(180deg);
-        -moz-backface-visibility:hidden;
-      }
       .card.flipped {
         transform: rotateY(180deg);
-        -moz-backface-visibility:hidden;
+        backface-visibility: hidden;
+        -moz-backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
       }
-      .toggle {
-        display: block;
-        background-color: rgb(148, 201, 243);
-        padding: 10px;
-        text-align: center;
-        border-radius: 5px;
-        color: #fff;
-        text-decoration: none;
-        border: none;
-        width: 100%;
-        cursor: pointer;
+
+      .card::content > * {
+        backface-visibility: hidden;
+        -moz-backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+        position: absolute;
+      }
+      .card::content > *[back],
+      .card::content > .back {
+        transform: rotateY(180deg);
       }
     </style>
     <div class="container">
       <div id="card" class="card" style$="height: {{_height}}; width: {{_width}};">
-        <content id="contentNode"></content>
+        <content></content>
       </div>
     </div>
   </template>
@@ -115,31 +110,26 @@
         }
       },
 
-      _applyStyles: function() {
+      _computeSize: function() {
         if (this.getContentChildren('content')) {
           var height = 0;
           var width = 0;
+
           for (var i = 0; this.getContentChildren('content').length > i; i++) {
             var child = this.getContentChildren('content')[i];
-            height = child.clientHeight > height ? child.clientHeight : height;
-            width = child.clientWidth > width ? child.clientWidth : width;
-            child.style['backface-visibility'] = 'hidden';
-            child.style['position'] = 'absolute';
-            if (child.hasAttribute('back')) {
-              child.style.transform = 'rotateY(180deg)';
-              child.style['-moz-backface-visibility'] = 'hidden';
-            }
+            height = Math.max(height, child.clientHeight);
+            width = Math.max(width, child.clientWidth);
           }
+
           this._height = height ? height + 'px' : '100%';
           this._width = width ? width + 'px' : '100%';
-          this.updateStyles();
         }
       },
 
       attached: function() {
         var host = this;
         this._observer = Polymer.dom(this.$.contentNode).observeNodes(function(info) {
-          host._applyStyles();
+          host._computeSize();
         });
       },
 

From ff30c84df6467daf96ede1cf61da324a67444747 Mon Sep 17 00:00:00 2001
From: Felix Edelmann <fxedel@gmail.com>
Date: Thu, 4 Oct 2018 22:41:57 +0200
Subject: [PATCH 2/6] Replace CSS flipped class with element property

---
 flip-element.html | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/flip-element.html b/flip-element.html
index ed2a1d4..0bd1dc8 100644
--- a/flip-element.html
+++ b/flip-element.html
@@ -62,7 +62,7 @@
         transition: 1s;
         width: 100%;
       }
-      .card.flipped {
+      :host:not([is-front-side]) .card {
         transform: rotateY(180deg);
         backface-visibility: hidden;
         -moz-backface-visibility: hidden;
@@ -104,9 +104,10 @@
           type: String,
           value: '100%'
         },
-        _front: {
+        isFrontSide: {
           type: Boolean,
-          value: true
+          value: true,
+          reflectToAttribute: true
         }
       },
 
@@ -134,13 +135,7 @@
       },
 
       flip: function() {
-        this._front = !this._front;
-        document.querySelector('.card');
-        this.$.card.classList.toggle('flipped');
-      },
-
-      isFrontSide: function() {
-        return this._front;
+        this.isFrontSide = !this.isFrontSide;
       }
     });
   </script>

From 77457eca70edb1b841ad4648bd16f7707c10330d Mon Sep 17 00:00:00 2001
From: Felix Edelmann <fxedel@gmail.com>
Date: Thu, 4 Oct 2018 22:47:45 +0200
Subject: [PATCH 3/6] Add documentation to properties and methods

---
 flip-element.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/flip-element.html b/flip-element.html
index 0bd1dc8..bf549bd 100644
--- a/flip-element.html
+++ b/flip-element.html
@@ -104,6 +104,7 @@
           type: String,
           value: '100%'
         },
+        /** If true, the child with the `front` attribute is shown, else, the child with the `back` attribute is shown. */
         isFrontSide: {
           type: Boolean,
           value: true,
@@ -134,6 +135,9 @@
         });
       },
 
+      /**
+       * Shows the front side if the back side is currently shown and vice versa.
+       */
       flip: function() {
         this.isFrontSide = !this.isFrontSide;
       }

From b5f9cdba317f6b017819d55848a9181ebe90fde3 Mon Sep 17 00:00:00 2001
From: Felix Edelmann <fxedel@gmail.com>
Date: Thu, 4 Oct 2018 22:48:50 +0200
Subject: [PATCH 4/6] Fix demo box-shadow issue

---
 demo/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/index.html b/demo/index.html
index 4765d46..f5d58e5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,7 +18,7 @@
 
     <div class="vertical-section-container centered">
       <h3>Basic flip-element Demo</h3>
-      <demo-snippet style="height: 300px;">
+      <demo-snippet>
         <template>
           <flip-element>
             <div back style="width: 360px; height: 300px;"><iframe width="360" height="300" src="https://www.youtube.com/embed/c6SMZAOwrQQ" frameborder="0" allowfullscreen></iframe></div>

From 9d887add32885346949fc210acfa6315742eae6c Mon Sep 17 00:00:00 2001
From: Felix Edelmann <fxedel@gmail.com>
Date: Thu, 4 Oct 2018 23:59:15 +0200
Subject: [PATCH 5/6] Add flip-right, backface-visible properties

---
 flip-element.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/flip-element.html b/flip-element.html
index bf549bd..af6e7b2 100644
--- a/flip-element.html
+++ b/flip-element.html
@@ -62,22 +62,26 @@
         transition: 1s;
         width: 100%;
       }
+      :host([flip-right]) .card {
+        transform-origin: right center;
+      }
       :host:not([is-front-side]) .card {
         transform: rotateY(180deg);
+      }
+      :host:not([backface-visible]) .card {
         backface-visibility: hidden;
         -moz-backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
       }
 
       .card::content > * {
-        backface-visibility: hidden;
-        -moz-backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
         position: absolute;
+        z-index: 90;
       }
       .card::content > *[back],
       .card::content > .back {
         transform: rotateY(180deg);
+        z-index: 89;
       }
     </style>
     <div class="container">
@@ -109,6 +113,18 @@
           type: Boolean,
           value: true,
           reflectToAttribute: true
+        },
+        /** Whether to flip the back element to the right of the front element. */
+        flipRight: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
+        /** Whether a side should remain visible (but mirrored) when being flipped to the back. */
+        backfaceVisible: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
         }
       },
 

From bccf94c2e43d24fc73a86f5219c15aecf6e2381a Mon Sep 17 00:00:00 2001
From: Felix Edelmann <fxedel@gmail.com>
Date: Thu, 4 Oct 2018 23:59:29 +0200
Subject: [PATCH 6/6] Add another demo element

---
 demo/index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index f5d58e5..3cb8bc5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,11 +17,23 @@
   <body>
 
     <div class="vertical-section-container centered">
-      <h3>Basic flip-element Demo</h3>
+      <h3>Basic <code>&lt;flip-element&gt;</code></h3>
       <demo-snippet>
         <template>
           <flip-element>
-            <div back style="width: 360px; height: 300px;"><iframe width="360" height="300" src="https://www.youtube.com/embed/c6SMZAOwrQQ" frameborder="0" allowfullscreen></iframe></div>
+            <img front style="width: 360px; height: 300px;" src="../images/logo.jpg">
+            <div back style="width: 360px; height: 300px;">
+              <iframe width="360" height="300" src="https://www.youtube.com/embed/c6SMZAOwrQQ" frameborder="0" allowfullscreen></iframe>
+            </div>
+          </flip-element>
+          <button onclick="flip(event)">Flip</button>
+        </template>
+      </demo-snippet>
+
+      <h3><code>flip-right backface-visible</code></h3>
+      <demo-snippet>
+        <template>
+          <flip-element flip-right backface-visible>
             <img front style="width: 360px; height: 300px;" src="../images/logo.jpg">
           </flip-element>
           <button onclick="flip(event)">Flip</button>