Skip to content

Instantly share code, notes, and snippets.

@jasper07

jasper07/test1.html

Created August 24, 2014 04:05
Show Gist options
  • Save jasper07/a9664278496629576f75 to your computer and use it in GitHub Desktop.
Save jasper07/a9664278496629576f75 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<style>
.flip {
-webkit-perspective: 800;
width: 150px;
height: 150px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatey(180deg);
-webkit-transition: -webkit-transform 0.1s ease-in;
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatey(180deg);
-webkit-transition: -webkit-transform 0.1s ease-in;
background: blue;
background: white;
color: black;
cursor: pointer;
}
</style>
<script>
jQuery(function() {
sap.ui.core.Control.extend('FlipCard', {
metadata: {
properties: {
frontText: 'string',
backText: 'string'
},
events: {
click: {}
}
},
renderer: function (oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("flip");
oRm.writeClasses();
oRm.write(">");
oRm.write('<div class="card">');
oRm.write('<div class="face front">');
oRm.write(oControl.getFrontText());
oRm.write('</div>');
oRm.write('<div class="face back">');
oRm.write(oControl.getBackText());
oRm.write('</div>');
oRm.write('</div>');
oRm.write("</div>");
},
onAfterRendering: function () {
var $this = this.$();
var self = this;
$this.click(function () {
if ($(this).hasClass('flipped') === false) {
self.fireClick();
}
});
$this.find('.card').mouseover(function () {
$(this).addClass('flipped');
});
$this.find('.card').mouseleave(function () {
$(this).removeClass('flipped');
});
}
});
var ctrl = new FlipCard({
frontText: 'Front',
backText: 'Back',
click: function () {
alert('I am click');
}
});
ctrl.placeAt('content');
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment