110swag / flashy-frontend

Commit 684d730cab06bf12b1983223cd24a7337594e127

Authored by Andrew Buss 2015-05-26 01:37:50 -0700

refactor; trying to get animations working

Showing 7 changed files with 95 additions and 18 deletions Side-by-side Diff

sass/feed_animations.scss
sass/flashier.scss
scripts/FeedController.js
scripts/FlashcardDirective.js
styles/feed_animations.css
styles/flashier.css
templates/feed.html

	1	+flashcard.ng-enter div,
	2	+flashcard.ng-leave div,
	3	+flashcard.ng-move div {
	4	+ -webkit-transition: 1.5s linear all;
	5	+ transition: 1.5s linear all;
	6	+ background-color: red;
	7	+}
	8	+
	9	+flashcard.ng-move div,
	10	+flashcard.ng-leave.ng-leave-active div {
	11	+ opacity: 0;
	12	+}
	13	+
	14	+flashcard.ng-move.ng-move.active div,
	15	+flashcard.ng-enter.ng-enter-active {
	16	+
	17	+ opacity: 1;
	18	+}

1	1	@import "materialize";
	2	+@import "feed_animations";

1		-angular.module('flashy.FeedController', ['ui.router']).
	1	+angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']).
2	2
3	3	controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
4	4	console.log('Hello from feed');
...	...	@@ -13,7 +13,8 @@
13	13	return Math.max(1, Math.floor(avail / 250));
14	14	}
15	15
16		- function refreshColumnWidth() {
	16	+ $scope.refreshColumnWidth = function() {
	17	+ console.log('refreshing column width');
17	18	avail = $window.innerWidth - 17;
18	19	width = Math.floor(avail / Math.floor(avail / 250));
19	20	$('.cardColumn').css({
20	21
21	22
...	...	@@ -24,12 +25,11 @@
24	25	width: width - 12 + 'px',
25	26	height: (width * 3 / 5) + 'px'
26	27	});
27		- }
	28	+ };
28	29
29	30	$scope.refreshLayout = function() {
30		- refreshColumnWidth();
31	31	// check if we actually need to refresh the whole layout
32		- if (calculate_cols() == $scope.numCols) return;
	32	+ if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
33	33	$scope.numCols = calculate_cols();
34	34	console.log('refreshing layout for ' + $scope.numCols + ' columns');
35	35	$scope.cardCols = [];
36	36
37	37
...	...	@@ -39,9 +39,12 @@
39	39	cols[i % $scope.numCols].push(card);
40	40	});
41	41	// wait until the next digest cycle to update cardCols
	42	+
42	43	$timeout(function() {
43	44	$scope.cardCols = cols;
	45	+ $timeout($scope.refreshColumnWidth);
44	46	});
	47	+
45	48	};
46	49
47	50	angular.element($window).bind('resize', $scope.refreshLayout);
...	...	@@ -71,6 +74,7 @@
71	74	}
72	75	console.log('adding card to column ' + colNum);
73	76	console.log(card);
	77	+ $scope.cards.push(data);
74	78	$timeout(function() {
75	79	$scope.cardCols[colNum].unshift(card);
76	80	});
...	...	@@ -142,6 +146,7 @@
142	146	if (!UserService.hasVerifiedEmail()) {
143	147	Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
144	148	}
	149	+
145	150	}).
146	151	error(function(error) {
147	152	console.log('something went wrong pushing a card!');
...	...	@@ -208,6 +213,16 @@
208	213	$rootScope.currentSection = {};
209	214	$(document).off('keydown');
210	215	});
	216	+
	217	+ $scope.shuffleCards = function() {
	218	+ $timeout(function() {
	219	+ (function(o) {
	220	+ for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	221	+ return o;
	222	+ })($scope.cardCols[0]);
	223	+ });
	224	+ };
	225	+ window.feedscope = $scope;
211	226
212	227	});

...	...	@@ -11,16 +11,6 @@
11	11	},
12	12	link: function(scope, element) {
13	13	/* Handles width of the card */
14		- function refresh_width() {
15		- avail = $window.innerWidth - 17;
16		- width = Math.floor(avail / Math.floor(avail / 250) - 12);
17		- element.children().css({
18		- width: width + 'px',
19		- height: (width * 3 / 5) + 'px',
20		- });
21		- };
22		- angular.element($window).bind('resize', refresh_width);
23		- refresh_width();
24	14	scope.textPieces = [];
25	15	scope.flashcard.mask.sort(function(a, b) {
26	16	return a[0] - b[0];

	1	+flashcard.ng-enter div, flashcard.ng-leave div, flashcard.ng-move div {
	2	+ -webkit-transition: 1.5s linear all;
	3	+ transition: 1.5s linear all;
	4	+ background-color: red; }
	5	+
	6	+flashcard.ng-move div, flashcard.ng-leave.ng-leave-active div {
	7	+ opacity: 0; }
	8	+
	9	+flashcard.ng-move.ng-move.active div, flashcard.ng-enter.ng-enter-active {
	10	+ opacity: 1; }

...	...	@@ -7985,4 +7985,49 @@
7985	7985	.picker--time .picker__box {
7986	7986	margin-bottom: 5em; }
7987	7987	}
	7988	+
	7989	+.card-move {
	7990	+ position: relative;
	7991	+ top: 26px; }
	7992	+
	7993	+.card-move.card-move-active {
	7994	+ transition: all 0.5s ease;
	7995	+ top: 0; }
	7996	+
	7997	+.card-move + div {
	7998	+ /* cannot have transition on this element */
	7999	+ /transition: all 1s ease;/
	8000	+ position: relative;
	8001	+ top: -26px; }
	8002	+
	8003	+.card-move.card-move-active + div {
	8004	+ transition: all 0.5s ease;
	8005	+ position: relative;
	8006	+ top: 0; }
	8007	+
	8008	+.card-enter {
	8009	+ position: relative;
	8010	+ opacity: 0;
	8011	+ height: 0;
	8012	+ left: 100px; }
	8013	+
	8014	+.card-enter.card-enter-active {
	8015	+ transition: all 0.5s ease;
	8016	+ opacity: 1;
	8017	+ left: 0;
	8018	+ height: 26px; }
	8019	+
	8020	+.card-leave {
	8021	+ position: relative;
	8022	+ opacity: 1;
	8023	+ left: 0;
	8024	+ height: 26px;
	8025	+ z-index: -100; }
	8026	+
	8027	+.card-leave.card-leave-active {
	8028	+ transition: all 0.5s ease;
	8029	+ opacity: 0;
	8030	+ left: 100px;
	8031	+ height: 0;
	8032	+ top: -13px; }

...	...	@@ -11,9 +11,7 @@
11	11	</div>-->
12	12
13	13	<div class="cardColumn" ng-repeat="col in cardCols">
14		- <div ng-repeat="card in col">
15		- <flashcard flashcard-obj="card" refresh="hide(card)"/>
16		- </div>
	14	+ <flashcard flashcard-obj="card" ng-repeat="card in col"/>
17	15	</div>
18	16	</div>
19	17