Commit cb1ad91980fb5c5b050d6d4ba1ea4d8e8d12e40e
1 parent
4b201f2e23
Exists in
master
and in
1 other branch
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
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> |