110swag / flashy-frontend

Download as
Browse Code ยป

Commit 910da5aeda313ed9b318c263db9c67ff9e5327b5

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

show check mark for cards in deck, allow unpulling from feed

Showing 2 changed files with 30 additions and 27 deletions Inline Diff

scripts/FlashcardDirective.js View file @ 910da5a
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', '$state', '$window', 3 3 directive('flashcard', ['$http', '$state', '$window',
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 14 scope.textPieces = [];
scope.flashcard.mask.sort(function(a, b) { 15 15 scope.flashcard.mask.sort(function(a, b) {
return a[0] - b[0]; 16 16 return a[0] - b[0];
}); 17 17 });
var i = 0; 18 18 var i = 0;
scope.flashcard.mask.forEach(function(blank) { 19 19 scope.flashcard.mask.forEach(function(blank) {
scope.textPieces.push({text: scope.flashcard.text.slice(i, blank[0])}); 20 20 scope.textPieces.push({text: scope.flashcard.text.slice(i, blank[0])});
scope.textPieces.push({text: scope.flashcard.text.slice(blank[0], blank[1]), blank: true}); 21 21 scope.textPieces.push({text: scope.flashcard.text.slice(blank[0], blank[1]), blank: true});
i = blank[1]; 22 22 i = blank[1];
}); 23 23 });
scope.textPieces.push({text: scope.flashcard.text.slice(i)}); 24 24 scope.textPieces.push({text: scope.flashcard.text.slice(i)});
/* Pulls card from feed into deck */ 25 25 /* Pulls card from feed into deck */
scope.pullCard = function(flashcard) { 26 26 scope.pullCard = function(flashcard) {
if ($state.current.name == 'feed') { 27 27 flashcard.is_in_deck = true;
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard). 28 28 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
success(function(data) { 29 29 success(function(data) {
console.log('pulled flashcard #' + flashcard.id); 30 30 console.log('pulled flashcard #' + flashcard.id);
scope.startShrink = true; 31 31 //scope.startShrink = true;
scope.refresh(flashcard); 32 32 //scope.refresh(flashcard);
}). 33 33 }).
error(function(data) { 34 34 error(function(data) {
console.log('failed to pull flashcard #' + flashcard.id); 35 35 console.log('failed to pull flashcard #' + flashcard.id);
}); 36 36 });
} 37
}; 38 37 };
39 38
/* Unpulls card from deck */ 40 39 /* Unpulls card from deck */
scope.unpullCard = function(flashcard) { 41 40 scope.unpullCard = function(flashcard) {
if ($state.current.name == 'deck') { 42 41 console.log('unpulling card...');
console.log('unpulling card...'); 43 42 flashcard.is_in_deck = false;
44 43 $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
$http.post('/api/flashcards/' + flashcard.id + '/unpull/', 45 44 flashcard).
flashcard). 46 45 success(function(data) {
success(function(data) { 47 46 console.log('card unpull success');
console.log('card unpull success'); 48 47 //scope.startShrink = true;
scope.startShrink = true; 49 48 //scope.refresh(flashcard);
scope.refresh(flashcard); 50 49 }).
}). 51 50 error(function(data) {
error(function(data) { 52 51 console.log('card unpull FAILURE');
console.log('card unpull FAILURE'); 53 52 });
}); 54
} 55
}; 56 53 };
57 54
/* Hides card from feed */ 58 55 /* Hides card from feed */
scope.hideCard = function(flashcard) { 59 56 scope.hideCard = function(flashcard) {
if ($state.current.name == 'feed') { 60 57 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/hide/', 61 58 $http.post('/api/flashcards/' + flashcard.id + '/hide/',
flashcard). 62 59 flashcard).
success(function(data) { 63 60 success(function(data) {
console.log('card hide success'); 64 61 console.log('card hide success');
scope.startShrink = true; 65 62 scope.startShrink = true;
scope.refresh(flashcard); 66 63 scope.refresh(flashcard);
}). 67 64 }).
error(function(data) { 68 65 error(function(data) {
console.log('card hide FAILURE'); 69 66 console.log('card hide FAILURE');
}); 70 67 });
} 71 68 }
}; 72 69 };
} 73 70 }
}; 74 71 };
}]); 75 72 }]);
76 73
templates/flashcard.html View file @ 910da5a
<div class="card flashy smallify" ng-init="startShrink = false" 1 1 <div class="card flashy smallify" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink}" style="color:red"> 2 2 ng-class="{'shrinky': startShrink}" style="color:red">
<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 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" 10 10 <div class="top-box no-user-select" ng-hide="flashcard.is_in_deck"
ng-click="pullCard(flashcard)"> 11 11 ng-click="pullCard(flashcard)">
<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>
14 14 <div class="top-box no-user-select" ng-show="flashcard.is_in_deck"
15 ng-click="unpullCard(flashcard)">
16 <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
17 </div>
<div class="bottom-box no-user-select"> 15 18 <div class="bottom-box no-user-select">
<div class="left-box"> 16 19 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 17 20 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 18 21 </div>
<div class="right-box" ng-click="unpullCard(flashcard); 19 22 <div class="right-box" ng-click="unpullCard(flashcard);
hideCard(flashcard)"> 20 23 hideCard(flashcard)">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 21 24 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 22 25 </div>
23 26
</div> 24 27 </div>
28 </div>
29 <div ng-show="flashcard.is_in_deck" class="green-text" style="position:absolute; top:0px;right:0px">
30 <div class="center-me"><i class="mdi-action-done small"></i></div>
</div> 25 31 </div>
</div> 26 32 </div>