110swag / flashy-frontend

Download as
Browse Code ยป

Commit 9822fe0ff07eea12d341bc9343f5124bdad63fcd

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

to properly apply changes to card columns

Showing 2 changed files with 42 additions and 49 deletions Side-by-side Diff

scripts/FeedController.js View file @ 9822fe0
1 1 angular.module('flashy.FeedController', ['ui.router']).
2 2  
3   - controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, UserService) {
  3 + controller('FeedController', function ($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
4 4 console.log('Hello from feed');
5 5 sectionId = $stateParams.sectionId;
6 6 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
7 7 $scope.cards = false;
8   - $scope.data = []; // raw data
9 8 $scope.cardCols = []; // organized data
10 9 $scope.numCols = 0;
11 10  
12 11  
13 12  
14 13  
15 14  
16 15  
17 16  
18 17  
19 18  
20 19  
21 20  
22 21  
... ... @@ -19,52 +18,48 @@
19 18 width = Math.floor(avail / Math.floor(avail / 250));
20 19 $('.cardColumn').css({
21 20 width: width + 'px',
22   - //height: (width * 3 / 5) + 'px',
23   -
  21 + 'font-size': 100 * width / 250 + '%'
24 22 });
25 23 $('.cardColumn .card.flashy').css({
26   - width: width + 'px',
  24 + width: width - 12 + 'px',
27 25 height: (width * 3 / 5) + 'px'
28 26 });
29   - $('.cardColumn .card.flashy .card-content').css({
30   - 'font-size': 100 * width / 250 + '%'
31   - });
32 27 }
33 28  
34   - $scope.refreshLayout = function() {
  29 + $scope.refreshLayout = function () {
35 30 refreshColumnWidth();
  31 + // check if we actually need to refresh the whole layout
36 32 if (calculate_cols() == $scope.numCols) return;
37 33 $scope.numCols = calculate_cols();
38 34 console.log('refreshing layout for ' + $scope.numCols + ' columns');
39   -
40 35 $scope.cardCols = [];
41   - for (i = 0; i < $scope.numCols; i++) {
42   - $scope.cardCols.push([]); // empty columns
43   - }
44   - var count = 0;
45   - for (i = 0; i < $scope.data.length; i++) {
46   - if (count >= $scope.numCols) count = 0;
47   - $scope.cardCols[count].push($scope.data[i]); // fill empty columns
48   - count++;
49   - }
  36 + var cols = new Array($scope.numCols);
  37 + $scope.cards.forEach(function (card, i) {
  38 + if (i < $scope.numCols) cols[i] = [];
  39 + cols[i % $scope.numCols].push(card);
  40 + });
  41 + // wait until the next digest cycle to update cardCols
  42 + $timeout(function () {
  43 + $scope.cardCols = cols;
  44 + });
50 45 };
51 46  
52 47 angular.element($window).bind('resize', $scope.refreshLayout);
53 48  
54   - $scope.refreshCards = function() {
  49 + $scope.refreshCards = function () {
55 50 $http.get('/api/sections/' + sectionId + '/feed/').
56   - success(function(data) {
  51 + success(function (data) {
57 52 console.log(data);
58   - $scope.data = data;
  53 + $scope.cards = data;
59 54 $scope.refreshLayout();
60 55 console.log('success in refresh cards...');
61 56 }).
62   - error(function(err) {
  57 + error(function (err) {
63 58 console.log('refresh fail');
64 59 });
65 60 };
66 61  
67   - $scope.add = function(card) {
  62 + $scope.add = function (card) {
68 63 console.log('adding card');
69 64 for (i = 0; i < $scope.cardCols.length; i++) {
70 65 if ($scope.cardCols.length == 0) {
... ... @@ -76,7 +71,7 @@
76 71 $scope.cardCols[colNum].unshift(card);
77 72 };
78 73  
79   - $scope.hide = function(card) {
  74 + $scope.hide = function (card) {
80 75 console.log('hiding card');
81 76 console.log(card);
82 77 var found = -1;
83 78  
84 79  
... ... @@ -93,15 +88,13 @@
93 88  
94 89 /* Instance creation */
95 90 $http.get('/api/sections/' + sectionId + '/feed/').
96   - success(function(data) {
  91 + success(function (data) {
97 92 console.log(data);
98   - if (data.length == 0)
99   - $scope.cards = false;
100   - $scope.data = data;
  93 + $scope.cards = data;
101 94 $scope.refreshLayout();
102 95 console.log('success in refresh cards...');
103 96 }).
104   - error(function(err) {
  97 + error(function (err) {
105 98 console.log('pulling feed failed');
106 99 });
107 100  
108 101  
109 102  
110 103  
111 104  
112 105  
... ... @@ -114,27 +107,27 @@
114 107 new_uri += '//' + loc.host;
115 108 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
116 109  
117   - ws.onopen = function() {
  110 + ws.onopen = function () {
118 111 console.log('websocket connected');
119 112 };
120   - ws.onmessage = function(e) {
  113 + ws.onmessage = function (e) {
121 114 console.log('got websocket message ' + e.data);
122 115 data = JSON.parse(e.data);
123 116 if (data.event_type == 'new_card') {
124 117 $scope.add(data.flashcard);
125 118 }
126 119 };
127   - ws.onerror = function(e) {
  120 + ws.onerror = function (e) {
128 121 console.error(e);
129 122 };
130   - ws.onclose = function(e) {
  123 + ws.onclose = function (e) {
131 124 console.log('connection closed');
132 125 };
133 126  
134   - $scope.pushCard = function() {
  127 + $scope.pushCard = function () {
135 128 var i = 0;
136 129 var blanks = [];
137   - $('#new-card-input')[0].childNodes.forEach(function(node) {
  130 + $('#new-card-input')[0].childNodes.forEach(function (node) {
138 131 node = $(node)[0];
139 132 console.log(node);
140 133 if (node.tagName == 'B') {
141 134  
... ... @@ -152,13 +145,13 @@
152 145 section: sectionId
153 146 };
154 147 $http.post('/api/flashcards/', myCard).
155   - success(function(data) {
  148 + success(function (data) {
156 149 console.log('flashcard push succeeded');
157 150 if (!UserService.hasVerifiedEmail()) {
158 151 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
159 152 }
160 153 }).
161   - error(function(error) {
  154 + error(function (error) {
162 155 console.log('something went wrong pushing a card!');
163 156 });
164 157 listenForC = true;
165 158  
166 159  
... ... @@ -176,19 +169,19 @@
176 169 opacity: 0, // Opacity of modal background
177 170 in_duration: 300, // Transition in duration
178 171 out_duration: 200, // Transition out duration
179   - ready: function() {
  172 + ready: function () {
180 173 listenForC = false;
181 174 console.log('modal OPENING');
182 175 $('#new-card-input').focus();
183 176 },
184   - complete: function() {
  177 + complete: function () {
185 178 listenForC = true;
186 179 console.log('modal done, closing');
187 180 $('#new-card-input').blur();
188 181 }
189 182 };
190 183  
191   - $(document).keydown(function(e) {
  184 + $(document).keydown(function (e) {
192 185 console.log(e.which);
193 186 var keyed = e.which;
194 187 if (keyed == 67 && listenForC) { // "c" or "C" for compose
195 188  
... ... @@ -205,11 +198,11 @@
205 198 $scope.text = '';
206 199 var selected_start = 0;
207 200 var selected_end = 0;
208   - $(document).ready(function() {
  201 + $(document).ready(function () {
209 202 $('.tooltipped').tooltip({delay: 50});
210 203 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
211 204 $('.modal-trigger').leanModal(modal_options);
212   - $('#new-card-input').on('keydown', function(e) {
  205 + $('#new-card-input').on('keydown', function (e) {
213 206 if (e.which == 13) {
214 207 e.preventDefault();
215 208 $scope.pushCard();
216 209  
217 210  
... ... @@ -217,17 +210,17 @@
217 210 return false;
218 211 }
219 212 });
220   - $('#new-card-input').on('mouseup', function() {
  213 + $('#new-card-input').on('mouseup', function () {
221 214 console.log('got selection: ' + selected_start);
222 215 });
223   - $('button#blank-selected').click(function() {
  216 + $('button#blank-selected').click(function () {
224 217 console.log(window.getSelection());
225 218 document.execCommand('bold');
226 219 });
227 220 });
228 221 //$scope.refreshCards();
229 222 //$scope.refreshLayout();
230   - $scope.$on('$destroy', function() {
  223 + $scope.$on('$destroy', function () {
231 224 ws.close();
232 225 $rootScope.currentSection = {};
233 226 $(document).off('keydown');
templates/feed.html View file @ 9822fe0
1 1 <div class="row">
2   - <h2 ng-cloak ng-show="data.length == 0">No cards. Be the first one to add a card!</h2>
  2 + <h2 ng-cloak ng-show="cards.length == 0">No cards. Be the first one to add a card!</h2>
3 3  
4   - <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-show="cardRows.length == 0">
  4 + <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
5 5 <div class="indeterminate"></div>
6 6 </div>
7 7 <!--div class='row' ng-repeat="row in cardRows">
... ... @@ -9,7 +9,7 @@
9 9 <flashcard flashcard-obj="card" refresh="hide(card)"/>
10 10 </div>
11 11 </div>-->
12   -
  12 +
13 13 <div class="cardColumn" ng-repeat="col in cardCols">
14 14 <div ng-repeat="card in col">
15 15 <flashcard flashcard-obj="card" refresh="hide(card)"/>