110swag / flashy-frontend

Commit 0dfc7258627de8bcb7475af67c074e6ec0c10fd1

Authored by Andrew Buss 2015-06-02 02:30:06 -0700

more refactoring; bugfixes; new border if in deck

Showing 7 changed files with 31 additions and 19 deletions Inline Diff

scripts/CardGridController.js
scripts/FeedController.js
scripts/FlashcardDirective.js
scripts/FlashcardFactory.js
scripts/StudyController.js
styles/flashy.css
templates/flashcard.html

angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).	1	1	angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).
	2	2
controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {	3	3	controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
angular.module('flashy.CardGridController').controller.apply(this, arguments);	4	4	angular.module('flashy.CardGridController').controller.apply(this, arguments);
$scope.refreshCards = function() {	5	5	$scope.refreshCards = function() {
$http.get('/api/sections/' + $scope.sectionId + '/feed/').	6	6	$http.get('/api/sections/' + $scope.sectionId + '/feed/').
success(function(data) {	7	7	success(function(data) {
console.log(data);	8	8	console.log(data);
$scope.cards = [];	9	9	$scope.cards = [];
for (var i in data) $scope.cards.push(new Flashcard(data[i], $scope.deck));	10	10	for (var i in data) $scope.cards.push(new Flashcard(data[i], $scope.deck));
$scope.refreshLayout();	11	11	$scope.refreshLayout();
console.log('success in refresh cards...');	12	12	console.log('success in refresh cards...');
}).	13	13	}).
error(function(err) {	14	14	error(function(err) {
console.log('refresh fail');	15	15	console.log('refresh fail');
console.log(err);	16	16	console.log(err);
});	17	17	});
};	18	18	};
	19	19
$scope.sortAdd = function(card, array) {	20	20	$scope.sortAdd = function(card, array) {
console.log('sort add');	21	21	console.log('sort add');
array.forEach(function(ele, i, ary) {	22	22	array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) {	23	23	if (ele.score <= card.score) {
ary.splice(i, 0, card);	24	24	ary.splice(i, 0, card);
return;	25	25	return;
}	26	26	}
});	27	27	});
};	28	28	};
	29	29
$scope.updateCardScore = function(card) {	30	30	$scope.updateCardScore = function(card) {
console.log('old score', card.score);	31	31	$scope.cardCols[card.colNum].sort(function(a, b) {
card.score = flashcard.score;	32
console.log('new score', card.score);	33
$scope.cardCols[$scope.cardTable[card.id].colNum].sort(function(a, b) {	34
return b.score - a.score;	35	32	return b.score - a.score;
});	36	33	});
};	37	34	};
	38	35
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');	39	36	$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) {	40	37	$scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data);	41	38	data = JSON.parse(e.data);
console.log('message', data);	42	39	console.log('message', data);
if (data.event_type == 'new_card') {	43	40	if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard), $scope.deck);	44	41	$scope.addCardToGrid(new Flashcard(data.flashcard), $scope.deck);
} else if (data.event_type == 'score_change') {	45	42	} else if (data.event_type == 'score_change') {
card = new Flashcard(data.flashcard.id);	46	43	card = new Flashcard(data.flashcard.id);
$scope.updateCardScore(new Flashcard(data.flashcard.id));	47	44	card.score = data.flashcard.score;
		45	$scope.updateCardScore(card);
}	48	46	}
});	49	47	});
	50	48
$scope.pushCard = function() {	51	49	$scope.pushCard = function() {
var myCard = {	52	50	var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix.	53	51	// we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(),	54	52	'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks,	55	53	'mask': $scope.newCardBlanks,
section: $scope.section.id	56	54	section: $scope.section.id
};	57	55	};
if (myCard.text == '') {	58	56	if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text);	59	57	console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard();	60	58	return closeNewCard();
}	61	59	}
$http.post('/api/flashcards/', myCard).	62	60	$http.post('/api/flashcards/', myCard).
success(function(data) {	63	61	success(function(data) {
console.log('flashcard pushed: ' + myCard.text);	64	62	console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) {	65	63	if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);	66	64	Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
}	67	65	}
}).	68	66	}).
error(function(error) {	69	67	error(function(error) {
console.log('something went wrong pushing a card!');	70	68	console.log('something went wrong pushing a card!');
});	71	69	});
return $scope.closeNewCardModal();	72	70	return $scope.closeNewCardModal();
};	73	71	};
	74	72
