110swag / flashy-frontend

Commit cb1ad91980fb5c5b050d6d4ba1ea4d8e8d12e40e

Authored by Rachel Lee 2015-05-19 16:21:09 -0700

Unpull from deck now refreshes cards, has remove animation; hide card implemente…

…d but does not work when page refresh

Showing 5 changed files with 107 additions and 50 deletions Inline Diff

scripts/DeckController.js
scripts/FlashcardDirective.js
styles/flashy.css
templates/deck.html
templates/flashcard.html

var app = angular.module('flashy.DeckController', ['ui.router']);	1	1	var app = angular.module('flashy.DeckController', ['ui.router']);
	2	2
app.controller('DeckController', ['$scope', '$http', '$stateParams',	3	3	app.controller('DeckController', ['$scope', '$http', '$stateParams',
function($scope, $http, $stateParams) {	4	4	function($scope, $http, $stateParams) {
// cards array	5	5	// cards array
sectionId = $stateParams.sectionId;	6	6	sectionId = $stateParams.sectionId;
$scope.cards = [];	7	7	$scope.cards = [];
	8	8
		9	// Populate our page with cards.
$http.get('/api/sections/' + sectionId + '/deck/').	9	10	$http.get('/api/sections/' + sectionId + '/deck/').
success(function(data) {	10	11	success(function(data) {
console.log(data);	11	12	console.log(data);
$scope.cards = data;	12	13	$scope.cards = data;
}).	13	14	}).
error(function(err) {	14	15	error(function(err) {
console.log('pulling feed failed');	15	16	console.log('pulling feed failed');
});	16	17	});
	17	18
		19	/* Lets page refresh the cards shown on the page. */
		20	$scope.refreshCards = function() {
		21	console.log('refreshing cards...');
		22	var myDelay = 350; // ms
		23	setTimeout(function() {
		24	$http.get('/api/sections/' + sectionId + '/deck/').
		25	success(function(data) {
		26	console.log(data);
		27	$scope.cards = data;
		28	console.log('success in refresh cards...');
		29	}).
		30	error(function(err) {
		31	console.log('refresh fail');
		32	});
		33	}, myDelay);
		34	}
	18	35
		36
		37	/* all kmach's stuff below, do not touch */
// reorganize cards in array based on time	19	38	// reorganize cards in array based on time
$scope.filter = function(card) {	20	39	$scope.filter = function(card) {
	21	40
// get index of card	22	41	// get index of card
var index = $scope.cards.indexOf(card);	23	42	var index = $scope.cards.indexOf(card);
	24	43
//$scope.cards[index];	25	44	//$scope.cards[index];
	26	45
	27	46
};	28	47	};
	29	48
// remove card from deck	30
$scope.removeCard = function(card) {	31
	32	49
// get index of card	33
var index = $scope.cards.indexOf(card);	34
	35
$scope.cards.splice(index, 1);	36
	37
alert('Removed card!');	38
};	39
	40
	41
$scope.editCard = function(card) {	42	50	$scope.editCard = function(card) {
	43
var index = $scope.cards.indexOf(card);	44	51	var index = $scope.cards.indexOf(card);
	45	52
$('.modal-trigger').leanModal({	46	53	$('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal	47	54	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background	48	55	opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration	49	56	in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration	50	57	out_duration: 200, // Transition out duration
ready: function() {	51	58	ready: function() {
	52	59
	53
$scope.editableContent = $scope.cards[index].content;	54	60	$scope.editableContent = $scope.cards[index].content;
}, // Callback for Modal open	55	61	}, // Callback for Modal open
complete: function() {	56	62	complete: function() {
	57	63
$scope.cards[index].content = $scope.editableContent;	58	64	$scope.cards[index].content = $scope.editableContent;
	59	65
} // Callback for Modal close	60	66	} // Callback for Modal close
}	61	67	}
);	62	68	);
	63
	64

angular.module('flashy.FlashcardDirective', []).	1	1	angular.module('flashy.FlashcardDirective', []).
	2	2
directive('flashcard', ['$http', function($http) {	3	3	directive('flashcard', ['$http', '$state', function($http, $state) {
return {	4	4	return {
templateUrl: '/app/templates/flashcard.html',	5	5	templateUrl: '/app/templates/flashcard.html',
restrict: 'E',	6	6	restrict: 'E',
scope: {	7	7	scope: {
flashcard: '=flashcardObj' // flashcard-obj in html	8	8	flashcard: '=flashcardObj', // flashcard-obj in parent html
		9	refresh: '&' // eval refresh in parent html
},	9	10	},
link: function(scope, element) {	10	11	link: function(scope, element) {
console.log('HELLO FROM FLASHCARD DIRECTIVE');	11	12	/* Pulls card from feed into deck */
console.log(scope.flashcard);	12
console.log(element);	13
	14
// Put flashcard-specific functions here.	15
// This will probably include add/hide/modals/etc.	16
scope.pullCard = function(flashcard) {	17	13	scope.pullCard = function(flashcard) {
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);	18	14	console.log('call pull card...')
console.log('pulled flashcard #' + flashcard.id);	19	15	if ($state.current.name == 'feed') {
		16	$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
		17	success(function(data) {
		18	console.log('pulled flashcard #' + flashcard.id);
		19	}).
		20	error(function(data) {
		21	console.log('failed to pull flashcard #' + flashcard.id);
		22	});
		23	}
		24	};
		25
		26	/* Unpulls card from deck */
		27	scope.unpullCard = function(flashcard) {
		28	console.log('call unpull card...')
		29	if ($state.current.name == 'deck') {
		30	console.log('unpulling card...')
		31
		32	$http.post('/api/flashcards/' + flashcard.id + '/unpull/',
		33	flashcard).
		34	success(function(data) {
		35	console.log('card unpull success')
		36	}).
		37	error(function(data) {
		38	console.log('card unpull FAILURE')
		39	});
		40	}
		41	};
		42
		43	/* Hides card from feed */
		44	scope.hideCard = function(flashcard) {
		45	console.log('call hide card...')
		46	if ($state.current.name == 'feed') {
		47	console.log('hiding card...')
		48
		49	$http.post('/api/flashcards/' + flashcard.id + '/hide/',
		50	flashcard).
		51	success(function(data) {
		52	console.log('card hide success')
		53	}).
		54	error(function(data) {
		55	console.log('card hide FAILURE')
		56	});
		57	}
};	20	58	};
}	21	59	}
};	22	60	};
}]);	23	61	}]);
	24	62

.angucomplete-dropdown {	1	1	.angucomplete-dropdown {
border-color: #ececec;	2	2	border-color: #ececec;
border-width: 1px;	3	3	border-width: 1px;
border-style: solid;	4	4	border-style: solid;
border-radius: 2px;	5	5	border-radius: 2px;
/width: 250px;/	6	6	/width: 250px;/
padding: 6px;	7	7	padding: 6px;
cursor: pointer;	8	8	cursor: pointer;
z-index: 9999;	9	9	z-index: 9999;
position: absolute;	10	10	position: absolute;
/*top: 32px;	11	11	/*top: 32px;
left: 0px;	12	12	left: 0px;
*/	13	13	*/
margin-top: -6px;	14	14	margin-top: -6px;
background-color: #ffffff;	15	15	background-color: #ffffff;
}	16	16	}
	17	17
.angucomplete-description {	18	18	.angucomplete-description {
font-size: 14px;	19	19	font-size: 14px;
}	20	20	}
	21	21
.angucomplete-row {	22	22	.angucomplete-row {
padding: 5px;	23	23	padding: 5px;
color: #000000;	24	24	color: #000000;
margin-bottom: 4px;	25	25	margin-bottom: 4px;
clear: both;	26	26	clear: both;
}	27	27	}
	28	28
.angucomplete-selected-row {	29	29	.angucomplete-selected-row {
background-color: #aaaaff;	30	30	background-color: #aaaaff;
}	31	31	}
	32	32
.container .row {	33	33	.container .row {
margin-left: 0;	34	34	margin-left: 0;
margin-right: 0;	35	35	margin-right: 0;
}	36	36	}
	37	37
ul.side-nav.fixed li {	38	38	ul.side-nav.fixed li {
font-size: 24px;	39	39	font-size: 24px;
}	40	40	}
	41	41
ul.side-nav.fixed li.class a {	42	42	ul.side-nav.fixed li.class a {
height: 36px;	43	43	height: 36px;
line-height: normal;	44	44	line-height: normal;
}	45	45	}
	46	46
ul.side-nav.fixed li a {	47	47	ul.side-nav.fixed li a {
font-size: 24px;	48	48	font-size: 24px;
}	49	49	}
	50	50
/* Flashcard directive css */	51	51	/* Flashcard directive css */
.card {	52	52	.card {
word-wrap: break-word;	53	53	word-wrap: break-word;
}	54	54	}
	55	55
.card.flashy {	56	56	.card.flashy {
float: left;	57	57	float: left;
height: calc((992px / 4 - 6px * 2) * 3 / 5);	58	58	height: calc((992px / 4 - 6px * 2) * 3 / 5);
margin: 6px;	59	59	margin: 6px;
max-height: 2in;	60	60	max-height: 2in;
max-width: calc(5 * 60px);	61	61	max-width: calc(5 * 60px);
min-height: calc((992px / 4 - 6px * 2) * 3 / 5);	62	62	min-height: calc((992px / 4 - 6px * 2) * 3 / 5);
/min-width: calc(992px / 4 - 6px 2);*/	63	63	/min-width: calc(992px / 4 - 6px 2);*/
		64	transition: all 0.3s cubic-bezier(0, 0, 0.6, 1);
width: calc(992px / 4 - 6px * 2);	64	65	width: calc(992px / 4 - 6px * 2);
}	65	66	}
		67
		68	.card.flashy.shrinky {
		69	margin: 0;
		70	opacity: 0;
		71	overflow: hidden;
		72	padding: 0;
		73	width: 0;
		74	}
		75
		76	/*
		77	.smallify {
		78	height: 0;
		79	opacity: 0;
		80	overflow: hidden;
		81	padding: 0;
		82	width: 0;
		83	}
		84	*/
	66	85
.card-overlay {	67	86	.card-overlay {
left: 0;	68	87	left: 0;
opacity: 0;	69	88	opacity: 0;
position: absolute;	70	89	position: absolute;
top: 0;	71	90	top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,	72	91	transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1);	73	92	opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */	74	93	/* animation effect to appear on off-hover */
visibility: hidden;	75	94	visibility: hidden;
height: 100%;	76	95	height: 100%;
width: 100%;	77	96	width: 100%;
}	78	97	}
	79	98
.card-overlay i {	80	99	.card-overlay i {
color: #FFF;	81	100	color: #FFF;
left: 50%;	82	101	left: 50%;
position: absolute;	83	102	position: absolute;
top: 50%;	84	103	top: 50%;
transform: translate(-50%, -50%);	85	104	transform: translate(-50%, -50%);
}	86	105	}
	87	106
.card:hover .card-overlay {	88	107	.card:hover .card-overlay {
opacity: 1;	89	108	opacity: 1;
transition-delay: 0s; /* animation effect to appear on hover */	90	109	transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible;	91	110	visibility: visible;
}	92	111	}
	93	112
.top-box {	94	113	.top-box {
background-color: rgba(0, 10, 203, 0.6);	95	114	background-color: rgba(0, 10, 203, 0.6);
height: 65%;	96	115	height: 65%;
position: relative;	97	116	position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	98	117	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%;	99	118	width: 100%;
}	100	119	}
	101	120
.top-box:hover {	102	121	.top-box:hover {
background-color: rgba(0, 10, 203, 0.7);	103	122	background-color: rgba(0, 10, 203, 0.7);
}	104	123	}
	105	124
.bottom-box {	106	125	.bottom-box {
height: 35%;	107	126	height: 35%;
width: 100%;	108	127	width: 100%;
}	109	128	}
	110	129
.left-box {	111	130	.left-box {
background-color: rgba(15, 0, 155, 0.6);	112	131	background-color: rgba(15, 0, 155, 0.6);
float: left;	113	132	float: left;
position: relative;	114	133	position: relative;
height: 100%;	115	134	height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	116	135	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%;	117	136	width: 50%;
}	118	137	}
	119	138
.left-box:hover {	120	139	.left-box:hover {
background-color: rgba(15, 0, 155, 0.7);	121	140	background-color: rgba(15, 0, 155, 0.7);
}	122	141	}
	123	142
.right-box {	124	143	.right-box {
background-color: rgba(0, 81, 189, 0.6);	125	144	background-color: rgba(0, 81, 189, 0.6);
float: right;	126	145	float: right;
height: 100%;	127	146	height: 100%;
position: relative;	128	147	position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	129	148	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%;	130	149	width: 50%;
}	131	150	}
	132	151
.right-box:hover {	133	152	.right-box:hover {
background-color: rgba(0, 81, 189, 0.7);	134	153	background-color: rgba(0, 81, 189, 0.7);
}	135	154	}
	136	155
.center-me {	137	156	.center-me {
margin: 0 auto;	138	157	margin: 0 auto;
text-align: center;	139	158	text-align: center;
vertical-align: middle;	140	159	vertical-align: middle;
}	141	160	}
	142	161
.modal.bottom-sheet {	143	162	.modal.bottom-sheet {
width: 40%;	144	163	width: 40%;
margin-left: auto;	145	164	margin-left: auto;
margin-right: auto;	146	165	margin-right: auto;
}	147	166	}
	148	167
/* label color */	149	168	/* label color */
.input-field label {	150	169	.input-field label {
color: #673ab7;	151	170	color: #673ab7;
}	152	171	}
	153	172
/* label focus color */	154	173	/* label focus color */
.input-field input[type]:focus + label {	155	174	.input-field input[type]:focus + label {
color: #b388ff;	156	175	color: #b388ff;
}	157	176	}
	158	177
/* label underline focus color */	159	178	/* label underline focus color */
.input-field input[type]:focus {	160	179	.input-field input[type]:focus {
border-bottom: 1px solid #b388ff;	161	180	border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff;	162	181	box-shadow: 0 1px 0 0 #b388ff;
}	163	182	}
	164	183
/* valid color */	165	184	/* valid color */
.input-field input[type].valid {	166	185	.input-field input[type].valid {
border-bottom: 1px solid #673ab7;	167	186	border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7;	168	187	box-shadow: 0 1px 0 0 #673ab7;
}	169	188	}
	170	189
/* invalid color */	171	190	/* invalid color */
.input-field input[type].invalid {	172	191	.input-field input[type].invalid {
border-bottom: 1px solid #673ab7;	173	192	border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7;	174	193	box-shadow: 0 1px 0 0 #673ab7;
}	175	194	}
	176	195
/* icon prefix focus color */	177	196	/* icon prefix focus color */
.input-field .prefix.active {	178	197	.input-field .prefix.active {
color: #b388ff;	179	198	color: #b388ff;
}	180	199	}
	181	200

<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->	1	1	<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
<div class="row">	2	2	<div class="row">
<div ng-repeat="card in cards">	3	3	<div ng-repeat="card in cards">
<flashcard flashcard-obj="card"/>	4	4	<flashcard flashcard-obj="card" refresh="refreshCards()"/>
	5	5
<!--	6	6	<!--
<div class="col s6">	7	7	<div class="col s6">
<div class="card">	8	8	<div class="card">
<div class="card-content">	9	9	<div class="card-content">
<p>{{card.content}}</p>	10	10	<p>{{card.content}}</p>
</div>	11	11	</div>
	12	12
<div class="card-action">	13	13	<div class="card-action">
<i class="small mdi-action-delete" ng-click="removeCard(card)"></i>	14	14	<i class="small mdi-action-delete" ng-click="removeCard(card)"></i>
<a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>	15	15	<a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>
<!-- Modal Structure -->	16	16	<!-- Modal Structure -->
<div id="editModal" class="modal modal-fixed-footer">	17	17	<div id="editModal" class="modal modal-fixed-footer">
<div class="modal-content">	18	18	<div class="modal-content">
<div class="row">	19	19	<div class="row">
<form class="col s12">	20	20	<form class="col s12">
<div class="row">	21	21	<div class="row">
<div class="input-field col s6">	22	22	<div class="input-field col s6">
<i class="mdi-editor-mode-edit prefix"></i>	23	23	<i class="mdi-editor-mode-edit prefix"></i>
<textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>	24	24	<textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>
<label for="icon_prefix2"></label>	25	25	<label for="icon_prefix2"></label>
</div>	26	26	</div>
</div>	27	27	</div>
</form>	28	28	</form>
</div>	29	29	</div>
</div>	30	30	</div>
<div class="modal-footer">	31	31	<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>	32	32	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
</div>	33	33	</div>
</div>	34	34	</div>
</div>	35	35	</div>
</div>	36	36	</div>
</div>	37	37	</div>
-->	38	38	-->
</div>	39	39	</div>

<div class="card flashy">	1	1	<div class="card flashy smallify" ng-init="startShrink = false"
<div class="card-content">	2	2	ng-class="{'shrinky': startShrink}">
<p>{{flashcard.text}}</p>	3	3	<div class="card-content">
		4	<p>{{flashcard.text}}</p>
		5	</div>
		6	<div class="card-overlay">
		7	<div class="top-box" ng-click="pullCard(flashcard)">
		8	<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
		9	</div>
		10
		11	<div class="bottom-box">
		12	<div class="left-box">
		13	<div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div>	4	14	</div>
<div class="card-overlay">	5	15	<div class="right-box" ng-click="startShrink = true; unpullCard(flashcard);
<a href="#">	6	16	hideCard(flashcard); refresh()">
<div class="top-box" ng-click="pullCard(flashcard)">	7	17	<div class="center-me"><i class="mdi-action-delete small"></i></div>
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>	8
</div>	9
</a>	10
<div class="bottom-box">	11
<a href="#">	12
<div class="left-box">	13
<div class="center-me"><i class="mdi-action-info-outline small"></i></div>	14
</div>	15
</a>	16
<a href="#">	17
<div class="right-box">	18
<div class="center-me"><i class="mdi-action-delete small"></i></div>	19
</div>	20
</a>	21
</div>	22
</div>	23	18	</div>
		19
</div>	24	20	</div>
		21	</div>
		22	</div>
	25	23