diff --git a/sass/feed_animations.scss b/sass/feed_animations.scss
new file mode 100644
index 0000000..0943f47
--- /dev/null
+++ b/sass/feed_animations.scss
@@ -0,0 +1,18 @@
+flashcard.ng-enter div,
+flashcard.ng-leave div,
+flashcard.ng-move div {
+ -webkit-transition: 1.5s linear all;
+ transition: 1.5s linear all;
+ background-color: red;
+}
+
+flashcard.ng-move div,
+flashcard.ng-leave.ng-leave-active div {
+ opacity: 0;
+}
+
+flashcard.ng-move.ng-move.active div,
+flashcard.ng-enter.ng-enter-active {
+
+ opacity: 1;
+}
\ No newline at end of file
diff --git a/sass/flashier.scss b/sass/flashier.scss
index f018932..d77bba2 100644
--- a/sass/flashier.scss
+++ b/sass/flashier.scss
@@ -1 +1,2 @@
@import "materialize";
+@import "feed_animations";
\ No newline at end of file
diff --git a/scripts/FeedController.js b/scripts/FeedController.js
index 9898424..87b8be9 100644
--- a/scripts/FeedController.js
+++ b/scripts/FeedController.js
@@ -1,4 +1,4 @@
-angular.module('flashy.FeedController', ['ui.router']).
+angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']).
controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
console.log('Hello from feed');
@@ -13,7 +13,8 @@ angular.module('flashy.FeedController', ['ui.router']).
return Math.max(1, Math.floor(avail / 250));
}
- function refreshColumnWidth() {
+ $scope.refreshColumnWidth = function() {
+ console.log('refreshing column width');
avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({
@@ -24,12 +25,11 @@ angular.module('flashy.FeedController', ['ui.router']).
width: width - 12 + 'px',
height: (width * 3 / 5) + 'px'
});
- }
+ };
$scope.refreshLayout = function() {
- refreshColumnWidth();
// check if we actually need to refresh the whole layout
- if (calculate_cols() == $scope.numCols) return;
+ if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = calculate_cols();
console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = [];
@@ -39,9 +39,12 @@ angular.module('flashy.FeedController', ['ui.router']).
cols[i % $scope.numCols].push(card);
});
// wait until the next digest cycle to update cardCols
+
$timeout(function() {
$scope.cardCols = cols;
+ $timeout($scope.refreshColumnWidth);
});
+
};
angular.element($window).bind('resize', $scope.refreshLayout);
@@ -71,6 +74,7 @@ angular.module('flashy.FeedController', ['ui.router']).
}
console.log('adding card to column ' + colNum);
console.log(card);
+ $scope.cards.push(data);
$timeout(function() {
$scope.cardCols[colNum].unshift(card);
});
@@ -142,6 +146,7 @@ angular.module('flashy.FeedController', ['ui.router']).
if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
}
+
}).
error(function(error) {
console.log('something went wrong pushing a card!');
@@ -209,4 +214,14 @@ angular.module('flashy.FeedController', ['ui.router']).
$(document).off('keydown');
});
+ $scope.shuffleCards = function() {
+ $timeout(function() {
+ (function(o) {
+ for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
+ return o;
+ })($scope.cardCols[0]);
+ });
+ };
+ window.feedscope = $scope;
+
});
diff --git a/scripts/FlashcardDirective.js b/scripts/FlashcardDirective.js
index 20687d6..70afe08 100644
--- a/scripts/FlashcardDirective.js
+++ b/scripts/FlashcardDirective.js
@@ -11,16 +11,6 @@ angular.module('flashy.FlashcardDirective', []).
},
link: function(scope, element) {
/* Handles width of the card */
- function refresh_width() {
- avail = $window.innerWidth - 17;
- width = Math.floor(avail / Math.floor(avail / 250) - 12);
- element.children().css({
- width: width + 'px',
- height: (width * 3 / 5) + 'px',
- });
- };
- angular.element($window).bind('resize', refresh_width);
- refresh_width();
scope.textPieces = [];
scope.flashcard.mask.sort(function(a, b) {
return a[0] - b[0];
diff --git a/styles/feed_animations.css b/styles/feed_animations.css
new file mode 100644
index 0000000..d997cd7
--- /dev/null
+++ b/styles/feed_animations.css
@@ -0,0 +1,10 @@
+flashcard.ng-enter div, flashcard.ng-leave div, flashcard.ng-move div {
+ -webkit-transition: 1.5s linear all;
+ transition: 1.5s linear all;
+ background-color: red; }
+
+flashcard.ng-move div, flashcard.ng-leave.ng-leave-active div {
+ opacity: 0; }
+
+flashcard.ng-move.ng-move.active div, flashcard.ng-enter.ng-enter-active {
+ opacity: 1; }
diff --git a/styles/flashier.css b/styles/flashier.css
index 8aae859..0ebe7c1 100644
--- a/styles/flashier.css
+++ b/styles/flashier.css
@@ -7985,3 +7985,48 @@ button.picker__today:focus, button.picker__clear:focus, button.picker__close:foc
.picker--time .picker__box {
margin-bottom: 5em; }
}
+
+.card-move {
+ position: relative;
+ top: 26px; }
+
+.card-move.card-move-active {
+ transition: all 0.5s ease;
+ top: 0; }
+
+.card-move + div {
+ /* cannot have transition on this element */
+ /*transition: all 1s ease;*/
+ position: relative;
+ top: -26px; }
+
+.card-move.card-move-active + div {
+ transition: all 0.5s ease;
+ position: relative;
+ top: 0; }
+
+.card-enter {
+ position: relative;
+ opacity: 0;
+ height: 0;
+ left: 100px; }
+
+.card-enter.card-enter-active {
+ transition: all 0.5s ease;
+ opacity: 1;
+ left: 0;
+ height: 26px; }
+
+.card-leave {
+ position: relative;
+ opacity: 1;
+ left: 0;
+ height: 26px;
+ z-index: -100; }
+
+.card-leave.card-leave-active {
+ transition: all 0.5s ease;
+ opacity: 0;
+ left: 100px;
+ height: 0;
+ top: -13px; }
diff --git a/templates/feed.html b/templates/feed.html
index dfa6d73..93d221e 100644
--- a/templates/feed.html
+++ b/templates/feed.html
@@ -11,9 +11,7 @@
</div>-->
<div class="cardColumn" ng-repeat="col in cardCols">
- <div ng-repeat="card in col">
- <flashcard flashcard-obj="card" refresh="hide(card)"/>
- </div>
+ <flashcard flashcard-obj="card" ng-repeat="card in col"/>
</div>
</div>