/* Key bindings for the whole feed window. Hotkey it up! */	75	73	/* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true;	76	74	var listenForC = true;
	77	75
// Need to pass these options into openmodal and leanmodal,	78	76	// Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called	79	77	// otherwise the ready handler doesn't get called
	80	78
modal_options = {	81	79	modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal	82	80	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background	83	81	opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration	84	82	in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration	85	83	out_duration: 200, // Transition out duration
ready: function() {	86	84	ready: function() {
$('#new-card-input').focus();	87	85	$('#new-card-input').focus();
document.execCommand('selectAll', false, null);	88	86	document.execCommand('selectAll', false, null);
}	89	87	}
};	90	88	};
	91	89
$(document).keydown(function(e) {	92	90	$(document).keydown(function(e) {
var keyed = e.which;	93	91	var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose	94	92	if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal();	95	93	$scope.openNewCardModal();
e.preventDefault();	96	94	e.preventDefault();
return false;	97	95	return false;
} else if (keyed == 27) { // clear on ESC	98	96	} else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal();	99	97	$scope.closeNewCardModal();
}	100	98	}
});	101	99	});
	102	100
$scope.openNewCardModal = function() {	103	101	$scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options);	104	102	$('#newCard').openModal(modal_options);
listenForC = false;	105	103	listenForC = false;
$('#new-card-input').html('Write a flashcard!');	106	104	$('#new-card-input').html('Write a flashcard!');
};	107	105	};
	108	106
$scope.closeNewCardModal = function() {	109	107	$scope.closeNewCardModal = function() {
listenForC = true;	110	108	listenForC = true;
$('#new-card-input').html('').blur();	111	109	$('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options);	112	110	$('#newCard').closeModal(modal_options);
};	113	111	};
	114	112
$('.tooltipped').tooltip({delay: 50});	115	113	$('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered	116	114	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options);	117	115	$('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) {	118	116	$('#new-card-input').on('keydown', function(e) {
if (e.which == 13) {	119	117	if (e.which == 13) {
e.preventDefault();	120	118	e.preventDefault();
if ($scope.submit_enabled) {	121	119	if ($scope.submit_enabled) {
$scope.pushCard();	122	120	$scope.pushCard();
listenForC = true;	123	121	listenForC = true;
}	124	122	}
return false;	125	123	return false;
} else {	126	124	} else {
	127	125
}	128	126	}
});	129	127	});
$('button#blank-selected').click(function() {	130	128	$('button#blank-selected').click(function() {
console.log(window.getSelection());	131	129	console.log(window.getSelection());
document.execCommand('bold');	132	130	document.execCommand('bold');
});	133	131	});
$scope.refreshCards();	134	132	$scope.refreshCards();
$scope.newCardBlanks = [];	135	133	$scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() {	136	134	$scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text();	137	135	$scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;	138	136	$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0;	139	137	var i = 0;
$scope.newCardBlanks = [];	140	138	$scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) {	141	139	$('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') {	142	140	if (typeof node.data == 'undefined') {
console.log('undefined node');	143	141	console.log('undefined node');
}	144	142	}
node = $(node)[0];	145	143	node = $(node)[0];
if (node.tagName == 'B') {	146	144	if (node.tagName == 'B') {
var text = $(node).text();	147	145	var text = $(node).text();
var leftspaces = 0, rightspaces = 0;	148	146	var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js	149	147	// awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;	150	148	while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;	151	149	while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length);	152	150	console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);	153	151	if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length;	154	152	i += text.length;
} else if (!node.data) {	155	153	} else if (!node.data) {
console.log('weird node', node);	156	154	console.log('weird node', node);
i += $(node).text().length;	157	155	i += $(node).text().length;
} else {	158	156	} else {
i += node.data.length;	159	157	i += node.data.length;
}	160	158	}
});	161	159	});
$scope.newCardBlanks.sort(function(a, b) {	162	160	$scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0];	163	161	return a[0] - b[0];
});	164	162	});
i = 0;	165	163	i = 0;
newtext = '';	166	164	newtext = '';
console.log($scope.newCardBlanks);	167	165	console.log($scope.newCardBlanks);
$scope.newCardBlanks.forEach(function(blank) {	168	166	$scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]);	169	167	newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';	170	168	newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1];	171	169	i = blank[1];
});	172	170	});
newtext += $scope.newCardText.slice(i);	173	171	newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext;	174	172	//$scope.newCardFormattedText = newtext;
};	175	173	};
$scope.shuffleCards = function() {	176	174	$scope.shuffleCards = function() {

angular.module('flashy.FlashcardDirective', []).	1	1	angular.module('flashy.FlashcardDirective', []).
	2	2
directive('flashcard',	3	3	directive('flashcard',
function($http, $state, $window) {	4	4	function($http, $state, $window) {
return {	5	5	return {
templateUrl: '/app/templates/flashcard.html',	6	6	templateUrl: '/app/templates/flashcard.html',
restrict: 'E',	7	7	restrict: 'E',
scope: {	8	8	scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html	9	9	flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html	10	10	refresh: '&' // eval refresh in parent html
},	11	11	},
link: function(scope, element) {	12	12	link: function(scope, element) {
		13	$('.tooltipped').tooltip();
/* Handles width of the card */	13	14	/* Handles width of the card */
}	14	15	}
};	15	16	};
}	16	17	}

.no-user-select {	1	1	.no-user-select {
-moz-user-select: none;	2	2	-moz-user-select: none;
-webkit-user-select: none;	3	3	-webkit-user-select: none;
-ms-user-select: none;	4	4	-ms-user-select: none;
user-select: none;	5	5	user-select: none;
}	6	6	}
	7	7
.angucomplete-dropdown {	8	8	.angucomplete-dropdown {
border-color: #ececec;	9	9	border-color: #ececec;
border-width: 1px;	10	10	border-width: 1px;
border-style: solid;	11	11	border-style: solid;
border-radius: 2px;	12	12	border-radius: 2px;
/width: 250px;/	13	13	/width: 250px;/
padding: 6px;	14	14	padding: 6px;
cursor: pointer;	15	15	cursor: pointer;
z-index: 9999;	16	16	z-index: 9999;
position: absolute;	17	17	position: absolute;
/*top: 32px;	18	18	/*top: 32px;
left: 0px;	19	19	left: 0px;
*/	20	20	*/
margin-top: -6px;	21	21	margin-top: -6px;
background-color: #ffffff;	22	22	background-color: #ffffff;
}	23	23	}
	24	24
