110swag / flashy-frontend

Download as
Browse Code ยป

Commit 180aa08bb854a7122ebeee09dc578ae172eaa77d

Authored by Andrew Buss
1 parent bf0941f00c
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

hide now working

Showing 4 changed files with 23 additions and 17 deletions Inline Diff

scripts/CardGridController.js View file @ 180aa08
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) { 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) {
cols[i % $scope.numCols].push(card); 41 41 card.colNum = i % $scope.numCols;
$scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card}; 42 42 cols[card.colNum].push(card);
card.isInDeck(); 43
}); 44 43 });
// wait until the next digest cycle to update cardCols 45 44 for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols); 46 45 console.log(cols);
$timeout(function() { 47 46 $timeout(function() {
$scope.cardCols = cols; 48 47 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 49 48 $timeout($scope.refreshColumnWidth);
}); 50 49 });
51 50
}; 52 51 };
53 52
angular.element($window).bind('resize', $scope.refreshLayout); 54 53 angular.element($window).bind('resize', $scope.refreshLayout);
55 54
$scope.ws_host = window.location.origin.replace('http', 'ws'); 56 55 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 57 56 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 58 57 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 59 58 console.log('deck ws open');
}); 60 59 });
61 60
$scope.deck_ws.onMessage(function(message) { 62 61 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 63 62 data = JSON.parse(message.data);
console.log('message', data); 64 63 console.log('message', data);
64 card = new Flashcard(data.flashcard.id);
if (data.event_type == 'card_pulled') { 65 65 if (data.event_type == 'card_pulled') {
card = data.flashcard; 66
console.log('pulling', card); 67
$scope.deck[card.id] = card; 68 66 $scope.deck[card.id] = card;
} 69 67 }
if (data.event_type == 'card_unpulled') { 70 68 if (data.event_type == 'card_unpulled') {
card = data.flashcard; 71
$scope.deck[card.id] = undefined; 72 69 $scope.deck[card.id] = undefined;
} 73 70 }
71 if (data.event_type == 'card_hidden') {
72 $scope.hideCardFromGrid(card);
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) {
102 for (i in col)
103 col[i].colRank = i;
104 };
105 $scope.hideCardFromGrid = function(card) {
106 console.log('hiding', card);
107 $scope.cardCols[card.colNum].splice(card.colRank, 1);
108 $scope.updateColRanks($scope.cardCols[card.colNum]);
109 };
101 110
102
$http.get('/api/sections/' + $scope.sectionId + '/deck/'). 103 111 $http.get('/api/sections/' + $scope.sectionId + '/deck/').
success(function(data) { 104 112 success(function(data) {
105
for (i in data) $scope.deck[data[i].id] = data[i]; 106 113 for (i in data) $scope.deck[data[i].id] = data[i];
console.log("got user's deck"); 107 114 console.log("got user's deck");
}). 108 115 }).
scripts/FeedController.js View file @ 180aa08
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(flashcard) { 30 30 $scope.updateCardScore = function(card) {
card = new Flashcard(flashcard.id); 31
console.log('old score', card.score); 32 31 console.log('old score', card.score);
card.score = flashcard.score; 33 32 card.score = flashcard.score;
console.log('new score', card.score); 34 33 console.log('new score', card.score);
$scope.cardCols[$scope.cardTable[card.id].colNum].sort(function(a, b) { 35 34 $scope.cardCols[$scope.cardTable[card.id].colNum].sort(function(a, b) {
return b.score - a.score; 36 35 return b.score - a.score;
}); 37 36 });
}; 38 37 };
39 38
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 40 39 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) { 41 40 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 42 41 data = JSON.parse(e.data);
console.log('message', data); 43 42 console.log('message', data);
if (data.event_type == 'new_card') { 44 43 if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck)); 45 44 $scope.addCardToGrid(new Flashcard(data.flashcard), $scope.deck);
} else if (data.event_type == 'score_change') { 46 45 } else if (data.event_type == 'score_change') {
$scope.updateCardScore(data.flashcard); 47 46 card = new Flashcard(data.flashcard.id);
47 $scope.updateCardScore(new Flashcard(data.flashcard.id));
} 48 48 }
}); 49 49 });
50 50
$scope.pushCard = function() { 51 51 $scope.pushCard = function() {
var myCard = { 52 52 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 53 53 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 54 54 'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks, 55 55 'mask': $scope.newCardBlanks,
section: $scope.section.id 56 56 section: $scope.section.id
}; 57 57 };
if (myCard.text == '') { 58 58 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 59 59 console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard(); 60 60 return closeNewCard();
} 61 61 }
$http.post('/api/flashcards/', myCard). 62 62 $http.post('/api/flashcards/', myCard).
success(function(data) { 63 63 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 64 64 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 65 65 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 66 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 67 67 }
}). 68 68 }).
error(function(error) { 69 69 error(function(error) {
console.log('something went wrong pushing a card!'); 70 70 console.log('something went wrong pushing a card!');
}); 71 71 });
return $scope.closeNewCardModal(); 72 72 return $scope.closeNewCardModal();
}; 73 73 };
74 74
/* Key bindings for the whole feed window. Hotkey it up! */ 75 75 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 76 76 var listenForC = true;
77 77
// Need to pass these options into openmodal and leanmodal, 78 78 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 79 79 // otherwise the ready handler doesn't get called
80 80
modal_options = { 81 81 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 82 82 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 83 83 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 84 84 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 85 85 out_duration: 200, // Transition out duration
ready: function() { 86 86 ready: function() {
$('#new-card-input').focus(); 87 87 $('#new-card-input').focus();
document.execCommand('selectAll', false, null); 88 88 document.execCommand('selectAll', false, null);
} 89 89 }
}; 90 90 };
91 91
$(document).keydown(function(e) { 92 92 $(document).keydown(function(e) {
var keyed = e.which; 93 93 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 94 94 if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal(); 95 95 $scope.openNewCardModal();
e.preventDefault(); 96 96 e.preventDefault();
return false; 97 97 return false;
} else if (keyed == 27) { // clear on ESC 98 98 } else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal(); 99 99 $scope.closeNewCardModal();
} 100 100 }
}); 101 101 });
102 102
$scope.openNewCardModal = function() { 103 103 $scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options); 104 104 $('#newCard').openModal(modal_options);
listenForC = false; 105 105 listenForC = false;
$('#new-card-input').html('Write a flashcard!'); 106 106 $('#new-card-input').html('Write a flashcard!');
}; 107 107 };
108 108
$scope.closeNewCardModal = function() { 109 109 $scope.closeNewCardModal = function() {
listenForC = true; 110 110 listenForC = true;
$('#new-card-input').html('').blur(); 111 111 $('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options); 112 112 $('#newCard').closeModal(modal_options);
}; 113 113 };
114 114
$('.tooltipped').tooltip({delay: 50}); 115 115 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 116 116 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 117 117 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 118 118 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 119 119 if (e.which == 13) {
e.preventDefault(); 120 120 e.preventDefault();
if ($scope.submit_enabled) { 121 121 if ($scope.submit_enabled) {
$scope.pushCard(); 122 122 $scope.pushCard();
listenForC = true; 123 123 listenForC = true;
} 124 124 }
return false; 125 125 return false;
} else { 126 126 } else {
127 127
} 128 128 }
}); 129 129 });
$('button#blank-selected').click(function() { 130 130 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 131 131 console.log(window.getSelection());
document.execCommand('bold'); 132 132 document.execCommand('bold');
}); 133 133 });
$scope.refreshCards(); 134 134 $scope.refreshCards();
$scope.newCardBlanks = []; 135 135 $scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() { 136 136 $scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text(); 137 137 $scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160; 138 138 $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0; 139 139 var i = 0;
$scope.newCardBlanks = []; 140 140 $scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 141 141 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 142 142 if (typeof node.data == 'undefined') {
console.log('undefined node'); 143 143 console.log('undefined node');
} 144 144 }
node = $(node)[0]; 145 145 node = $(node)[0];
if (node.tagName == 'B') { 146 146 if (node.tagName == 'B') {
var text = $(node).text(); 147 147 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 148 148 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 149 149 // 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 150 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 151 151 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 152 152 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 153 153 if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 154 154 i += text.length;
} else if (!node.data) { 155 155 } else if (!node.data) {
console.log('weird node', node); 156 156 console.log('weird node', node);
i += $(node).text().length; 157 157 i += $(node).text().length;
} else { 158 158 } else {
i += node.data.length; 159 159 i += node.data.length;
} 160 160 }
}); 161 161 });
$scope.newCardBlanks.sort(function(a, b) { 162 162 $scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0]; 163 163 return a[0] - b[0];
}); 164 164 });
i = 0; 165 165 i = 0;
newtext = ''; 166 166 newtext = '';
console.log($scope.newCardBlanks); 167 167 console.log($scope.newCardBlanks);
$scope.newCardBlanks.forEach(function(blank) { 168 168 $scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]); 169 169 newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>'; 170 170 newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 171 171 i = blank[1];
}); 172 172 });
newtext += $scope.newCardText.slice(i); 173 173 newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext; 174 174 //$scope.newCardFormattedText = newtext;
}; 175 175 };
$scope.shuffleCards = function() { 176 176 $scope.shuffleCards = function() {
$timeout(function() { 177 177 $timeout(function() {
scripts/SettingsController.js View file @ 180aa08
angular.module('flashy.SettingsController', ['ui.router']). 1 1 angular.module('flashy.SettingsController', ['ui.router']).
2 2
controller('SettingsController', function($scope, $http) { 3 3 controller('SettingsController', function($scope, $http) {
$scope.changePassword = function(oldPassword, newPassword, confirmedNewPassword) { 4 4 $scope.changePassword = function(oldPassword, newPassword, confirmedNewPassword) {
5 5
}; 6 6 };
console.log('checking to see if chrome'); 7 7 console.log('checking to see if chrome');
if (!chrome) { return; } 8 8 if (!chrome) { return; }
console.log('chrome'); 9 9 console.log('chrome');
$scope.registerCallback = function(registrationId) { 10 10 $scope.registerCallback = function(registrationId) {
if (chrome.runtime.lastError) { 11 11 if (chrome.runtime.lastError) {
console.log('Registration failed'); 12 12 console.log('Registration failed');
} 13 13 }
14 14
sendRegistrationId(registrationId, function(succeed) { 15 15 sendRegistrationId(registrationId, function(succeed) {
if (succeed) { 16 16 if (succeed) {
chrome.storage.local.set({registered: true}); 17 17 chrome.storage.local.set({registered: true});
} 18 18 }
}); 19 19 });
}; 20 20 };
21 21
function sendRegistrationId(registrationId, callback) { 22 22 function sendRegistrationId(registrationId, callback) {
console.log('registration id: '+ registrationId); 23 23 console.log('registration id: ' + registrationId);
$http.post('/api/subscribe/', JSON.stringify({ 24 24 $http.post('/api/subscribe/', JSON.stringify({
'registration_id': registrationId 25 25 'registration_id': registrationId
})); 26 26 }));
callback(true); 27 27 callback(true);
} 28 28 }
29 29
console.log(chrome.runtime.onStartup); 30 30 console.log(chrome.runtime.onStartup);
chrome.runtime.onStartup.addListener(function() { 31 31 chrome.runtime.onStartup.addListener(function() {
chrome.storage.local.get('registered', function(result) { 32 32 chrome.storage.local.get('registered', function(result) {
// If already registered, bail out. 33 33 // If already registered, bail out.
if (result['registered']) 34 34 if (result['registered'])
return; 35 35 return;
36 36
// Up to 100 senders are allowed. 37 37 // Up to 100 senders are allowed.
templates/flashcard.html View file @ 180aa08
<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}">
<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">
<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=" 22 22 <div class="right-box" ng-click="flashcard.hide()">
hideCard(flashcard)"> 23
<div class="center-me"><i class="mdi-action-delete small"></i></div> 24 23 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 25 24 </div>
26 25
</div> 27 26 </div>
</div> 28 27 </div>
<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:0px;right:0px"> 29 28 <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:0px;right:0px">
<div class="center-me"><i class="mdi-action-done small"></i></div> 30 29 <div class="center-me"><i class="mdi-action-done small"></i></div>
</div> 31 30 </div>
<div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;"> 32 31 <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
<span class="center-me">score:{{flashcard.score}}</span> 33 32 <span class="center-me">score:{{flashcard.score}}</span>
</div> 34 33 </div>
</div> 35 34 </div>