110swag / flashy-frontend

Download as
Browse Code ยป

Commit fe2c7edc6f5b065176746b7f3029bf103ff2e64f

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

fix flashcard scaling; still need to fix font size scaling

Showing 6 changed files with 127 additions and 140 deletions Side-by-side Diff

config.js View file @ fe2c7ed
... ... @@ -13,7 +13,7 @@
13 13 'flashy.VerifyEmailController',
14 14 'flashy.CardListController',
15 15 'ngCookies']).
16   - config(function ($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
  16 + config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
17 17 'use strict';
18 18 $httpProvider.defaults.withCredentials = true;
19 19 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
20 20  
... ... @@ -27,9 +27,9 @@
27 27 }
28 28 };
29 29  
30   - $httpProvider.interceptors.push(function ($q) {
  30 + $httpProvider.interceptors.push(function($q) {
31 31 return {
32   - 'responseError': function (rejection) {
  32 + 'responseError': function(rejection) {
33 33 if (rejection.status >= 500) {
34 34 console.log('got error');
35 35 console.log(rejection);
36 36  
... ... @@ -42,9 +42,9 @@
42 42 $locationProvider.html5Mode(true);
43 43 $urlRouterProvider.otherwise('/404');
44 44 var auth_resolve = {
45   - authorize: function ($q, $state, UserService) {
  45 + authorize: function($q, $state, UserService) {
46 46 console.log('resolving user before continuing');
47   - var redirectAsNeeded = function () {
  47 + var redirectAsNeeded = function() {
48 48 if (!UserService.isLoggedIn()) {
49 49 console.log(UserService.getUserData());
50 50 console.log('making the user log in');
51 51  
... ... @@ -129,12 +129,12 @@
129 129 template: "<h1>This page doesn't exist!</h1>"
130 130 });
131 131 }).
132   - run(function ($rootScope, $state, $stateParams, $location, UserService) {
133   - $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
  132 + run(function($rootScope, $state, $stateParams, $location, UserService) {
  133 + $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
134 134 console.log('failed to change state: ' + error);
135 135 $state.go('login');
136 136 });
137   - $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
  137 + $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
138 138 if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) {
139 139 localStorage.setItem('last_state', toState.name);
140 140 localStorage.setItem('last_state_params', JSON.stringify(toParams));
scripts/FeedController.js View file @ fe2c7ed
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, UserService) {
4 4 console.log('Hello from feed');
5 5 sectionId = $stateParams.sectionId;
6 6 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
7   - $scope.cards = false;
8   - $scope.data = [0]; // raw data
9   - $scope.cardCols = []; // organized data
10   - $scope.cardRows = []; // visual data
11   - $scope.cols = 0;
12   -
13   - /*var nullCard = {
14   - id: -1,
15   - };*/
16   - /* Handles number of columns */
17   - function calculate_cols() {
18   - var avail = $window.innerWidth - 17;
19   - return Math.floor(avail / 250);
20   - }
21   -
22   - $scope.rowSpace = function(columns) { //transpose? as name
23   - var rows = [];
24   - var maxColLen = 0;
25   - for (i = 0; i < columns.length; i++)
26   - if (maxColLen < columns[i].length)
27   - maxColLen = columns[i].length;
28   - console.log('max col len:' + maxColLen);
29   - for (i = 0; i < maxColLen; i++)
30   - rows.push([]);
31   - for (i = 0; i < rows.length; i++) {
32   - for (j = 0; j < columns.length; j++) {
33   - if (i >= columns[j].length)
34   - continue; // for now, no placeholder
35   - console.log(columns[j][i]);
36   - rows[i].push(columns[j][i]);
37   - }
38   - }
39   - return rows;
40   - }
41   -
  7 + $scope.cards = false;
  8 + $scope.data = []; // raw data
  9 + $scope.cardCols = []; // organized data
  10 + $scope.numCols = 0;
  11 +
  12 + function calculate_cols() {
  13 + var avail = $window.innerWidth - 17;
  14 + return Math.max(1, Math.floor(avail / 250));
  15 + }
  16 +
  17 + function refreshColumnWidth() {
  18 + avail = $window.innerWidth - 17;
  19 + width = Math.floor(avail / Math.floor(avail / 250));
  20 + $('.cardColumn').css({
  21 + width: width + 'px',
  22 + //height: (width * 3 / 5) + 'px',
  23 +
  24 + });
  25 + $('.cardColumn .card.flashy').css({
  26 + width: width + 'px',
  27 + height: (width * 3 / 5) + 'px'
  28 + });
  29 + $('.cardColumn .card.flashy .card-content').css({
  30 + 'font-size': 100 * width / 250 + '%'
  31 + });
  32 + }
  33 +
42 34 $scope.refreshLayout = function() {
43   - console.log('refreshing layout');
44   - //if (calculate_cols() == $scope.cols) return;
45   - $scope.cols = calculate_cols();
  35 + refreshColumnWidth();
  36 + if (calculate_cols() == $scope.numCols) return;
  37 + $scope.numCols = calculate_cols();
  38 + console.log('refreshing layout for ' + $scope.numCols + ' columns');
  39 +
46 40 $scope.cardCols = [];
47   - for (i = 0; i < $scope.cols; i++) {
48   - $scope.cardCols.push([]); // empty columns
49   - }
  41 + for (i = 0; i < $scope.numCols; i++) {
  42 + $scope.cardCols.push([]); // empty columns
  43 + }
50 44 var count = 0;
51   - //console.log($scope.data);
52 45 for (i = 0; i < $scope.data.length; i++) {
53   - if (count >= $scope.cols) count = 0;
  46 + if (count >= $scope.numCols) count = 0;
54 47 $scope.cardCols[count].push($scope.data[i]); // fill empty columns
55   - count++;
  48 + count++;
56 49 }
57   - $scope.cardRows = $scope.rowSpace($scope.cardCols);
58   - console.log($scope.cardRows);
59   - }
60   -
61   - angular.element($window).bind('resize', $scope.refreshLayout());
62   - console.log('cols:' + calculate_cols());
  50 + };
63 51  
64   - $scope.refreshCards = function () {
  52 + angular.element($window).bind('resize', $scope.refreshLayout);
  53 +
  54 + $scope.refreshCards = function() {
65 55 $http.get('/api/sections/' + sectionId + '/feed/').
66   - success(function (data) {
  56 + success(function(data) {
67 57 console.log(data);
68   - $scope.data = data;
  58 + $scope.data = data;
69 59 $scope.refreshLayout();
70 60 console.log('success in refresh cards...');
71 61 }).
72   - error(function (err) {
  62 + error(function(err) {
73 63 console.log('refresh fail');
74 64 });
75 65 };
76   -
77   - $scope.add = function(card) {
78   - console.log('adding card');
79   - for (i = 0; i < $scope.cardCols.length ; i++) {
80   - if ($scope.cardCols.length == 0) {
81   - $scope.cardCols.unshift(card);
82   - $scope.cardRows = $scope.rowSpace($scope.cardCols)
83   - return;
84   - }
85   - }
86   - var colNum = Math.floor(Math.random() * $scope.cols);
87   - $scope.cardCols[colNum].unshift(card);
88   - $scope.cardRows = $scope.rowSpace($scope.cardCols)
89   - };
90   -
91   - $scope.hide = function(card) {
92   - console.log('hiding card');
93   - var found = -1;
94   - for (i = 0; i < $scope.cardCols.length ; i++) {
95   - found = $scope.cardCols[i].indexOf(card);
96   - if (found != -1) {
97   - $scope.cardCols[i].splice(found, 1);
98   - $scope.cardRows = $scope.rowSpace($scope.cardCols)
99   - return;
100   - }
101   - }
102   - console.log('Error finding card to hide:')
103   - console.log(card);
104   - };
105   -
106   - /* Instance creation */
107   - $http.get('/api/sections/' + sectionId + '/feed/').
  66 +
  67 + $scope.add = function(card) {
  68 + console.log('adding card');
  69 + for (i = 0; i < $scope.cardCols.length; i++) {
  70 + if ($scope.cardCols.length == 0) {
  71 + $scope.cardCols.unshift(card);
  72 + return;
  73 + }
  74 + }
  75 + var colNum = Math.floor(Math.random() * $scope.numCols);
  76 + $scope.cardCols[colNum].unshift(card);
  77 + };
  78 +
  79 + $scope.hide = function(card) {
  80 + console.log('hiding card');
  81 + console.log(card);
  82 + var found = -1;
  83 + for (i = 0; i < $scope.cardCols.length; i++) {
  84 + found = $scope.cardCols[i].indexOf(card);
  85 + if (found != -1) {
  86 + $scope.cardCols[i].splice(found, 1);
  87 + return;
  88 + }
  89 + }
  90 + console.log('Error finding card to hide:');
  91 + console.log(card);
  92 + };
  93 +
  94 + /* Instance creation */
  95 + $http.get('/api/sections/' + sectionId + '/feed/').
108 96 success(function(data) {
109   - console.log(data);
110   - if (data.length == 0)
111   - $scope.cards = false;
112   - $scope.data = data;
113   - $scope.refreshLayout();
114   - console.log('success in refresh cards...');
  97 + console.log(data);
  98 + if (data.length == 0)
  99 + $scope.cards = false;
  100 + $scope.data = data;
  101 + $scope.refreshLayout();
  102 + console.log('success in refresh cards...');
115 103 }).
116 104 error(function(err) {
117 105 console.log('pulling feed failed');
118 106 });
119   -
  107 +
120 108 var loc = window.location, new_uri;
121 109 if (loc.protocol === 'https:') {
122 110 new_uri = 'wss:';
123 111  
124 112  
125 113  
126 114  
127 115  
... ... @@ -126,27 +114,27 @@
126 114 new_uri += '//' + loc.host;
127 115 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
128 116  
129   - ws.onopen = function () {
  117 + ws.onopen = function() {
130 118 console.log('websocket connected');
131 119 };
132   - ws.onmessage = function (e) {
  120 + ws.onmessage = function(e) {
133 121 console.log('got websocket message ' + e.data);
134 122 data = JSON.parse(e.data);
135 123 if (data.event_type == 'new_card') {
136 124 $scope.add(data.flashcard);
137 125 }
138 126 };
139   - ws.onerror = function (e) {
  127 + ws.onerror = function(e) {
140 128 console.error(e);
141 129 };
142   - ws.onclose = function (e) {
  130 + ws.onclose = function(e) {
143 131 console.log('connection closed');
144 132 };
145 133  
146   - $scope.pushCard = function () {
  134 + $scope.pushCard = function() {
147 135 var i = 0;
148 136 var blanks = [];
149   - $('#new-card-input')[0].childNodes.forEach(function (node) {
  137 + $('#new-card-input')[0].childNodes.forEach(function(node) {
150 138 node = $(node)[0];
151 139 console.log(node);
152 140 if (node.tagName == 'B') {
153 141  
... ... @@ -164,13 +152,13 @@
164 152 section: sectionId
165 153 };
166 154 $http.post('/api/flashcards/', myCard).
167   - success(function (data) {
  155 + success(function(data) {
168 156 console.log('flashcard push succeeded');
169 157 if (!UserService.hasVerifiedEmail()) {
170 158 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
171 159 }
172 160 }).
173   - error(function (error) {
  161 + error(function(error) {
174 162 console.log('something went wrong pushing a card!');
175 163 });
176 164 listenForC = true;
177 165  
178 166  
... ... @@ -188,19 +176,19 @@
188 176 opacity: 0, // Opacity of modal background
189 177 in_duration: 300, // Transition in duration
190 178 out_duration: 200, // Transition out duration
191   - ready: function () {
  179 + ready: function() {
192 180 listenForC = false;
193 181 console.log('modal OPENING');
194 182 $('#new-card-input').focus();
195 183 },
196   - complete: function () {
  184 + complete: function() {
197 185 listenForC = true;
198 186 console.log('modal done, closing');
199 187 $('#new-card-input').blur();
200 188 }
201 189 };
202 190  
203   - $(document).keydown(function (e) {
  191 + $(document).keydown(function(e) {
204 192 console.log(e.which);
205 193 var keyed = e.which;
206 194 if (keyed == 67 && listenForC) { // "c" or "C" for compose
207 195  
... ... @@ -217,11 +205,11 @@
217 205 $scope.text = '';
218 206 var selected_start = 0;
219 207 var selected_end = 0;
220   - $(document).ready(function () {
  208 + $(document).ready(function() {
221 209 $('.tooltipped').tooltip({delay: 50});
222 210 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
223 211 $('.modal-trigger').leanModal(modal_options);
224   - $('#new-card-input').on('keydown', function (e) {
  212 + $('#new-card-input').on('keydown', function(e) {
225 213 if (e.which == 13) {
226 214 e.preventDefault();
227 215 $scope.pushCard();
228 216  
229 217  
... ... @@ -229,17 +217,17 @@
229 217 return false;
230 218 }
231 219 });
232   - $('#new-card-input').on('mouseup', function () {
  220 + $('#new-card-input').on('mouseup', function() {
233 221 console.log('got selection: ' + selected_start);
234 222 });
235   - $('button#blank-selected').click(function () {
  223 + $('button#blank-selected').click(function() {
236 224 console.log(window.getSelection());
237 225 document.execCommand('bold');
238 226 });
239 227 });
240 228 //$scope.refreshCards();
241 229 //$scope.refreshLayout();
242   - $scope.$on('$destroy', function () {
  230 + $scope.$on('$destroy', function() {
243 231 ws.close();
244 232 $rootScope.currentSection = {};
245 233 $(document).off('keydown');
scripts/FlashcardDirective.js View file @ fe2c7ed
... ... @@ -17,7 +17,6 @@
17 17 element.children().css({
18 18 width: width + 'px',
19 19 height: (width * 3 / 5) + 'px',
20   - 'font-size': 100 * width / 250 + '%'
21 20 });
22 21 };
23 22 angular.element($window).bind('resize', refresh_width);
scripts/LoginController.js View file @ fe2c7ed
1 1 angular.module('flashy.LoginController', ['ui.router']).
2 2  
3 3 controller('LoginController', ['$rootScope', '$scope', '$state', '$http', 'UserService',
4   - function ($rootScope, $scope, $state, $http, UserService) {
  4 + function($rootScope, $scope, $state, $http, UserService) {
5 5 'use strict';
6 6 // If we're logged in, there's nothing to do here
7 7 if (UserService.isLoggedIn()) $state.go('addclass');
8 8 $scope.uniqueError = false;
9 9 $scope.loginError = false;
10   - $scope.login = function (email, password) {
  10 + $scope.login = function(email, password) {
11 11 $http.post('/api/login/', JSON.stringify({
12 12 'email': email,
13 13 'password': password
14 14 })).
15   - success(function (data) {
  15 + success(function(data) {
16 16 UserService.login(data);
17 17 if (angular.isDefined($scope.returnToState))
18 18 $state.go($scope.returnToState.name, $scope.returnToStateParams);
19 19 else
20 20 UserService.redirectToDefaultState($state);
21 21 }).
22   - error(function (data, status, header, config) {
  22 + error(function(data, status, header, config) {
23 23 if (data.detail) { // assume 'invalid email or pass'
24 24 $scope.loginError = true;
25 25 }
26 26 console.log(data);
27 27 });
28 28 };
29   - $scope.signUp = function (email, password) {
  29 + $scope.signUp = function(email, password) {
30 30 $http.post('/api/register/', JSON.stringify({
31 31 'email': email,
32 32 'password': password
33 33 })).
34   - success(function (data) {
  34 + success(function(data) {
35 35 UserService.login(data);
36 36 if (angular.isDefined($scope.returnToState))
37 37 $state.go($scope.returnToState.name, $scope.returnToStateParams);
38 38 else $state.go('addclass');
39 39  
40 40 }).
41   - error(function (data, status, headers, config) {
  41 + error(function(data, status, headers, config) {
42 42 console.log(data.email);
43 43 if (data.email == 'This field is required.') {
44 44 $scope.invalid = true;
45 45  
... ... @@ -52,10 +52,10 @@
52 52 });
53 53  
54 54 };
55   - $scope.triggerPasswordReset = function () {
  55 + $scope.triggerPasswordReset = function() {
56 56 $state.go('requestpasswordreset');
57 57 };
58   - $(document).ready(function () {
  58 + $(document).ready(function() {
59 59 $('ul.tabs').tabs();
60 60 });
61 61 }
scripts/RootController.js View file @ fe2c7ed
1 1 angular.module('flashy.RootController', ['ui.router', 'ngResource']).
2 2  
3   - controller('RootController', function ($rootScope, $resource, $scope, $state, UserService) {
  3 + controller('RootController', function($rootScope, $resource, $scope, $state, UserService) {
4 4 $rootScope.SectionResource = $resource('/api/sections/:sectionId/');
5 5 window.rootscope = $rootScope;
6 6 window.userservice = UserService;
... ... @@ -18,7 +18,7 @@
18 18 closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
19 19 }
20 20 );
21   - var postlogin = function (data) {
  21 + var postlogin = function(data) {
22 22 $scope.user = data;
23 23 UserService.redirectToDefaultState($state);
24 24 };
scripts/UserService.js View file @ fe2c7ed
1 1 angular.module('flashy.UserService', ['ui.router']).
2   - service('UserService', function ($rootScope, $http, $q) {
  2 + service('UserService', function($rootScope, $http, $q) {
3 3 var deferred = $q.defer();
4 4 var _user = false;
5   - $http.get('/api/me/').success(function (data) {
  5 + $http.get('/api/me/').success(function(data) {
6 6 console.log('user is logged in!');
7 7 _user = data;
8 8 deferred.resolve(data);
9   - }).error(function (data) {
  9 + }).error(function(data) {
10 10 console.log(data);
11 11 console.log('not logged in yet: ' + data.detail);
12 12 _user = {email: false};
13 13 deferred.resolve(_user);
14 14 });
15 15  
16   - this.isResolved = function () {
  16 + this.isResolved = function() {
17 17 return !!_user;
18 18 };
19   - this.getUserData = function () {
  19 + this.getUserData = function() {
20 20 if (this.isResolved()) return _user;
21 21 else return deferred.promise;
22 22 };
23   - this.login = function (data) {
  23 + this.login = function(data) {
24 24 _user = data;
25 25 if (!data.is_confirmed) {
26 26 Materialize.toast('Please verify your email address!', 4000);
27 27 }
28 28 deferred.resolve(data);
29 29 };
30   - this.hasVerifiedEmail = function () {
  30 + this.hasVerifiedEmail = function() {
31 31 return this.isResolved() && _user.is_confirmed;
32 32 };
33   - this.logout = function () {
  33 + this.logout = function() {
34 34 _user = false;
35 35 deferred.resolve({});
36 36 };
37   - this.isLoggedIn = function () {
  37 + this.isLoggedIn = function() {
38 38 rv = this.isResolved() && _user.email;
39 39 return rv;
40 40 };
41   - this.redirectToDefaultState = function ($state) {
  41 + this.redirectToDefaultState = function($state) {
42 42 if (!this.isLoggedIn()) return $state.go('login');
43 43 if (!_user.sections.length) return $state.go('addclass');
44 44 last_state = localStorage.getItem('last_state');