mirror of
https://github.com/ysoftdevs/pf2015.git
synced 2026-01-11 14:30:52 +01:00
Use angluar-flippy to flip cards
This commit is contained in:
Juraj Michalek
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.c9/
|
||||
113
css/flippy.css
Normal file
113
css/flippy.css
Normal 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);
|
||||
}
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
color: #996633;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttonStyle:active {
|
||||
border: thin solid #99CC00;
|
||||
background-color: #F5FFD2;
|
||||
@@ -32,8 +33,11 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
margin: 0.2em;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.solved {
|
||||
@@ -54,5 +58,5 @@
|
||||
|
||||
.mystery {
|
||||
background: blue;
|
||||
color: blue;
|
||||
|
||||
}
|
||||
29
index.html
29
index.html
@@ -5,17 +5,36 @@
|
||||
<meta charset="utf-8">
|
||||
<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="js/pexeso-controller.js"></script>
|
||||
<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>
|
||||
|
||||
<body ng-controller="PexesoController" data-ng-init="init()">
|
||||
<div id="mainContent">
|
||||
<div ng-repeat="card in board"
|
||||
class="card"
|
||||
ng-class="card.state"
|
||||
ng-click="selectCard(card)"
|
||||
>{{card.cardId}}</div>
|
||||
|
||||
|
||||
<flippy ng-repeat="card in board"
|
||||
class="fancy"
|
||||
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>
|
||||
</html>
|
||||
|
||||
35
js/flippy.js
Normal file
35
js/flippy.js
Normal 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');
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
angular.module('app', [])
|
||||
.controller('PexesoController', ['$scope', function($scope) {
|
||||
angular.module('app', ['angular-flippy'])
|
||||
.controller('PexesoController', function($scope, $timeout) {
|
||||
$scope.languages = {
|
||||
'cs-CZ': {
|
||||
title: 'Čeština'
|
||||
@@ -100,7 +100,8 @@ angular.module('app', [])
|
||||
cardId: cardId,
|
||||
card: card,
|
||||
index: index,
|
||||
state: 'mystery'
|
||||
state: 'mystery',
|
||||
flipState: ''
|
||||
};
|
||||
};
|
||||
|
||||
@@ -134,6 +135,11 @@ angular.module('app', [])
|
||||
$scope.selectionCounter = 0;
|
||||
angular.forEach($scope.selectedCards, function(card) {
|
||||
card.state = state;
|
||||
if (state == "mystery") {
|
||||
card.flipState = '';
|
||||
} else {
|
||||
card.flipState = 'flipped';
|
||||
}
|
||||
});
|
||||
$scope.selectedCards = [];
|
||||
};
|
||||
@@ -163,6 +169,13 @@ angular.module('app', [])
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset selection of current cards
|
||||
*/
|
||||
$scope.resetSelection = function() {
|
||||
$scope.setSelectionState('mystery');
|
||||
};
|
||||
|
||||
/**
|
||||
* Click handler to select card.
|
||||
*/
|
||||
@@ -174,8 +187,9 @@ angular.module('app', [])
|
||||
|
||||
$scope.selectionCounter += 1;
|
||||
|
||||
|
||||
if ($scope.selectionCounter == $scope.maxSelected + 1) {
|
||||
$scope.setSelectionState('mystery');
|
||||
$scope.resetSelection();
|
||||
return;
|
||||
} else {
|
||||
$scope.selectedCards.push(card);
|
||||
@@ -183,11 +197,14 @@ angular.module('app', [])
|
||||
|
||||
if (card.state == 'mystery') {
|
||||
card.state = 'selected' + $scope.selectionCounter;
|
||||
card.flipState = 'flipped';
|
||||
}
|
||||
|
||||
if ($scope.areAllSelectedSame()) {
|
||||
$scope.setSelectionState('solved');
|
||||
}
|
||||
} else if ($scope.selectionCounter == $scope.maxSelected) {
|
||||
$timeout($scope.resetSelection, 1000);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@@ -199,4 +216,4 @@ angular.module('app', [])
|
||||
$scope.generateBoard(4*4);
|
||||
};
|
||||
|
||||
}]);
|
||||
});
|
||||
Reference in New Issue
Block a user