110swag / flashy-frontend

Download as
Browse Code ยป

Commit 7cf67e5616aa5ca55642b7f4f56af534c25ddd1a

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

merge proper

Showing 1 changed file with 42 additions and 60 deletions Inline Diff

scripts/FeedController.js View file @ 7cf67e5
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']). 1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']).
2 2
controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) { 3 3 controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
console.log('Hello from feed'); 4 4 console.log('Hello from feed');
sectionId = parseInt($stateParams.sectionId); 5 5 sectionId = parseInt($stateParams.sectionId);
if (!UserService.isInSection(sectionId)) { 6 6 if (!UserService.isInSection(sectionId)) {
console.log('user is not enrolled in ' + sectionId); 7 7 console.log('user is not enrolled in ' + sectionId);
return $state.go('addclass'); 8 8 return $state.go('addclass');
} 9 9 }
$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId}); 10 10 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
$rootScope.debug_flashcard = false; 11 11 $rootScope.debug_flashcard = false;
$scope.cards = false; 12 12 $scope.cards = false;
$scope.cardCols = []; // organized data 13 13 $scope.cardCols = []; // organized data
$scope.numCols = 0; 14 14 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 15 15 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
16 16
function calculate_cols() { 17 17 function calculate_cols() {
var avail = $window.innerWidth - 17; 18 18 var avail = $window.innerWidth - 17;
return Math.max(1, Math.floor(avail / 250)); 19 19 return Math.max(1, Math.floor(avail / 250));
} 20 20 }
21 21
$scope.refreshColumnWidth = function() { 22 22 $scope.refreshColumnWidth = function() {
console.log('refreshing column width'); 23 23 console.log('refreshing column width');
avail = $window.innerWidth - 17; 24 24 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 25 25 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 26 26 $('.cardColumn').css({
width: width + 'px', 27 27 width: width + 'px',
'font-size': 100 * width / 250 + '%' 28 28 'font-size': 100 * width / 250 + '%'
}); 29 29 });
$('.cardColumn .card.flashy').css({ 30 30 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 31 31 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 32 32 height: (width * 3 / 5) + 'px'
}); 33 33 });
}; 34 34 };
35 35
$scope.refreshLayout = function() { 36 36 $scope.refreshLayout = function() {
// check if we actually need to refresh the whole layout 37 37 // check if we actually need to refresh the whole layout
if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth(); 38 38 if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = calculate_cols(); 39 39 $scope.numCols = calculate_cols();
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 40 40 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 41 41 $scope.cardCols = [];
var cols = []; 42 42 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 43 43 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 44 44 $scope.cards.forEach(function(card, i) {
cols[i % $scope.numCols].push(card); 45 45 cols[i % $scope.numCols].push(card);
$scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card}; 46 46 $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
}); 47 47 });
// wait until the next digest cycle to update cardCols 48 48 // wait until the next digest cycle to update cardCols
49 49
$timeout(function() { 50 50 $timeout(function() {
$scope.cardCols = cols; 51 51 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 52 52 $timeout($scope.refreshColumnWidth);
}); 53 53 });
54 54
}; 55 55 };
56 56
angular.element($window).bind('resize', $scope.refreshLayout); 57 57 angular.element($window).bind('resize', $scope.refreshLayout);
58 58
$scope.refreshCards = function() { 59 59 $scope.refreshCards = function() {
$http.get('/api/sections/' + sectionId + '/feed/'). 60 60 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 61 61 success(function(data) {
console.log(data); 62 62 console.log(data);
$scope.cards = data; 63 63 $scope.cards = data;
$scope.refreshLayout(); 64 64 $scope.refreshLayout();
console.log('success in refresh cards...'); 65 65 console.log('success in refresh cards...');
}). 66 66 }).
error(function(err) { 67 67 error(function(err) {
console.log('refresh fail'); 68 68 console.log('refresh fail');
console.log(err); 69 69 console.log(err);
}); 70 70 });
}; 71 71 };
72 72
$scope.add = function(card) { 73 73 $scope.add = function(card) {
var colNum = 0; 74 74 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 75 75 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 76 76 var lowestColNum = 0;
while (colNum < $scope.numCols) { 77 77 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 78 78 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 79 79 lowestCol = $scope.cardCols[colNum];
break; 80 80 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 81 81 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 82 82 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 83 83 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 84 84 lowestColLen = $scope.cardCols[colNum].length;
} 85 85 }
colNum++; 86 86 colNum++;
} 87 87 }
console.log(card); 88 88 console.log(card);
$scope.cards.push(data); 89 89 $scope.cards.push(data);
$timeout(function() { 90 90 $timeout(function() {
lowestCol.unshift(card); 91 91 lowestCol.unshift(card);
$scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card}; 92 92 $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
$timeout($scope.refreshColumnWidth); 93 93 $timeout($scope.refreshColumnWidth);
}); 94 94 });
}; 95 95 };
96 96
$scope.sortAdd = function(card, array) { 97 97 $scope.sortAdd = function(card, array) {
console.log('sort add'); 98 98 console.log('sort add');
array.forEach(function(ele, i, ary) { 99 99 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 100 100 if (ele.score <= card.score) {
ary.splice(i, 0, card); 101 101 ary.splice(i, 0, card);
return; 102 102 return;
} 103 103 }
}); 104 104 });
}; 105 105 };
106 106
$scope.hide = function(card) { 107 107 $scope.hide = function(card) {
console.log('hiding card'); 108 108 console.log('hiding card');
var found = -1; 109 109 var found = -1;
col = $scope.cardTable[card.id].colNum; 110 110 col = $scope.cardTable[card.id].colNum;
found = $scope.cardCols[col].indexOf(card); 111 111 found = $scope.cardCols[col].indexOf(card);
if (found != -1) { 112 112 if (found != -1) {
$scope.cardCols[col].splice(found, 1); 113 113 $scope.cardCols[col].splice(found, 1);
console.log('card hidden'); 114 114 console.log('card hidden');
return col; 115 115 return col;
} 116 116 }
console.log('Error finding card to hide:'); 117 117 console.log('Error finding card to hide:');
console.log(card); 118 118 console.log(card);
return -1; 119 119 return -1;
}; << 120 120 };
<< << < HEAD; 121 121 $scope.update = function(id, new_score) { // NOT WORKING
122 /*card = $scope.cardTable[id].obj;
123 if (new_score == card.score) {
124 console.log('score same, no update required');
125 return;
126 }
127 console.log('updating');
128 card.score = new_score;
129 console.log(card);
130 col = $scope.hide(card)
131 if (col != -1) {
132 $scope.sortAdd(card, $scope.cardCols[col]);
133 }*/
134 };
122 135
$scope.update = function(id, new_score) { === // NOT WORKING 123
/*card = $scope.cardTable[id].obj; 124
if (new_score == card.score) { 125
======= 126
127
$scope.update = function(id, new_score) { 128
card = $scope.cardTable[id].obj; 129
if (Math.abs(new_score - card.score) < .0001) { 130
>>>>>>> 5d2fe8fd2eba8b425eb41fe6382ff57ae66bb100 131
console.log('score same, no update required'); 132
return; 133
} 134
console.log('updating'); 135
card.score = new_score; 136
console.log(card); 137
<<<<<<< HEAD 138
139
col = $scope.hide(card) 140
if (col != -1) { 141
$scope.sortAdd(card, $scope.cardCols[col]); 142
}*/ 143
=== = 144
var column = $scope.cardCols[$scope.cardTable[id].colNum]; 145
var found = column.indexOf(card); 146
var i = 0; 147
for (; i < column.length; i++) 148
if (column[i].score <= card.score) break; 149
column.splice(i, 0, column.splice(found, 1)[0]); >>> 150
>>> > 5d2fe8fd2eba8b425eb41fe6382ff57ae66bb100; 151
}; 152
153
var loc = window.location, new_uri; 154 136 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 155 137 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 156 138 new_uri = 'wss:';
} else { 157 139 } else {
new_uri = 'ws:'; 158 140 new_uri = 'ws:';
} 159 141 }
new_uri += '//' + loc.host; 160 142 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 161 143 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
162 144
ws.onopen = function() { 163 145 ws.onopen = function() {
console.log('websocket connected'); 164 146 console.log('websocket connected');
}; 165 147 };
ws.onmessage = function(e) { 166 148 ws.onmessage = function(e) {
data = JSON.parse(e.data); 167 149 data = JSON.parse(e.data);
console.log('got websocket message ' + e.data); 168 150 console.log('got websocket message ' + e.data);
console.log(data); 169 151 console.log(data);
if (data.event_type == 'new_card') { 170 152 if (data.event_type == 'new_card') {
$scope.add(data.flashcard); 171 153 $scope.add(data.flashcard);
} else if (data.event_type == 'score_change') { 172 154 } else if (data.event_type == 'score_change') {
$scope.update(data.flashcard_id, data.new_score); 173 155 $scope.update(data.flashcard_id, data.new_score);
} 174 156 }
}; 175 157 };
ws.onerror = function(e) { 176 158 ws.onerror = function(e) {
console.error(e); 177 159 console.error(e);
}; 178 160 };
ws.onclose = function(e) { 179 161 ws.onclose = function(e) {
console.log('connection closed'); 180 162 console.log('connection closed');
}; 181 163 };
182 164
var resetModal = function() { 183 165 var resetModal = function() {
$('#new-card-input').html(''); 184 166 $('#new-card-input').html('');
$('#newCard').closeModal(modal_options); 185 167 $('#newCard').closeModal(modal_options);
}; 186 168 };
187 169
$scope.pushCard = function() { 188 170 $scope.pushCard = function() {
var i = 0; 189 171 var i = 0;
var blanks = []; 190 172 var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 191 173 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 192 174 if (typeof node.data == 'undefined') {
console.log('undefined node'); 193 175 console.log('undefined node');
return resetModal(); 194 176 return resetModal();
} 195 177 }
node = $(node)[0]; 196 178 node = $(node)[0];
console.log(node); 197 179 console.log(node);
if (node.tagName == 'B') { 198 180 if (node.tagName == 'B') {
text = $(node).text(); 199 181 text = $(node).text();
blanks.push([i, i + text.length]); 200 182 blanks.push([i, i + text.length]);
i += text.length; 201 183 i += text.length;
} else { 202 184 } else {
i += node.data.length; 203 185 i += node.data.length;
} 204 186 }
}); 205 187 });
var myCard = { 206 188 var myCard = {
'text': $('#new-card-input').text().trim(), 207 189 'text': $('#new-card-input').text().trim(),
'mask': blanks, 208 190 'mask': blanks,
section: sectionId 209 191 section: sectionId
}; 210 192 };
if (myCard.text == '') { 211 193 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 212 194 console.log('blank flashcard not pushed:' + myCard.text);
return resetModal(); 213 195 return resetModal();
} 214 196 }
$http.post('/api/flashcards/', myCard). 215 197 $http.post('/api/flashcards/', myCard).
success(function(data) { 216 198 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 217 199 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 218 200 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 219 201 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 220 202 }
221 203
}). 222 204 }).
error(function(error) { 223 205 error(function(error) {
console.log('something went wrong pushing a card!'); 224 206 console.log('something went wrong pushing a card!');
}); 225 207 });
return resetModal(); 226 208 return resetModal();
}; 227 209 };
228 210
/* Key bindings for the whole feed window. Hotkey it up! */ 229 211 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 230 212 var listenForC = true;
231 213
// Need to pass these options into openmodal and leanmodal, 232 214 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 233 215 // otherwise the ready handler doesn't get called
234 216
modal_options = { 235 217 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 236 218 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 237 219 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 238 220 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 239 221 out_duration: 200, // Transition out duration
ready: function() { 240 222 ready: function() {
listenForC = false; 241 223 listenForC = false;
console.log('modal OPENING'); 242 224 console.log('modal OPENING');
$('#new-card-input').focus(); 243 225 $('#new-card-input').focus();
}, 244 226 },
complete: function() { 245 227 complete: function() {
listenForC = true; 246 228 listenForC = true;
console.log('modal done, closing'); 247 229 console.log('modal done, closing');
$('#new-card-input').blur(); 248 230 $('#new-card-input').blur();
} 249 231 }
}; 250 232 };
251 233
$(document).keydown(function(e) { 252 234 $(document).keydown(function(e) {
var keyed = e.which; 253 235 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 254 236 if (keyed == 67 && listenForC) { // "c" for compose
$('#newCard').openModal(modal_options); 255 237 $('#newCard').openModal(modal_options);
e.preventDefault(); 256 238 e.preventDefault();
listenForC = false; 257 239 listenForC = false;
return false; 258 240 return false;
} else if (keyed == 27) { // clear on ESC 259 241 } else if (keyed == 27) { // clear on ESC
listenForC = true; 260 242 listenForC = true;
document.getElementById('new-card-input').value = ''; 261 243 document.getElementById('new-card-input').value = '';
} 262 244 }
}); 263 245 });
$(document).ready(function() { 264 246 $(document).ready(function() {
$('.tooltipped').tooltip({delay: 50}); 265 247 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 266 248 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 267 249 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 268 250 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 269 251 if (e.which == 13) {
e.preventDefault(); 270 252 e.preventDefault();
$scope.pushCard(); 271 253 $scope.pushCard();
listenForC = true; 272 254 listenForC = true;
return false; 273 255 return false;
} 274 256 }
}); 275 257 });
$('button#blank-selected').click(function() { 276 258 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 277 259 console.log(window.getSelection());
document.execCommand('bold'); 278 260 document.execCommand('bold');
}); 279 261 });
}); 280 262 });
$scope.refreshCards(); 281 263 $scope.refreshCards();
$scope.$on('$destroy', function() { 282 264 $scope.$on('$destroy', function() {
ws.close(); 283 265 ws.close();
$rootScope.currentSection = {}; 284 266 $rootScope.currentSection = {};
$(document).off('keydown'); 285 267 $(document).off('keydown');
}); 286 268 });
287 269
$scope.shuffleCards = function() { 288 270 $scope.shuffleCards = function() {
$timeout(function() { 289 271 $timeout(function() {
(function(o) { 290 272 (function(o) {
for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 291 273 for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o; 292 274 return o;
})($scope.cardCols[0]); 293 275 })($scope.cardCols[0]);
}); 294 276 });
}; 295 277 };
window.feedscope = $scope; 296 278 window.feedscope = $scope;
297 279
}); 298 280 });
299 281