From fe2c7edc6f5b065176746b7f3029bf103ff2e64f Mon Sep 17 00:00:00 2001 From: Andrew Buss Date: Mon, 25 May 2015 22:51:18 -0700 Subject: [PATCH] fix flashcard scaling; still need to fix font size scaling --- config.js | 16 ++-- scripts/FeedController.js | 208 ++++++++++++++++++++---------------------- scripts/FlashcardDirective.js | 1 - scripts/LoginController.js | 18 ++-- scripts/RootController.js | 4 +- scripts/UserService.js | 20 ++-- 6 files changed, 127 insertions(+), 140 deletions(-) diff --git a/config.js b/config.js index bf84695..9eb6a0c 100644 --- a/config.js +++ b/config.js @@ -13,7 +13,7 @@ angular.module('flashy', [ 'flashy.VerifyEmailController', 'flashy.CardListController', 'ngCookies']). - config(function ($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { + config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { 'use strict'; $httpProvider.defaults.withCredentials = true; $httpProvider.defaults.xsrfCookieName = 'csrftoken'; @@ -27,9 +27,9 @@ angular.module('flashy', [ } }; - $httpProvider.interceptors.push(function ($q) { + $httpProvider.interceptors.push(function($q) { return { - 'responseError': function (rejection) { + 'responseError': function(rejection) { if (rejection.status >= 500) { console.log('got error'); console.log(rejection); @@ -42,9 +42,9 @@ angular.module('flashy', [ $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/404'); var auth_resolve = { - authorize: function ($q, $state, UserService) { + authorize: function($q, $state, UserService) { console.log('resolving user before continuing'); - var redirectAsNeeded = function () { + var redirectAsNeeded = function() { if (!UserService.isLoggedIn()) { console.log(UserService.getUserData()); console.log('making the user log in'); @@ -129,12 +129,12 @@ angular.module('flashy', [ template: "

This page doesn't exist!

" }); }). - run(function ($rootScope, $state, $stateParams, $location, UserService) { - $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) { + run(function($rootScope, $state, $stateParams, $location, UserService) { + $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { console.log('failed to change state: ' + error); $state.go('login'); }); - $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { + $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) { localStorage.setItem('last_state', toState.name); localStorage.setItem('last_state_params', JSON.stringify(toParams)); diff --git a/scripts/FeedController.js b/scripts/FeedController.js index 894930c..4c63b86 100644 --- a/scripts/FeedController.js +++ b/scripts/FeedController.js @@ -1,122 +1,110 @@ angular.module('flashy.FeedController', ['ui.router']). - controller('FeedController', function ($scope, $rootScope, $stateParams, $state, $http, $window, UserService) { + controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, UserService) { console.log('Hello from feed'); sectionId = $stateParams.sectionId; $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId}); - $scope.cards = false; - $scope.data = [0]; // raw data - $scope.cardCols = []; // organized data - $scope.cardRows = []; // visual data - $scope.cols = 0; - - /*var nullCard = { - id: -1, - };*/ - /* Handles number of columns */ - function calculate_cols() { - var avail = $window.innerWidth - 17; - return Math.floor(avail / 250); - } - - $scope.rowSpace = function(columns) { //transpose? as name - var rows = []; - var maxColLen = 0; - for (i = 0; i < columns.length; i++) - if (maxColLen < columns[i].length) - maxColLen = columns[i].length; - console.log('max col len:' + maxColLen); - for (i = 0; i < maxColLen; i++) - rows.push([]); - for (i = 0; i < rows.length; i++) { - for (j = 0; j < columns.length; j++) { - if (i >= columns[j].length) - continue; // for now, no placeholder - console.log(columns[j][i]); - rows[i].push(columns[j][i]); - } - } - return rows; - } - + $scope.cards = false; + $scope.data = []; // raw data + $scope.cardCols = []; // organized data + $scope.numCols = 0; + + function calculate_cols() { + var avail = $window.innerWidth - 17; + return Math.max(1, Math.floor(avail / 250)); + } + + function refreshColumnWidth() { + avail = $window.innerWidth - 17; + width = Math.floor(avail / Math.floor(avail / 250)); + $('.cardColumn').css({ + width: width + 'px', + //height: (width * 3 / 5) + 'px', + + }); + $('.cardColumn .card.flashy').css({ + width: width + 'px', + height: (width * 3 / 5) + 'px' + }); + $('.cardColumn .card.flashy .card-content').css({ + 'font-size': 100 * width / 250 + '%' + }); + } + $scope.refreshLayout = function() { - console.log('refreshing layout'); - //if (calculate_cols() == $scope.cols) return; - $scope.cols = calculate_cols(); + refreshColumnWidth(); + if (calculate_cols() == $scope.numCols) return; + $scope.numCols = calculate_cols(); + console.log('refreshing layout for ' + $scope.numCols + ' columns'); + $scope.cardCols = []; - for (i = 0; i < $scope.cols; i++) { - $scope.cardCols.push([]); // empty columns - } + for (i = 0; i < $scope.numCols; i++) { + $scope.cardCols.push([]); // empty columns + } var count = 0; - //console.log($scope.data); for (i = 0; i < $scope.data.length; i++) { - if (count >= $scope.cols) count = 0; + if (count >= $scope.numCols) count = 0; $scope.cardCols[count].push($scope.data[i]); // fill empty columns - count++; + count++; } - $scope.cardRows = $scope.rowSpace($scope.cardCols); - console.log($scope.cardRows); - } - - angular.element($window).bind('resize', $scope.refreshLayout()); - console.log('cols:' + calculate_cols()); + }; - $scope.refreshCards = function () { + angular.element($window).bind('resize', $scope.refreshLayout); + + $scope.refreshCards = function() { $http.get('/api/sections/' + sectionId + '/feed/'). - success(function (data) { + success(function(data) { console.log(data); - $scope.data = data; + $scope.data = data; $scope.refreshLayout(); console.log('success in refresh cards...'); }). - error(function (err) { + error(function(err) { console.log('refresh fail'); }); }; - - $scope.add = function(card) { - console.log('adding card'); - for (i = 0; i < $scope.cardCols.length ; i++) { - if ($scope.cardCols.length == 0) { - $scope.cardCols.unshift(card); - $scope.cardRows = $scope.rowSpace($scope.cardCols) - return; - } - } - var colNum = Math.floor(Math.random() * $scope.cols); - $scope.cardCols[colNum].unshift(card); - $scope.cardRows = $scope.rowSpace($scope.cardCols) - }; - - $scope.hide = function(card) { - console.log('hiding card'); - var found = -1; - for (i = 0; i < $scope.cardCols.length ; i++) { - found = $scope.cardCols[i].indexOf(card); - if (found != -1) { - $scope.cardCols[i].splice(found, 1); - $scope.cardRows = $scope.rowSpace($scope.cardCols) - return; - } - } - console.log('Error finding card to hide:') - console.log(card); - }; - - /* Instance creation */ - $http.get('/api/sections/' + sectionId + '/feed/'). + + $scope.add = function(card) { + console.log('adding card'); + for (i = 0; i < $scope.cardCols.length; i++) { + if ($scope.cardCols.length == 0) { + $scope.cardCols.unshift(card); + return; + } + } + var colNum = Math.floor(Math.random() * $scope.numCols); + $scope.cardCols[colNum].unshift(card); + }; + + $scope.hide = function(card) { + console.log('hiding card'); + console.log(card); + var found = -1; + for (i = 0; i < $scope.cardCols.length; i++) { + found = $scope.cardCols[i].indexOf(card); + if (found != -1) { + $scope.cardCols[i].splice(found, 1); + return; + } + } + console.log('Error finding card to hide:'); + console.log(card); + }; + + /* Instance creation */ + $http.get('/api/sections/' + sectionId + '/feed/'). success(function(data) { - console.log(data); - if (data.length == 0) - $scope.cards = false; - $scope.data = data; - $scope.refreshLayout(); - console.log('success in refresh cards...'); + console.log(data); + if (data.length == 0) + $scope.cards = false; + $scope.data = data; + $scope.refreshLayout(); + console.log('success in refresh cards...'); }). error(function(err) { console.log('pulling feed failed'); }); - + var loc = window.location, new_uri; if (loc.protocol === 'https:') { new_uri = 'wss:'; @@ -126,27 +114,27 @@ angular.module('flashy.FeedController', ['ui.router']). new_uri += '//' + loc.host; var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); - ws.onopen = function () { + ws.onopen = function() { console.log('websocket connected'); }; - ws.onmessage = function (e) { + ws.onmessage = function(e) { console.log('got websocket message ' + e.data); data = JSON.parse(e.data); if (data.event_type == 'new_card') { $scope.add(data.flashcard); } }; - ws.onerror = function (e) { + ws.onerror = function(e) { console.error(e); }; - ws.onclose = function (e) { + ws.onclose = function(e) { console.log('connection closed'); }; - $scope.pushCard = function () { + $scope.pushCard = function() { var i = 0; var blanks = []; - $('#new-card-input')[0].childNodes.forEach(function (node) { + $('#new-card-input')[0].childNodes.forEach(function(node) { node = $(node)[0]; console.log(node); if (node.tagName == 'B') { @@ -164,13 +152,13 @@ angular.module('flashy.FeedController', ['ui.router']). section: sectionId }; $http.post('/api/flashcards/', myCard). - success(function (data) { + success(function(data) { console.log('flashcard push succeeded'); if (!UserService.hasVerifiedEmail()) { Materialize.toast("

Thanks for contributing! However, others won't see your card until you verify your email address

", 4000); } }). - error(function (error) { + error(function(error) { console.log('something went wrong pushing a card!'); }); listenForC = true; @@ -188,19 +176,19 @@ angular.module('flashy.FeedController', ['ui.router']). opacity: 0, // Opacity of modal background in_duration: 300, // Transition in duration out_duration: 200, // Transition out duration - ready: function () { + ready: function() { listenForC = false; console.log('modal OPENING'); $('#new-card-input').focus(); }, - complete: function () { + complete: function() { listenForC = true; console.log('modal done, closing'); $('#new-card-input').blur(); } }; - $(document).keydown(function (e) { + $(document).keydown(function(e) { console.log(e.which); var keyed = e.which; if (keyed == 67 && listenForC) { // "c" or "C" for compose @@ -217,11 +205,11 @@ angular.module('flashy.FeedController', ['ui.router']). $scope.text = ''; var selected_start = 0; var selected_end = 0; - $(document).ready(function () { + $(document).ready(function() { $('.tooltipped').tooltip({delay: 50}); // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered $('.modal-trigger').leanModal(modal_options); - $('#new-card-input').on('keydown', function (e) { + $('#new-card-input').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); $scope.pushCard(); @@ -229,17 +217,17 @@ angular.module('flashy.FeedController', ['ui.router']). return false; } }); - $('#new-card-input').on('mouseup', function () { + $('#new-card-input').on('mouseup', function() { console.log('got selection: ' + selected_start); }); - $('button#blank-selected').click(function () { + $('button#blank-selected').click(function() { console.log(window.getSelection()); document.execCommand('bold'); }); }); //$scope.refreshCards(); //$scope.refreshLayout(); - $scope.$on('$destroy', function () { + $scope.$on('$destroy', function() { ws.close(); $rootScope.currentSection = {}; $(document).off('keydown'); diff --git a/scripts/FlashcardDirective.js b/scripts/FlashcardDirective.js index 25e21e4..20687d6 100644 --- a/scripts/FlashcardDirective.js +++ b/scripts/FlashcardDirective.js @@ -17,7 +17,6 @@ angular.module('flashy.FlashcardDirective', []). element.children().css({ width: width + 'px', height: (width * 3 / 5) + 'px', - 'font-size': 100 * width / 250 + '%' }); }; angular.element($window).bind('resize', refresh_width); diff --git a/scripts/LoginController.js b/scripts/LoginController.js index c5c6c78..79fbfd2 100644 --- a/scripts/LoginController.js +++ b/scripts/LoginController.js @@ -1,44 +1,44 @@ angular.module('flashy.LoginController', ['ui.router']). controller('LoginController', ['$rootScope', '$scope', '$state', '$http', 'UserService', - function ($rootScope, $scope, $state, $http, UserService) { + function($rootScope, $scope, $state, $http, UserService) { 'use strict'; // If we're logged in, there's nothing to do here if (UserService.isLoggedIn()) $state.go('addclass'); $scope.uniqueError = false; $scope.loginError = false; - $scope.login = function (email, password) { + $scope.login = function(email, password) { $http.post('/api/login/', JSON.stringify({ 'email': email, 'password': password })). - success(function (data) { + success(function(data) { UserService.login(data); if (angular.isDefined($scope.returnToState)) $state.go($scope.returnToState.name, $scope.returnToStateParams); else UserService.redirectToDefaultState($state); }). - error(function (data, status, header, config) { + error(function(data, status, header, config) { if (data.detail) { // assume 'invalid email or pass' $scope.loginError = true; } console.log(data); }); }; - $scope.signUp = function (email, password) { + $scope.signUp = function(email, password) { $http.post('/api/register/', JSON.stringify({ 'email': email, 'password': password })). - success(function (data) { + success(function(data) { UserService.login(data); if (angular.isDefined($scope.returnToState)) $state.go($scope.returnToState.name, $scope.returnToStateParams); else $state.go('addclass'); }). - error(function (data, status, headers, config) { + error(function(data, status, headers, config) { console.log(data.email); if (data.email == 'This field is required.') { $scope.invalid = true; @@ -52,10 +52,10 @@ angular.module('flashy.LoginController', ['ui.router']). }); }; - $scope.triggerPasswordReset = function () { + $scope.triggerPasswordReset = function() { $state.go('requestpasswordreset'); }; - $(document).ready(function () { + $(document).ready(function() { $('ul.tabs').tabs(); }); } diff --git a/scripts/RootController.js b/scripts/RootController.js index 77b22eb..42ac396 100644 --- a/scripts/RootController.js +++ b/scripts/RootController.js @@ -1,6 +1,6 @@ angular.module('flashy.RootController', ['ui.router', 'ngResource']). - controller('RootController', function ($rootScope, $resource, $scope, $state, UserService) { + controller('RootController', function($rootScope, $resource, $scope, $state, UserService) { $rootScope.SectionResource = $resource('/api/sections/:sectionId/'); window.rootscope = $rootScope; window.userservice = UserService; @@ -18,7 +18,7 @@ angular.module('flashy.RootController', ['ui.router', 'ngResource']). closeOnClick: true // Closes side-nav on clicks, useful for Angular/Meteor } ); - var postlogin = function (data) { + var postlogin = function(data) { $scope.user = data; UserService.redirectToDefaultState($state); }; diff --git a/scripts/UserService.js b/scripts/UserService.js index 179ef1c..5e967d3 100644 --- a/scripts/UserService.js +++ b/scripts/UserService.js @@ -1,44 +1,44 @@ angular.module('flashy.UserService', ['ui.router']). - service('UserService', function ($rootScope, $http, $q) { + service('UserService', function($rootScope, $http, $q) { var deferred = $q.defer(); var _user = false; - $http.get('/api/me/').success(function (data) { + $http.get('/api/me/').success(function(data) { console.log('user is logged in!'); _user = data; deferred.resolve(data); - }).error(function (data) { + }).error(function(data) { console.log(data); console.log('not logged in yet: ' + data.detail); _user = {email: false}; deferred.resolve(_user); }); - this.isResolved = function () { + this.isResolved = function() { return !!_user; }; - this.getUserData = function () { + this.getUserData = function() { if (this.isResolved()) return _user; else return deferred.promise; }; - this.login = function (data) { + this.login = function(data) { _user = data; if (!data.is_confirmed) { Materialize.toast('Please verify your email address!', 4000); } deferred.resolve(data); }; - this.hasVerifiedEmail = function () { + this.hasVerifiedEmail = function() { return this.isResolved() && _user.is_confirmed; }; - this.logout = function () { + this.logout = function() { _user = false; deferred.resolve({}); }; - this.isLoggedIn = function () { + this.isLoggedIn = function() { rv = this.isResolved() && _user.email; return rv; }; - this.redirectToDefaultState = function ($state) { + this.redirectToDefaultState = function($state) { if (!this.isLoggedIn()) return $state.go('login'); if (!_user.sections.length) return $state.go('addclass'); last_state = localStorage.getItem('last_state'); -- 1.9.1