.angucomplete-description {	25	25	.angucomplete-description {
font-size: 14px;	26	26	font-size: 14px;
}	27	27	}
	28	28
.angucomplete-row {	29	29	.angucomplete-row {
padding: 5px;	30	30	padding: 5px;
color: #000000;	31	31	color: #000000;
margin-bottom: 4px;	32	32	margin-bottom: 4px;
clear: both;	33	33	clear: both;
}	34	34	}
	35	35
.angucomplete-selected-row {	36	36	.angucomplete-selected-row {
background-color: #aaaaff;	37	37	background-color: #aaaaff;
}	38	38	}
	39	39
/.container .row {/	40	40	/.container .row {/
/margin-left: 0;/	41	41	/margin-left: 0;/
/margin-right: 0;/	42	42	/margin-right: 0;/
/}/	43	43	/}/
	44	44
/* Flashcard directive css */	45	45	/* Flashcard directive css */
.card {	46	46	.card {
word-wrap: break-word;	47	47	word-wrap: break-word;
}	48	48	}
	49	49
		50	.card.flashy.in-deck {
		51	border: 3px solid rgba(0, 184, 76, 0.4);
		52	}
		53
.card.flashy {	50	54	.card.flashy {
background-color: #fff;	51	55	background-color: #fff;
font-family: 'Titillium Web', sans-serif;	52	56	font-family: 'Titillium Web', sans-serif;
float: left;	53	57	float: left;
text-align: center;	54	58	text-align: center;
margin: 6px;	55	59	margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);	56	60	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
}	57	61	}
	58	62
.card.flashy.shrinky {	59	63	.card.flashy.shrinky {
height: 0;	60	64	height: 0;
opacity: 0;	61	65	opacity: 0;
overflow: hidden;	62	66	overflow: hidden;
}	63	67	}
	64	68
.card-overlay {	65	69	.card-overlay {
cursor: pointer;	66	70	cursor: pointer;
left: 0;	67	71	left: 0;
opacity: 0;	68	72	opacity: 0;
position: absolute;	69	73	position: absolute;
		74	/pointer-events: none;/
top: 0;	70	75	top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,	71	76	transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1);	72	77	opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */	73	78	/* animation effect to appear on off-hover */
visibility: hidden;	74	79	visibility: hidden;
height: 100%;	75	80	height: 100%;
width: 100%;	76	81	width: 100%;
}	77	82	}
	78	83
.card-overlay i {	79	84	.card-overlay i {
color: #FFF;	80	85	color: #FFF;
left: 50%;	81	86	left: 50%;
position: absolute;	82	87	position: absolute;
top: 50%;	83	88	top: 50%;
transform: translate(-50%, -50%);	84	89	transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	85	90	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
}	86	91	}
	87	92
.center-me:hover i {	88	93	.center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);	89	94	text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}	90	95	}
	91	96
.card:hover .card-overlay {	92	97	.card:hover .card-overlay {
opacity: 1.0;	93	98	opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */	94	99	transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible;	95	100	visibility: visible;
}	96	101	}
	97	102
.top-box {	98	103	.top-box {
background-color: rgba(0, 184, 76, 0.4);	99	104	background-color: rgba(0, 184, 76, 0.4);
height: 65%;	100	105	height: 65%;
position: relative;	101	106	position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	102	107	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%;	103	108	width: 100%;
}	104	109	}
	105	110
.top-box:hover {	106	111	.top-box:hover {
background-color: rgba(0, 184, 76, 0.5);	107	112	background-color: rgba(0, 184, 76, 0.5);
}	108	113	}
	109	114
.bottom-box {	110	115	.bottom-box {
height: 35%;	111	116	height: 35%;
width: 100%;	112	117	width: 100%;
}	113	118	}
	114	119
.left-box {	115	120	.left-box {
background-color: rgba(119, 146, 255, 0.5);	116	121	background-color: rgba(119, 146, 255, 0.5);
float: left;	117	122	float: left;
position: relative;	118	123	position: relative;
height: 100%;	119	124	height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	120	125	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%;	121	126	width: 50%;
}	122	127	}
	123	128
.left-box:hover {	124	129	.left-box:hover {
background-color: rgba(119, 146, 255, 0.6);	125	130	background-color: rgba(119, 146, 255, 0.6);
}	126	131	}
	127	132
.right-box {	128	133	.right-box {
background-color: rgba(255, 62, 76, 0.5);	129	134	background-color: rgba(255, 62, 76, 0.5);
float: right;	130	135	float: right;
height: 100%;	131	136	height: 100%;
position: relative;	132	137	position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	133	138	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%;	134	139	width: 50%;
}	135	140	}
	136	141
.right-box:hover {	137	142	.right-box:hover {
background-color: rgba(255, 62, 76, 0.6);	138	143	background-color: rgba(255, 62, 76, 0.6);
}	139	144	}
	140	145
.center-me {	141	146	.center-me {
height: 100%;	142	147	height: 100%;
margin: 0 auto;	143	148	margin: 0 auto;
text-align: center;	144	149	text-align: center;
vertical-align: middle;	145	150	vertical-align: middle;
width: 100%;	146	151	width: 100%;
}	147	152	}
	148	153
