110swag / flashy-frontend

Download as
Browse Code ยป

Commit 5673511eb31342e4e53ddaf9d416a1680b759f44

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

more feed refactoring; bugfixes

Showing 7 changed files with 35 additions and 30 deletions Inline Diff

config.js View file @ 5673511
angular.module('flashy', [ 1 1 angular.module('flashy', [
'flashy.LoginController', 2 2 'flashy.LoginController',
'flashy.RootController', 3 3 'flashy.RootController',
'flashy.FeedController', 4 4 'flashy.FeedController',
'flashy.DeckController', 5 5 'flashy.DeckController',
'flashy.ClassAddController', 6 6 'flashy.ClassAddController',
'flashy.ClassDropController', 7 7 'flashy.ClassDropController',
'flashy.RequestResetController', 8 8 'flashy.RequestResetController',
'flashy.StudyController', 9 9 'flashy.StudyController',
'flashy.UserService', 10 10 'flashy.UserService',
'flashy.FlashcardDirective', 11 11 'flashy.FlashcardDirective',
'flashy.FlashcardFactory', 12 12 'flashy.FlashcardFactory',
'flashy.ResetPasswordController', 13 13 'flashy.ResetPasswordController',
'flashy.VerifyEmailController', 14 14 'flashy.VerifyEmailController',
'flashy.CardListController', 15 15 'flashy.CardListController',
'flashy.HelpController', 16 16 'flashy.HelpController',
'flashy.SettingsController', 17 17 'flashy.SettingsController',
'ngCookies']). 18 18 'ngCookies']).
config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) { 19 19 config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
'use strict'; 20 20 'use strict';
$httpProvider.defaults.withCredentials = true; 21 21 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 22 22 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 23 23 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$resourceProvider.defaults.stripTrailingSlashes = false; 24 24 $resourceProvider.defaults.stripTrailingSlashes = false;
var arrayMethods = Object.getOwnPropertyNames(Array.prototype); 25 25 var arrayMethods = Object.getOwnPropertyNames(Array.prototype);
arrayMethods.forEach(attachArrayMethodsToNodeList); 26 26 arrayMethods.forEach(attachArrayMethodsToNodeList);
function attachArrayMethodsToNodeList(methodName) { 27 27 function attachArrayMethodsToNodeList(methodName) {
if (methodName !== 'length') { 28 28 if (methodName !== 'length') {
NodeList.prototype[methodName] = Array.prototype[methodName]; 29 29 NodeList.prototype[methodName] = Array.prototype[methodName];
} 30 30 }
} 31 31 }
32 32
$httpProvider.interceptors.push(function($q, $rootScope) { 33 33 $httpProvider.interceptors.push(function($q, $rootScope) {
return { 34 34 return {
'responseError': function(rejection) { // need a better redirect 35 35 'responseError': function(rejection) { // need a better redirect
if (rejection.status >= 500) { 36 36 if (rejection.status >= 500) {
console.log('got error'); 37 37 console.log('got error');
console.log(rejection); 38 38 console.log(rejection);
$rootScope.$broadcast('server_error', rejection); 39 39 $rootScope.$broadcast('server_error', rejection);
} 40 40 }
if (rejection.status == 403) { 41 41 if (rejection.status == 403) {
console.log(rejection); 42 42 console.log(rejection);
if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') { 43 43 if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') {
UserService.showLockedMessage(); 44 44 UserService.showLockedMessage();
UserService.logout(); 45 45 UserService.logout();
} 46 46 }
} 47 47 }
48 if (rejection.status == 429) {
49 console.log(rejection);
50 Materialize.toast('Your enthusiasm is appreciated, but we ask that you slow down a little!', 4000);
51 }
return $q.reject(rejection); 48 52 return $q.reject(rejection);
} 49 53 }
}; 50 54 };
}); 51 55 });
$locationProvider.html5Mode(true); 52 56 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/404'); 53 57 $urlRouterProvider.otherwise('/404');
var auth_resolve = { 54 58 var auth_resolve = {
authorize: function($q, $rootScope, $state, $stateParams, UserService) { 55 59 authorize: function($q, $rootScope, $state, $stateParams, UserService) {
console.log('do we need to authorize a user for', $rootScope.nextState.name); 56 60 console.log('do we need to authorize a user for', $rootScope.nextState.name);
if (UserService.noAuthRequired($rootScope.nextState)) { 57 61 if (UserService.noAuthRequired($rootScope.nextState)) {
console.log('no auth required for', $rootScope.nextState.name); 58 62 console.log('no auth required for', $rootScope.nextState.name);
return UserService.getUserData(); 59 63 return UserService.getUserData();
} 60 64 }
console.log('resolving user before continuing to ' + $rootScope.nextState.name); 61 65 console.log('resolving user before continuing to ' + $rootScope.nextState.name);
var redirectAsNeeded = function() { 62 66 var redirectAsNeeded = function() {
if (!UserService.isLoggedIn()) { 63 67 if (!UserService.isLoggedIn()) {
console.log(UserService.getUserData()); 64 68 console.log(UserService.getUserData());
console.log('making the user log in'); 65 69 console.log('making the user log in');
$state.go('login'); 66 70 $state.go('login');
} 67 71 }
if (!UserService.authorizedFor($rootScope.nextState, $rootScope.nextStateParams)) { 68 72 if (!UserService.authorizedFor($rootScope.nextState, $rootScope.nextStateParams)) {
console.log('user not authorized for ' + $rootScope.nextState.name); 69 73 console.log('user not authorized for ' + $rootScope.nextState.name);
$state.go('addclass'); 70 74 $state.go('addclass');
} 71 75 }
}; 72 76 };
if (UserService.isResolved()) return redirectAsNeeded(); 73 77 if (UserService.isResolved()) return redirectAsNeeded();
return UserService.getUserData().then(redirectAsNeeded); 74 78 return UserService.getUserData().then(redirectAsNeeded);
} 75 79 }
}; 76 80 };
$stateProvider. 77 81 $stateProvider.
state('login', { 78 82 state('login', {
resolve: auth_resolve, 79 83 resolve: auth_resolve,
url: '/login', 80 84 url: '/login',
templateUrl: 'templates/login.html', 81 85 templateUrl: 'templates/login.html',
controller: 'LoginController' 82 86 controller: 'LoginController'
}). 83 87 }).
state('root', { 84 88 state('root', {
resolve: auth_resolve, 85 89 resolve: auth_resolve,
url: '', 86 90 url: '',
controller: 'RootController' 87 91 controller: 'RootController'
}). 88 92 }).
state('feed', { 89 93 state('feed', {
resolve: auth_resolve, 90 94 resolve: auth_resolve,
url: '/feed/{sectionId}', 91 95 url: '/feed/{sectionId}',
templateUrl: 'templates/feed.html', 92 96 templateUrl: 'templates/feed.html',
controller: 'FeedController' 93 97 controller: 'FeedController'
}). 94 98 }).
state('cardlist', { 95 99 state('cardlist', {
resolve: auth_resolve, 96 100 resolve: auth_resolve,
url: '/cards/{sectionId}', 97 101 url: '/cards/{sectionId}',
templateUrl: 'templates/cardlist.html', 98 102 templateUrl: 'templates/cardlist.html',
controller: 'CardListController' 99 103 controller: 'CardListController'
}). 100 104 }).
state('addclass', { 101 105 state('addclass', {
resolve: auth_resolve, 102 106 resolve: auth_resolve,
url: '/addclass', 103 107 url: '/addclass',
templateUrl: 'templates/addclass.html', 104 108 templateUrl: 'templates/addclass.html',
controller: 'ClassAddController' 105 109 controller: 'ClassAddController'
}). 106 110 }).
state('dropclass', { 107 111 state('dropclass', {
resolve: auth_resolve, 108 112 resolve: auth_resolve,
url: '/settings/dropclass', 109 113 url: '/settings/dropclass',
templateUrl: 'templates/dropclass.html', 110 114 templateUrl: 'templates/dropclass.html',
controller: 'ClassDropController' 111 115 controller: 'ClassDropController'
}). 112 116 }).
state('deck', { 113 117 state('deck', {
resolve: auth_resolve, 114 118 resolve: auth_resolve,
url: '/deck/{sectionId}', 115 119 url: '/deck/{sectionId}',
templateUrl: 'templates/deck.html', 116 120 templateUrl: 'templates/deck.html',
controller: 'DeckController' 117 121 controller: 'DeckController'
}). 118 122 }).
state('study', { 119 123 state('study', {
resolve: auth_resolve, 120 124 resolve: auth_resolve,
url: '/study', 121 125 url: '/study',
templateUrl: 'templates/study.html', 122 126 templateUrl: 'templates/study.html',
controller: 'StudyController' 123 127 controller: 'StudyController'
}). 124 128 }).
state('flashcard', { 125 129 state('flashcard', {
resolve: auth_resolve, 126 130 resolve: auth_resolve,
url: '/flashcard', 127 131 url: '/flashcard',
templateUrl: 'templates/flashcard.html', 128 132 templateUrl: 'templates/flashcard.html',
controller: 'FlashcardController' 129 133 controller: 'FlashcardController'
}). 130 134 }).
state('settings', { 131 135 state('settings', {
resolve: auth_resolve, 132 136 resolve: auth_resolve,
url: '/settings', 133 137 url: '/settings',
templateUrl: 'templates/settings.html', 134 138 templateUrl: 'templates/settings.html',
controller: 'SettingsController' 135 139 controller: 'SettingsController'
}). 136 140 }).
state('requestpasswordreset', { 137 141 state('requestpasswordreset', {
url: '/requestpasswordreset', 138 142 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 139 143 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 140 144 controller: 'RequestResetController'
}). 141 145 }).
state('resetpassword', { 142 146 state('resetpassword', {
url: '/resetpassword/{uid}/{token}', 143 147 url: '/resetpassword/{uid}/{token}',
templateUrl: 'templates/resetpassword.html', 144 148 templateUrl: 'templates/resetpassword.html',
controller: 'ResetPasswordController' 145 149 controller: 'ResetPasswordController'
}). 146 150 }).
state('verifyemail', { 147 151 state('verifyemail', {
url: '/verifyemail/{key}', 148 152 url: '/verifyemail/{key}',
templateUrl: 'templates/verifyemail.html', 149 153 templateUrl: 'templates/verifyemail.html',
controller: 'VerifyEmailController' 150 154 controller: 'VerifyEmailController'
}). 151 155 }).
state('404', { 152 156 state('404', {
url: '/404', 153 157 url: '/404',
template: "<h1>This page doesn't exist!</h1>" 154 158 template: "<h1>This page doesn't exist!</h1>"
}). 155 159 }).
state('help', { 156 160 state('help', {
resolve: auth_resolve, 157 161 resolve: auth_resolve,
url: '/help', 158 162 url: '/help',
templateUrl: 'templates/help.html', 159 163 templateUrl: 'templates/help.html',
controller: 'HelpController' 160 164 controller: 'HelpController'
}); 161 165 });
}). 162 166 }).
run(function($rootScope, $state, $stateParams, $location, UserService) { 163 167 run(function($rootScope, $state, $stateParams, $location, UserService) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 164 168 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
console.log('failed to change state: ' + error); 165 169 console.log('failed to change state: ' + error);
$state.go('login'); 166 170 $state.go('login');
}); 167 171 });
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 168 172 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
$rootScope.nextState = toState; 169 173 $rootScope.nextState = toState;
$rootScope.nextStateParams = toParams; 170 174 $rootScope.nextStateParams = toParams;
console.log('changing state to', toState); 171 175 console.log('changing state to', toState);
if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) { 172 176 if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) {
localStorage.setItem('last_state', toState.name); 173 177 localStorage.setItem('last_state', toState.name);
localStorage.setItem('last_state_params', JSON.stringify(toParams)); 174 178 localStorage.setItem('last_state_params', JSON.stringify(toParams));
} 175 179 }
}); 176 180 });
scripts/CardGridController.js View file @ 5673511
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
$scope.cards = []; 3 3 $scope.cards = [];
$scope.deck = []; 4 4 $scope.deck = [];
$scope.cardCols = []; // organized data 5 5 $scope.cardCols = []; // organized data
$scope.numCols = 0; 6 6 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 7 7 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 8 8 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 9 9 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
10 $scope.showGrid = false;
$rootScope.currentSection = $scope.section; 10 11 $rootScope.currentSection = $scope.section;
11 12
if (!UserService.isInSection($scope.sectionId)) { 12 13 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 13 14 console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass'); 14 15 $state.go('addclass');
} 15 16 }
16 17
$scope.refreshColumnWidth = function() { 17 18 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 18 19 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 19 20 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 20 21 $('.cardColumn').css({
width: width + 'px', 21 22 width: width + 'px',
'font-size': 100 * width / 250 + '%' 22 23 'font-size': 100 * width / 250 + '%'
}); 23 24 });
$('.cardColumn .card.flashy').css({ 24 25 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 25 26 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 26 27 height: (width * 3 / 5) + 'px'
}); 27 28 });
}; 28 29 };
29 30
$scope.refreshLayout = function() { 30 31 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 31 32 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
32 33
// check if we actually need to refresh the whole layout 33 34 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 34 35 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 35 36 $scope.numCols = numCols;
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 36 37 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 37 38 $scope.cardCols = [];
var cols = []; 38 39 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 39 40 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 40 41 $scope.cards.forEach(function(card, i) {
card.colNum = i % $scope.numCols; 41 42 card.colNum = i % $scope.numCols;
cols[card.colNum].push(card); 42 43 cols[card.colNum].push(card);
}); 43 44 });
for (i in cols) $scope.updateColRanks(cols[i]); 44 45 for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols); 45 46 console.log(cols);
$timeout(function() { 46 47 return $timeout(function() {
$scope.cardCols = cols; 47 48 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 48 49 $timeout($scope.refreshColumnWidth);
}); 49 50 });
50 51
}; 51 52 };
52 53
angular.element($window).bind('resize', $scope.refreshLayout); 53 54 angular.element($window).bind('resize', $scope.refreshLayout);
54 55
$scope.ws_host = window.location.origin.replace('http', 'ws'); 55 56 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 56 57 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 57 58 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 58 59 console.log('deck ws open');
}); 59 60 });
60 61
$scope.deck_ws.onMessage(function(message) { 61 62 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 62 63 data = JSON.parse(message.data);
console.log('message', data); 63 64 console.log('message', data);
card = new Flashcard(data.flashcard.id); 64 65 card = new Flashcard(data.flashcard.id);
if (data.event_type == 'card_pulled') { 65 66 if (data.event_type == 'card_pulled') {
$scope.deck[card.id] = card; 66 67 $scope.deck[card.id] = card;
} 67 68 }
if (data.event_type == 'card_unpulled') { 68 69 if (data.event_type == 'card_unpulled') {
$scope.deck[card.id] = undefined; 69 70 $scope.deck[card.id] = undefined;
} 70 71 }
if (data.event_type == 'card_hidden') { 71 72 if (data.event_type == 'card_hidden') {
$scope.hideCardFromGrid(card); 72 73 $scope.hideCardFromGrid(card);
} 73 74 }
}); 74 75 });
75 76
$scope.cardInDeck = function(id) { 76 77 $scope.cardInDeck = function(id) {
return $scope.deck[id]; 77 78 return $scope.deck[id];
}; 78 79 };
$scope.addCardToGrid = function(card) { 79 80 $scope.addCardToGrid = function(card) {
var colNum = 0; 80 81 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 81 82 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 82 83 var lowestColNum = 0;
while (colNum < $scope.numCols) { 83 84 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 84 85 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 85 86 lowestCol = $scope.cardCols[colNum];
break; 86 87 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 87 88 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 88 89 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 89 90 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 90 91 lowestColLen = $scope.cardCols[colNum].length;
} 91 92 }
colNum++; 92 93 colNum++;
} 93 94 }
console.log(card); 94 95 console.log(card);
$scope.cards.push(data); 95 96 $scope.cards.push(data);
lowestCol.unshift(card); 96 97 lowestCol.unshift(card);
$scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card}; 97 98 card.colNum = lowestColNum;
99 $scope.updateColRanks(lowestCol);
$timeout($scope.refreshColumnWidth); 98 100 $timeout($scope.refreshColumnWidth);
99 101
}; 100 102 };
101 103
$scope.updateColRanks = function(col) { 102 104 $scope.updateColRanks = function(col) {
for (i in col) 103 105 for (i in col)
col[i].colRank = i; 104 106 col[i].colRank = i;
}; 105 107 };
$scope.hideCardFromGrid = function(card) { 106 108 $scope.hideCardFromGrid = function(card) {
console.log('hiding', card); 107 109 console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1); 108 110 $scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]); 109 111 $scope.updateColRanks($scope.cardCols[card.colNum]);
}; 110 112 };
111 113
$http.get('/api/sections/' + $scope.sectionId + '/deck/'). 112 114 $http.get('/api/sections/' + $scope.sectionId + '/deck/').
success(function(data) { 113 115 success(function(data) {
for (i in data) $scope.deck[data[i].id] = data[i]; 114 116 for (i in data) $scope.deck[data[i].id] = data[i];
console.log("got user's deck"); 115 117 console.log("got user's deck");
scripts/FeedController.js View file @ 5673511
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']). 1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).
2 2
controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 3 3 controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
angular.module('flashy.CardGridController').controller.apply(this, arguments); 4 4 angular.module('flashy.CardGridController').controller.apply(this, arguments);
5
$scope.refreshCards = function() { 5 6 $scope.refreshCards = function() {
$http.get('/api/sections/' + $scope.sectionId + '/feed/'). 6 7 $http.get('/api/sections/' + $scope.sectionId + '/feed/').
success(function(data) { 7 8 success(function(data) {
console.log(data); 8 9 console.log(data);
$scope.cards = []; 9 10 $scope.cards = data.map(function(card) {
for (var i in data) $scope.cards.push(new Flashcard(data[i], $scope.deck)); 10 11 return new Flashcard(card, $scope.deck);
$scope.refreshLayout(); 11 12 });
console.log('success in refresh cards...'); 12 13 $scope.refreshLayout().then(function() {
}). 13 14 $timeout($scope.refreshColumnWidth).then(function() {
error(function(err) { 14 15 $scope.showGrid = true;
console.log('refresh fail'); 15 16 });
console.log(err); 16 17 console.log('layout done');
18 });
}); 17 19 });
}; 18 20 };
19 21
$scope.sortAdd = function(card, array) { 20 22 $scope.sortAdd = function(card, array) {
console.log('sort add'); 21 23 console.log('sort add');
array.forEach(function(ele, i, ary) { 22 24 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 23 25 if (ele.score <= card.score) {
ary.splice(i, 0, card); 24 26 ary.splice(i, 0, card);
return; 25 27 return;
} 26 28 }
}); 27 29 });
}; 28 30 };
29 31
$scope.updateCardScore = function(card) { 30 32 $scope.updateCardScore = function(card) {
33 console.log($scope.cardCols, card);
34 // if no colNum is attached, then this doesn't exist on the feed yet
35 if (!card.colNum) return;
$scope.cardCols[card.colNum].sort(function(a, b) { 31 36 $scope.cardCols[card.colNum].sort(function(a, b) {
return b.score - a.score; 32 37 return b.score - a.score;
}); 33 38 });
}; 34 39 };
35 40
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 36 41 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) { 37 42 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 38 43 data = JSON.parse(e.data);
console.log('message', data); 39 44 console.log('message', data);
if (data.event_type == 'new_card') { 40 45 if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard), $scope.deck); 41 46 $scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck));
} else if (data.event_type == 'score_change') { 42 47 } else if (data.event_type == 'score_change') {
card = new Flashcard(data.flashcard.id); 43 48 card = new Flashcard(data.flashcard);
card.score = data.flashcard.score; 44 49 card.score = data.flashcard.score;
$scope.updateCardScore(card); 45 50 $scope.updateCardScore(card);
} 46 51 }
}); 47 52 });
48 53
$scope.pushCard = function() { 49 54 $scope.pushCard = function() {
var myCard = { 50 55 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 51 56 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 52 57 'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks, 53 58 'mask': $scope.newCardBlanks,
section: $scope.section.id 54 59 section: $scope.section.id
}; 55 60 };
if (myCard.text == '') { 56 61 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 57 62 console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard(); 58 63 return closeNewCard();
} 59 64 }
$http.post('/api/flashcards/', myCard). 60 65 $http.post('/api/flashcards/', myCard).
success(function(data) { 61 66 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 62 67 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 63 68 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 64 69 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 65 70 }
}). 66
error(function(error) { 67
console.log('something went wrong pushing a card!'); 68
}); 69 71 });
return $scope.closeNewCardModal(); 70 72 return $scope.closeNewCardModal();
}; 71 73 };
72 74
/* Key bindings for the whole feed window. Hotkey it up! */ 73 75 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 74 76 var listenForC = true;
75 77
// Need to pass these options into openmodal and leanmodal, 76 78 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 77 79 // otherwise the ready handler doesn't get called
78 80
modal_options = { 79 81 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 80 82 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 81 83 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 82 84 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 83 85 out_duration: 200, // Transition out duration
ready: function() { 84 86 ready: function() {
$('#new-card-input').focus(); 85 87 $('#new-card-input').focus();
document.execCommand('selectAll', false, null); 86 88 document.execCommand('selectAll', false, null);
} 87 89 }
}; 88 90 };
89 91
$(document).keydown(function(e) { 90 92 $(document).keydown(function(e) {
var keyed = e.which; 91 93 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 92 94 if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal(); 93 95 $scope.openNewCardModal();
e.preventDefault(); 94 96 e.preventDefault();
return false; 95 97 return false;
} else if (keyed == 27) { // clear on ESC 96 98 } else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal(); 97 99 $scope.closeNewCardModal();
} 98 100 }
}); 99 101 });
100 102
$scope.openNewCardModal = function() { 101 103 $scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options); 102 104 $('#newCard').openModal(modal_options);
listenForC = false; 103 105 listenForC = false;
$('#new-card-input').html('Write a flashcard!'); 104 106 $('#new-card-input').html('Write a flashcard!');
}; 105 107 };
106 108
$scope.closeNewCardModal = function() { 107 109 $scope.closeNewCardModal = function() {
listenForC = true; 108 110 listenForC = true;
$('#new-card-input').html('').blur(); 109 111 $('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options); 110 112 $('#newCard').closeModal(modal_options);
}; 111 113 };
112 114
$('.tooltipped').tooltip({delay: 50}); 113 115 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 114 116 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 115 117 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 116 118 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 117 119 if (e.which == 13) {
e.preventDefault(); 118 120 e.preventDefault();
if ($scope.submit_enabled) { 119 121 if ($scope.submit_enabled) {
$scope.pushCard(); 120 122 $scope.pushCard();
listenForC = true; 121 123 listenForC = true;
} 122 124 }
return false; 123 125 return false;
} else { 124 126 } else {
125 127
} 126 128 }
}); 127 129 });
$('button#blank-selected').click(function() { 128 130 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 129 131 console.log(window.getSelection());
document.execCommand('bold'); 130 132 document.execCommand('bold');
}); 131 133 });
$scope.refreshCards(); 132 134 $scope.refreshCards();
$scope.newCardBlanks = []; 133 135 $scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() { 134 136 $scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text(); 135 137 $scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160; 136 138 $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0; 137 139 var i = 0;
$scope.newCardBlanks = []; 138 140 $scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 139 141 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 140
console.log('undefined node'); 141
} 142
node = $(node)[0]; 143 142 node = $(node)[0];
if (node.tagName == 'B') { 144 143 if (node.tagName == 'B') {
var text = $(node).text(); 145 144 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 146 145 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 147 146 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 148 147 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 149 148 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 150 149 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 151 150 if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 152 151 i += text.length;
} else if (!node.data) { 153 152 } else if (!node.data) {
console.log('weird node', node); 154
i += $(node).text().length; 155 153 i += $(node).text().length;
} else { 156 154 } else {
i += node.data.length; 157 155 i += node.data.length;
} 158 156 }
}); 159 157 });
$scope.newCardBlanks.sort(function(a, b) { 160 158 $scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0]; 161 159 return a[0] - b[0];
}); 162 160 });
i = 0; 163 161 i = 0;
newtext = ''; 164 162 newtext = '';
console.log($scope.newCardBlanks); 165
$scope.newCardBlanks.forEach(function(blank) { 166 163 $scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]); 167 164 newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>'; 168 165 newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 169 166 i = blank[1];
}); 170 167 });
newtext += $scope.newCardText.slice(i); 171 168 newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext; 172 169 //$scope.newCardFormattedText = newtext;
}; 173 170 };
$scope.shuffleCards = function() { 174 171 $scope.shuffleCards = function() {
$timeout(function() { 175 172 $timeout(function() {
(function(o) { 176 173 (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); 177 174 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; 178 175 return o;
})($scope.cardCols[0]); 179 176 })($scope.cardCols[0]);
}); 180 177 });
}; 181 178 };
$scope.$on('$destroy', function() { 182 179 $scope.$on('$destroy', function() {
scripts/FlashcardFactory.js View file @ 5673511
angular.module('flashy.FlashcardFactory', ['ui.router']). 1 1 angular.module('flashy.FlashcardFactory', ['ui.router']).
factory('Flashcard', function ($http) { 2 2 factory('Flashcard', function ($http) {
var FlashcardCache = []; 3 3 var FlashcardCache = [];
4 var Deck = null;
var Flashcard = function (data, deck) { 4 5 var Flashcard = function (data, deck) {
6 if(deck) Deck = deck;
if (typeof data == 'number') return FlashcardCache[data]; 5 7 if (typeof data == 'number') return FlashcardCache[data];
8 if (FlashcardCache[data.id]) return FlashcardCache[data.id];
for (var k in data) this[k] = data[k]; 6 9 for (var k in data) this[k] = data[k];
this.deck = deck; 7
this.textPieces = []; 8 10 this.textPieces = [];
this.mask.sort(function (a, b) { 9 11 this.mask.sort(function (a, b) {
return a[0] - b[0]; 10 12 return a[0] - b[0];
}); 11 13 });
var i = 0; 12 14 var i = 0;
this.mask.forEach(function (blank) { 13 15 this.mask.forEach(function (blank) {
this.textPieces.push({text: this.text.slice(i, blank[0])}); 14 16 this.textPieces.push({text: this.text.slice(i, blank[0])});
this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true}); 15 17 this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true});
i = blank[1]; 16 18 i = blank[1];
}, this); 17 19 }, this);
this.textPieces.push({text: this.text.slice(i)}); 18 20 this.textPieces.push({text: this.text.slice(i)});
this.formatted_text = ''; 19 21 this.formatted_text = '';
for (i in this.textPieces) { 20 22 for (i in this.textPieces) {
p = this.textPieces[i]; 21 23 p = this.textPieces[i];
this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text; 22 24 this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text;
} 23 25 }
FlashcardCache[this.id] = this; 24 26 FlashcardCache[this.id] = this;
}; 25 27 };
Flashcard.prototype.isInDeck = function () { 26 28 Flashcard.prototype.isInDeck = function () {
return !(typeof this.deck[this.id] === 'undefined'); 27 29 return !(typeof Deck[this.id] === 'undefined');
}; 28 30 };
Flashcard.prototype.pull = function () { 29 31 Flashcard.prototype.pull = function () {
if (this.deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck"); 30 32 if (Deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck");
return $http.post('/api/flashcards/' + this.id + '/pull/'); 31 33 return $http.post('/api/flashcards/' + this.id + '/pull/');
}; 32 34 };
Flashcard.prototype.unpull = function () { 33 35 Flashcard.prototype.unpull = function () {
if (!this.deck[this.id]) return console.log('Not unpulling', this.id, "because it's not in deck"); 34 36 if (!Deck[this.id]) return console.log('Not unpulling', this.id, "because it's not in deck");
return $http.post('/api/flashcards/' + this.id + '/unpull/'); 35 37 return $http.post('/api/flashcards/' + this.id + '/unpull/');
}; 36 38 };
Flashcard.prototype.hide = function () { 37 39 Flashcard.prototype.hide = function () {
return $http.post('/api/flashcards/' + this.id + '/hide/'); 38 40 return $http.post('/api/flashcards/' + this.id + '/hide/');
}; 39 41 };
40 42
return Flashcard; 41 43 return Flashcard;
}); 42 44 });
styles/flashy.css View file @ 5673511
๏ปฟ.no-user-select { 1 1 ๏ปฟ.no-user-select {
-moz-user-select: none; 2 2 -moz-user-select: none;
-webkit-user-select: none; 3 3 -webkit-user-select: none;
-ms-user-select: none; 4 4 -ms-user-select: none;
user-select: none; 5 5 user-select: none;
} 6 6 }
7 7
.angucomplete-dropdown { 8 8 .angucomplete-dropdown {
border-color: #ececec; 9 9 border-color: #ececec;
border-width: 1px; 10 10 border-width: 1px;
border-style: solid; 11 11 border-style: solid;
border-radius: 2px; 12 12 border-radius: 2px;
/*width: 250px;*/ 13 13 /*width: 250px;*/
padding: 6px; 14 14 padding: 6px;
cursor: pointer; 15 15 cursor: pointer;
z-index: 9999; 16 16 z-index: 9999;
position: absolute; 17 17 position: absolute;
/*top: 32px; 18 18 /*top: 32px;
left: 0px; 19 19 left: 0px;
*/ 20 20 */
margin-top: -6px; 21 21 margin-top: -6px;
background-color: #ffffff; 22 22 background-color: #ffffff;
} 23 23 }
24 24
.angucomplete-description { 25 25 .angucomplete-description {
font-size: 14px; 26 26 font-size: 14px;
} 27 27 }
28 28
.angucomplete-row { 29 29 .angucomplete-row {
padding: 5px; 30 30 padding: 5px;
color: #000000; 31 31 color: #000000;
margin-bottom: 4px; 32 32 margin-bottom: 4px;
clear: both; 33 33 clear: both;
} 34 34 }
35 35
.angucomplete-selected-row { 36 36 .angucomplete-selected-row {
background-color: #aaaaff; 37 37 background-color: #aaaaff;
} 38 38 }
39 39
/*.container .row {*/ 40 40 /*.container .row {*/
/*margin-left: 0;*/ 41 41 /*margin-left: 0;*/
/*margin-right: 0;*/ 42 42 /*margin-right: 0;*/
/*}*/ 43 43 /*}*/
44 44
/* Flashcard directive css */ 45 45 /* Flashcard directive css */
.card { 46 46 .card {
word-wrap: break-word; 47 47 word-wrap: break-word;
} 48 48 }
49 49
.card.flashy.in-deck { 50 50 .card.flashy.in-deck {
border: 3px solid rgba(0, 184, 76, 0.4); 51 51 border: 3px solid rgba(0, 184, 76, 0.4);
} 52 52 }
53 53
.card.flashy { 54 54 .card.flashy {
background-color: #fff; 55 55 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 56 56 font-family: 'Titillium Web', sans-serif;
float: left; 57 57 float: left;
text-align: center; 58 58 text-align: center;
margin: 6px; 59 59 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 60 60 /*transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);*/
} 61 61 }
62 62
.card.flashy.shrinky { 63 63 .card.flashy.shrinky {
height: 0; 64 64 height: 0;
opacity: 0; 65 65 opacity: 0;
overflow: hidden; 66 66 overflow: hidden;
} 67 67 }
68 68
.card-overlay { 69 69 .card-overlay {
cursor: pointer; 70 70 cursor: pointer;
left: 0; 71 71 left: 0;
opacity: 0; 72 72 opacity: 0;
position: absolute; 73 73 position: absolute;
/*pointer-events: none;*/ 74 74 /*pointer-events: none;*/
top: 0; 75 75 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 76 76 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 77 77 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 78 78 /* animation effect to appear on off-hover */
visibility: hidden; 79 79 visibility: hidden;
height: 100%; 80 80 height: 100%;
width: 100%; 81 81 width: 100%;
} 82 82 }
83 83
.card-overlay i { 84 84 .card-overlay i {
color: #FFF; 85 85 color: #FFF;
left: 50%; 86 86 left: 50%;
position: absolute; 87 87 position: absolute;
top: 50%; 88 88 top: 50%;
transform: translate(-50%, -50%); 89 89 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 90 90 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 91 91 }
92 92
.center-me:hover i { 93 93 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 94 94 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 95 95 }
96 96
.card:hover .card-overlay { 97 97 .card:hover .card-overlay {
opacity: 1.0; 98 98 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 99 99 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 100 100 visibility: visible;
} 101 101 }
102 102
.top-box { 103 103 .top-box {
background-color: rgba(0, 184, 76, 0.4); 104 104 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 105 105 height: 65%;
position: relative; 106 106 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 107 107 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 108 108 width: 100%;
} 109 109 }
110 110
.top-box:hover { 111 111 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 112 112 background-color: rgba(0, 184, 76, 0.5);
} 113 113 }
114 114
.bottom-box { 115 115 .bottom-box {
height: 35%; 116 116 height: 35%;
width: 100%; 117 117 width: 100%;
} 118 118 }
119 119
.left-box { 120 120 .left-box {
background-color: rgba(119, 146, 255, 0.5); 121 121 background-color: rgba(119, 146, 255, 0.5);
float: left; 122 122 float: left;
position: relative; 123 123 position: relative;
height: 100%; 124 124 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 125 125 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 126 126 width: 50%;
} 127 127 }
128 128
.left-box:hover { 129 129 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 130 130 background-color: rgba(119, 146, 255, 0.6);
} 131 131 }
132 132
.right-box { 133 133 .right-box {
background-color: rgba(255, 62, 76, 0.5); 134 134 background-color: rgba(255, 62, 76, 0.5);
float: right; 135 135 float: right;
height: 100%; 136 136 height: 100%;
position: relative; 137 137 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 138 138 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 139 139 width: 50%;
} 140 140 }
141 141
.right-box:hover { 142 142 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 143 143 background-color: rgba(255, 62, 76, 0.6);
} 144 144 }
145 145
.center-me { 146 146 .center-me {
height: 100%; 147 147 height: 100%;
margin: 0 auto; 148 148 margin: 0 auto;
text-align: center; 149 149 text-align: center;
vertical-align: middle; 150 150 vertical-align: middle;
width: 100%; 151 151 width: 100%;
} 152 152 }
153 153
/* Card Colors */ 154 154 /* Card Colors */
.card.flashy.cardcolor-blue div { 155 155 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 156 156 background-color: rgba(119, 158, 203, 0.5) !important;
} 157 157 }
158 158
.cardcolor-red div { 159 159 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 160 160 background-color: rgba(255, 105, 97, 0.5) !important;
} 161 161 }
162 162
.cardcolor-green div { 163 163 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 164 164 background-color: rgba(119, 190, 119, 0.5) !important;
} 165 165 }
166 166
.cardcolor-yellow div { 167 167 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 168 168 background-color: rgba(253, 253, 150, 0.5) !important;
} 169 169 }
170 170
/* Card Colors END */ 171 171 /* Card Colors END */
172 172
.modal.bottom-sheet { 173 173 .modal.bottom-sheet {
max-width: 600px; 174 174 max-width: 600px;
margin-left: auto; 175 175 margin-left: auto;
margin-right: auto; 176 176 margin-right: auto;
} 177 177 }
178 178
.feed-modal-input { 179 179 .feed-modal-input {
background-color: #D3D3D3; 180 180 background-color: #D3D3D3;
/ / border-style : solid; 181 181 / / border-style : solid;
/ / border-width : 1 px; 182 182 / / border-width : 1 px;
box-shadow: 2px 2px 5px #888888; 183 183 box-shadow: 2px 2px 5px #888888;
height: 24px; 184 184 height: 24px;
} 185 185 }
186 186
#newCard input[type=text] { 187 187 #newCard input[type=text] {
height: 3rem !important; 188 188 height: 3rem !important;
} 189 189 }
190 190
.input-field label { 191 191 .input-field label {
color: #00b3c2; 192 192 color: #00b3c2;
} 193 193 }
194 194
/* label focus color */ 195 195 /* label focus color */
.input-field input[type]:focus + label { 196 196 .input-field input[type]:focus + label {
color: #00b3c2; 197 197 color: #00b3c2;
} 198 198 }
199 199
/* label underline focus color */ 200 200 /* label underline focus color */
.input-field input[type]:focus { 201 201 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 202 202 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 203 203 box-shadow: 0 1px 0 0 #b388ff;
} 204 204 }
205 205
/* valid color */ 206 206 /* valid color */
.input-field input[type].valid { 207 207 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 208 208 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 209 209 box-shadow: 0 1px 0 0 #673ab7;
} 210 210 }
211 211
/* invalid color */ 212 212 /* invalid color */
.input-field input[type].invalid { 213 213 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 214 214 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 215 215 box-shadow: 0 1px 0 0 #673ab7;
} 216 216 }
217 217
/* icon prefix focus color */ 218 218 /* icon prefix focus color */
.input-field .prefix.active { 219 219 .input-field .prefix.active {
color: #b388ff; 220 220 color: #b388ff;
} 221 221 }
222 222
/* label focus color */ 223 223 /* label focus color */
.input-field textarea[type]:focus + label { 224 224 .input-field textarea[type]:focus + label {
color: #b388ff; 225 225 color: #b388ff;
} 226 226 }
227 227
/* label underline focus color */ 228 228 /* label underline focus color */
.input-field textarea[type]:focus { 229 229 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 230 230 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 231 231 box-shadow: 0 1px 0 0 #b388ff;
} 232 232 }
233 233
body { 234 234 body {
background-color: #e8e8e8; 235 235 background-color: #e8e8e8;
overflow-x: hidden; 236 236 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 237 237 font-family: 'Titillium Web', sans-serif;
height: 100%; 238 238 height: 100%;
} 239 239 }
240 240
html { 241 241 html {
background: transparent; 242 242 background: transparent;
height: 100%; 243 243 height: 100%;
} 244 244 }
245 245
.btn { 246 246 .btn {
background-color: #00b3c2; 247 247 background-color: #00b3c2;
} 248 248 }
249 249
.btn:hover { 250 250 .btn:hover {
background-color: #0097cb; 251 251 background-color: #0097cb;
} 252 252 }
253 253
.btn-floating { 254 254 .btn-floating {
background-color: #00b3c2; 255 255 background-color: #00b3c2;
} 256 256 }
257 257
.btn-floating:hover { 258 258 .btn-floating:hover {
background-color: #0097cb; 259 259 background-color: #0097cb;
} 260 260 }
261 261
.toggley { 262 262 .toggley {
float: left; 263 263 float: left;
margin: 10px; 264 264 margin: 10px;
} 265 265 }
266 266
#logo-container { 267 267 #logo-container {
margin-bottom: 18px; 268 268 margin-bottom: 18px;
} 269 269 }
270 270
#lean-overlay { 271 271 #lean-overlay {
display: none !important; 272 272 display: none !important;
} 273 273 }
274 274
nav { 275 275 nav {
background-color: #d2143f !important; 276 276 background-color: #d2143f !important;
} 277 277 }
278 278
main { 279 279 main {
min-height: 145px; 280 280 min-height: 145px;
} 281 281 }
282 282
.side-nav .collapsible-body { 283 283 .side-nav .collapsible-body {
width: 100%; 284 284 width: 100%;
} 285 285 }
286 286
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 287 287 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 288 288 background-color: #00b3c2;
} 289 289 }
290 290
nav .button-collapse { 291 291 nav .button-collapse {
margin: 0 20px; 292 292 margin: 0 20px;
} 293 293 }
294 294
.collapsible-body i { 295 295 .collapsible-body i {
font-size: 1rem !important; 296 296 font-size: 1rem !important;
} 297 297 }
298 298
.tabs .tab a { 299 299 .tabs .tab a {
color: #00b3c2; 300 300 color: #00b3c2;
} 301 301 }
302 302
.tabs .tab a:hover { 303 303 .tabs .tab a:hover {
color: #0041dd; 304 304 color: #0041dd;
} 305 305 }
306 306
.tabs .indicator { 307 307 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 308 308 border-bottom: 1px solid #00b3c2;
} 309 309 }
310 310
h2 { 311 311 h2 {
text-align: center; 312 312 text-align: center;
} 313 313 }
314 314
md-content.md-default-theme { 315 315 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 316 316 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 317 317 border: 1px solid #fff;
} 318 318 }
319 319
/*#sidenav-overlay { 320 320 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 321 321 background-color: rgba(0, 0, 0, 0) !important;
}*/ 322 322 }*/
.card-content { 323 323 .card-content {
width: 100%; 324 324 width: 100%;
} 325 325 }
326 326
.valign-wrapper { 327 327 .valign-wrapper {
height: 100%; 328 328 height: 100%;
} 329 329 }
330 330
/*.toast { 331 331 /*.toast {
height: 100px; 332 332 height: 100px;
width: 300px; 333 333 width: 300px;
line-height: 20px; 334 334 line-height: 20px;
max-height: 100px; 335 335 max-height: 100px;
word-wrap: normal; 336 336 word-wrap: normal;
}*/ 337 337 }*/
338 338
[ng-cloak] { 339 339 [ng-cloak] {
display: none !important; 340 340 display: none !important;
} 341 341 }
342 342
.cardColumn { 343 343 .cardColumn {
float: left; 344 344 float: left;
} 345 345 }
346 346
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */ 347 347 /* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter, 348 348 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 349 349 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 350 350 .repeated-card.ng-leave,
.repeated-card.ng-move, 351 351 .repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card { 352 352 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 353 353 -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 354 354 -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 355 355 -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 1s cubic-bezier(0.6, 0.3, 0.7, 1.4); 356 356 transition: 1s cubic-bezier(0.6, 0.3, 0.7, 1.4);
/*1s all cubic-bezier(0, 0, 1, 0.3);*/ 357 357 /*1s all cubic-bezier(0, 0, 1, 0.3);*/
position: relative; 358 358 position: relative;
} 359 359 }
360 360
.repeated-card.ng-enter > flashcard > .card { 361 361 .repeated-card.ng-enter > flashcard > .card {
z-index: 1; 362 362 z-index: 1;
top: -236px; 363 363 top: -236px;
margin-bottom: -230px; 364 364 margin-bottom: -230px;
} 365 365 }
366 366
.repeated-card.ng-enter.ng-enter-active > flashcard > .card { 367 367 .repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px; 368 368 top: 0px;
margin-bottom: 6px; 369 369 margin-bottom: 6px;
} 370 370 }
371 371
.repeated-card.ng-leave { 372 372 .repeated-card.ng-leave {
top: 0; 373 373 top: 0;
opacity: 1; 374 374 opacity: 1;
} 375 375 }
376 376
.repeated-card.ng-leave.ng-leave-active { 377 377 .repeated-card.ng-leave.ng-leave-active {
top: -60px; 378 378 top: -60px;
opacity: 0; 379 379 opacity: 0;
} 380 380 }
381 381
/* Animation CSS END */ 382 382 /* Animation CSS END */
383 383
/* Footer */ 384 384 /* Footer */
* { 385 385 * {
margin: 0; 386 386 margin: 0;
} 387 387 }
388 388
/*.wrapper {*/ 389 389 /*.wrapper {*/
templates/feed.html View file @ 5673511
<div class="row"> 1 1 <div class="row">
<h2 ng-cloak ng-show="cards.length == 0">No cards. Be the first one to add a card!</h2> 2 2 <h2 ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2>
3 3
<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false"> 4 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols.length || !showGrid">
<div class="indeterminate"></div> 5 5 <div class="indeterminate"></div>
</div> 6 6 </div>
7 7
<div class="cardColumn" ng-repeat="col in cardCols"> 8 8 <div class="cardColumn" ng-repeat="col in cardCols" >
<div class="repeated-card" ng-repeat="card in col"> 9 9 <div class="repeated-card" ng-repeat="card in col">
<flashcard flashcard-obj="card"/> 10 10 <flashcard flashcard-obj="card"/>
</div> 11 11 </div>
</div> 12 12 </div>
</div> 13 13 </div>
14 14
15 15
<!--Lil plus button in corner--> 16 16 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 96px; right: 24px;"> 17 17 <div class="fixed-action-btn" style="bottom: 96px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left" 18 18 <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left"
data-delay="50" ng-click="openNewCardModal()" 19 19 data-delay="50" ng-click="openNewCardModal()"
data-tooltip="(C)ompose"> 20 20 data-tooltip="(C)ompose">
<i class="large mdi-content-add"></i> 21 21 <i class="large mdi-content-add"></i>
</a> 22 22 </a>
</div> 23 23 </div>
24 24
<div id="newCard" class="modal bottom-sheet row" style="max-height:none;"> 25 25 <div id="newCard" class="modal bottom-sheet row" style="max-height:none;">
<form id="new-card-form"> 26 26 <form id="new-card-form">
<div class="modal-content col"> 27 27 <div class="modal-content col">
<div class="row" style="margin-bottom:0"> 28 28 <div class="row" style="margin-bottom:0">
<div class="card cyan-text text-darken-2" 29 29 <div class="card cyan-text text-darken-2"
style="width:300px; height:180px; margin-bottom:0; font-size:120%;"> 30 30 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div class="valign-wrapper"> 31 31 <div class="valign-wrapper">
<div id="new-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;" 32 32 <div id="new-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
class="card-content valign center-align" 33 33 class="card-content valign center-align"
contenteditable select-non-editable="true" ng-change="refreshNewCardInput()"> 34 34 contenteditable select-non-editable="true" ng-change="refreshNewCardInput()">
35 35
</div> 36 36 </div>
</div> 37 37 </div>
38 38
</div> 39 39 </div>
</div> 40 40 </div>
</div> 41 41 </div>
42 42
<div class="col"> 43 43 <div class="col">
<div class="row"> 44 44 <div class="row">
45 45
</div> 46 46 </div>
<div class="row"> 47 47 <div class="row">
<button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" 48 48 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()"
data-position="left" 49 49 data-position="left"
data-delay="50" ng-class="submit_enabled?{}:'disabled'" 50 50 data-delay="50" ng-class="submit_enabled?{}:'disabled'"
data-tooltip="Enter">Contribute 51 51 data-tooltip="Enter">Contribute
<i class="mdi-hardware-keyboard-return right"></i> 52 52 <i class="mdi-hardware-keyboard-return right"></i>
</button> 53 53 </button>
</div> 54 54 </div>
<div class="row"> 55 55 <div class="row">
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 56 56 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B">Blank Selected Text 57 57 data-tooltip="Ctrl-B">Blank Selected Text
</button> 58 58 </button>
</div> 59 59 </div>
<div class="row" ng-show="newCardText" ng-style="(newCardText.length>160)?{color:'red'}:{}"> 60 60 <div class="row" ng-show="newCardText" ng-style="(newCardText.length>160)?{color:'red'}:{}">
{{newCardText.length}}/160 characters 61 61 {{newCardText.length}}/160 characters
</div> 62 62 </div>
<div class="row" ng-show="newCardText.length < 5"> 63 63 <div class="row" ng-show="newCardText.length < 5">
Please write a little more! 64 64 Please write a little more!
</div> 65 65 </div>
<div class="row" ng-show="newCardText.length > 140"> 66 66 <div class="row" ng-show="newCardText.length > 140">
templates/flashcard.html View file @ 5673511
<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false" 1 1 <div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink, 'in-deck':flashcard.isInDeck()}"> 2 2 ng-class="{'shrinky': startShrink, 'in-deck':flashcard.isInDeck()}">
<div class="valign-wrapper"> 3 3 <div class="valign-wrapper">
<div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"> 4 4 <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text">
<!--<span ng-repeat="piece in flashcard.textPieces"--> 5 5 <!--<span ng-repeat="piece in flashcard.textPieces"-->
<!--ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>--> 6 6 <!--ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>-->
</div> 7 7 </div>
</div> 8 8 </div>
<div class="card-overlay"> 9 9 <div class="card-overlay" >
<div class="top-box no-user-select" ng-hide="flashcard.isInDeck()" 10 10 <div class="top-box no-user-select" ng-show="!flashcard.isInDeck()"
ng-click="flashcard.pull()"> 11 11 ng-click="flashcard.pull()">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 12 12 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 13 13 </div>
<div class="top-box no-user-select" ng-show="flashcard.isInDeck()" 14 14 <div class="top-box no-user-select" ng-show="flashcard.isInDeck()"
ng-click="flashcard.unpull()"> 15 15 ng-click="flashcard.unpull()">
<div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div> 16 16 <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
</div> 17 17 </div>
<div class="bottom-box no-user-select"> 18 18 <div class="bottom-box no-user-select">
<div class="left-box"> 19 19 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 20 20 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 21 21 </div>
<div class="right-box" ng-click="flashcard.hide()"> 22 22 <div class="right-box" ng-click="flashcard.hide()">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 23 23 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 24 24 </div>
25 25
</div> 26 26 </div>
</div> 27 27 </div>
<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px"> 28 28 <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
<div class="center-me tooltipped" data-position="bottom" 29 29 <div class="center-me tooltipped" data-position="bottom"
data-delay="50" data-tooltip="In deck"><i class="mdi-action-done small"></i></div> 30 30 data-delay="50" data-tooltip="In deck"><i class="mdi-action-done small"></i></div>
</div> 31 31 </div>
<div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;"> 32 32 <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
<span class="center-me">score:{{flashcard.score}}</span> 33 33 <span class="center-me">score:{{flashcard.score}}</span>
</div> 34 34 </div>
</div> 35 35 </div>
36 36