110swag / flashy-frontend

Download as
Browse Code ยป

Commit 517adf2f1639351a502ce4900f1832001228d263

Authored by Tetranoir
1 parent c29a5bddf4
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

listening for scorechange, doesnt do anything

Showing 1 changed file with 3 additions and 1 deletions Inline Diff

scripts/FeedController.js View file @ 517adf2
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 = $stateParams.sectionId; 5 5 sectionId = $stateParams.sectionId;
$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId}); 6 6 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
$scope.cards = false; 7 7 $scope.cards = false;
$scope.cardCols = []; // organized data 8 8 $scope.cardCols = []; // organized data
$scope.numCols = 0; 9 9 $scope.numCols = 0;
10 10
function calculate_cols() { 11 11 function calculate_cols() {
var avail = $window.innerWidth - 17; 12 12 var avail = $window.innerWidth - 17;
return Math.max(1, Math.floor(avail / 250)); 13 13 return Math.max(1, Math.floor(avail / 250));
} 14 14 }
15 15
$scope.refreshColumnWidth = function() { 16 16 $scope.refreshColumnWidth = function() {
console.log('refreshing column width'); 17 17 console.log('refreshing column width');
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() {
// check if we actually need to refresh the whole layout 31 31 // check if we actually need to refresh the whole layout
if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth(); 32 32 if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = calculate_cols(); 33 33 $scope.numCols = calculate_cols();
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 34 34 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 35 35 $scope.cardCols = [];
var cols = []; 36 36 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 37 37 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 38 38 $scope.cards.forEach(function(card, i) {
cols[i % $scope.numCols].push(card); 39 39 cols[i % $scope.numCols].push(card);
}); 40 40 });
// wait until the next digest cycle to update cardCols 41 41 // wait until the next digest cycle to update cardCols
42 42
$timeout(function() { 43 43 $timeout(function() {
$scope.cardCols = cols; 44 44 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 45 45 $timeout($scope.refreshColumnWidth);
}); 46 46 });
47 47
}; 48 48 };
49 49
angular.element($window).bind('resize', $scope.refreshLayout); 50 50 angular.element($window).bind('resize', $scope.refreshLayout);
51 51
$scope.refreshCards = function() { 52 52 $scope.refreshCards = function() {
$http.get('/api/sections/' + sectionId + '/feed/'). 53 53 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 54 54 success(function(data) {
console.log(data); 55 55 console.log(data);
$scope.cards = data; 56 56 $scope.cards = data;
$scope.refreshLayout(); 57 57 $scope.refreshLayout();
console.log('success in refresh cards...'); 58 58 console.log('success in refresh cards...');
}). 59 59 }).
error(function(err) { 60 60 error(function(err) {
console.log('refresh fail'); 61 61 console.log('refresh fail');
}); 62 62 });
}; 63 63 };
64 64
$scope.add = function(card) { 65 65 $scope.add = function(card) {
var colNum = 0; 66 66 var colNum = 0;
var lowestCol = {}; 67 67 var lowestCol = {};
var lowestColLen = Infinity; 68 68 var lowestColLen = Infinity;
while (colNum < $scope.numCols) { 69 69 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 70 70 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 71 71 lowestCol = $scope.cardCols[colNum];
break; 72 72 break;
} else if ($scope.cardCols[colNum].length < lowestColLen) { 73 73 } else if ($scope.cardCols[colNum].length < lowestColLen) {
lowestCol = $scope.cardCols[colNum]; 74 74 lowestCol = $scope.cardCols[colNum];
lowestColLen = $scope.cardCols[colNum].length; 75 75 lowestColLen = $scope.cardCols[colNum].length;
} 76 76 }
colNum++; 77 77 colNum++;
} 78 78 }
/*if (colNum == $scope.numCols) { 79 79 /*if (colNum == $scope.numCols) {
colNum = Math.floor(Math.random() * $scope.numCols); 80 80 colNum = Math.floor(Math.random() * $scope.numCols);
} 81 81 }
console.log('adding card to column ' + colNum);*/ 82 82 console.log('adding card to column ' + colNum);*/
console.log(card); 83 83 console.log(card);
$scope.cards.push(data); 84 84 $scope.cards.push(data);
$timeout(function() { 85 85 $timeout(function() {
lowestCol.unshift(card); 86 86 lowestCol.unshift(card);
$timeout($scope.refreshColumnWidth); 87 87 $timeout($scope.refreshColumnWidth);
}); 88 88 });
}; 89 89 };
90 90
$scope.hide = function(card) { 91 91 $scope.hide = function(card) {
console.log('hiding card'); 92 92 console.log('hiding card');
var found = -1; 93 93 var found = -1;
for (i = 0; i < $scope.cardCols.length; i++) { 94 94 for (i = 0; i < $scope.cardCols.length; i++) {
found = $scope.cardCols[i].indexOf(card); 95 95 found = $scope.cardCols[i].indexOf(card);
if (found != -1) { 96 96 if (found != -1) {
$timeout(function() { 97 97 $timeout(function() {
console.log('card to hide, found'); 98 98 console.log('card to hide, found');
}); 99 99 });
$scope.cardCols[i].splice(found, 1); 100 100 $scope.cardCols[i].splice(found, 1);
return; 101 101 return;
} 102 102 }
} 103 103 }
console.log('Error finding card to hide:'); 104 104 console.log('Error finding card to hide:');
console.log(card); 105 105 console.log(card);
}; 106 106 };
107 107
var loc = window.location, new_uri; 108 108 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 109 109 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 110 110 new_uri = 'wss:';
} else { 111 111 } else {
new_uri = 'ws:'; 112 112 new_uri = 'ws:';
} 113 113 }
new_uri += '//' + loc.host; 114 114 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 115 115 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
116 116
ws.onopen = function() { 117 117 ws.onopen = function() {
console.log('websocket connected'); 118 118 console.log('websocket connected');
}; 119 119 };
ws.onmessage = function(e) { 120 120 ws.onmessage = function(e) {
console.log('got websocket message ' + e.data); 121 121 console.log('got websocket message ' + e.data);
data = JSON.parse(e.data); 122 122 data = JSON.parse(e.data);
if (data.event_type == 'new_card') { 123 123 if (data.event_type == 'new_card') {
$scope.add(data.flashcard); 124 124 $scope.add(data.flashcard);
} 125 125 } else if (data.event_type == 'score_change') {
126 //
127 }
}; 126 128 };
ws.onerror = function(e) { 127 129 ws.onerror = function(e) {
console.error(e); 128 130 console.error(e);
}; 129 131 };
ws.onclose = function(e) { 130 132 ws.onclose = function(e) {
console.log('connection closed'); 131 133 console.log('connection closed');
}; 132 134 };
133 135
var resetModal = function() { 134 136 var resetModal = function() {
$('#new-card-input').html(''); 135 137 $('#new-card-input').html('');
$('#newCard').closeModal(modal_options); 136 138 $('#newCard').closeModal(modal_options);
} 137 139 }
138 140
$scope.pushCard = function() { 139 141 $scope.pushCard = function() {
var i = 0; 140 142 var i = 0;
var blanks = []; 141 143 var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 142 144 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 143 145 if (typeof node.data == 'undefined') {
console.log('undefined node'); 144 146 console.log('undefined node');
return resetModal(); 145 147 return resetModal();
} 146 148 }
node = $(node)[0]; 147 149 node = $(node)[0];
console.log(node); 148 150 console.log(node);
if (node.tagName == 'B') { 149 151 if (node.tagName == 'B') {
text = $(node).text(); 150 152 text = $(node).text();
blanks.push([i, i + text.length]); 151 153 blanks.push([i, i + text.length]);
i += text.length; 152 154 i += text.length;
} else { 153 155 } else {
i += node.data.length; 154 156 i += node.data.length;
} 155 157 }
}); 156 158 });
var myCard = { 157 159 var myCard = {
'text': $('#new-card-input').text().trim(), 158 160 'text': $('#new-card-input').text().trim(),
'mask': blanks, 159 161 'mask': blanks,
section: sectionId 160 162 section: sectionId
}; 161 163 };
if (myCard.text == '') { 162 164 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 163 165 console.log('blank flashcard not pushed:' + myCard.text);
return resetModal(); 164 166 return resetModal();
} 165 167 }
$http.post('/api/flashcards/', myCard). 166 168 $http.post('/api/flashcards/', myCard).
success(function(data) { 167 169 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 168 170 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 169 171 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 170 172 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 171 173 }
172 174
}). 173 175 }).
error(function(error) { 174 176 error(function(error) {
console.log('something went wrong pushing a card!'); 175 177 console.log('something went wrong pushing a card!');
}); 176 178 });
return resetModal(); 177 179 return resetModal();
}; 178 180 };
179 181
/* Key bindings for the whole feed window. Hotkey it up! */ 180 182 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 181 183 var listenForC = true;
182 184
// Need to pass these options into openmodal and leanmodal, 183 185 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 184 186 // otherwise the ready handler doesn't get called
185 187
modal_options = { 186 188 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 187 189 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 188 190 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 189 191 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 190 192 out_duration: 200, // Transition out duration
ready: function() { 191 193 ready: function() {
listenForC = false; 192 194 listenForC = false;
console.log('modal OPENING'); 193 195 console.log('modal OPENING');
$('#new-card-input').focus(); 194 196 $('#new-card-input').focus();
}, 195 197 },
complete: function() { 196 198 complete: function() {
listenForC = true; 197 199 listenForC = true;
console.log('modal done, closing'); 198 200 console.log('modal done, closing');
$('#new-card-input').blur(); 199 201 $('#new-card-input').blur();
} 200 202 }
}; 201 203 };
202 204
$(document).keydown(function(e) { 203 205 $(document).keydown(function(e) {
var keyed = e.which; 204 206 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 205 207 if (keyed == 67 && listenForC) { // "c" for compose
$('#newCard').openModal(modal_options); 206 208 $('#newCard').openModal(modal_options);
e.preventDefault(); 207 209 e.preventDefault();
listenForC = false; 208 210 listenForC = false;
return false; 209 211 return false;
} else if (keyed == 27) { // clear on ESC 210 212 } else if (keyed == 27) { // clear on ESC
listenForC = true; 211 213 listenForC = true;
document.getElementById('new-card-input').value = ''; 212 214 document.getElementById('new-card-input').value = '';
} 213 215 }
}); 214 216 });
$(document).ready(function() { 215 217 $(document).ready(function() {
$('.tooltipped').tooltip({delay: 50}); 216 218 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 217 219 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 218 220 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 219 221 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 220 222 if (e.which == 13) {
e.preventDefault(); 221 223 e.preventDefault();
$scope.pushCard(); 222 224 $scope.pushCard();
listenForC = true; 223 225 listenForC = true;
return false; 224 226 return false;
} 225 227 }
}); 226 228 });
$('button#blank-selected').click(function() { 227 229 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 228 230 console.log(window.getSelection());
document.execCommand('bold'); 229 231 document.execCommand('bold');