/* Card Colors */	149	154	/* Card Colors */
.card.flashy.cardcolor-blue div {	150	155	.card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important;	151	156	background-color: rgba(119, 158, 203, 0.5) !important;
}	152	157	}
	153	158
.cardcolor-red div {	154	159	.cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important;	155	160	background-color: rgba(255, 105, 97, 0.5) !important;
}	156	161	}
	157	162
.cardcolor-green div {	158	163	.cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important;	159	164	background-color: rgba(119, 190, 119, 0.5) !important;
}	160	165	}
	161	166
.cardcolor-yellow div {	162	167	.cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important;	163	168	background-color: rgba(253, 253, 150, 0.5) !important;
}	164	169	}
	165	170
/* Card Colors END */	166	171	/* Card Colors END */
	167	172
.modal.bottom-sheet {	168	173	.modal.bottom-sheet {
max-width: 600px;	169	174	max-width: 600px;
margin-left: auto;	170	175	margin-left: auto;
margin-right: auto;	171	176	margin-right: auto;
}	172	177	}
	173	178
.feed-modal-input {	174	179	.feed-modal-input {
background-color: #D3D3D3;	175	180	background-color: #D3D3D3;
/ / border-style : solid;	176	181	/ / border-style : solid;
/ / border-width : 1 px;	177	182	/ / border-width : 1 px;
box-shadow: 2px 2px 5px #888888;	178	183	box-shadow: 2px 2px 5px #888888;
height: 24px;	179	184	height: 24px;
}	180	185	}
	181	186
#newCard input[type=text] {	182	187	#newCard input[type=text] {
height: 3rem !important;	183	188	height: 3rem !important;
}	184	189	}
	185	190
.input-field label {	186	191	.input-field label {
color: #00b3c2;	187	192	color: #00b3c2;
}	188	193	}
	189	194
/* label focus color */	190	195	/* label focus color */
.input-field input[type]:focus + label {	191	196	.input-field input[type]:focus + label {
color: #00b3c2;	192	197	color: #00b3c2;
}	193	198	}
	194	199
/* label underline focus color */	195	200	/* label underline focus color */
.input-field input[type]:focus {	196	201	.input-field input[type]:focus {
border-bottom: 1px solid #00b3c2;	197	202	border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff;	198	203	box-shadow: 0 1px 0 0 #b388ff;
}	199	204	}
	200	205
/* valid color */	201	206	/* valid color */
.input-field input[type].valid {	202	207	.input-field input[type].valid {
border-bottom: 1px solid #00c28f;	203	208	border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7;	204	209	box-shadow: 0 1px 0 0 #673ab7;
}	205	210	}
	206	211
/* invalid color */	207	212	/* invalid color */
.input-field input[type].invalid {	208	213	.input-field input[type].invalid {
border-bottom: 1px solid #673ab7;	209	214	border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7;	210	215	box-shadow: 0 1px 0 0 #673ab7;
}	211	216	}
	212	217
/* icon prefix focus color */	213	218	/* icon prefix focus color */
.input-field .prefix.active {	214	219	.input-field .prefix.active {
color: #b388ff;	215	220	color: #b388ff;
}	216	221	}
	217	222
/* label focus color */	218	223	/* label focus color */
.input-field textarea[type]:focus + label {	219	224	.input-field textarea[type]:focus + label {
color: #b388ff;	220	225	color: #b388ff;
}	221	226	}
	222	227
/* label underline focus color */	223	228	/* label underline focus color */
.input-field textarea[type]:focus {	224	229	.input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2;	225	230	border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff;	226	231	box-shadow: 0 1px 0 0 #b388ff;
}	227	232	}
	228	233
body {	229	234	body {
background-color: #e8e8e8;	230	235	background-color: #e8e8e8;
overflow-x: hidden;	231	236	overflow-x: hidden;
font-family: 'Titillium Web', sans-serif;	232	237	font-family: 'Titillium Web', sans-serif;
height: 100%;	233	238	height: 100%;
}	234	239	}
	235	240
html {	236	241	html {
background: transparent;	237	242	background: transparent;
height: 100%;	238	243	height: 100%;
}	239	244	}
	240	245
.btn {	241	246	.btn {
background-color: #00b3c2;	242	247	background-color: #00b3c2;
}	243	248	}
	244	249
.btn:hover {	245	250	.btn:hover {
background-color: #0097cb;	246	251	background-color: #0097cb;
}	247	252	}
	248	253
.btn-floating {	249	254	.btn-floating {
background-color: #00b3c2;	250	255	background-color: #00b3c2;
}	251	256	}
	252	257
.btn-floating:hover {	253	258	.btn-floating:hover {
background-color: #0097cb;	254	259	background-color: #0097cb;
}	255	260	}
	256	261
.toggley {	257	262	.toggley {
float: left;	258	263	float: left;
margin: 10px;	259	264	margin: 10px;
}	260	265	}
	261	266
#logo-container {	262	267	#logo-container {
margin-bottom: 18px;	263	268	margin-bottom: 18px;
}	264	269	}
	265	270
#lean-overlay {	266	271	#lean-overlay {
display: none !important;	267	272	display: none !important;
}	268	273	}
	269	274
nav {	270	275	nav {
background-color: #d2143f !important;	271	276	background-color: #d2143f !important;
}	272	277	}
	273	278
