Commit cb1ad91980fb5c5b050d6d4ba1ea4d8e8d12e40e

Authored by Rachel Lee
1 parent 4b201f2e23

Unpull from deck now refreshes cards, has remove animation; hide card implemente…

…d but does not work when page refresh

Showing 5 changed files with 107 additions and 50 deletions Side-by-side Diff

scripts/DeckController.js View file @ cb1ad91
... ... @@ -6,6 +6,7 @@
6 6 sectionId = $stateParams.sectionId;
7 7 $scope.cards = [];
8 8  
  9 + // Populate our page with cards.
9 10 $http.get('/api/sections/' + sectionId + '/deck/').
10 11 success(function(data) {
11 12 console.log(data);
12 13  
... ... @@ -15,7 +16,25 @@
15 16 console.log('pulling feed failed');
16 17 });
17 18  
  19 + /* Lets page refresh the cards shown on the page. */
  20 + $scope.refreshCards = function() {
  21 + console.log('refreshing cards...');
  22 + var myDelay = 350; // ms
  23 + setTimeout(function() {
  24 + $http.get('/api/sections/' + sectionId + '/deck/').
  25 + success(function(data) {
  26 + console.log(data);
  27 + $scope.cards = data;
  28 + console.log('success in refresh cards...');
  29 + }).
  30 + error(function(err) {
  31 + console.log('refresh fail');
  32 + });
  33 + }, myDelay);
  34 + }
18 35  
  36 +
  37 + /* all kmach's stuff below, do not touch */
