CardGridController.js
5.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
$scope.cards = [];
$scope.deck = [];
$scope.cardCols = []; // organized data
$scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$scope.showGrid = false;
$scope.moveQueue = [];
$rootScope.currentSection = $scope.section;
if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass');
}
$scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({
width: width + 'px',
'font-size': 100 * width / 250 + '%'
});
$('.cardColumn .card.flashy').css({
width: width - 12 + 'px',
height: (width * 3 / 5) + 'px'
});
};
$scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
// check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols;
console.log('refreshing layout for ' + numCols + ' columns');
$scope.cardCols = [];
var cols = [];
for (var i = 0; i < numCols; i++) cols.push([]);
var n = 0;
$scope.cards.forEach(function(card, j) {
card.colNum = n++ % numCols;
cols[card.colNum].push(card);
});
for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols);
return $timeout(function() {
$scope.cardCols = cols;
$timeout($scope.refreshColumnWidth);
});
};
angular.element($window).bind('resize', $scope.refreshLayout);
$scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() {
console.log('deck ws open');
});
$scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data);
console.log('message', data);
card = new Flashcard(data.flashcard);
if (data.event_type == 'card_pulled') {
$scope.deck[card.id] = card;
if ($scope.deckPullCallback) $scope.deckPullCallback(card);
}
if (data.event_type == 'card_unpulled') {
$scope.deck[card.id] = undefined;
if ($scope.deckUnpullCallback) $scope.deckUnpullCallback(card);
}
if (data.event_type == 'card_hidden') {
$scope.hideCardFromGrid(card);
}
});
$scope.cardInDeck = function(id) {
return $scope.deck[id];
};
$scope.addCardToGrid = function(card) {
var colNum = 0;
var lowestCol = $scope.cardCols[0];
var lowestColNum = 0;
while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum];
break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length;
}
colNum++;
}
console.log(card);
$scope.cards.push(data);
lowestCol.unshift(card);
card.colNum = lowestColNum;
$scope.updateColRanks(lowestCol);
$timeout($scope.refreshColumnWidth);
};
$scope.updateColRanks = function(col) {
for (i in col)
col[i].colRank = parseInt(i);
};
$scope.hideCardFromGrid = function(card) {
console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]);
console.log($scope.cardCols);
};
$scope.$on('$destroy', function() {
$scope.deck_ws.close();
$rootScope.currentSection = {};
$(document).off('keydown');
});
return $http.get('/api/sections/' + $scope.sectionId + '/deck/').
success(function(data) {
for (i in data) $scope.deck[data[i].id] = new Flashcard(data[i], $scope.deck);
console.log("got user's deck", data);
});
};