main {	274	279	main {
min-height: 145px;	275	280	min-height: 145px;
}	276	281	}
	277	282
.side-nav .collapsible-body {	278	283	.side-nav .collapsible-body {
width: 100%;	279	284	width: 100%;
}	280	285	}
	281	286
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {	282	287	.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2;	283	288	background-color: #00b3c2;
}	284	289	}
	285	290
nav .button-collapse {	286	291	nav .button-collapse {
margin: 0 20px;	287	292	margin: 0 20px;
}	288	293	}
	289	294
.collapsible-body i {	290	295	.collapsible-body i {
font-size: 1rem !important;	291	296	font-size: 1rem !important;
}	292	297	}
	293	298
.tabs .tab a {	294	299	.tabs .tab a {
color: #00b3c2;	295	300	color: #00b3c2;
}	296	301	}
	297	302
.tabs .tab a:hover {	298	303	.tabs .tab a:hover {
color: #0041dd;	299	304	color: #0041dd;
}	300	305	}
	301	306
.tabs .indicator {	302	307	.tabs .indicator {
border-bottom: 1px solid #00b3c2;	303	308	border-bottom: 1px solid #00b3c2;
}	304	309	}
	305	310
h2 {	306	311	h2 {
text-align: center;	307	312	text-align: center;
}	308	313	}
	309	314
md-content.md-default-theme {	310	315	md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0);	311	316	background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff;	312	317	border: 1px solid #fff;
}	313	318	}
	314	319
/*#sidenav-overlay {	315	320	/*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important;	316	321	background-color: rgba(0, 0, 0, 0) !important;
}*/	317	322	}*/
.card-content {	318	323	.card-content {
width: 100%;	319	324	width: 100%;
}	320	325	}
	321	326
.valign-wrapper {	322	327	.valign-wrapper {
height: 100%;	323	328	height: 100%;
}	324	329	}
	325	330
/*.toast {	326	331	/*.toast {
height: 100px;	327	332	height: 100px;
width: 300px;	328	333	width: 300px;
line-height: 20px;	329	334	line-height: 20px;
max-height: 100px;	330	335	max-height: 100px;
word-wrap: normal;	331	336	word-wrap: normal;
}*/	332	337	}*/
	333	338
[ng-cloak] {	334	339	[ng-cloak] {
display: none !important;	335	340	display: none !important;
}	336	341	}
	337	342
.cardColumn {	338	343	.cardColumn {
float: left;	339	344	float: left;
}	340	345	}
	341	346
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */	342	347	/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter,	343	348	.repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card,	344	349	.repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave,	345	350	.repeated-card.ng-leave,
.repeated-card.ng-move,	346	351	.repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card {	347	352	.repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);	348	353	-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);	349	354	-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);	350	355	-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 1s all cubic-bezier(0, 0, 0.6, 1);	351	356	transition: 1s cubic-bezier(0.6, 0.3, 0.7, 1.4);
		357	/1s all cubic-bezier(0, 0, 1, 0.3);/
position: relative;	352	358	position: relative;
}	353	359	}
	354	360
.repeated-card.ng-enter > flashcard > .card {	355	361	.repeated-card.ng-enter > flashcard > .card {
z-index: 1;	356	362	z-index: 1;
top: -236px;	357	363	top: -236px;
margin-bottom: -230px;	358	364	margin-bottom: -230px;
}	359	365	}
	360	366
.repeated-card.ng-enter.ng-enter-active > flashcard > .card {	361	367	.repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px;	362	368	top: 0px;
margin-bottom: 6px;	363	369	margin-bottom: 6px;
}	364	370	}
	365	371
.repeated-card.ng-leave {	366	372	.repeated-card.ng-leave {
top: 0;	367	373	top: 0;
opacity: 1;	368	374	opacity: 1;
}	369	375	}
	370	376
.repeated-card.ng-leave.ng-leave-active {	371	377	.repeated-card.ng-leave.ng-leave-active {
top: -60px;	372	378	top: -60px;
opacity: 0;	373	379	opacity: 0;
}	374	380	}
	375	381
/* Animation CSS END */	376	382	/* Animation CSS END */
	377	383
/* Footer */	378	384	/* Footer */
* {	379	385	* {
margin: 0;	380	386	margin: 0;
}	381	387	}
	382	388
/.wrapper {/	383	389	/.wrapper {/
/min-height: 100%;/	384	390	/min-height: 100%;/
/height: 100%;/	385	391	/height: 100%;/
//!margin: 0 auto -4em;!//	386	392	//!margin: 0 auto -4em;!//
/}/	387	393	/}/
	388	394