19 38 // reorganize cards in array based on time
20 39 $scope.filter = function(card) {
21 40  
22 41  
23 42  
... ... @@ -27,20 +46,8 @@
27 46  
28 47 };
29 48  
30   - // remove card from deck
31   - $scope.removeCard = function(card) {
32 49  
33   - // get index of card
34   - var index = $scope.cards.indexOf(card);
35   -
36   - $scope.cards.splice(index, 1);
37   -
38   - alert('Removed card!');
39   - };
40   -
41   -
42 50 $scope.editCard = function(card) {
43   -
44 51 var index = $scope.cards.indexOf(card);
45 52  
46 53 $('.modal-trigger').leanModal({
... ... @@ -50,7 +57,6 @@
50 57 out_duration: 200, // Transition out duration
51 58 ready: function() {
52 59  
53   -
54 60 $scope.editableContent = $scope.cards[index].content;
55 61 }, // Callback for Modal open
56 62 complete: function() {
... ... @@ -60,10 +66,6 @@
60 66 } // Callback for Modal close
61 67 }
62 68 );
63   -
64   -
65   -
66   -
67 69 //alert($scope.cards[index].content);
68 70  
69 71 // post flashcard edits
scripts/FlashcardDirective.js View file @ cb1ad91
1 1 angular.module('flashy.FlashcardDirective', []).
2 2  
3   -directive('flashcard', ['$http', function($http) {
  3 +directive('flashcard', ['$http', '$state', function($http, $state) {
4 4 return {
5 5 templateUrl: '/app/templates/flashcard.html',
6 6 restrict: 'E',
7 7 scope: {
8   - flashcard: '=flashcardObj' // flashcard-obj in html
  8 + flashcard: '=flashcardObj', // flashcard-obj in parent html
  9 + refresh: '&' // eval refresh in parent html
9 10 },
10 11 link: function(scope, element) {
11   - console.log('HELLO FROM FLASHCARD DIRECTIVE');
12   - console.log(scope.flashcard);
13   - console.log(element);
14   -
15   - // Put flashcard-specific functions here.
16   - // This will probably include add/hide/modals/etc.
  12 + /* Pulls card from feed into deck */
17 13 scope.pullCard = function(flashcard) {
18   - $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
19   - console.log('pulled flashcard #' + flashcard.id);
  14 + console.log('call pull card...')
  15 + if ($state.current.name == 'feed') {
  16 + $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
  17 + success(function(data) {
  18 + console.log('pulled flashcard #' + flashcard.id);
  19 + }).
  20 + error(function(data) {
  21 + console.log('failed to pull flashcard #' + flashcard.id);
  22 + });
  23 + }
  24 + };
  25 +
  26 + /* Unpulls card from deck */
  27 + scope.unpullCard = function(flashcard) {
  28 + console.log('call unpull card...')
  29 + if ($state.current.name == 'deck') {
  30 + console.log('unpulling card...')
  31 +
  32 + $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
  33 + flashcard).
  34 + success(function(data) {
  35 + console.log('card unpull success')
  36 + }).
  37 + error(function(data) {
  38 + console.log('card unpull FAILURE')
  39 + });
  40 + }
  41 + };
  42 +
  43 + /* Hides card from feed */
  44 + scope.hideCard = function(flashcard) {
  45 + console.log('call hide card...')
  46 + if ($state.current.name == 'feed') {
  47 + console.log('hiding card...')
  48 +
  49 + $http.post('/api/flashcards/' + flashcard.id + '/hide/',
  50 + flashcard).
  51 + success(function(data) {
  52 + console.log('card hide success')
  53 + }).
  54 + error(function(data) {
  55 + console.log('card hide FAILURE')
  56 + });
  57 + }
20 58 };
21 59 }
22 60 };
styles/flashy.css View file @ cb1ad91
... ... @@ -61,8 +61,27 @@
61 61 max-width: calc(5 * 60px);
62 62 min-height: calc((992px / 4 - 6px * 2) * 3 / 5);
63 63 /*min-width: calc(992px / 4 - 6px * 2);*/
  64 + transition: all 0.3s cubic-bezier(0, 0, 0.6, 1);
64 65 width: calc(992px / 4 - 6px * 2);
65 66 }
  67 +
  68 +.card.flashy.shrinky {
  69 + margin: 0;
  70 + opacity: 0;
  71 + overflow: hidden;
  72 + padding: 0;
  73 + width: 0;
  74 +}
  75 +
  76 +/*
  77 +.smallify {
  78 + height: 0;
  79 + opacity: 0;
  80 + overflow: hidden;
  81 + padding: 0;
  82 + width: 0;
  83 +}
  84 +*/
66 85  
67 86 .card-overlay {
68 87 left: 0;
templates/deck.html View file @ cb1ad91
1 1 <!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
2 2 <div class="row">
3 3 <div ng-repeat="card in cards">
4   - <flashcard flashcard-obj="card"/>
  4 + <flashcard flashcard-obj="card" refresh="refreshCards()"/>
5 5  
6 6 <!--
7 7 <div class="col s6">
templates/flashcard.html View file @ cb1ad91
1   - <div class="card flashy">
2   - <div class="card-content">
3   - <p>{{flashcard.text}}</p>
  1 +<div class="card flashy smallify" ng-init="startShrink = false"
  2 + ng-class="{'shrinky': startShrink}">
  3 + <div class="card-content">
  4 + <p>{{flashcard.text}}</p>
  5 + </div>
  6 + <div class="card-overlay">
  7 + <div class="top-box" ng-click="pullCard(flashcard)">
  8 + <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
  9 + </div>
  10 +
  11 + <div class="bottom-box">
  12 + <div class="left-box">
  13 + <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
4 14 </div>
5   - <div class="card-overlay">
6   - <a href="#">
7   - <div class="top-box" ng-click="pullCard(flashcard)">
8   - <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
9   - </div>
10   - </a>
11   - <div class="bottom-box">
12   - <a href="#">
13   - <div class="left-box">
14   - <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
15   - </div>
16   - </a>
17   - <a href="#">
18   - <div class="right-box">
19   - <div class="center-me"><i class="mdi-action-delete small"></i></div>
20   - </div>
21   - </a>
22   - </div>
  15 + <div class="right-box" ng-click="startShrink = true; unpullCard(flashcard);
  16 + hideCard(flashcard); refresh()">
  17 + <div class="center-me"><i class="mdi-action-delete small"></i></div>
23 18 </div>
  19 +
24 20 </div>
  21 + </div>
  22 +</div>