110swag / flashy-frontend

Download as
Browse Code ยป

Commit 4a8b43927abf11abcf7396d95456ea341969900a

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

start improving card push

Showing 3 changed files with 59 additions and 39 deletions Inline Diff

home.html View file @ 4a8b439
<!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">
8 8
<link rel="stylesheet" href="styles/flashier.css"/> 9 9 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 10 10 <link rel="stylesheet" href="styles/flashy.css"/>
<link 11 11 <link
href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic' 12 12 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'> 13 13 rel='stylesheet' type='text/css'>
<title>Flashy</title> 14 14 <title>Flashy</title>
</head> 15 15 </head>
<body ng-controller="RootController"> 16 16 <body ng-controller="RootController">
<header> 17 17 <header>
<nav> 18 18 <nav>
<div class="nav-wrapper"> 19 19 <div class="nav-wrapper">
<a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo" 20 20 <a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo"
class="left button-collapse hide-on-med-and-up"><i 21 21 class="left button-collapse hide-on-med-and-up"><i
class="mdi-navigation-menu"></i></a> 22 22 class="mdi-navigation-menu"></i></a>
<!-- User's classes dropdown --> 23 23 <!-- User's classes dropdown -->
<ul id="classDropdown" class="dropdown-content"> 24 24 <ul id="classDropdown" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 25 25 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 26 26 <a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 27 27 </li>
<li class="divider"></li> 28 28 <li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li> 29 29 <li><a ui-sref="addclass">Add Class</a></li>
</ul> 30 30 </ul>
<ul ng-show="UserService.isLoggedIn()" class="left hide-on-small-and-down"> 31 31 <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" 32 32 <li><a style="font-size:20px; font-weight:700" class="dropdown-button ng-cloak hide-on-small-and-down"
href="#!" 33 33 href="#!"
data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i 34 34 data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i
class="mdi-navigation-arrow-drop-down right"></i></a></li> 35 35 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})" 36 36 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})"
class="tooltipped" 37 37 class="tooltipped"
data-position="bottom" 38 38 data-position="bottom"
data-delay="50" data-tooltip="Feed"><i 39 39 data-delay="50" data-tooltip="Feed"><i
class="mdi-action-view-module"></i></a></li> 40 40 class="mdi-action-view-module"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" 41 41 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})"
class="tooltipped" 42 42 class="tooltipped"
data-position="bottom" 43 43 data-position="bottom"
data-delay="50" data-tooltip="Deck"><i 44 44 data-delay="50" data-tooltip="Deck"><i
class="mdi-action-view-carousel"></i></a></li> 45 45 class="mdi-action-view-carousel"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" 46 46 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})"
class="tooltipped" 47 47 class="tooltipped"
data-position="bottom" 48 48 data-position="bottom"
data-delay="50" data-tooltip="Card List"><i 49 49 data-delay="50" data-tooltip="Card List"><i
class="mdi-action-view-list"></i></a></li> 50 50 class="mdi-action-view-list"></i></a></li>
</ul> 51 51 </ul>
<a href="#" class="brand-logo center">Flashy</a> 52 52 <a href="#" class="brand-logo center">Flashy</a>
53 53
<ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down"> 54 54 <ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down">
55 55
<li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50" 56 56 <li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50"
data-tooltip="Study"> 57 57 data-tooltip="Study">
<i class="tiny mdi-action-pageview"></i></a></li> 58 58 <i class="tiny mdi-action-pageview"></i></a></li>
59 59
<!-- Settings Dropdown --> 60 60 <!-- Settings Dropdown -->
<ul id="settingsDropdown" class="dropdown-content"> 61 61 <ul id="settingsDropdown" class="dropdown-content">
62 62
63 63
</ul> 64 64 </ul>
65 65
<li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped" 66 66 <li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped"
data-position="bottom" 67 67 data-position="bottom"
data-delay="50" data-tooltip="Help"></i></a></li> 68 68 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" 69 69 <li ui-sref-active="active"><a ui-sref="settings"><i data-position="bottom" data-delay="50"
data-tooltip="Settings" 70 70 data-tooltip="Settings"
class="mdi-action-settings tooltipped"></i></a></li> 71 71 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" 72 72 <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> 73 73 class="mdi-content-forward tooltipped"></i></a></li>
74 74
75 75
</ul> 76 76 </ul>
77 77
<!-- Slide-in side-nav for small screens --> 78 78 <!-- Slide-in side-nav for small screens -->
<ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo"> 79 79 <ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
<span ng-show="currentSection.id"> 80 80 <span ng-show="currentSection.id">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"> 81 81 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-module left"></i> 82 82 <i class="mdi-action-view-module left"></i>
Feed</a> 83 83 Feed</a>
</li> 84 84 </li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"> 85 85 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-carousel left"> </i> 86 86 <i class="mdi-action-view-carousel left"> </i>
Deck 87 87 Deck
</a> 88 88 </a>
</li> 89 89 </li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"> 90 90 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-list left"></i> 91 91 <i class="mdi-action-view-list left"></i>
Card List 92 92 Card List
</a> 93 93 </a>
</li> 94 94 </li>
<hr> 95 95 <hr>
</span> 96 96 </span>
<!-- Collapsible menu for all the User's classes --> 97 97 <!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion"> 98 98 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 99 99 <li class="bold">
<a class="collapsible-header black-text"> 100 100 <a class="collapsible-header black-text">
Classes 101 101 Classes
<i class="mdi-navigation-arrow-drop-down right"></i> 102 102 <i class="mdi-navigation-arrow-drop-down right"></i>
</a> 103 103 </a>
</li> 104 104 </li>
<div class="collapsible-body" style="display: block"> 105 105 <div class="collapsible-body" style="display: block">
<ul> 106 106 <ul>
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 107 107 <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> 108 108 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 109 109 </li>
<hr> 110 110 <hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li> 111 111 <li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li>
</ul> 112 112 </ul>
</div> 113 113 </div>
</ul> 114 114 </ul>
<li><a ui-sref="study">Study</a></li> 115 115 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="settings">Settings</a></li> 116 116 <li><a ui-sref="settings">Settings</a></li>
<li><a ng-click="logout()">Logout</a></li> 117 117 <li><a ng-click="logout()">Logout</a></li>
</ul> 118 118 </ul>
</div> 119 119 </div>
</nav> 120 120 </nav>
121 121
</header> 122 122 </header>
123 123
124 124
<!-- Menu Bar --> 125 125 <!-- Menu Bar -->
<main ui-view></main> 126 126 <main ui-view></main>
127 127
128 128
<!--<footer class="page-footer">--> 129 129 <!--<footer class="page-footer">-->
<!--<div class="footer-copyright">--> 130 130 <!--<div class="footer-copyright">-->
<!--<div class="container">--> 131 131 <!--<div class="container">-->
<!--&copy; 2015 Team Swag--> 132 132 <!--&copy; 2015 Team Swag-->
<!--<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by--> 133 133 <!--<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by-->
<!--email!</a>--> 134 134 <!--email!</a>-->
<!--</div>--> 135 135 <!--</div>-->
136 136
<!--</div>--> 137 137 <!--</div>-->
<!--</footer>--> 138 138 <!--</footer>-->
139 139
</body> 140 140 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 141 141 <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> 142 142 <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> 143 143 <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> 144 144 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 145 145 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 146 146 <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> 147 147 <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> 148 148 <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> 149 149 <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> 150 150 <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> 151 151 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.9/angular-websocket.min.js"></script> 152 152 <script src="https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.9/angular-websocket.min.js"></script>
153 <script src="https://cdn.rawgit.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 153 154 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
154 155
155 156
<script src="config.js"></script> 156 157 <script src="config.js"></script>
157 158
<!-- Controllers --> 158 159 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 159 160 <script src="scripts/FeedController.js"></script>
scripts/FeedController.js View file @ 4a8b439
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket']). 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) {
angular.module('flashy.CardGridController').controller.apply(this, arguments); 4 4 angular.module('flashy.CardGridController').controller.apply(this, arguments);
console.log('Hello from feed'); 5 5 console.log('Hello from feed');
6 6
$scope.refreshCards = function() { 7 7 $scope.refreshCards = function() {
$http.get('/api/sections/' + $scope.sectionId + '/feed/'). 8 8 $http.get('/api/sections/' + $scope.sectionId + '/feed/').
success(function(data) { 9 9 success(function(data) {
console.log(data); 10 10 console.log(data);
$scope.cards = data; 11 11 $scope.cards = data;
$scope.refreshLayout(); 12 12 $scope.refreshLayout();
console.log('success in refresh cards...'); 13 13 console.log('success in refresh cards...');
}). 14 14 }).
error(function(err) { 15 15 error(function(err) {
console.log('refresh fail'); 16 16 console.log('refresh fail');
console.log(err); 17 17 console.log(err);
}); 18 18 });
}; 19 19 };
20 20
$scope.sortAdd = function(card, array) { 21 21 $scope.sortAdd = function(card, array) {
console.log('sort add'); 22 22 console.log('sort add');
array.forEach(function(ele, i, ary) { 23 23 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 24 24 if (ele.score <= card.score) {
ary.splice(i, 0, card); 25 25 ary.splice(i, 0, card);
return; 26 26 return;
} 27 27 }
}); 28 28 });
}; 29 29 };
30 30
$scope.hide = function(card) { 31 31 $scope.hide = function(card) {
console.log('hiding card'); 32 32 console.log('hiding card');
var found = -1; 33 33 var found = -1;
col = $scope.cardTable[card.id].colNum; 34 34 col = $scope.cardTable[card.id].colNum;
found = $scope.cardCols[col].indexOf(card); 35 35 found = $scope.cardCols[col].indexOf(card);
if (found != -1) { 36 36 if (found != -1) {
$scope.cardCols[col].splice(found, 1); 37 37 $scope.cardCols[col].splice(found, 1);
console.log('card hidden'); 38 38 console.log('card hidden');
return col; 39 39 return col;
} 40 40 }
console.log('Error finding card to hide:'); 41 41 console.log('Error finding card to hide:');
console.log(card); 42 42 console.log(card);
return -1; 43 43 return -1;
}; 44 44 };
45 45
$scope.update = function(id, new_score) { 46 46 $scope.update = function(id, new_score) {
card = $scope.cardTable[id].obj; 47 47 card = $scope.cardTable[id].obj;
if (Math.abs(new_score - card.score) < .0001) { 48 48 if (Math.abs(new_score - card.score) < .0001) {
console.log('score same, no update required'); 49 49 console.log('score same, no update required');
return; 50 50 return;
} 51 51 }
console.log('updating'); 52 52 console.log('updating');
console.log(card); 53 53 console.log(card);
var column = $scope.cardCols[$scope.cardTable[id].colNum]; 54 54 var column = $scope.cardCols[$scope.cardTable[id].colNum];
var found = column.indexOf(card); 55 55 var found = column.indexOf(card);
var i = 0; 56 56 var i = 0;
for (; i < column.length; i++) 57 57 for (; i < column.length; i++)
if (column[i].score <= new_score) break; 58 58 if (column[i].score <= new_score) break;
card.score = new_score; 59 59 card.score = new_score;
if ($scope.$$phase) { // most of the time it is "$digest" 60 60 if ($scope.$$phase) { // most of the time it is "$digest"
column.splice(i, 0, column.splice(found, 1)[0]); 61 61 column.splice(i, 0, column.splice(found, 1)[0]);
} else { 62 62 } else {
$scope.$apply(column.splice(i, 0, column.splice(found, 1)[0])); 63 63 $scope.$apply(column.splice(i, 0, column.splice(found, 1)[0]));
} 64 64 }
}; 65 65 };
66 66
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 67 67 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onOpen(function() { 68 68 $scope.feed_ws.onOpen(function() {
console.log('deck ws open'); 69 69 console.log('deck ws open');
}); 70 70 });
71 71
$scope.feed_ws.onMessage(function(e) { 72 72 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 73 73 data = JSON.parse(e.data);
console.log('got websocket message ' + e.data); 74 74 console.log('got websocket message ' + e.data);
console.log(data); 75 75 console.log(data);
if (data.event_type == 'new_card') { 76 76 if (data.event_type == 'new_card') {
$scope.add(data.flashcard); 77 77 $scope.add(data.flashcard);
} else if (data.event_type == 'score_change') { 78 78 } else if (data.event_type == 'score_change') {
$scope.update(data.flashcard_id, data.new_score); 79 79 $scope.update(data.flashcard_id, data.new_score);
} 80 80 }
}); 81 81 });
82 82
var resetModal = function() { 83
$('#new-card-input').html(''); 84
$('#newCard').closeModal(modal_options); 85
}; 86
87
$scope.pushCard = function() { 88 83 $scope.pushCard = function() {
var i = 0; 89 84 var i = 0;
var blanks = []; 90 85 var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 91 86 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 92 87 if (typeof node.data == 'undefined') {
console.log('undefined node'); 93 88 console.log('undefined node');
//return resetModal(); 94
} 95 89 }
node = $(node)[0]; 96 90 node = $(node)[0];
if (node.tagName == 'B') { 97 91 if (node.tagName == 'B') {
var text = $(node).text(); 98 92 var text = $(node).text();
console.log(text.length, text); 99 93 console.log(text.length, text);
var leftspaces = 0, rightspaces = 0; 100 94 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 101 95 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 102 96 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 103 97 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
if (leftspaces != text.length) blanks.push([i + leftspaces, i + text.length - rightspaces]); 104 98 if (leftspaces != text.length) blanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 105 99 i += text.length;
} else if (!node.data) { 106 100 } else if (!node.data) {
console.log('weird node', node); 107 101 console.log('weird node', node);
i += $(node).text().length; 108 102 i += $(node).text().length;
} else { 109 103 } else {
i += node.data.length; 110 104 i += node.data.length;
} 111 105 }
}); 112 106 });
var myCard = { 113 107 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 114 108 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 115 109 'text': $('#new-card-input').text(),
'mask': blanks, 116 110 'mask': blanks,
section: $scope.section.id 117 111 section: $scope.section.id
}; 118 112 };
if (myCard.text == '') { 119 113 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 120 114 console.log('blank flashcard not pushed:' + myCard.text);
return resetModal(); 121 115 return closeNewCard();
} 122 116 }
$http.post('/api/flashcards/', myCard). 123 117 $http.post('/api/flashcards/', myCard).
success(function(data) { 124 118 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 125 119 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 126 120 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 127 121 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 128 122 }
129
}). 130 123 }).
error(function(error) { 131 124 error(function(error) {
console.log('something went wrong pushing a card!'); 132 125 console.log('something went wrong pushing a card!');
}); 133 126 });
return resetModal(); 134 127 return $scope.closeNewCardModal();
}; 135 128 };
136 129
/* Key bindings for the whole feed window. Hotkey it up! */ 137 130 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 138 131 var listenForC = true;
139 132
// Need to pass these options into openmodal and leanmodal, 140 133 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 141 134 // otherwise the ready handler doesn't get called
142 135
modal_options = { 143 136 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 144 137 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 145 138 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 146 139 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 147 140 out_duration: 200, // Transition out duration
ready: function() { 148 141 ready: function() {
listenForC = false; 149
console.log('modal OPENING'); 150
$('#new-card-input').focus(); 151 142 $('#new-card-input').focus();
}, 152 143 document.execCommand('selectAll', false, null);
complete: function() { 153
listenForC = true; 154
console.log('modal done, closing'); 155
$('#new-card-input').blur(); 156
} 157 144 }
}; 158 145 };
159 146
$(document).keydown(function(e) { 160 147 $(document).keydown(function(e) {
var keyed = e.which; 161 148 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 162 149 if (keyed == 67 && listenForC) { // "c" for compose
$('#newCard').openModal(modal_options); 163 150 $scope.openNewCardModal();
e.preventDefault(); 164 151 e.preventDefault();
listenForC = false; 165
return false; 166 152 return false;
} else if (keyed == 27) { // clear on ESC 167 153 } else if (keyed == 27) { // clear on ESC
listenForC = true; 168 154 $scope.closeNewCardModal();
document.getElementById('new-card-input').value = ''; 169
} 170 155 }
}); 171 156 });
157
158 $scope.openNewCardModal = function() {
159 $('#newCard').openModal(modal_options);
160 listenForC = false;
161 $('#new-card-input').html('Write a flashcard!');
162
163 };
164
165 $scope.closeNewCardModal = function() {
166 listenForC = true;
167 $('#new-card-input').html('').blur();
168 $('#newCard').closeModal(modal_options);
169 };
170
$('.tooltipped').tooltip({delay: 50}); 172 171 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 173 172 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 174 173 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 175 174 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 176 175 if (e.which == 13) {
e.preventDefault(); 177 176 e.preventDefault();
$scope.pushCard(); 178 177 $scope.pushCard();
listenForC = true; 179 178 listenForC = true;
return false; 180 179 return false;
} 181 180 }
}); 182 181 });
$('button#blank-selected').click(function() { 183 182 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 184 183 console.log(window.getSelection());
document.execCommand('bold'); 185 184 document.execCommand('bold');
}); 186 185 });
$scope.refreshCards(); 187 186 $scope.refreshCards();
188 187
$scope.shuffleCards = function() { 189 188 $scope.shuffleCards = function() {
$timeout(function() { 190 189 $timeout(function() {
(function(o) { 191 190 (function(o) {
templates/feed.html View file @ 4a8b439
<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="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="cards === false">
<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" href="#newCard" data-position="left" 18 18 <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left"
data-delay="50" 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" 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"> 27 27 <div class="modal-content col">
<div class="card cyan-text text-darken-2" 28 28 <div class="row" style="margin-bottom:0">
style="margin-left: auto; margin-right:auto;width:300px; height:180px; font-size:120%;"> 29 29 <div class="card cyan-text text-darken-2"
<div class="valign-wrapper"> 30 30 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div id="new-card-input" style="outline:0px solid transparent;" class="card-content valign center-align" 31 31 <div class="valign-wrapper">
contenteditable> 32 32 <div id="new-card-input" ng-model="newcardtext" style="outline:0px solid transparent;"
33 class="card-content valign center-align"
34 contenteditable>
33 35
36 </div>
</div> 34 37 </div>
38
</div> 35 39 </div>
</div> 36 40 </div>
</div> 37 41 </div>
38 42
<div class="modal-footer"> 39 43 <div class="col">
<button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left" 40 44 <div class="row">
data-delay="50" 41 45
data-tooltip="Enter">Submit 42 46 </div>
<i class="mdi-hardware-keyboard-return right"></i> 43 47 <div class="row">
</button> 44 48 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left"
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 45 49 data-delay="50" ng-class="newcardtext.length >= 5?{}:'disabled'"
data-tooltip="Ctrl-B">Blank Selected Text 46 50 data-tooltip="Enter">Submit
</button> 47 51 <i class="mdi-hardware-keyboard-return right"></i>
52 </button>
53 </div>
54 <div class="row">
55 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
56 data-tooltip="Ctrl-B">Blank Selected Text
57 </button>
58 </div>
59 <div class="row" ng-show="newcardtext">
60 {{newcardtext.length}}/160 characters
61 </div>
62 <div class="row" ng-show="newcardtext.length < 5">
63 Please write a little more!
64 </div>
65 <div class="row" ng-show="newcardtext.length > 140">
66 You'
67 </div>
</div> 48 68 </div>
</form> 49 69 </form>
</div> 50 70 </div>
51 71
52 72