110swag / flashy-frontend

Download as
Browse Code ยป

Commit c6ac1ffcfc334ab6f9c76d4639c1181ccbc0ca92

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

refactor; $timeout for add card as well

Showing 1 changed file with 19 additions and 35 deletions Inline Diff

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