github-mirrors/pf2015
1
0
Fork 0
mirror of https://github.com/ysoftdevs/pf2015.git synced 2026-01-11 22:41:36 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Use angluar-flippy to flip cards

Browse Source
This commit is contained in:
Juraj Michalek
2014-12-25 14:33:43 +00:00
parent 4dd6fa8c36
commit 7609ffdfd3
6 changed files with 203 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.c9/

113
css/flippy.css Normal file
View File

@@ -0,0 +1,113 @@
flippy {
float: left;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
flippy-front {
position: absolute;
z-index: 900;
width: inherit;
height: inherit;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
flippy-back {
position: absolute;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
flippy.flipped flippy-front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
flippy.flipped flippy-back {
z-index: 1000;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
flippy.fancy {
float: left;
margin: 0 10px 10px 0;
position: relative;
font-size: .8em;
cursor: pointer;
width: 250px;
height: 250px;
}
flippy.fancy img {
height: 100%;
width: 100%;
}
flippy.fancy flippy-front {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: inherit;
height: inherit;
border: 1px solid #ccc;
background: white;
text-align: center;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
flippy.fancy flippy-front.flipped {
border-color: #eee;
/*background: #333;*/
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
flippy.fancy flippy-back {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: inherit;
height: inherit;
border: 1px solid #ccc;
background: white;
text-align: center;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
flippy.fancy flippy-back.flipped {
/*background: #80868d;*/
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

10
css/pexeso.css
View File

@@ -24,6 +24,7 @@
color: #996633; color: #996633;
cursor: pointer; cursor: pointer;
} }
.buttonStyle:active { .buttonStyle:active {
border: thin solid #99CC00; border: thin solid #99CC00;
background-color: #F5FFD2; background-color: #F5FFD2;
@@ -32,8 +33,11 @@
} }
.card { .card {
width: 10em; width: 5em;
height: 10em; height: 5em;
margin: 0.2em;
float: left;
cursor: pointer;
} }
.solved { .solved {
@@ -54,5 +58,5 @@
.mystery { .mystery {
background: blue; background: blue;
color: blue;
} }

29
index.html
View File

@@ -5,17 +5,36 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>PF2015</title> <title>PF2015</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
<script type="text/javascript" src="js/pexeso-controller.js"></script> <script type="text/javascript" src="js/pexeso-controller.js"></script>
<link rel="stylesheet" href="css/pexeso.css" type="text/css" /> <link rel="stylesheet" href="css/pexeso.css" type="text/css" />
<link rel="stylesheet" href="css/flippy.css" />
<script type="text/javascript" src="js/flippy.js"></script>
</head> </head>
<body ng-controller="PexesoController" data-ng-init="init()"> <body ng-controller="PexesoController" data-ng-init="init()">
<div id="mainContent"> <div id="mainContent">
<div ng-repeat="card in board"
class="card"
ng-class="card.state" <flippy ng-repeat="card in board"
ng-click="selectCard(card)" class="fancy"
>{{card.cardId}}</div> ng-class="card.flipState"
ng-click="selectCard(card)"
flip-duration="800"
timing-function="ease-in-out">
<flippy-front>
?
</flippy-front>
<flippy-back>
{{card.cardId}}
</flippy-back>
</flippy>
</body> </body>
</html> </html>

35
js/flippy.js Normal file
View File

@@ -0,0 +1,35 @@
/**
* handles the behaviour of flipping card.
* Soure: https://github.com/zwacky/angular-flippy
*/
angular.module('angular-flippy', [])
.directive('flippy', function() {
return {
restrict: 'EA',
link: function($scope, $elem, $attrs) {
var options = {
flipDuration: ($attrs.flipDuration) ? $attrs.flipDuration : 400,
timingFunction: 'ease-in-out',
};
// setting flip options
angular.forEach(['flippy-front', 'flippy-back'], function(name) {
var el = $elem.find(name);
if (el.length == 1) {
angular.forEach(['', '-ms-', '-webkit-'], function(prefix) {
angular.element(el[0]).css(prefix + 'transition', 'all ' + options.flipDuration/1000 + 's ' + options.timingFunction);
});
}
});
/**
* behaviour for flipping effect.
*/
$scope.flip = function() {
$elem.toggleClass('flipped');
}
}
};
});

29
js/pexeso-controller.js
View File

@@ -1,5 +1,5 @@
angular.module('app', []) angular.module('app', ['angular-flippy'])
.controller('PexesoController', ['$scope', function($scope) { .controller('PexesoController', function($scope, $timeout) {
$scope.languages = { $scope.languages = {
'cs-CZ': { 'cs-CZ': {
title: 'Čeština' title: 'Čeština'
@@ -100,7 +100,8 @@ angular.module('app', [])
cardId: cardId, cardId: cardId,
card: card, card: card,
index: index, index: index,
state: 'mystery' state: 'mystery',
flipState: ''
}; };
}; };
@@ -134,6 +135,11 @@ angular.module('app', [])
$scope.selectionCounter = 0; $scope.selectionCounter = 0;
angular.forEach($scope.selectedCards, function(card) { angular.forEach($scope.selectedCards, function(card) {
card.state = state; card.state = state;
if (state == "mystery") {
card.flipState = '';
} else {
card.flipState = 'flipped';
}
}); });
$scope.selectedCards = []; $scope.selectedCards = [];
}; };
@@ -163,6 +169,13 @@ angular.module('app', [])
return true; return true;
}; };
/**
* Reset selection of current cards
*/
$scope.resetSelection = function() {
$scope.setSelectionState('mystery');
};
/** /**
* Click handler to select card. * Click handler to select card.
*/ */
@@ -174,8 +187,9 @@ angular.module('app', [])
$scope.selectionCounter += 1; $scope.selectionCounter += 1;
if ($scope.selectionCounter == $scope.maxSelected + 1) { if ($scope.selectionCounter == $scope.maxSelected + 1) {
$scope.setSelectionState('mystery'); $scope.resetSelection();
return; return;
} else { } else {
$scope.selectedCards.push(card); $scope.selectedCards.push(card);
@@ -183,11 +197,14 @@ angular.module('app', [])
if (card.state == 'mystery') { if (card.state == 'mystery') {
card.state = 'selected' + $scope.selectionCounter; card.state = 'selected' + $scope.selectionCounter;
card.flipState = 'flipped';
} }
if ($scope.areAllSelectedSame()) { if ($scope.areAllSelectedSame()) {
$scope.setSelectionState('solved'); $scope.setSelectionState('solved');
} } else if ($scope.selectionCounter == $scope.maxSelected) {
$timeout($scope.resetSelection, 1000);
}
}; };
@@ -199,4 +216,4 @@ angular.module('app', [])
$scope.generateBoard(4*4); $scope.generateBoard(4*4);
}; };
}]); });