<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false"	1	1	<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink}">	2	2	ng-class="{'shrinky': startShrink, 'in-deck':flashcard.isInDeck()}">
<div class="valign-wrapper">	3	3	<div class="valign-wrapper">
<div class="card-content valign center-align">	4	4	<div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text">
<span ng-repeat="piece in flashcard.textPieces"	5	5	<!--<span ng-repeat="piece in flashcard.textPieces"-->
ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>	6	6	<!--ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>-->
</div>	7	7	</div>
</div>	8	8	</div>
<div class="card-overlay">	9	9	<div class="card-overlay">
<div class="top-box no-user-select" ng-hide="flashcard.isInDeck()"	10	10	<div class="top-box no-user-select" ng-hide="flashcard.isInDeck()"
ng-click="flashcard.pull()">	11	11	ng-click="flashcard.pull()">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>	12	12	<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div>	13	13	</div>
<div class="top-box no-user-select" ng-show="flashcard.isInDeck()"	14	14	<div class="top-box no-user-select" ng-show="flashcard.isInDeck()"
ng-click="flashcard.unpull()">	15	15	ng-click="flashcard.unpull()">
<div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>	16	16	<div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
</div>	17	17	</div>
<div class="bottom-box no-user-select">	18	18	<div class="bottom-box no-user-select">
<div class="left-box">	19	19	<div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div>	20	20	<div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div>	21	21	</div>
<div class="right-box" ng-click="flashcard.hide()">	22	22	<div class="right-box" ng-click="flashcard.hide()">
<div class="center-me"><i class="mdi-action-delete small"></i></div>	23	23	<div class="center-me"><i class="mdi-action-delete small"></i></div>
</div>	24	24	</div>
	25	25
</div>	26	26	</div>
</div>	27	27	</div>
<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:0px;right:0px">	28	28	<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
<div class="center-me"><i class="mdi-action-done small"></i></div>	29	29	<div class="center-me tooltipped" data-position="bottom"
		30	data-delay="50" data-tooltip="In deck"><i class="mdi-action-done small"></i></div>
</div>	30	31	</div>
<div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">	31	32	<div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
<span class="center-me">score:{{flashcard.score}}</span>	32	33	<span class="center-me">score:{{flashcard.score}}</span>
</div>	33	34	</div>
</div>	34	35	</div>
	35	36

angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =	1	1	angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {	2	2	function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
$scope.cards = [];	3	3	$scope.cards = [];
$scope.deck = [];	4	4	$scope.deck = [];
$scope.cardCols = []; // organized data	5	5	$scope.cardCols = []; // organized data
$scope.numCols = 0;	6	6	$scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}	7	7	$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId);	8	8	$scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});	9	9	$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$rootScope.currentSection = $scope.section;	10	10	$rootScope.currentSection = $scope.section;
	11	11
if (!UserService.isInSection($scope.sectionId)) {	12	12	if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId);	13	13	console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass');	14	14	$state.go('addclass');
}	15	15	}
	16	16
$scope.refreshColumnWidth = function() {	17	17	$scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17;	18	18	avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250));	19	19	width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({	20	20	$('.cardColumn').css({
width: width + 'px',	21	21	width: width + 'px',
'font-size': 100 * width / 250 + '%'	22	22	'font-size': 100 * width / 250 + '%'
});	23	23	});
$('.cardColumn .card.flashy').css({	24	24	$('.cardColumn .card.flashy').css({
width: width - 12 + 'px',	25	25	width: width - 12 + 'px',
height: (width * 3 / 5) + 'px'	26	26	height: (width * 3 / 5) + 'px'
});	27	27	});
};	28	28	};
	29	29
$scope.refreshLayout = function() {	30	30	$scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));	31	31	numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
	32	32
// check if we actually need to refresh the whole layout	33	33	// check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth();	34	34	if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols;	35	35	$scope.numCols = numCols;
console.log('refreshing layout for ' + $scope.numCols + ' columns');	36	36	console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = [];	37	37	$scope.cardCols = [];
var cols = [];	38	38	var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]);	39	39	for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) {	40	40	$scope.cards.forEach(function(card, i) {
card.colNum = i % $scope.numCols;	41	41	card.colNum = i % $scope.numCols;
cols[card.colNum].push(card);	42	42	cols[card.colNum].push(card);
});	43	43	});
for (i in cols) $scope.updateColRanks(cols[i]);	44	44	for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols);	45	45	console.log(cols);
$timeout(function() {	46	46	$timeout(function() {
$scope.cardCols = cols;	47	47	$scope.cardCols = cols;
$timeout($scope.refreshColumnWidth);	48	48	$timeout($scope.refreshColumnWidth);
});	49	49	});
	50	50
};	51	51	};
	52	52
angular.element($window).bind('resize', $scope.refreshLayout);	53	53	angular.element($window).bind('resize', $scope.refreshLayout);
	54	54
$scope.ws_host = window.location.origin.replace('http', 'ws');	55	55	$scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');	56	56	$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() {	57	57	$scope.deck_ws.onOpen(function() {
console.log('deck ws open');	58	58	console.log('deck ws open');
});	59	59	});
	60	60
$scope.deck_ws.onMessage(function(message) {	61	61	$scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data);	62	62	data = JSON.parse(message.data);
console.log('message', data);	63	63	console.log('message', data);
card = new Flashcard(data.flashcard.id);	64	64	card = new Flashcard(data.flashcard.id);
if (data.event_type == 'card_pulled') {	65	65	if (data.event_type == 'card_pulled') {
$scope.deck[card.id] = card;	66	66	$scope.deck[card.id] = card;
}	67	67	}
if (data.event_type == 'card_unpulled') {	68	68	if (data.event_type == 'card_unpulled') {
$scope.deck[card.id] = undefined;	69	69	$scope.deck[card.id] = undefined;
}	70	70	}
if (data.event_type == 'card_hidden') {	71	71	if (data.event_type == 'card_hidden') {
$scope.hideCardFromGrid(card);	72	72	$scope.hideCardFromGrid(card);
}	73	73	}
});	74	74	});
	75	75
