110swag / flashy-frontend

Download as
Browse Code ยป

Commit b124335c5867889866b245f5b686ee05c8b2b3f4

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

feedController rows

Showing 1 changed file with 14 additions and 5 deletions Inline Diff

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