diff --git a/demo/index.html b/demo/index.html
index 4765d46..3cb8bc5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,11 +17,23 @@
-
Basic flip-element Demo
-
+ Basic <flip-element>
+
-
+ 
+
+
+
+
+
+
+
+
+ flip-right backface-visible
+
+
+
diff --git a/flip-element.html b/flip-element.html
index 3db8955..af6e7b2 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,31 @@
transition: 1s;
width: 100%;
}
- #contentNode {
- backface-visibility:hidden;
- position: absolute;
+ :host([flip-right]) .card {
+ transform-origin: right center;
}
- .back { /* Background */
+ :host:not([is-front-side]) .card {
transform: rotateY(180deg);
- -moz-backface-visibility:hidden;
}
- .card.flipped {
- transform: rotateY(180deg);
- -moz-backface-visibility:hidden;
+ :host:not([backface-visible]) .card {
+ 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 > * {
+ position: absolute;
+ z-index: 90;
+ }
+ .card::content > *[back],
+ .card::content > .back {
+ transform: rotateY(180deg);
+ z-index: 89;
}
@@ -109,48 +108,54 @@
type: String,
value: '100%'
},
- _front: {
+ /** If true, the child with the `front` attribute is shown, else, the child with the `back` attribute is shown. */
+ isFrontSide: {
type: Boolean,
- value: true
+ 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
}
},
- _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();
});
},
+ /**
+ * Shows the front side if the back side is currently shown and vice versa.
+ */
flip: function() {
- this._front = !this._front;
- document.querySelector('.card');
- this.$.card.classList.toggle('flipped');
- },
-
- isFrontSide: function() {
- return this._front;
+ this.isFrontSide = !this.isFrontSide;
}
});