$scope.cardInDeck = function(id) {	76	76	$scope.cardInDeck = function(id) {
return $scope.deck[id];	77	77	return $scope.deck[id];
};	78	78	};
$scope.addCardToGrid = function(card) {	79	79	$scope.addCardToGrid = function(card) {
var colNum = 0;	80	80	var colNum = 0;
var lowestCol = $scope.cardCols[0];	81	81	var lowestCol = $scope.cardCols[0];
var lowestColNum = 0;	82	82	var lowestColNum = 0;
while (colNum < $scope.numCols) {	83	83	while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) {	84	84	if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum];	85	85	lowestCol = $scope.cardCols[colNum];
break;	86	86	break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) {	87	87	} else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum];	88	88	lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum;	89	89	lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length;	90	90	lowestColLen = $scope.cardCols[colNum].length;
}	91	91	}
colNum++;	92	92	colNum++;
}	93	93	}
console.log(card);	94	94	console.log(card);
$scope.cards.push(data);	95	95	$scope.cards.push(data);
lowestCol.unshift(card);	96	96	lowestCol.unshift(card);
$scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};	97	97	$scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
$timeout($scope.refreshColumnWidth);	98	98	$timeout($scope.refreshColumnWidth);
		99
};	99	100	};
	100	101
$scope.updateColRanks = function(col) {	101	102	$scope.updateColRanks = function(col) {
for (i in col)	102	103	for (i in col)
col[i].colRank = i;	103	104	col[i].colRank = i;
};	104	105	};
$scope.hideCardFromGrid = function(card) {	105	106	$scope.hideCardFromGrid = function(card) {
console.log('hiding', card);	106	107	console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1);	107	108	$scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]);	108	109	$scope.updateColRanks($scope.cardCols[card.colNum]);
};	109	110	};
	110	111
