110swag / flashy-frontend

Download as
Browse Code ยป

Commit 062ba87a4ce889d44904dbbe5023ec253bdc8988

Authored by Andrew Buss
1 parent ea02266eeb
Exists in master

show authorship on feed

Showing 3 changed files with 14 additions and 6 deletions Inline Diff

scripts/CardGridController.js View file @ 062ba87
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'flashy.DeckFactory']).CardGridController = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'flashy.DeckFactory']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
sectionId = parseInt($stateParams.sectionId); 3 3 sectionId = parseInt($stateParams.sectionId);
$scope.cards = []; // all cards 4 4 $scope.cards = []; // all cards
$scope.cardCols = null; // organized data 5 5 $scope.cardCols = null; // organized data
$scope.affectedCards = []; // cards affected by a position change move 6 6 $scope.affectedCards = []; // cards affected by a position change move
$scope.numCols = 0; 7 7 $scope.numCols = 0;
$scope.height = 0; // height of a card 8 8 $scope.height = 0; // height of a card
$scope.section = $rootScope.SectionResource.get({sectionId: sectionId}); 9 9 $scope.section = $rootScope.SectionResource.get({sectionId: sectionId});
$scope.currentEditingCard = null; 10 10 $scope.currentEditingCard = null;
$scope.deck = new Deck(sectionId, { 11 11 $scope.deck = new Deck(sectionId, {
cardHideCallback: function(card) { 12 12 cardHideCallback: function(card) {
$scope.hideCardFromGrid(card); 13 13 $scope.hideCardFromGrid(card);
if (!card.isReported && !card.isEdited) 14 14 if (!card.isReported && !card.isEdited)
Materialize.toast('Card hidden! If the card was spammy or abusive, you may also ' + 15 15 Materialize.toast('Card hidden! If the card was spammy or abusive, you may also ' +
'<a class="btn-flat cyan-text" onclick="card.report()">report</a>', 4000); 16 16 '<a class="btn-flat cyan-text" onclick="card.report()">report</a>', 4000);
}, 17 17 },
cardPullCallback: $scope.cardPullCallback, 18 18 cardPullCallback: $scope.cardPullCallback,
}); 19 19 });
20 20
$('.edit-modal-trigger').leanModal({ 21 21 $('.edit-modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 22 22 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background 23 23 opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration 24 24 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 25 25 out_duration: 200, // Transition out duration
ready: function() { 26 26 ready: function() {
console.log('hi'); 27 27 console.log('hi');
$('#edit-card-input').html($scope.currentEditingCard); 28 28 $('#edit-card-input').html($scope.currentEditingCard);
$('#edit-card-input').get(0).focus(); 29 29 $('#edit-card-input').get(0).focus();
}, // Callback for Modal open 30 30 }, // Callback for Modal open
complete: function() { 31 31 complete: function() {
$scope.currentEditingCard = null; 32 32 $scope.currentEditingCard = null;
console.log('EDIT MODAL CLOSED'); 33 33 console.log('EDIT MODAL CLOSED');
34 34
} // Callback for Modal close 35 35 } // Callback for Modal close
}); 36 36 });
37 37
Flashcard.linkDeck($scope.deck); 38 38 Flashcard.linkDeck($scope.deck);
39 39
$scope.moveQueue = []; 40 40 $scope.moveQueue = [];
41 41
$scope.procQueue; 42 42 $scope.procQueue;
$scope.addMove = function(m) { 43 43 $scope.addMove = function(m) {
if (!$scope.moveQueue) return m.go(); 44 44 if (!$scope.moveQueue) return m.go();
$scope.moveQueue.push(m); 45 45 $scope.moveQueue.push(m);
}; 46 46 };
47 47
$scope.showGrid = false; 48 48 $scope.showGrid = false;
//$scope.moveQueue = []; // queue of flashcard objects 49 49 //$scope.moveQueue = []; // queue of flashcard objects
$rootScope.currentSection = $scope.section; 50 50 $rootScope.currentSection = $scope.section;
51 51
$scope.refreshColumnWidth = function() { 52 52 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 53 53 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 54 54 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 55 55 $('.cardColumn').css({
width: width + 'px' 56 56 width: width + 'px'
}); 57 57 });
$('.cardColumn .card.flashy').css({ 58 58 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 59 59 width: width - 12 + 'px',
'font-size': 100 * width / 250 + '%', 60 60 'font-size': 100 * width / 250 + '%',
height: (width * 3 / 5) + 'px' 61 61 height: (width * 3 / 5) + 'px'
}); 62 62 });
/* 63 63 /*
$('.cardColumn .card.flashy i.small').css({ 64 64 $('.cardColumn .card.flashy i.small').css({
'font-size': 200 * width / 250 + '%' 65 65 'font-size': 200 * width / 250 + '%'
}); 66 66 });
$('.cardColumn .card.flashy i.medium').css({ 67 67 $('.cardColumn .card.flashy i.medium').css({
'font-size': 400 * width / 250 + '%' 68 68 'font-size': 400 * width / 250 + '%'
});*/ 69 69 });*/
$scope.height = width * 3 / 5; 70 70 $scope.height = width * 3 / 5;
}; 71 71 };
72 72
$scope.refreshLayout = function() { 73 73 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 74 74 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
75
// check if we actually need to refresh the whole layout 76 75 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 77 76 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 78 77 $scope.numCols = numCols;
console.log('refreshing layout for ' + numCols + ' columns'); 79 78 console.log('refreshing layout for ' + numCols + ' columns');
$scope.cardCols = []; 80 79 $scope.cardCols = [];
var cols = []; 81 80 var cols = [];
for (var i = 0; i < numCols; i++) cols.push([]); 82 81 for (var i = 0; i < numCols; i++) cols.push([]);
var n = 0; 83 82 var n = 0;
$scope.cards.forEach(function(card, j) { 84 83 $scope.cards.forEach(function(card, j) {
card.colNum = n++ % numCols; 85 84 card.colNum = n++ % numCols;
cols[card.colNum].push(card); 86 85 cols[card.colNum].push(card);
}); 87 86 });
for (i in cols) $scope.updateColRanks(cols[i]); 88 87 for (i in cols) $scope.updateColRanks(cols[i]);
$scope.cardCols = cols; 89 88 $scope.cardCols = cols;
return $timeout($scope.refreshColumnWidth); 90 89 return $timeout($scope.refreshColumnWidth);
}; 91 90 };
92 91
angular.element($window).bind('resize', $scope.refreshLayout); 93 92 angular.element($window).bind('resize', $scope.refreshLayout);
94 93
$scope.addCardToGrid = function(card) { 95 94 $scope.addCardToGrid = function(card) {
console.log('adding card to grid', card); 96 95 console.log('adding card to grid', card);
var colNum = 0; 97 96 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 98 97 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 99 98 var lowestColNum = 0;
while (colNum < $scope.numCols) { 100 99 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 101 100 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 102 101 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 103 102 lowestColNum = colNum;
break; 104 103 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 105 104 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 106 105 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 107 106 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 108 107 lowestColLen = $scope.cardCols[colNum].length;
} 109 108 }
colNum++; 110 109 colNum++;
} 111 110 }
card.colNum = lowestColNum; 112 111 card.colNum = lowestColNum;
$scope.cards.push(card); 113 112 $scope.cards.push(card);
$scope.cardCols[lowestColNum].unshift(card); 114 113 $scope.cardCols[lowestColNum].unshift(card);
115 114
$scope.updateColRanks(lowestCol); 116 115 $scope.updateColRanks(lowestCol);
console.log($scope.cardCols); 117 116 console.log($scope.cardCols);
$timeout($scope.refreshColumnWidth); 118 117 $timeout($scope.refreshColumnWidth);
}; 119 118 };
120 119
$scope.updateColRanks = function(col) { 121 120 $scope.updateColRanks = function(col) {
for (i in col) 122 121 for (i in col)
col[i].colRank = parseInt(i); 123 122 col[i].colRank = parseInt(i);
}; 124 123 };
125 124
$scope.hideCardFromGrid = function(card) { 126 125 $scope.hideCardFromGrid = function(card) {
console.log('hiding', card); 127 126 console.log('hiding', card);
if (typeof card.colNum === 'undefined') return; 128 127 if (typeof card.colNum === 'undefined') return;
$scope.cardCols[card.colNum].splice(card.colRank, 1); 129 128 $scope.cardCols[card.colNum].splice(card.colRank, 1);
card.colNum = undefined; 130 129 card.colNum = undefined;
card.colRank = undefined; 131 130 card.colRank = undefined;
$scope.updateColRanks($scope.cardCols[card.colNum]); 132 131 $scope.updateColRanks($scope.cardCols[card.colNum]);
console.log($scope.cardCols); 133 132 console.log($scope.cardCols);
}; 134 133 };
135 134
$scope.$on('$destroy', function() { 136 135 $scope.$on('$destroy', function() {
$scope.deck.cleanup(); 137 136 $scope.deck.cleanup();
Flashcard.cleanup(); 138 137 Flashcard.cleanup();
$rootScope.currentSection = {}; 139 138 $rootScope.currentSection = {};
$(document).off('keydown'); 140 139 $(document).off('keydown');
}); 141 140 });
142 141
$scope.editCard = function(card) { 143 142 $scope.editCard = function(card) {
$scope.currentEditingCard = card; 144 143 $scope.currentEditingCard = card;
$scope.editCardFormattedText = card.formatted_text; 145 144 $scope.editCardFormattedText = card.formatted_text;
console.log(card); 146 145 console.log(card);
$('#editModal').openModal(card.editModalOptions); 147 146 $('#editModal').openModal(card.editModalOptions);
148 147
}; 149 148 };
150 149
$scope.saveEditChanges = function() { 151 150 $scope.saveEditChanges = function() {
if (!$scope.currentEditingCard) return; 152 151 if (!$scope.currentEditingCard) return;
var myCard = { 153 152 var myCard = {
'text': $('#edit-card-input').text(), 154 153 'text': $('#edit-card-input').text(),
'mask': $scope.editCardBlanks, 155 154 'mask': $scope.editCardBlanks,
}; 156 155 };
$scope.currentEditingCard.isEdited = true; 157 156 $scope.currentEditingCard.isEdited = true;
if (myCard.text != '') 158 157 if (myCard.text != '')
$http.patch('/api/flashcards/' + $scope.currentEditingCard.id + '/', myCard). 159 158 $http.patch('/api/flashcards/' + $scope.currentEditingCard.id + '/', myCard).
success(function(data) { 160 159 success(function(data) {
console.log('flashcard edited: ' + myCard.text); 161 160 console.log('flashcard edited: ' + myCard.text);
}); 162 161 });
$scope.currentEditingCard = null; 163 162 $scope.currentEditingCard = null;
$('#editModal').closeModal(); 164 163 $('#editModal').closeModal();
}; 165 164 };
166 165
$scope.discardEditChanges = function() { 167 166 $scope.discardEditChanges = function() {
$scope.currentEditingCard = null; 168 167 $scope.currentEditingCard = null;
$('#editModal').closeModal(); 169 168 $('#editModal').closeModal();
}; 170 169 };
171 170
$scope.refreshEditCardInput = function() { 172 171 $scope.refreshEditCardInput = function() {
$scope.editCardText = $('#edit-card-input').text(); 173 172 $scope.editCardText = $('#edit-card-input').text();
174 173
$scope.submit_enabled = $scope.editCardText.length >= 5 && $scope.editCardText.length <= 160; 175 174 $scope.submit_enabled = $scope.editCardText.length >= 5 && $scope.editCardText.length <= 160;
176 175
var i = 0; 177 176 var i = 0;
$scope.editCardBlanks = []; 178 177 $scope.editCardBlanks = [];
$('#edit-card-input')[0].childNodes.forEach(function(node) { 179 178 $('#edit-card-input')[0].childNodes.forEach(function(node) {
node = $(node)[0]; 180 179 node = $(node)[0];
if (node.tagName == 'B') { 181 180 if (node.tagName == 'B') {
var text = $(node).text(); 182 181 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 183 182 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 184 183 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 185 184 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 186 185 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 187 186 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 188 187 if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 189 188 i += text.length;
} else if (!node.data) { 190 189 } else if (!node.data) {
i += $(node).text().length; 191 190 i += $(node).text().length;
} else { 192 191 } else {
scripts/DeckFactory.js View file @ 062ba87
angular.module('flashy.DeckFactory', ['ui.router', 'flashy.FlashcardFactory', 'ngWebSocket']). 1 1 angular.module('flashy.DeckFactory', ['ui.router', 'flashy.FlashcardFactory', 'ngWebSocket']).
factory('Deck', function ($http, $rootScope, $state, $websocket, Flashcard, UserService) { 2 2 factory('Deck', function ($http, $rootScope, $state, $websocket, Flashcard, UserService) {
3 3
var Deck = function (sectionId, callbacks) { 4 4 var Deck = function (sectionId, callbacks) {
if (!UserService.isInSection(sectionId)) { 5 5 if (!UserService.isInSection(sectionId)) {
console.log('user is not enrolled in ' + sectionId); 6 6 console.log('user is not enrolled in ' + sectionId);
$state.go('addclass'); 7 7 $state.go('addclass');
} 8 8 }
obj = this; 9 9 obj = this;
this.cards = []; 10 10 this.cards = [];
this.section = $rootScope.SectionResource.get({sectionId: sectionId}); 11 11 this.section = $rootScope.SectionResource.get({sectionId: sectionId});
12 12
this.ws = $websocket($rootScope.ws_host + '/ws/deck/' + sectionId + '?subscribe-user'); 13 13 this.ws = $websocket($rootScope.ws_host + '/ws/deck/' + sectionId + '?subscribe-user');
this.contains = function (id) { 14 14 this.contains = function (id) {
return this.cards[id]; 15 15 return this.cards[id];
}; 16 16 };
17 17
this.ws.onMessage(function (message) { 18 18 this.ws.onMessage(function (message) {
data = JSON.parse(message.data); 19 19 data = JSON.parse(message.data);
console.log('message', data); 20 20 console.log('message', data);
if (data.event_type == 'card_pulled') { 21 21 if (data.event_type == 'card_pulled') {
if(obj.cards[data.flashcard.id]) console.log("Pulled a card already in our deck?"); 22 22 if (obj.cards[data.flashcard.id]) console.log("Pulled a card already in our deck?");
card = new Flashcard(data.flashcard); 23 23 card = new Flashcard(data.flashcard);
24 if (data.flashcard.is_authored_by_user) card.is_authored_by_user = true;
obj.cards[card.id] = card; 24 25 obj.cards[card.id] = card;
if (callbacks.cardPullCallback) callbacks.cardPullCallback(card); 25 26 if (callbacks.cardPullCallback) callbacks.cardPullCallback(card);
} 26 27 }
if (data.event_type == 'card_unpulled') { 27 28 if (data.event_type == 'card_unpulled') {
if(!obj.cards[data.flashcard.id]) return console.log("Unpulled a card not in our deck?"); 28 29 if (!obj.cards[data.flashcard.id]) return console.log("Unpulled a card not in our deck?");
card = new Flashcard(data.flashcard); 29 30 card = new Flashcard(data.flashcard);
obj.cards[card.id] = undefined; 30 31 obj.cards[card.id] = undefined;
if (callbacks.cardUnpullCallback) callbacks.cardUnpullCallback(card); 31 32 if (callbacks.cardUnpullCallback) callbacks.cardUnpullCallback(card);
} 32 33 }
if (data.event_type == 'card_hidden') { 33 34 if (data.event_type == 'card_hidden') {
card = new Flashcard(data.flashcard.id); 34 35 card = new Flashcard(data.flashcard.id);
console.log(card); 35 36 console.log(card);
card.is_hidden = true; 36 37 card.is_hidden = true;
if (callbacks.cardHideCallback) callbacks.cardHideCallback(card); 37 38 if (callbacks.cardHideCallback) callbacks.cardHideCallback(card);
} 38 39 }
if (data.event_type == 'card_unhidden') { 39 40 if (data.event_type == 'card_unhidden') {
if(obj.cards[data.flashcard.id]) return; 40 41 if (obj.cards[data.flashcard.id]) return;
card = new Flashcard(data.flashcard); 41 42 card = new Flashcard(data.flashcard);
card.is_hidden = false; 42 43 card.is_hidden = false;
if (callbacks.cardUnhideCallback) callbacks.cardUnhideCallback(card); 43 44 if (callbacks.cardUnhideCallback) callbacks.cardUnhideCallback(card);
} 44 45 }
if (data.event_type == 'card_fixed') { 45 46 if (data.event_type == 'card_fixed') {
card = obj.cards[data.flashcard.id].edit(data.flashcard); 46 47 card = obj.cards[data.flashcard.id].edit(data.flashcard);
console.log("fixed card", obj.cards[card.id]); 47 48 console.log("fixed card", obj.cards[card.id]);
if (callbacks.cardFixedCallback) callbacks.cardFixedCallback(card); 48 49 if (callbacks.cardFixedCallback) callbacks.cardFixedCallback(card);
} 49 50 }
}); 50 51 });
this.deckPromise = $http.get('/api/sections/' + sectionId + '/deck/').success(function (data) { 51 52 this.deckPromise = $http.get('/api/sections/' + sectionId + '/deck/').success(function (data) {
for (i in data) obj.cards[data[i].id] = new Flashcard(data[i], obj); 52 53 for (i in data) {
54 obj.cards[data[i].id] = new Flashcard(data[i], obj);
55 //obj.cards[data[i].id].is_authored_by_user = data.is_authored_by_user;
56 }
57
console.log("got user's deck", data); 53 58 console.log("got user's deck", data);
}); 54 59 });
this.cleanup = function () { 55 60 this.cleanup = function () {
this.ws.close(); 56 61 this.ws.close();
}; 57 62 };
this.forEach = this.cards.forEach; 58 63 this.forEach = this.cards.forEach;
}; 59 64 };
60 65
return Deck; 61 66 return Deck;
}); 62 67 });
scripts/FeedController.js View file @ 062ba87
angular.module('flashy.FeedController', 1 1 angular.module('flashy.FeedController',
['ui.router', 2 2 ['ui.router',
'ngAnimate', 3 3 'ngAnimate',
'ngWebSocket', 4 4 'ngWebSocket',
'contenteditable', 5 5 'contenteditable',
'flashy.DeckFactory']).controller('FeedController', 6 6 'flashy.DeckFactory']).controller('FeedController',
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) { 7 7 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
angular.module('flashy.CardGridController').CardGridController.apply(this, arguments); 8 8 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);
var promise; 9 9 var promise;
sectionId = parseInt($stateParams.sectionId); 10 10 sectionId = parseInt($stateParams.sectionId);
$scope.updateCardScore = function(card, scoreChange) { 11 11 $scope.updateCardScore = function(card, scoreChange) {
console.log('update card score'); 12 12 console.log('update card score');
// if no colNum is attached, then this doesn't exist on the feed yet 13 13 // if no colNum is attached, then this doesn't exist on the feed yet
if (typeof card.colNum === 'undefined' || typeof card.colRank === 'undefined') { 14 14 if (typeof card.colNum === 'undefined' || typeof card.colRank === 'undefined') {
console.log('no col num'); 15 15 console.log('no col num');
return; 16 16 return;
} 17 17 }
/*$scope.cardCols[card.colNum].sort(function(a, b) { 18 18 /*$scope.cardCols[card.colNum].sort(function(a, b) {
return b.score - a.score; 19 19 return b.score - a.score;
}); 20 20 });
console.log($scope.cardCols); 21 21 console.log($scope.cardCols);
$scope.updateColRanks($scope.cardCols[card.colNum]); 22 22 $scope.updateColRanks($scope.cardCols[card.colNum]);
return;*/ 23 23 return;*/
console.log(card.score); 24 24 console.log(card.score);
card.score += scoreChange; 25 25 card.score += scoreChange;
console.log(card.score); 26 26 console.log(card.score);
var col = card.colNum; 27 27 var col = card.colNum;
var rank = card.colRank; 28 28 var rank = card.colRank;
var s = Math.sign(scoreChange); 29 29 var s = Math.sign(scoreChange);
30 30
//rank -= s; 31 31 //rank -= s;
if (rank < 0) return; 32 32 if (rank < 0) return;
if (rank == $scope.cardCols[col].length) return; 33 33 if (rank == $scope.cardCols[col].length) return;
34 34
$scope.affectedCards = []; 35 35 $scope.affectedCards = [];
//console.log('before whiel, rank:' + rank); 36 36 //console.log('before whiel, rank:' + rank);
if (s > 0) { 37 37 if (s > 0) {
rank -= 1; 38 38 rank -= 1;
//console.log('+'); 39 39 //console.log('+');
while ($scope.cardCols[col][rank].score < card.score) { 40 40 while ($scope.cardCols[col][rank].score < card.score) {
//console.log('while'); 41 41 //console.log('while');
$scope.cardCols[col][rank].colRank += 1; 42 42 $scope.cardCols[col][rank].colRank += 1;
$scope.affectedCards.push($scope.cardCols[col][rank]); 43 43 $scope.affectedCards.push($scope.cardCols[col][rank]);
rank -= 1; 44 44 rank -= 1;
if (rank < 0) break; 45 45 if (rank < 0) break;
if (rank == $scope.cardCols[col].length) break; 46 46 if (rank == $scope.cardCols[col].length) break;
} 47 47 }
} else { 48 48 } else {
rank += 1; 49 49 rank += 1;
console.log('-'); 50 50 console.log('-');
while ($scope.cardCols[col][rank].score > card.score) { 51 51 while ($scope.cardCols[col][rank].score > card.score) {
//console.log('while'); 52 52 //console.log('while');
$scope.cardCols[col][rank].colRank -= 1; 53 53 $scope.cardCols[col][rank].colRank -= 1;
$scope.affectedCards.push($scope.cardCols[col][rank]); 54 54 $scope.affectedCards.push($scope.cardCols[col][rank]);
rank += 1; 55 55 rank += 1;
if (rank < 0) break; 56 56 if (rank < 0) break;
if (rank == $scope.cardCols[col].length) break; 57 57 if (rank == $scope.cardCols[col].length) break;
} 58 58 }
} 59 59 }
rank += s; 60 60 rank += s;
//console.log('after a whiel, rank:' + rank); 61 61 //console.log('after a whiel, rank:' + rank);
62 62
console.log($scope.affectedCards); 63 63 console.log($scope.affectedCards);
64 64
var upMove = $scope.height; 65 65 var upMove = $scope.height;
var downMove = $scope.height; 66 66 var downMove = $scope.height;
$scope.$apply(function() { 67 67 $scope.$apply(function() {
$('.card.flashy.card-moveUp').css({ 68 68 $('.card.flashy.card-moveUp').css({
'margin-top': 300 + 'px !important', // how much moveUp moves 69 69 'margin-top': 300 + 'px !important', // how much moveUp moves
}); 70 70 });
71 71
$('.card.flashy.card-moveDown').css({ 72 72 $('.card.flashy.card-moveDown').css({
'margin-top': 300 + 'px !important', // how much moveDown moves 73 73 'margin-top': 300 + 'px !important', // how much moveDown moves
}); 74 74 });
}); 75 75 });
76 76
if (s > 0) { 77 77 if (s > 0) {
card.moveUp = true; 78 78 card.moveUp = true;
upMove *= $scope.affectedCards.length; 79 79 upMove *= $scope.affectedCards.length;
/*for (i=0; i<$scope.affectedCards.length; i++) { 80 80 /*for (i=0; i<$scope.affectedCards.length; i++) {
$scope.affectedCards[i].moveDown = true; 81 81 $scope.affectedCards[i].moveDown = true;
}*/ 82 82 }*/
} else { 83 83 } else {
card.moveDown = true; 84 84 card.moveDown = true;
downMove *= $scope.affectedCards; 85 85 downMove *= $scope.affectedCards;
/*for (i=0; i<$scope.affectedCards.length; i++) { 86 86 /*for (i=0; i<$scope.affectedCards.length; i++) {
$scope.affectedCards[i].moveUp = true; 87 87 $scope.affectedCards[i].moveUp = true;
}*/ 88 88 }*/
} 89 89 }
90 90
$timeout(function() { 91 91 $timeout(function() {
$('.card.flashy.card-moveUp').css({ 92 92 $('.card.flashy.card-moveUp').css({
'margin-top': '6px', 93 93 'margin-top': '6px',
}); 94 94 });
95 95
$('.card.flashy.card-moveDown').css({ 96 96 $('.card.flashy.card-moveDown').css({
'margin-top': '6px', 97 97 'margin-top': '6px',
}); 98 98 });
if (s > 0) { 99 99 if (s > 0) {
card.moveUp = false; 100 100 card.moveUp = false;
for (i = 0; i < $scope.affectedCards.length; i++) { 101 101 for (i = 0; i < $scope.affectedCards.length; i++) {
$scope.affectedCards[i].moveDown = false; 102 102 $scope.affectedCards[i].moveDown = false;
} 103 103 }
} else { 104 104 } else {
card.moveDown = false; 105 105 card.moveDown = false;
for (i = 0; i < $scope.affectedCards.length; i++) { 106 106 for (i = 0; i < $scope.affectedCards.length; i++) {
$scope.affectedCards[i].moveUp = false; 107 107 $scope.affectedCards[i].moveUp = false;
} 108 108 }
} 109 109 }
}, 1000); 110 110 }, 1000);
$scope.cardCols[col].splice(rank, 0, $scope.cardCols[col].splice(card.colRank, 1)[0]); 111 111 $scope.cardCols[col].splice(rank, 0, $scope.cardCols[col].splice(card.colRank, 1)[0]);
card.colRank = rank; 112 112 card.colRank = rank;
//$scope.updateColRanks($scope.cardCols[card.colNum]); // can be optimized out 113 113 //$scope.updateColRanks($scope.cardCols[card.colNum]); // can be optimized out
}; 114 114 };
115 115
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 116 116 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) { 117 117 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 118 118 data = JSON.parse(e.data);
console.log(data.event_type, 'message', data.flashcard); 119 119 console.log(data.event_type, 'message', data.flashcard);
if (data.event_type == 'new_card') { 120 120 if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck)); 121 121 // don't trust the backend for feed's authored_by_user
122 card = data.flashcard;
123 delete card['is_authored_by_user'];
124 card = new Flashcard(card);
125 $scope.addCardToGrid(card, $scope.deck);
} else if (data.event_type == 'score_change') { 122 126 } else if (data.event_type == 'score_change') {
card = new Flashcard(data.flashcard); // doesnt create a card if it exists 123 127 card = new Flashcard(data.flashcard); // doesnt create a card if it exists
//card.score = data.flashcard.score; 124 128 //card.score = data.flashcard.score;
console.log('score change'); 125 129 console.log('score change');
$scope.updateCardScore(card, data.flashcard.score - card.score); 126 130 $scope.updateCardScore(card, data.flashcard.score - card.score);
} 127 131 }
}); 128 132 });
129 133
$scope.pushCard = function() { 130 134 $scope.pushCard = function() {
var myCard = { 131 135 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 132 136 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 133 137 'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks, 134 138 'mask': $scope.newCardBlanks,
section: $scope.section.id 135 139 section: $scope.section.id
}; 136 140 };
if (!$scope.submit_enabled) { 137 141 if (!$scope.submit_enabled) {
return; 138 142 return;
} 139 143 }
if (myCard.text == '') { 140 144 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 141 145 console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard(); 142 146 return closeNewCard();
} 143 147 }
$http.post('/api/flashcards/', myCard). 144 148 $http.post('/api/flashcards/', myCard).
success(function(data) { 145 149 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 146 150 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 147 151 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 148 152 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 149 153 }
}); 150 154 });
return $scope.closeNewCardModal(); 151 155 return $scope.closeNewCardModal();
}; 152 156 };
153 157
/* Key bindings for the whole feed window. Hotkey it up! */ 154 158 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 155 159 var listenForC = true;
156 160
// Need to pass these options into openmodal and leanmodal, 157 161 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 158 162 // otherwise the ready handler doesn't get called
159 163
modal_options = { 160 164 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 161 165 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 162 166 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 163 167 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 164 168 out_duration: 200, // Transition out duration
ready: function() { 165 169 ready: function() {
$('#new-card-input').focus(); 166 170 $('#new-card-input').focus();
document.execCommand('selectAll', false, null); 167 171 document.execCommand('selectAll', false, null);
} 168 172 }
}; 169 173 };
170 174
$(document).keydown(function(e) { 171 175 $(document).keydown(function(e) {
var keyed = e.which; 172 176 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 173 177 if (keyed == 67 && listenForC) { // "c" for compose
if ($scope.currentEditingCard) return; 174 178 if ($scope.currentEditingCard) return;
$scope.openNewCardModal(); 175 179 $scope.openNewCardModal();
e.preventDefault(); 176 180 e.preventDefault();
return false; 177 181 return false;
} else if (keyed == 27) { // clear on ESC 178 182 } else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal(); 179 183 $scope.closeNewCardModal();
$scope.discardEditChanges(); 180 184 $scope.discardEditChanges();
} 181 185 }
}); 182 186 });
183 187
$scope.openNewCardModal = function() { 184 188 $scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options); 185 189 $('#newCard').openModal(modal_options);
listenForC = false; 186 190 listenForC = false;
$('#new-card-input').html('Write a flashcard!'); 187 191 $('#new-card-input').html('Write a flashcard!');
}; 188 192 };
189 193
$scope.closeNewCardModal = function() { 190 194 $scope.closeNewCardModal = function() {
listenForC = true; 191 195 listenForC = true;
$('#new-card-input').html('').blur(); 192 196 $('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options); 193 197 $('#newCard').closeModal(modal_options);
}; 194 198 };
195 199
$('.tooltipped').tooltip({delay: 50}); 196 200 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 197 201 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 198 202 $('.modal-trigger').leanModal(modal_options);
199 203
$('#new-card-input').on('keydown', function(e) { 200 204 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 201 205 if (e.which == 13) {
e.preventDefault(); 202 206 e.preventDefault();
if ($scope.submit_enabled) { 203 207 if ($scope.submit_enabled) {
$scope.pushCard(); 204 208 $scope.pushCard();
} 205 209 }
return false; 206 210 return false;
} 207 211 }
}); 208 212 });
209 213
210 214
$scope.newCardBlanks = []; 211 215 $scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() { 212 216 $scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text(); 213 217 $scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160; 214 218 $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0; 215 219 var i = 0;
$scope.newCardBlanks = []; 216 220 $scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 217 221 $('#new-card-input')[0].childNodes.forEach(function(node) {
node = $(node)[0]; 218 222 node = $(node)[0];
if (node.tagName == 'B') { 219 223 if (node.tagName == 'B') {
var text = $(node).text(); 220 224 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 221 225 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 222 226 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 223 227 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 224 228 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 225 229 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 226 230 if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 227 231 i += text.length;
} else if (!node.data) { 228 232 } else if (!node.data) {
i += $(node).text().length; 229 233 i += $(node).text().length;
} else { 230 234 } else {
i += node.data.length; 231 235 i += node.data.length;
} 232 236 }
}); 233 237 });
$scope.newCardBlanks.sort(function(a, b) { 234 238 $scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0]; 235 239 return a[0] - b[0];
}); 236 240 });
i = 0; 237 241 i = 0;
newtext = ''; 238 242 newtext = '';
$scope.newCardBlanks.forEach(function(blank) { 239 243 $scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]); 240 244 newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>'; 241 245 newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 242 246 i = blank[1];
}); 243 247 });
newtext += $scope.newCardText.slice(i); 244 248 newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext; 245 249 //$scope.newCardFormattedText = newtext;
}; 246 250 };
$scope.shuffleCards = function() { 247 251 $scope.shuffleCards = function() {
$timeout(function() { 248 252 $timeout(function() {
(function(o) { 249 253 (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); 250 254 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; 251 255 return o;
})($scope.cardCols[0]); 252 256 })($scope.cardCols[0]);
}); 253 257 });