110swag / flashy-frontend

Download as
Browse Code ยป

Commit 1402915618e0da76afd50652d9c5b4f21e4e3cb7

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

EMMM VEEEE SEEEE

Showing 8 changed files with 47 additions and 78 deletions Inline Diff

config.js View file @ 1402915
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',
12 'flashy.FlashcardFactory',
'flashy.ResetPasswordController', 12 13 'flashy.ResetPasswordController',
'flashy.VerifyEmailController', 13 14 'flashy.VerifyEmailController',
'flashy.CardListController', 14 15 'flashy.CardListController',
'flashy.HelpController', 15 16 'flashy.HelpController',
'flashy.SettingsController', 16 17 'flashy.SettingsController',
'ngCookies']). 17 18 'ngCookies']).
config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) { 18 19 config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
'use strict'; 19 20 'use strict';
$httpProvider.defaults.withCredentials = true; 20 21 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 21 22 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 22 23 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$resourceProvider.defaults.stripTrailingSlashes = false; 23 24 $resourceProvider.defaults.stripTrailingSlashes = false;
var arrayMethods = Object.getOwnPropertyNames(Array.prototype); 24 25 var arrayMethods = Object.getOwnPropertyNames(Array.prototype);
arrayMethods.forEach(attachArrayMethodsToNodeList); 25 26 arrayMethods.forEach(attachArrayMethodsToNodeList);
function attachArrayMethodsToNodeList(methodName) { 26 27 function attachArrayMethodsToNodeList(methodName) {
if (methodName !== 'length') { 27 28 if (methodName !== 'length') {
NodeList.prototype[methodName] = Array.prototype[methodName]; 28 29 NodeList.prototype[methodName] = Array.prototype[methodName];
} 29 30 }
} 30 31 }
31 32
$httpProvider.interceptors.push(function($q, $rootScope) { 32 33 $httpProvider.interceptors.push(function($q, $rootScope) {
return { 33 34 return {
'responseError': function(rejection) { // need a better redirect 34 35 'responseError': function(rejection) { // need a better redirect
if (rejection.status >= 500) { 35 36 if (rejection.status >= 500) {
console.log('got error'); 36 37 console.log('got error');
console.log(rejection); 37 38 console.log(rejection);
$rootScope.$broadcast('server_error', rejection); 38 39 $rootScope.$broadcast('server_error', rejection);
} 39 40 }
if (rejection.status == 403) { 40 41 if (rejection.status == 403) {
console.log(rejection); 41 42 console.log(rejection);
if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') { 42 43 if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') {
UserService.showLockedMessage(); 43 44 UserService.showLockedMessage();
UserService.logout(); 44 45 UserService.logout();
} 45 46 }
} 46 47 }
return $q.reject(rejection); 47 48 return $q.reject(rejection);
} 48 49 }
}; 49 50 };
}); 50 51 });
$locationProvider.html5Mode(true); 51 52 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/404'); 52 53 $urlRouterProvider.otherwise('/404');
var auth_resolve = { 53 54 var auth_resolve = {
authorize: function($q, $rootScope, $state, $stateParams, UserService) { 54 55 authorize: function($q, $rootScope, $state, $stateParams, UserService) {
console.log('do we need to authorize a user for', $rootScope.nextState.name); 55 56 console.log('do we need to authorize a user for', $rootScope.nextState.name);
if (UserService.noAuthRequired($rootScope.nextState)) { 56 57 if (UserService.noAuthRequired($rootScope.nextState)) {
console.log('no auth required for', $rootScope.nextState.name); 57 58 console.log('no auth required for', $rootScope.nextState.name);
return UserService.getUserData(); 58 59 return UserService.getUserData();
} 59 60 }
console.log('resolving user before continuing to ' + $rootScope.nextState.name); 60 61 console.log('resolving user before continuing to ' + $rootScope.nextState.name);
var redirectAsNeeded = function() { 61 62 var redirectAsNeeded = function() {
if (!UserService.isLoggedIn()) { 62 63 if (!UserService.isLoggedIn()) {
console.log(UserService.getUserData()); 63 64 console.log(UserService.getUserData());
console.log('making the user log in'); 64 65 console.log('making the user log in');
$state.go('login'); 65 66 $state.go('login');
} 66 67 }
if (!UserService.authorizedFor($rootScope.nextState, $rootScope.nextStateParams)) { 67 68 if (!UserService.authorizedFor($rootScope.nextState, $rootScope.nextStateParams)) {
console.log('user not authorized for ' + $rootScope.nextState.name); 68 69 console.log('user not authorized for ' + $rootScope.nextState.name);
$state.go('addclass'); 69 70 $state.go('addclass');
} 70 71 }
}; 71 72 };
if (UserService.isResolved()) return redirectAsNeeded(); 72 73 if (UserService.isResolved()) return redirectAsNeeded();
return UserService.getUserData().then(redirectAsNeeded); 73 74 return UserService.getUserData().then(redirectAsNeeded);
} 74 75 }
}; 75 76 };
$stateProvider. 76 77 $stateProvider.
state('login', { 77 78 state('login', {
resolve: auth_resolve, 78 79 resolve: auth_resolve,
url: '/login', 79 80 url: '/login',
templateUrl: 'templates/login.html', 80 81 templateUrl: 'templates/login.html',
controller: 'LoginController' 81 82 controller: 'LoginController'
}). 82 83 }).
state('root', { 83 84 state('root', {
resolve: auth_resolve, 84 85 resolve: auth_resolve,
url: '', 85 86 url: '',
controller: 'RootController' 86 87 controller: 'RootController'
}). 87 88 }).
state('feed', { 88 89 state('feed', {
resolve: auth_resolve, 89 90 resolve: auth_resolve,
url: '/feed/{sectionId}', 90 91 url: '/feed/{sectionId}',
templateUrl: 'templates/feed.html', 91 92 templateUrl: 'templates/feed.html',
controller: 'FeedController' 92 93 controller: 'FeedController'
}). 93 94 }).
state('cardlist', { 94 95 state('cardlist', {
resolve: auth_resolve, 95 96 resolve: auth_resolve,
url: '/cards/{sectionId}', 96 97 url: '/cards/{sectionId}',
templateUrl: 'templates/cardlist.html', 97 98 templateUrl: 'templates/cardlist.html',
controller: 'CardListController' 98 99 controller: 'CardListController'
}). 99 100 }).
state('addclass', { 100 101 state('addclass', {
resolve: auth_resolve, 101 102 resolve: auth_resolve,
url: '/addclass', 102 103 url: '/addclass',
templateUrl: 'templates/addclass.html', 103 104 templateUrl: 'templates/addclass.html',
controller: 'ClassAddController' 104 105 controller: 'ClassAddController'
}). 105 106 }).
state('dropclass', { 106 107 state('dropclass', {
resolve: auth_resolve, 107 108 resolve: auth_resolve,
url: '/settings/dropclass', 108 109 url: '/settings/dropclass',
templateUrl: 'templates/dropclass.html', 109 110 templateUrl: 'templates/dropclass.html',
controller: 'ClassDropController' 110 111 controller: 'ClassDropController'
}). 111 112 }).
state('deck', { 112 113 state('deck', {
resolve: auth_resolve, 113 114 resolve: auth_resolve,
url: '/deck/{sectionId}', 114 115 url: '/deck/{sectionId}',
templateUrl: 'templates/deck.html', 115 116 templateUrl: 'templates/deck.html',
controller: 'DeckController' 116 117 controller: 'DeckController'
}). 117 118 }).
state('study', { 118 119 state('study', {
resolve: auth_resolve, 119 120 resolve: auth_resolve,
url: '/study', 120 121 url: '/study',
templateUrl: 'templates/study.html', 121 122 templateUrl: 'templates/study.html',
controller: 'StudyController' 122 123 controller: 'StudyController'
}). 123 124 }).
state('flashcard', { 124 125 state('flashcard', {
resolve: auth_resolve, 125 126 resolve: auth_resolve,
url: '/flashcard', 126 127 url: '/flashcard',
templateUrl: 'templates/flashcard.html', 127 128 templateUrl: 'templates/flashcard.html',
controller: 'FlashcardController' 128 129 controller: 'FlashcardController'
}). 129 130 }).
state('settings', { 130 131 state('settings', {
resolve: auth_resolve, 131 132 resolve: auth_resolve,
url: '/settings', 132 133 url: '/settings',
templateUrl: 'templates/settings.html', 133 134 templateUrl: 'templates/settings.html',
controller: 'SettingsController' 134 135 controller: 'SettingsController'
}). 135 136 }).
state('requestpasswordreset', { 136 137 state('requestpasswordreset', {
url: '/requestpasswordreset', 137 138 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 138 139 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 139 140 controller: 'RequestResetController'
}). 140 141 }).
state('resetpassword', { 141 142 state('resetpassword', {
url: '/resetpassword/{uid}/{token}', 142 143 url: '/resetpassword/{uid}/{token}',
templateUrl: 'templates/resetpassword.html', 143 144 templateUrl: 'templates/resetpassword.html',
controller: 'ResetPasswordController' 144 145 controller: 'ResetPasswordController'
}). 145 146 }).
state('verifyemail', { 146 147 state('verifyemail', {
url: '/verifyemail/{key}', 147 148 url: '/verifyemail/{key}',
templateUrl: 'templates/verifyemail.html', 148 149 templateUrl: 'templates/verifyemail.html',
controller: 'VerifyEmailController' 149 150 controller: 'VerifyEmailController'
}). 150 151 }).
state('404', { 151 152 state('404', {
url: '/404', 152 153 url: '/404',
template: "<h1>This page doesn't exist!</h1>" 153 154 template: "<h1>This page doesn't exist!</h1>"
}). 154 155 }).
state('help', { 155 156 state('help', {
resolve: auth_resolve, 156 157 resolve: auth_resolve,
url: '/help', 157 158 url: '/help',
templateUrl: 'templates/help.html', 158 159 templateUrl: 'templates/help.html',
controller: 'HelpController' 159 160 controller: 'HelpController'
}); 160 161 });
}). 161 162 }).
run(function($rootScope, $state, $stateParams, $location, UserService) { 162 163 run(function($rootScope, $state, $stateParams, $location, UserService) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 163 164 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
console.log('failed to change state: ' + error); 164 165 console.log('failed to change state: ' + error);
$state.go('login'); 165 166 $state.go('login');
}); 166 167 });
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 167 168 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
$rootScope.nextState = toState; 168 169 $rootScope.nextState = toState;
$rootScope.nextStateParams = toParams; 169 170 $rootScope.nextStateParams = toParams;
console.log('changing state to', toState); 170 171 console.log('changing state to', toState);
if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) { 171 172 if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) {
localStorage.setItem('last_state', toState.name); 172 173 localStorage.setItem('last_state', toState.name);
localStorage.setItem('last_state_params', JSON.stringify(toParams)); 173 174 localStorage.setItem('last_state_params', JSON.stringify(toParams));
} 174 175 }
}); 175 176 });
home.html View file @ 1402915
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" 6 6 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 7 7 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
<link rel="shortcut icon" href="flashy.ico"> 8 8 <link rel="shortcut icon" href="flashy.ico">
9 9
<link rel="stylesheet" href="styles/flashier.css"/> 10 10 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 11 11 <link rel="stylesheet" href="styles/flashy.css"/>
<link rel="manifest" href="manifest.json"> 12 12 <link rel="manifest" href="manifest.json">
<link 13 13 <link
href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic' 14 14 href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic'
rel='stylesheet' type='text/css'> 15 15 rel='stylesheet' type='text/css'>
<title>Flashy</title> 16 16 <title>Flashy</title>
</head> 17 17 </head>
<body ng-controller="RootController"> 18 18 <body ng-controller="RootController">
<header> 19 19 <header>
<nav> 20 20 <nav>
<div class="nav-wrapper"> 21 21 <div class="nav-wrapper">
<a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo" 22 22 <a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo"
class="left button-collapse hide-on-med-and-up"><i 23 23 class="left button-collapse hide-on-med-and-up"><i
class="mdi-navigation-menu"></i></a> 24 24 class="mdi-navigation-menu"></i></a>
<!-- User's classes dropdown --> 25 25 <!-- User's classes dropdown -->
<ul id="classDropdown" class="dropdown-content"> 26 26 <ul id="classDropdown" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 27 27 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 28 28 <a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 29 29 </li>
<li class="divider"></li> 30 30 <li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li> 31 31 <li><a ui-sref="addclass">Add Class</a></li>
</ul> 32 32 </ul>
<ul ng-show="UserService.isLoggedIn()" class="left hide-on-small-and-down"> 33 33 <ul ng-show="UserService.isLoggedIn()" class="left hide-on-small-and-down">
<li><a style="font-size:20px; font-weight:700" class="dropdown-button ng-cloak hide-on-small-and-down" 34 34 <li><a style="font-size:20px; font-weight:700" class="dropdown-button ng-cloak hide-on-small-and-down"
href="#!" 35 35 href="#!"
data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i 36 36 data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i
class="mdi-navigation-arrow-drop-down right"></i></a></li> 37 37 class="mdi-navigation-arrow-drop-down right"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" 38 38 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})"
class="tooltipped" 39 39 class="tooltipped"
data-position="bottom" 40 40 data-position="bottom"
data-delay="50" data-tooltip="Feed"><i 41 41 data-delay="50" data-tooltip="Feed"><i
class="mdi-action-view-module"></i></a></li> 42 42 class="mdi-action-view-module"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" 43 43 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})"
class="tooltipped" 44 44 class="tooltipped"
data-position="bottom" 45 45 data-position="bottom"
data-delay="50" data-tooltip="Deck"><i 46 46 data-delay="50" data-tooltip="Deck"><i
class="mdi-action-view-carousel"></i></a></li> 47 47 class="mdi-action-view-carousel"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" 48 48 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})"
class="tooltipped" 49 49 class="tooltipped"
data-position="bottom" 50 50 data-position="bottom"
data-delay="50" data-tooltip="Card List"><i 51 51 data-delay="50" data-tooltip="Card List"><i
class="mdi-action-view-list"></i></a></li> 52 52 class="mdi-action-view-list"></i></a></li>
</ul> 53 53 </ul>
<a href="#" class="brand-logo center">Flashy</a> 54 54 <a href="#" class="brand-logo center">Flashy</a>
55 55
<ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down"> 56 56 <ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down">
57 57
<li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50" 58 58 <li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50"
data-tooltip="Study"> 59 59 data-tooltip="Study">
<i class="tiny mdi-action-pageview"></i></a></li> 60 60 <i class="tiny mdi-action-pageview"></i></a></li>
61 61
<!-- Settings Dropdown --> 62 62 <!-- Settings Dropdown -->
<ul id="settingsDropdown" class="dropdown-content"> 63 63 <ul id="settingsDropdown" class="dropdown-content">
64 64
65 65
</ul> 66 66 </ul>
67 67
<li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped" 68 68 <li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped"
data-position="bottom" 69 69 data-position="bottom"
data-delay="50" data-tooltip="Help"></i></a></li> 70 70 data-delay="50" data-tooltip="Help"></i></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i data-position="bottom" data-delay="50" 71 71 <li ui-sref-active="active"><a ui-sref="settings"><i data-position="bottom" data-delay="50"
data-tooltip="Settings" 72 72 data-tooltip="Settings"
class="mdi-action-settings tooltipped"></i></a></li> 73 73 class="mdi-action-settings tooltipped"></i></a></li>
<li><a ng-click="logout()" ui-sref="login"><i data-position="bottom" data-delay="50" data-tooltip="Logout" 74 74 <li><a ng-click="logout()" ui-sref="login"><i data-position="bottom" data-delay="50" data-tooltip="Logout"
class="mdi-content-forward tooltipped"></i></a></li> 75 75 class="mdi-content-forward tooltipped"></i></a></li>
76 76
77 77
</ul> 78 78 </ul>
79 79
<!-- Slide-in side-nav for small screens --> 80 80 <!-- Slide-in side-nav for small screens -->
<ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo"> 81 81 <ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
<span ng-show="currentSection.id"> 82 82 <span ng-show="currentSection.id">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"> 83 83 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-module left"></i> 84 84 <i class="mdi-action-view-module left"></i>
Feed</a> 85 85 Feed</a>
</li> 86 86 </li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"> 87 87 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-carousel left"> </i> 88 88 <i class="mdi-action-view-carousel left"> </i>
Deck 89 89 Deck
</a> 90 90 </a>
</li> 91 91 </li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"> 92 92 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-list left"></i> 93 93 <i class="mdi-action-view-list left"></i>
Card List 94 94 Card List
</a> 95 95 </a>
</li> 96 96 </li>
<hr> 97 97 <hr>
</span> 98 98 </span>
<!-- Collapsible menu for all the User's classes --> 99 99 <!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion"> 100 100 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 101 101 <li class="bold">
<a class="collapsible-header black-text"> 102 102 <a class="collapsible-header black-text">
Classes 103 103 Classes
<i class="mdi-navigation-arrow-drop-down right"></i> 104 104 <i class="mdi-navigation-arrow-drop-down right"></i>
</a> 105 105 </a>
</li> 106 106 </li>
<div class="collapsible-body" style="display: block"> 107 107 <div class="collapsible-body" style="display: block">
<ul> 108 108 <ul>
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 109 109 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 110 110 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 111 111 </li>
<hr> 112 112 <hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li> 113 113 <li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li>
</ul> 114 114 </ul>
</div> 115 115 </div>
</ul> 116 116 </ul>
<li><a ui-sref="study">Study</a></li> 117 117 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="settings">Settings</a></li> 118 118 <li><a ui-sref="settings">Settings</a></li>
<li><a ng-click="logout()">Logout</a></li> 119 119 <li><a ng-click="logout()">Logout</a></li>
</ul> 120 120 </ul>
</div> 121 121 </div>
</nav> 122 122 </nav>
123 123
</header> 124 124 </header>
125 125
126 126
<!-- Menu Bar --> 127 127 <!-- Menu Bar -->
<main ui-view></main> 128 128 <main ui-view></main>
129 129
130 130
<!--<footer class="page-footer">--> 131 131 <!--<footer class="page-footer">-->
<!--<div class="footer-copyright">--> 132 132 <!--<div class="footer-copyright">-->
<!--<div class="container">--> 133 133 <!--<div class="container">-->
<!--&copy; 2015 Team Swag--> 134 134 <!--&copy; 2015 Team Swag-->
<!--<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by--> 135 135 <!--<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by-->
<!--email!</a>--> 136 136 <!--email!</a>-->
<!--</div>--> 137 137 <!--</div>-->
138 138
<!--</div>--> 139 139 <!--</div>-->
<!--</footer>--> 140 140 <!--</footer>-->
141 141
</body> 142 142 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 143 143 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 144 144 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 145 145 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 146 146 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 147 147 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 148 148 <script type="text/javascript" src="scripts/jquery.collapsible.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script> 149 149 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 150 150 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 151 151 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script> 152 152 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script> 153 153 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script src="static/js/angular-websocket.js"></script> 154 154 <script src="static/js/angular-websocket.js"></script>
<script src="static/js/angular-contenteditable.js"></script> 155 155 <script src="static/js/angular-contenteditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 156 156 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
157 157
158 158
<script src="config.js"></script> 159 159 <script src="config.js"></script>
160 160
161 <script src="scripts/FlashcardFactory.js"></script>
162
<!-- Controllers --> 161 163 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 162 164 <script src="scripts/FeedController.js"></script>
scripts/CardGridController.js View file @ 1402915
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) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
$scope.cards = false; 3 3 $scope.cards = [];
4 $scope.deck_cards = [];
$scope.cardCols = []; // organized data 4 5 $scope.cardCols = []; // organized data
$scope.numCols = 0; 5 6 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 6 7 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 7 8 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 8 9 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$rootScope.currentSection = $scope.section; 9 10 $rootScope.currentSection = $scope.section;
10 11
if (!UserService.isInSection($scope.sectionId)) { 11 12 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 12 13 console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass'); 13 14 $state.go('addclass');
} 14 15 }
15 16
$scope.refreshColumnWidth = function() { 16 17 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 17 18 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 18 19 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 19 20 $('.cardColumn').css({
width: width + 'px', 20 21 width: width + 'px',
'font-size': 100 * width / 250 + '%' 21 22 'font-size': 100 * width / 250 + '%'
}); 22 23 });
$('.cardColumn .card.flashy').css({ 23 24 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 24 25 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 25 26 height: (width * 3 / 5) + 'px'
}); 26 27 });
}; 27 28 };
28 29
$scope.pullCard = function(id) { 29
if ($scope.deck_cards[id]) return console.log('Not pulling', id, "because it's already in deck"); 30
$http.post('/api/flashcards/' + id + '/pull/'). 31
success(function(data) { 32
console.log('pulled flashcard #' + id); 33
}). 34
error(function(data) { 35
console.log('failed to pull flashcard #' + id); 36
}); 37
}; 38
$scope.unpullCard = function(id) { 39
if (!$scope.deck_cards[id]) return console.log('Not unpulling', id, "because it's not in deck"); 40
$http.post('/api/flashcards/' + id + '/unpull/'). 41
success(function(data) { 42
console.log('unpulled flashcard #' + id); 43
}). 44
error(function(data) { 45
console.log('failed to unpull flashcard #' + id); 46
}); 47
}; 48
$scope.refreshLayout = function() { 49 30 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 50 31 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
51 32
// check if we actually need to refresh the whole layout 52 33 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 53 34 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 54 35 $scope.numCols = numCols;
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 55 36 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 56 37 $scope.cardCols = [];
var cols = []; 57 38 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 58 39 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 59 40 $scope.cards.forEach(function(card, i) {
cols[i % $scope.numCols].push(card); 60 41 cols[i % $scope.numCols].push(card);
$scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card}; 61 42 $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
card.isInDeck(); 62 43 card.isInDeck();
}); 63 44 });
// wait until the next digest cycle to update cardCols 64 45 // wait until the next digest cycle to update cardCols
console.log(cols); 65 46 console.log(cols);
$timeout(function() { 66 47 $timeout(function() {
$scope.cardCols = cols; 67 48 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 68 49 $timeout($scope.refreshColumnWidth);
}); 69 50 });
70 51
}; 71 52 };
72 53
angular.element($window).bind('resize', $scope.refreshLayout); 73 54 angular.element($window).bind('resize', $scope.refreshLayout);
74 55
$scope.ws_host = window.location.origin.replace('http', 'ws'); 75 56 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 76 57 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 77 58 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 78 59 console.log('deck ws open');
}); 79 60 });
80 61
$scope.deck_ws.onMessage(function(message) { 81 62 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 82 63 data = JSON.parse(message.data);
console.log('message', data); 83 64 console.log('message', data);
if (data.event_type == 'pull_card') { 84 65 if (data.event_type == 'pull_card') {
card = data.flashcard; 85 66 card = data.flashcard;
console.log('pulling', card); 86 67 console.log('pulling', card);
$scope.deck_cards[card.id] = card; 87 68 $scope.deck_cards[card.id] = card;
} 88 69 }
if (data.event_type == 'unpull_card') { 89 70 if (data.event_type == 'unpull_card') {
card = data.flashcard; 90 71 card = data.flashcard;
$scope.deck_cards[card.id] = undefined; 91 72 $scope.deck_cards[card.id] = undefined;
} 92 73 }
}); 93 74 });
94 75
$scope.cardInDeck = function(id) { 95 76 $scope.cardInDeck = function(id) {
return $scope.deck_cards[id]; 96 77 return $scope.deck_cards[id];
}; 97 78 };
$scope.add = function(card) { 98 79 $scope.add = function(card) {
var colNum = 0; 99 80 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 100 81 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 101 82 var lowestColNum = 0;
while (colNum < $scope.numCols) { 102 83 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 103 84 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 104 85 lowestCol = $scope.cardCols[colNum];
break; 105 86 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 106 87 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 107 88 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 108 89 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 109 90 lowestColLen = $scope.cardCols[colNum].length;
} 110 91 }
colNum++; 111 92 colNum++;
} 112 93 }
console.log(card); 113 94 console.log(card);
$scope.cards.push(data); 114 95 $scope.cards.push(data);
lowestCol.unshift(card); 115 96 lowestCol.unshift(card);
$scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card}; 116 97 $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
$timeout($scope.refreshColumnWidth); 117 98 $timeout($scope.refreshColumnWidth);
}; 118 99 };
119 100
120 101
$scope.deck_cards = []; 121 102
$http.get('/api/sections/' + $scope.sectionId + '/deck/'). 122 103 $http.get('/api/sections/' + $scope.sectionId + '/deck/').
success(function(data) { 123 104 success(function(data) {
124 105
for (i in data) $scope.deck_cards[data[i].id] = data[i]; 125 106 for (i in data) $scope.deck_cards[data[i].id] = data[i];
console.log("got user's deck"); 126 107 console.log("got user's deck");
scripts/DeckController.js View file @ 1402915
angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']). 1 1 angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']).
2 2
controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) { 3 3 controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
angular.module('flashy.CardGridController').controller.apply(this, arguments); 4 4 angular.module('flashy.CardGridController').controller.apply(this, arguments);
5 5 $scope.cards = $scope.deck_cards;
$scope.refreshCards = function() { 6 6 $scope.refreshLayout();
$http.get('/api/sections/' + $scope.sectionId + '/deck/'). 7
success(function(data) { 8
console.log(data); 9
$scope.cards = data; 10
$scope.refreshLayout(); 11
console.log('success in refresh cards...'); 12
}). 13
error(function(err) { 14
console.log('refresh fail'); 15
}); 16
}; 17
$scope.refreshCards(); 18
} 19 7 }
); 20 8 );
scripts/FeedController.js View file @ 1402915
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) { 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);
$scope.refreshCards = function() { 5 5 $scope.refreshCards = function() {
$http.get('/api/sections/' + $scope.sectionId + '/feed/'). 6 6 $http.get('/api/sections/' + $scope.sectionId + '/feed/').
success(function(data) { 7 7 success(function(data) {
console.log(data); 8 8 console.log(data);
$scope.cards = []; 9 9 $scope.cards = [];
for (var i in data) { 10 10 for (var i in data) $scope.cards.push(new Flashcard(data[i], $scope.deck_cards));
console.log(data[i].id); 11
data[i].isInDeck = function(id) { 12
return $scope.cardInDeck(id); 13
}.bind(this, data[i].id); 14
data[i].unpull = function(id) { 15
$scope.unpullCard(id); 16
//$scope.deck_cards[id] = undefined; 17
}.bind(this, data[i].id); 18
data[i].pull = function(id, card) { 19
$scope.pullCard(id); 20
//$scope.deck_cards[id] = card; 21
}.bind(this, data[i].id, data[i]); 22
$scope.cards.push(data[i]); 23
} 24
$scope.refreshLayout(); 25 11 $scope.refreshLayout();
console.log('success in refresh cards...'); 26 12 console.log('success in refresh cards...');
}). 27 13 }).
error(function(err) { 28 14 error(function(err) {
console.log('refresh fail'); 29 15 console.log('refresh fail');
console.log(err); 30 16 console.log(err);
}); 31 17 });
}; 32 18 };
33 19
$scope.sortAdd = function(card, array) { 34 20 $scope.sortAdd = function(card, array) {
console.log('sort add'); 35 21 console.log('sort add');
array.forEach(function(ele, i, ary) { 36 22 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 37 23 if (ele.score <= card.score) {
ary.splice(i, 0, card); 38 24 ary.splice(i, 0, card);
return; 39 25 return;
} 40 26 }
}); 41 27 });
}; 42 28 };
43 29
$scope.hide = function(card) { 44 30 $scope.hide = function(card) {
var found = -1; 45 31 var found = -1;
col = $scope.cardTable[card.id].colNum; 46 32 col = $scope.cardTable[card.id].colNum;
found = $scope.cardCols[col].indexOf(card); 47 33 found = $scope.cardCols[col].indexOf(card);
if (found != -1) { 48 34 if (found != -1) {
$scope.cardCols[col].splice(found, 1); 49 35 $scope.cardCols[col].splice(found, 1);
console.log('card hidden'); 50 36 console.log('card hidden');
return col; 51 37 return col;
} 52 38 }
console.log('Error finding card to hide:'); 53 39 console.log('Error finding card to hide:');
console.log(card); 54 40 console.log(card);
return -1; 55 41 return -1;
}; 56 42 };
57 43
$scope.update = function(id, new_score) { 58 44 $scope.update = function(id, new_score) {
card = $scope.cardTable[id].obj; 59 45 card = $scope.cardTable[id].obj;
if (Math.abs(new_score - card.score) < .0001) { 60 46 if (Math.abs(new_score - card.score) < .0001) {
console.log('score same, no update required'); 61 47 console.log('score same, no update required');
return; 62 48 return;
} 63 49 }
console.log('updating'); 64 50 console.log('updating');
console.log(card); 65 51 console.log(card);
var column = $scope.cardCols[$scope.cardTable[id].colNum]; 66 52 var column = $scope.cardCols[$scope.cardTable[id].colNum];
var found = column.indexOf(card); 67 53 var found = column.indexOf(card);
var i = 0; 68 54 var i = 0;
for (; i < column.length; i++) 69 55 for (; i < column.length; i++)
if (column[i].score <= new_score) break; 70 56 if (column[i].score <= new_score) break;
card.score = new_score; 71 57 card.score = new_score;
if ($scope.$$phase) { // most of the time it is "$digest" 72 58 if ($scope.$$phase) { // most of the time it is "$digest"
column.splice(i, 0, column.splice(found, 1)[0]); 73 59 column.splice(i, 0, column.splice(found, 1)[0]);
} else { 74 60 } else {
$scope.$apply(column.splice(i, 0, column.splice(found, 1)[0])); 75 61 $scope.$apply(column.splice(i, 0, column.splice(found, 1)[0]));
} 76 62 }
}; 77 63 };
78 64
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 79 65 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onOpen(function() { 80 66 $scope.feed_ws.onOpen(function() {
console.log('feed ws open'); 81 67 console.log('feed ws open');
}); 82 68 });
83 69
$scope.feed_ws.onMessage(function(e) { 84 70 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 85 71 data = JSON.parse(e.data);
console.log('got websocket message ' + e.data); 86 72 console.log('got websocket message ' + e.data);
console.log(data); 87 73 console.log(data);
if (data.event_type == 'new_card') { 88 74 if (data.event_type == 'new_card') {
$scope.add(data.flashcard); 89 75 $scope.add(data.flashcard);
} else if (data.event_type == 'score_change') { 90 76 } else if (data.event_type == 'score_change') {
$scope.update(data.flashcard_id, data.new_score); 91 77 $scope.update(data.flashcard_id, data.new_score);
} 92 78 }
}); 93 79 });
94 80
$scope.pushCard = function() { 95 81 $scope.pushCard = function() {
var myCard = { 96 82 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 97 83 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 98 84 'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks, 99 85 'mask': $scope.newCardBlanks,
section: $scope.section.id 100 86 section: $scope.section.id
}; 101 87 };
if (myCard.text == '') { 102 88 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 103 89 console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard(); 104 90 return closeNewCard();
} 105 91 }
$http.post('/api/flashcards/', myCard). 106 92 $http.post('/api/flashcards/', myCard).
success(function(data) { 107 93 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 108 94 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 109 95 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 110 96 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 111 97 }
}). 112 98 }).
error(function(error) { 113 99 error(function(error) {
console.log('something went wrong pushing a card!'); 114 100 console.log('something went wrong pushing a card!');
}); 115 101 });
return $scope.closeNewCardModal(); 116 102 return $scope.closeNewCardModal();
}; 117 103 };
118 104
/* Key bindings for the whole feed window. Hotkey it up! */ 119 105 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 120 106 var listenForC = true;
121 107
// Need to pass these options into openmodal and leanmodal, 122 108 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 123 109 // otherwise the ready handler doesn't get called
124 110
modal_options = { 125 111 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 126 112 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 127 113 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 128 114 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 129 115 out_duration: 200, // Transition out duration
ready: function() { 130 116 ready: function() {
$('#new-card-input').focus(); 131 117 $('#new-card-input').focus();
document.execCommand('selectAll', false, null); 132 118 document.execCommand('selectAll', false, null);
} 133 119 }
}; 134 120 };
135 121
$(document).keydown(function(e) { 136 122 $(document).keydown(function(e) {
var keyed = e.which; 137 123 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 138 124 if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal(); 139 125 $scope.openNewCardModal();
e.preventDefault(); 140 126 e.preventDefault();
return false; 141 127 return false;
} else if (keyed == 27) { // clear on ESC 142 128 } else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal(); 143 129 $scope.closeNewCardModal();
} 144 130 }
}); 145 131 });
146 132
$scope.openNewCardModal = function() { 147 133 $scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options); 148 134 $('#newCard').openModal(modal_options);
listenForC = false; 149 135 listenForC = false;
$('#new-card-input').html('Write a flashcard!'); 150 136 $('#new-card-input').html('Write a flashcard!');
}; 151 137 };
152 138
$scope.closeNewCardModal = function() { 153 139 $scope.closeNewCardModal = function() {
listenForC = true; 154 140 listenForC = true;
$('#new-card-input').html('').blur(); 155 141 $('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options); 156 142 $('#newCard').closeModal(modal_options);
}; 157 143 };
158 144
$('.tooltipped').tooltip({delay: 50}); 159 145 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 160 146 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 161 147 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 162 148 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 163 149 if (e.which == 13) {
e.preventDefault(); 164 150 e.preventDefault();
if ($scope.submit_enabled) { 165 151 if ($scope.submit_enabled) {
$scope.pushCard(); 166 152 $scope.pushCard();
listenForC = true; 167 153 listenForC = true;
} 168 154 }
return false; 169 155 return false;
} else { 170 156 } else {
171 157
} 172 158 }
}); 173 159 });
$('button#blank-selected').click(function() { 174 160 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 175 161 console.log(window.getSelection());
document.execCommand('bold'); 176 162 document.execCommand('bold');
}); 177 163 });
$scope.refreshCards(); 178 164 $scope.refreshCards();
$scope.newCardBlanks = []; 179 165 $scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() { 180 166 $scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text(); 181 167 $scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160; 182 168 $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0; 183 169 var i = 0;
$scope.newCardBlanks = []; 184 170 $scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 185 171 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 186 172 if (typeof node.data == 'undefined') {
console.log('undefined node'); 187 173 console.log('undefined node');
} 188 174 }
node = $(node)[0]; 189 175 node = $(node)[0];
if (node.tagName == 'B') { 190 176 if (node.tagName == 'B') {
var text = $(node).text(); 191 177 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 192 178 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 193 179 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 194 180 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 195 181 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 196 182 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 197 183 if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 198 184 i += text.length;
} else if (!node.data) { 199 185 } else if (!node.data) {
console.log('weird node', node); 200 186 console.log('weird node', node);
i += $(node).text().length; 201 187 i += $(node).text().length;
} else { 202 188 } else {
i += node.data.length; 203 189 i += node.data.length;
} 204 190 }
}); 205 191 });
$scope.newCardBlanks.sort(function(a, b) { 206 192 $scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0]; 207 193 return a[0] - b[0];
}); 208 194 });
i = 0; 209 195 i = 0;
newtext = ''; 210 196 newtext = '';
console.log($scope.newCardBlanks); 211 197 console.log($scope.newCardBlanks);
$scope.newCardBlanks.forEach(function(blank) { 212 198 $scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]); 213 199 newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>'; 214 200 newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 215 201 i = blank[1];
}); 216 202 });
newtext += $scope.newCardText.slice(i); 217 203 newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext; 218 204 //$scope.newCardFormattedText = newtext;
scripts/FlashcardDirective.js View file @ 1402915
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', 3 3 directive('flashcard',
function($http, $state, $window) { 4 4 function($http, $state, $window) {
return { 5 5 return {
templateUrl: '/app/templates/flashcard.html', 6 6 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 7 7 restrict: 'E',
scope: { 8 8 scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html 9 9 flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html 10 10 refresh: '&' // eval refresh in parent html
}, 11 11 },
link: function(scope, element) { 12 12 link: function(scope, element) {
/* Handles width of the card */ 13 13 /* Handles width of the card */
scope.textPieces = []; 14
scope.flashcard.mask.sort(function(a, b) { 15
return a[0] - b[0]; 16
}); 17
var i = 0; 18
scope.flashcard.mask.forEach(function(blank) { 19
scope.textPieces.push({text: scope.flashcard.text.slice(i, blank[0])}); 20
scope.textPieces.push({text: scope.flashcard.text.slice(blank[0], blank[1]), blank: true}); 21
i = blank[1]; 22
}); 23
scope.textPieces.push({text: scope.flashcard.text.slice(i)}); 24
25 14
/* Hides card from feed */ 26
scope.hideCard = function(flashcard) { 27
if ($state.current.name == 'feed') { 28
$http.post('/api/flashcards/' + flashcard.id + '/hide/'). 29
success(function(data) { 30
console.log('card hide success'); 31
scope.startShrink = true; 32
scope.refresh(flashcard); 33
}). 34
error(function(data) { 35
console.log('card hide FAILURE'); 36
}); 37
} 38
}; 39
} 40 15 }
}; 41 16 };
scripts/FlashcardFactory.js View file @ 1402915
File was created 1 angular.module('flashy.FlashcardFactory', ['ui.router']).
2 factory('Flashcard', function ($http) {
3 var Flashcard = function (data, deck) {
4 for (var k in data) this[k] = data[k];
5 this.deck = deck;
6 this.textPieces = [];
7 this.mask.sort(function (a, b) {
8 return a[0] - b[0];
9 });
10
11 var i = 0;
12 this.mask.forEach(function (blank) {
13 this.textPieces.push({text: this.text.slice(i, blank[0])});
14 this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true});
15 i = blank[1];
16 }, this);
17 this.textPieces.push({text: this.text.slice(i)});
18 };
19
20 Flashcard.prototype.isInDeck = function () {
21 return this.deck[this.id];
22 };
23 Flashcard.prototype.pull = function () {
24 if (this.deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck");
25 return $http.post('/api/flashcards/' + this.id + '/pull/');
26 };
27 Flashcard.prototype.unpull = function () {
28 if (!this.deck[this.id]) return console.log('Not unpulling', this.id, "because it's not in deck");
29 return $http.post('/api/flashcards/' + this.id + '/unpull/');
30 };
31 Flashcard.prototype.hide = function () {
32 return $http.post('/api/flashcards/' + this.id + '/hide/');
33 };
templates/flashcard.html View file @ 1402915
<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}"> 2 2 ng-class="{'shrinky': startShrink}">
<div class="valign-wrapper"> 3 3 <div class="valign-wrapper">
<div class="card-content valign center-align"> 4 4 <div class="card-content valign center-align">
<span ng-repeat="piece in 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-hide="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=" 22 22 <div class="right-box" ng-click="
hideCard(flashcard)"> 23 23 hideCard(flashcard)">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 24 24 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 25 25 </div>
26 26
</div> 27 27 </div>
</div> 28 28 </div>
<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:0px;right:0px"> 29 29 <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:0px;right:0px">
<div class="center-me"><i class="mdi-action-done small"></i></div> 30 30 <div class="center-me"><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>