$http.get('/api/sections/' + $scope.sectionId + '/deck/').	111	112	$http.get('/api/sections/' + $scope.sectionId + '/deck/').
success(function(data) {	112	113	success(function(data) {
for (i in data) $scope.deck[data[i].id] = data[i];	113	114	for (i in data) $scope.deck[data[i].id] = data[i];

angular.module('flashy.FlashcardFactory', ['ui.router']).	1	1	angular.module('flashy.FlashcardFactory', ['ui.router']).
factory('Flashcard', function ($http) {	2	2	factory('Flashcard', function ($http) {
var FlashcardCache = [];	3	3	var FlashcardCache = [];
var Flashcard = function (data, deck) {	4	4	var Flashcard = function (data, deck) {
if (typeof data == 'number') return FlashcardCache[data];	5	5	if (typeof data == 'number') return FlashcardCache[data];
for (var k in data) this[k] = data[k];	6	6	for (var k in data) this[k] = data[k];
this.deck = deck;	7	7	this.deck = deck;
this.textPieces = [];	8	8	this.textPieces = [];
this.mask.sort(function (a, b) {	9	9	this.mask.sort(function (a, b) {
return a[0] - b[0];	10	10	return a[0] - b[0];
});	11	11	});
	12
var i = 0;	13	12	var i = 0;
this.mask.forEach(function (blank) {	14	13	this.mask.forEach(function (blank) {
this.textPieces.push({text: this.text.slice(i, blank[0])});	15	14	this.textPieces.push({text: this.text.slice(i, blank[0])});
this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true});	16	15	this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true});
i = blank[1];	17	16	i = blank[1];
}, this);	18	17	}, this);
this.textPieces.push({text: this.text.slice(i)});	19	18	this.textPieces.push({text: this.text.slice(i)});
		19	this.formatted_text = '';
		20	for (i in this.textPieces) {
		21	p = this.textPieces[i];
		22	this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text;
		23	}
FlashcardCache[this.id] = this;	20	24	FlashcardCache[this.id] = this;
};	21	25	};
Flashcard.prototype.isInDeck = function () {	22	26	Flashcard.prototype.isInDeck = function () {
return this.deck[this.id];	23	27	return !(typeof this.deck[this.id] === 'undefined');
};	24	28	};
Flashcard.prototype.pull = function () {	25	29	Flashcard.prototype.pull = function () {
if (this.deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck");	26	30	if (this.deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck");
return $http.post('/api/flashcards/' + this.id + '/pull/');	27	31	return $http.post('/api/flashcards/' + this.id + '/pull/');
};	28	32	};
Flashcard.prototype.unpull = function () {	29	33	Flashcard.prototype.unpull = function () {
if (!this.deck[this.id]) return console.log('Not unpulling', this.id, "because it's not in deck");	30	34	if (!this.deck[this.id]) return console.log('Not unpulling', this.id, "because it's not in deck");
return $http.post('/api/flashcards/' + this.id + '/unpull/');	31	35	return $http.post('/api/flashcards/' + this.id + '/unpull/');
};	32	36	};
Flashcard.prototype.hide = function () {	33	37	Flashcard.prototype.hide = function () {
return $http.post('/api/flashcards/' + this.id + '/hide/');	34	38	return $http.post('/api/flashcards/' + this.id + '/hide/');
};	35	39	};
	36	40
return Flashcard;	37	41	return Flashcard;

angular.module('flashy.StudyController', ['ui.router']).	1	1	angular.module('flashy.StudyController', ['ui.router']).
	2	2
controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'UserService',	3	3	controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'UserService',
function($scope, $stateParams, $state, $http, UserService) {	4	4	function($scope, $stateParams, $state, $http, UserService) {
console.log('Flashy study controller content in this file. also hell0');	5	5	console.log('Flashy study controller content in this file. also hell0');
sectionId = $stateParams.sectionId;	6	6	sectionId = $stateParams.sectionId;
$scope.isParamOpen = true;	7	7	$scope.isParamOpen = true;
	8	8
$(document).ready(function() {	9	9	$(document).ready(function() {
$('.datepicker').pickadate({	10	10	$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month	11	11	selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year	12	12	selectYears: 15 // Creates a dropdown of 15 years to control year
});	13	13	});
	14	14
$('select').material_select();	15	15	$('select').material_select();
});	16	16	});
	17	17
$scope.UserService = UserService;	18	18	$scope.UserService = UserService;
$scope.isParamOpen = true;	19	19	$scope.isParamOpen = true;
	20	20
console.log($scope.UserService.getUserData().sections);	21	21	console.log($scope.UserService.getUserData().sections);
	22	22
$scope.toggleSectionToStudy = function(id) {	23	23	$scope.toggleSectionToStudy = function(id) {
console.log('toggle sect', id);	24	24	console.log('toggle sect', id);
$scope.sectionToStudy = id;	25	25	$scope.sectionToStudy = id;
};	26	26	};
	27	27
$scope.openParams = function() {	28	28	$scope.openParams = function() {
$scope.isParamOpen = !$scope.isParamOpen;	29	29	$scope.isParamOpen = !$scope.isParamOpen;
};	30	30	};
	31	31
$scope.toggleContent = function(event, index) {	32	32	$scope.toggleContent = function(event, index) {
if ($('#content-x').hasClass('open')) { // let's close it	33	33	if ($('#content-x').hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation	34	34	// Note: 250 is duration (ms) of animation
$('#content-x').slideUp(250).removeClass('open');	35	35	$('#content-x').slideUp(250).removeClass('open');
} else { // let's open it	36	36	} else { // let's open it
$('#content-x').slideDown(250).addClass('open');	37	37	$('#content-x').slideDown(250).addClass('open');
}	38	38	}
};	39	39	};
	40	40
	41	41
/*	42	42	/*
$scope.fetchQuiz = function(a, b) {	43	43	$scope.fetchQuiz = function(a, b) {
//console.log($scope.startDate, $scope.endDate);	44	44	//console.log($scope.startDate, $scope.endDate);
console.log(a, b);	45	45	console.log(a, b);
console.log($('#start-date').val());	46	46	console.log($('#start-date').val());
};	47	47	};
*/	48	48	*/
	49	49
$scope.fetchQuiz = function() {	50	50	$scope.fetchQuiz = function() {
console.log('fetching quiz...');	51	51	console.log('fetching quiz...');
var studyRequest = {	52	52	var studyRequest = {
'sections': ($scope.sectionToStudy == null) ? [] : [$scope.sectionToStudy]	53	53	'sections': ($scope.sectionToStudy == null) ? [] : [$scope.sectionToStudy]
};	54	54	};
console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');	55	55	console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');
console.log('study sect', $scope.sectionToStudy);	56	56	console.log('study sect', $scope.sectionToStudy);
	57	57
	58	58
$http.post('/api/study/', studyRequest).	59	59	$http.post('/api/study/', studyRequest).
success(function(data) {	60	60	success(function(data) {
console.log('Fetched card:', data);	61	61	console.log('Fetched card:', data);
}).error(function(err) {	62	62	}).error(function(err) {
});	63	63	});
};	64	64	};
	65	65
/* OLD STUFF :in case you still neeed it */	66	66	/* OLD STUFF :in case you still neeed it */
// Flashcard content	67	67	// Flashcard content
$scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk ';	68	68	$scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk ';
//single card	69	69	//single card
$scope.samples =	70	70	$scope.samples =
{	71	71	{
'name': 'lol',	72	72	'name': 'lol',
'text': 'sample text here 111111 woo hoo I think it works',	73	73	'text': 'sample text here 111111 woo hoo I think it works',
'mask': [[0, 6], [16, 23]]	74	74	'mask': [[0, 6], [16, 23]]
};	75	75	};
	76	76
// get text to display as array	77	77	// get text to display as array
$scope.displayText = [];	78	78	$scope.displayText = [];
// get answers to blanks as array	79	79	// get answers to blanks as array
$scope.blankText = [];	80	80	$scope.blankText = [];
var start = 0; // where to start next string break	81	81	var start = 0; // where to start next string break
for (var i = 0; i < $scope.samples.mask.length; i++) {	82	82	for (var i = 0; i < $scope.samples.mask.length; i++) {
$scope.displayText.push($scope.samples.text.substring(start, $scope.samples.mask[i][0]));	83	83	$scope.displayText.push($scope.samples.text.substring(start, $scope.samples.mask[i][0]));
$scope.blankText.push($scope.samples.text.substring($scope.samples.mask[i][0], $scope.samples.mask[i][1]));	84	84	$scope.blankText.push($scope.samples.text.substring($scope.samples.mask[i][0], $scope.samples.mask[i][1]));
start = $scope.samples.mask[i][1];	85	85	start = $scope.samples.mask[i][1];