Skip to content

Allow book-like flip method #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fxedel wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Allow book-like flip method #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac6fcf8
Refactor CSS styles
fxedel Oct 4, 2018
ff30c84
Replace CSS flipped class with element property
fxedel Oct 4, 2018
77457ec
Add documentation to properties and methods
fxedel Oct 4, 2018
b5f9cdb
Fix demo box-shadow issue
fxedel Oct 4, 2018
9d887ad
Add flip-right, backface-visible properties
fxedel Oct 4, 2018
bccf94c
Add another demo element
fxedel Oct 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,23 @@
<body>

<div class="vertical-section-container centered">
<h3>Basic flip-element Demo</h3>
<demo-snippet style="height: 300px;">
<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>
Expand Down
85 changes: 45 additions & 40 deletions flip-element.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
* {
box-sizing: border-box;
}

.container {
z-index: 99;
background-color: var(--flip-element-background-color, white);
Expand All @@ -53,41 +54,39 @@
position: relative;
width: 100%;
}

.card {
position: relative;
height: 100%;
transform-style: preserve-3d;
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;
}
</style>
<div class="container">
<div id="card" class="card" style$="height: {{_height}}; width: {{_width}};">
<content id="contentNode"></content>
<content></content>
</div>
</div>
</template>
Expand All @@ -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;
}
});
</script>
Expand Down