110swag / flashy-frontend

...	...	@@ -7,6 +7,7 @@
7	7	$scope.numCols = 0;
8	8	$scope.height = 0; // height of a card
9	9	$scope.section = $rootScope.SectionResource.get({sectionId: sectionId});
	10	+ $scope.currentEditingCard = null;
10	11	$scope.deck = new Deck(sectionId, {
11	12	cardHideCallback: function(card) {
12	13	$scope.hideCardFromGrid(card);
...	...	@@ -16,6 +17,23 @@
16	17	}
17	18	});
18	19
	20	+ $('.edit-modal-trigger').leanModal({
	21	+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
	22	+ opacity: .5, // Opacity of modal background
	23	+ in_duration: 300, // Transition in duration
	24	+ out_duration: 200, // Transition out duration
	25	+ ready: function() {
	26	+ console.log('hi');
	27	+ $('#edit-card-input').html($scope.currentEditingCard);
	28	+ }, // Callback for Modal open
	29	+ complete: function() {
	30	+
	31	+ console.log('EDIT MODAL CLOSED');
	32	+
	33	+ } // Callback for Modal close
	34	+ });
	35	+
	36	+
19	37	Flashcard.linkDeck($scope.deck);
20	38
21	39	$scope.moveQueue = [];
...	...	@@ -118,6 +136,49 @@
118	136	$rootScope.currentSection = {};
119	137	$(document).off('keydown');
120	138	});
	139	+
	140	+
	141	+ $scope.editCard = function(card) {
	142	+ $scope.currentEditingCard = card;
	143	+ $scope.newCardFormattedText = card.formatted_text;
	144	+ console.log(card);
	145	+ $('#editModal').openModal(card.editModalOptions);
	146	+
	147	+ };
	148	+
	149	+ $scope.saveEditChanges = function() {
	150	+
	151	+
	152	+ var myCard = {
	153	+ 'text': $('#edit-card-input').text(),
	154	+ 'mask': $scope.editCardBlanks,
	155	+ };
	156	+
	157	+ //console.log($scope.Flashcard.id);
	158	+
	159	+ if (myCard.text == '') {
	160	+ console.log('blank flashcard not pushed:' + myCard.text);
	161	+ //return closeNewCard();
	162	+
	163	+ $('#editModal').closeModal();
	164	+
	165	+ }
	166	+ $http.patch('/api/flashcards/' + $scope.currentEditingCard.id + '/', myCard).
	167	+ success(function(data) {
	168	+ console.log('flashcard pushed: ' + myCard.text);
	169	+ });
	170	+
	171	+ $('#editModal').closeModal();
	172	+
	173	+ };
	174	+
	175	+
	176	+ $scope.discardEditChanges = function() {
	177	+
	178	+ $('#editModal').closeModal();
	179	+
	180	+ };
	181	+
121	182	return $scope.deck.deckPromise;
122	183	};

...	...	@@ -26,6 +26,7 @@
26	26	$http.get('/api/sections/' + sectionId + '/flashcards/?hidden=yes').
27	27	success(function(data) {
28	28	for (i in data) $scope.cards[data[i].id] = new Flashcard(data[i], $scope.deck);
	29	+ console.log('got list', data);
29	30	}).
30	31	error(function(err) {
31	32	console.log('pulling feed failed');

...	...	@@ -47,51 +47,8 @@
47	47	$scope.editCardBlanks.forEach(function(blank) {
48	48	newtext += $scope.editCardText.slice(i, blank[0]);
49	49	newtext += '<b>' + $scope.editCardText.slice(blank[0], blank[1]) + '</b>';
50		- i = blank[1];
51	50	});
52		- newtext += $scope.editCardText.slice(i);
53		- //$scope.newCardFormattedText = newtext;
54		-
55		-
56	51	};
57		-
58		-
59		- $scope.saveChanges = function() {
60		-
61		-
62		- var myCard = {
63		- 'text': $('#edit-card-input').text(),
64		- 'mask': $scope.editCardBlanks,
65		- };
66		-
67		- //console.log($scope.Flashcard.id);
68		-
69		- if (myCard.text == '') {
70		- console.log('blank flashcard not pushed:' + myCard.text);
71		- //return closeNewCard();
72		-
73		- $('#editModal').closeModal();
74		-
75		- }
76		- $http.patch('/api/flashcards/' + $scope.Flashcard.id, myCard).
77		- success(function(data) {
78		- console.log('flashcard pushed: ' + myCard.text);
79		- if (!UserService.hasVerifiedEmail()) {
80		- Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
81		- }
82		- });
83		-
84		- $('#editModal').closeModal();
85		-
86		- };
87		-
88		-
89		- $scope.discardChanges = function() {
90		-
91		- $('#editModal').closeModal();
92		-
93		- };
94		-
95	52	}
96	53	);

...	...	@@ -18,20 +18,30 @@
18	18	this.ws.onMessage(function (message) {
19	19	data = JSON.parse(message.data);
20	20	console.log('message', data);
21		- card = new Flashcard(data.flashcard);
22	21	if (data.event_type == 'card_pulled') {
	22	+ card = new Flashcard(data.flashcard);
23	23	obj.cards[card.id] = card;
24	24	if (callbacks.cardPullCallback) callbacks.cardPullCallback(card);
25	25	}
26	26	if (data.event_type == 'card_unpulled') {
	27	+ card = new Flashcard(data.flashcard);
27	28	obj.cards[card.id] = undefined;
28	29	if (callbacks.cardUnpullCallback) callbacks.cardUnpullCallback(card);
29	30	}
30	31	if (data.event_type == 'card_hidden') {
	32	+ card = new Flashcard(data.flashcard);
	33	+ card.is_hidden = true;
31	34	if (callbacks.cardHideCallback) callbacks.cardHideCallback(card);
32	35	}
33	36	if (data.event_type == 'card_unhidden') {
	37	+ card = new Flashcard(data.flashcard);
	38	+ card.is_hidden = false;
34	39	if (callbacks.cardUnhideCallback) callbacks.cardUnhideCallback(card);
	40	+ }
	41	+ if (data.event_type == 'card_fixed') {
	42	+ card = obj.cards[data.flashcard.id].edit(data.flashcard);
	43	+ console.log(obj.cards[card.id]);
	44	+ if (callbacks.cardFixedCallback) callbacks.cardFixedCallback(card);
35	45	}
36	46	});
37	47	this.deckPromise = $http.get('/api/sections/' + sectionId + '/deck/').success(function (data) {

...	...	@@ -11,19 +11,19 @@
11	11	$scope.updateCardScore = function(card, scoreChange) {
12	12	console.log('update card score');
13	13	// if no colNum is attached, then this doesn't exist on the feed yet
14		- if (card.colNum === 'undefined' ) {
15		- console.log('no col num');
16		- return;
17		- }
	14	+ if (card.colNum === 'undefined') {
	15	+ console.log('no col num');
	16	+ return;
	17	+ }
18	18	/*$scope.cardCols[card.colNum].sort(function(a, b) {
19	19	return b.score - a.score;
20	20	});
21	21	console.log($scope.cardCols);
22	22	$scope.updateColRanks($scope.cardCols[card.colNum]);
23	23	return;*/
24		- console.log(card.score);
	24	+ console.log(card.score);
25	25	card.score += scoreChange;
26		- console.log(card.score);
	26	+ console.log(card.score);
27	27	var col = card.colNum;
28	28	var rank = card.colRank;
29	29	var s = Math.sign(scoreChange);
30	30
31	31
32	32
...	...	@@ -33,48 +33,48 @@
33	33	if (rank == $scope.cardCols[col].length) return;
34	34
35	35	$scope.affectedCards = [];
36		- //console.log('before whiel, rank:' + rank);
37		- if (s > 0) {
38		- rank -= 1;
39		- //console.log('+');
40		- while ($scope.cardCols[col][rank].score < card.score) {
41		- //console.log('while');
42		- $scope.cardCols[col][rank].colRank += 1;
43		- $scope.affectedCards.push($scope.cardCols[col][rank]);
44		- rank -= 1;
45		- if (rank < 0) break;
46		- if (rank == $scope.cardCols[col].length) break;
47		- }
48		- } else {
49		- rank += 1;
50		- console.log('-');
51		- while ($scope.cardCols[col][rank].score > card.score) {
52		- //console.log('while');
53		- $scope.cardCols[col][rank].colRank -= 1;
54		- $scope.affectedCards.push($scope.cardCols[col][rank]);
55		- rank += 1;
56		- if (rank < 0) break;
57		- if (rank == $scope.cardCols[col].length) break;
58		- }
59		- }
	36	+ //console.log('before whiel, rank:' + rank);
	37	+ if (s > 0) {
	38	+ rank -= 1;
	39	+ //console.log('+');
	40	+ while ($scope.cardCols[col][rank].score < card.score) {
	41	+ //console.log('while');
	42	+ $scope.cardCols[col][rank].colRank += 1;
	43	+ $scope.affectedCards.push($scope.cardCols[col][rank]);
	44	+ rank -= 1;
	45	+ if (rank < 0) break;
	46	+ if (rank == $scope.cardCols[col].length) break;
	47	+ }
	48	+ } else {
	49	+ rank += 1;
	50	+ console.log('-');
	51	+ while ($scope.cardCols[col][rank].score > card.score) {
	52	+ //console.log('while');
	53	+ $scope.cardCols[col][rank].colRank -= 1;
	54	+ $scope.affectedCards.push($scope.cardCols[col][rank]);
	55	+ rank += 1;
	56	+ if (rank < 0) break;
	57	+ if (rank == $scope.cardCols[col].length) break;
	58	+ }
	59	+ }
60	60	rank += s;
61		- //console.log('after a whiel, rank:' + rank);
62		-
	61	+ //console.log('after a whiel, rank:' + rank);
	62	+
63	63	console.log($scope.affectedCards);
64		-
	64	+
65	65	var upMove = $scope.height;
66	66	var downMove = $scope.height;
67		- $scope.$apply(function(){
68		- $('.card.flashy.card-moveUp').css({
69		- 'margin-top': 300 + 'px !important', // how much moveUp moves
70		- });
71		-
72		- $('.card.flashy.card-moveDown').css({
73		- 'margin-top': 300 + 'px !important', // how much moveDown moves
74		- });
75		- });
76		-
77		- if (s > 0) {
	67	+ $scope.$apply(function() {
	68	+ $('.card.flashy.card-moveUp').css({
	69	+ 'margin-top': 300 + 'px !important', // how much moveUp moves
	70	+ });
	71	+
	72	+ $('.card.flashy.card-moveDown').css({
	73	+ 'margin-top': 300 + 'px !important', // how much moveDown moves
	74	+ });
	75	+ });
	76	+
	77	+ if (s > 0) {
78	78	card.moveUp = true;
79	79	upMove *= $scope.affectedCards.length;
80	80	/*for (i=0; i<$scope.affectedCards.length; i++) {
...	...	@@ -110,7 +110,7 @@
110	110	}, 1000);
111	111	$scope.cardCols[col].splice(rank, 0, $scope.cardCols[col].splice(card.colRank, 1)[0]);
112	112	card.colRank = rank;
113		- //$scope.updateColRanks($scope.cardCols[card.colNum]); // can be optimized out
	113	+ //$scope.updateColRanks($scope.cardCols[card.colNum]); // can be optimized out
114	114	};
115	115
116	116

...	...	@@ -3,24 +3,20 @@
3	3	directive('flashcard',
4	4
5	5
6		- function($http, $state, $window) {
	6	+ function($http, $state, $window) {
7	7	return {
8		- templateUrl: '/app/templates/flashcard.html',
9		- restrict: 'E',
10		- scope: {
11		- flashcard: '=flashcardObj', // flashcard-obj in parent html
12		- refresh: '&' // eval refresh in parent html
13		- },
14		- colNum: 0,
15		- colRank: 0,
16		- /*link: function(scope, element) {
17		-
18		- link: function(scope, element) {
19		- $('.tooltipped').tooltip();
20		- // /* Handles width of the card */
21		- //}
	8	+ templateUrl: '/app/templates/flashcard.html',
	9	+ restrict: 'E',
	10	+ scope: {
	11	+ flashcard: '=flashcardObj', // flashcard-obj in parent html
	12	+ refresh: '&', // eval refresh in parent html
	13	+ edit: '=editFn'
	14	+ },
	15	+ colNum: 0,
	16	+ colRank: 0,
	17	+ link: function(scope, element) {
	18	+ }
22	19	};
23		- }
24		-
	20	+ }
25	21	);

...	...	@@ -6,6 +6,15 @@
6	6	if (typeof data == 'number') return FlashcardCache[data];
7	7	if (FlashcardCache[data.id]) return FlashcardCache[data.id];
8	8	for (var k in data) this[k] = data[k];
	9	+
	10	+ this.moveUp = false;
	11	+ this.moveDown = false;
	12	+ this.colNum = 0;
	13	+ this.colRank = 0;
	14	+ FlashcardCache[this.id] = this;
	15	+ this.refreshFormattedText();
	16	+ };
	17	+ Flashcard.prototype.refreshFormattedText = function () {
9	18	this.textPieces = [];
10	19	this.mask.sort(function (a, b) {
11	20	return a[0] - b[0];
12	21
...	...	@@ -22,13 +31,8 @@
22	31	p = this.textPieces[i];
23	32	this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text;
24	33	}
25		- this.moveUp = false;
26		- this.moveDown = false;
27		- this.colNum = 0;
28		- this.colRank = 0;
29		- FlashcardCache[this.id] = this;
	34	+ return this;
30	35	};
31		-
32	36	Flashcard.prototype.isInDeck = function () {
33	37	return !(typeof Deck.contains(this.id) === 'undefined');
34	38	};
35	39
36	40
...	...	@@ -53,41 +57,28 @@
53	57	return $http.post('/api/flashcards/' + this.id + '/report/', {reason: reason}).success(function () {
54	58	Materialize.toast('Report successful; thanks for letting us know!');
55	59	});
56		- }
	60	+ };
57	61	Flashcard.prototype.unhide = function () {
58	62	return $http.post('/api/flashcards/' + this.id + '/unhide/');
59	63	};
	64	+ Flashcard.prototype.edit = function (newversion) {
	65	+ this.text = newversion.text;
	66	+ this.mask = newversion.mask;
	67	+ this.material_date = newversion.material_date;
	68	+ return this.refreshFormattedText();
	69	+ };
	70	+ Flashcard.prototype.editModalOptions = {
	71	+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
	72	+ opacity: 0, // Opacity of modal background
	73	+ in_duration: 300, // Transition in duration
	74	+ out_duration: 200, // Transition out duration
	75	+ };
60	76	Flashcard.cleanup = function () {
61	77	Deck = null;
62	78	FlashcardCache = [];
63	79	};
64	80	Flashcard.linkDeck = function (deck) {
65	81	Deck = deck;
66		- }
67		-
68		- Flashcard.prototype.edit = function () {
69		-
70		-
71		- var editableText = this.formatted_text;
72		-
73		- $('.modal-trigger').leanModal({
74		- dismissible: true, // Modal can be dismissed by clicking outside of the modal
75		- opacity: .5, // Opacity of modal background
76		- in_duration: 300, // Transition in duration
77		- out_duration: 200, // Transition out duration
78		- ready: function () {
79		-
80		- $('#edit-card-input').html(editableText);
81		-
82		-
83		- }, // Callback for Modal open
84		- complete: function () {
85		-
86		- console.log("EDIT MODAL CLOSED");
87		-
88		- } // Callback for Modal close
89		- });
90		-
91	82	};
92	83
93	84

...	...	@@ -26,7 +26,7 @@
26	26	error(function(data, status, header, config) {
27	27	if (data.detail) { // assume 'invalid email or pass'
28	28	$scope.loginError = true;
29		- $scope.loginPassword = '';
	29	+ $scope.loginPassword = '';
30	30	}
31	31	console.log(data);
32	32	});
...	...	@@ -53,8 +53,8 @@
53	53	$scope.uniqueError = true;
54	54	$scope.invalid = false;
55	55	}
56		-
57		- $scope.registerPassword = '';
	56	+
	57	+ $scope.registerPassword = '';
58	58	console.log(data);
59	59	});
60	60

1	1	<!-- Edit Modal -->
2		- <div id="editModal" class="modal row" style="max-height:none;">
3		- <form id="edit-card-form">
4		- <div class="modal-content col">
5		- <div class="row" style="margin-bottom:0">
6		- <div class="card cyan-text text-darken-2"
7		- style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
8		- <div class="valign-wrapper">
9		- <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
10		- class="card-content valign center-align"
11		- contenteditable select-non-editable="true" ng-change="refreshEditCardInput()">
12		- </div>
	2	+<div id="editModal" class="modal row" style="max-height:none;">
	3	+ <form id="edit-card-form">
	4	+ <div class="modal-content col">
	5	+ <div class="row" style="margin-bottom:0">
	6	+ <div class="card cyan-text text-darken-2"
	7	+ style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
	8	+ <div class="valign-wrapper">
	9	+ <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
	10	+ class="card-content valign center-align"
	11	+ contenteditable select-non-editable="true" ng-change="refreshEditCardInput()">
13	12	</div>
14	13	</div>
15	14	</div>
16	15	</div>
17		- <div class="col">
18		- <div class="row">
19		- </div>
20		- <div class="row">
21		- <button class="btn modal-close" type="submit" ng-click="saveChanges()"
22		- data-position="left"
23		- data-delay="50" ng-class="submit_enabled?{}:'disabled'">
24		- Save Changes
25		- <i class="mdi-action-done right"></i>
26		- </button>
27		- </div>
	16	+ </div>
	17	+ <div class="col">
	18	+ <div class="row">
	19	+ </div>
	20	+ <div class="row">
	21	+ <button class="btn modal-close" type="submit" ng-click="saveEditChanges()"
	22	+ data-position="left"
	23	+ data-delay="50" ng-class="submit_enabled?{}:'disabled'">
	24	+ Save Changes
	25	+ <i class="mdi-action-done right"></i>
	26	+ </button>
	27	+ </div>
28	28
29	29
30		- <div class="row">
31		- <button class="btn modal-close red" ng-click="discardChanges()"
32		- data-position="left"
33		- data-delay="50">
34		- Discard Changes
35		- <i class="mdi-content-clear right"></i>
36		- </button>
37		- </div>
	30	+ <div class="row">
	31	+ <button class="btn modal-close red" ng-click="discardEditChanges()"
	32	+ data-position="left"
	33	+ data-delay="50">
	34	+ Discard Changes
	35	+ <i class="mdi-content-clear right"></i>
	36	+ </button>
	37	+ </div>
38	38
39		- <div class="row">
40		- <button id="blank-selected" style="float:left" class="btn" data-position="right" data-delay="50">
41		- Blank Selected Text
42		- </button>
43		- </div>
	39	+ <div class="row">
	40	+ <button id="blank-selected" style="float:left" class="btn" data-position="right"
	41	+ onclick="document.execCommand('bold')" data-delay="50">
	42	+ Blank Selected Text
	43	+ </button>
	44	+ </div>
44	45
45	46
46		- <div class="row" ng-show="editCardText" ng-style="(editCardText.length>160)?{color:'red'}:{}">
47		- {{editCardText.length}}/160 characters
48		- </div>
49		- <div class="row" ng-show="editCardText.length < 5">
50		- Please write a little more!
51		- </div>
52		- <div class="row" ng-show="editCardText.length > 140">
53		- Good flashcards have a<br>
54		- single atomic fact
55		- </div>
	47	+ <div class="row" ng-show="editCardText" ng-style="(editCardText.length>160)?{color:'red'}:{}">
	48	+ {{editCardText.length}}/160 characters
56	49	</div>
57		- </form>
58		- </div>
	50	+ <div class="row" ng-show="editCardText.length < 5">
	51	+ Please write a little more!
	52	+ </div>
	53	+ <div class="row" ng-show="editCardText.length > 140">
	54	+ Good flashcards have a<br>
	55	+ single atomic fact
	56	+ </div>
	57	+ </div>
	58	+ </form>
	59	+</div>
59	60
60	61
61		-
62		-
63		-
64		-
65	62	<div class="row">
66	63	<h2 class="weight" ng-cloak ng-show="cardCols && cards.length == 0">Your deck is empty.</h2>
	64	+
67	65	<h2 class="weight" ng-cloak ng-show="cardCols && cards.length == 0">Add a card from the feed to see it here.</h2>
68	66
69	67	<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols">
...	...	@@ -72,7 +70,7 @@
72	70
73	71	<div class="cardColumn" ng-repeat="col in cardCols">
74	72	<div class="repeated-card" ng-repeat="card in col">
75		- <flashcard flashcard-obj="card"/>
	73	+ <flashcard flashcard-obj="card" edit-fn="editCard"/>
76	74	</div>
77	75	</div>
78	76	</div>

1		-<div id="editModal" class="modal row" style="max-height:none;">
2		- <form id="edit-card-form">
3		- <div class="modal-content col">
4		- <div class="row" style="margin-bottom:0">
5		- <div class="card cyan-text text-darken-2"
6		- style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
7		- <div class="valign-wrapper">
8		- <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
9		- class="card-content valign center-align"
10		- contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
11		- </div>
12		- </div>
13		- </div>
14		- </div>
15		- </div>
16		- <div class="col">
17		- <div class="row">
18		- </div>
19		- <div class="row">
20		- <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
21		- data-position="left"
22		- data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
23		- data-tooltip="Enter">
24		- Edit
25		- <i class="mdi-hardware-keyboard-return right"></i>
26		- </button>
27		- </div>
28		- <div class="row">
29		- <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
30		- data-tooltip="Ctrl-B">
31		- Blank Selected Text
32		- </button>
33		- </div>
34		- <div class="row" ng-show="flashcard.editCardText"
35		- ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
36		- {{flashcard.editCardText.length}}/160 characters
37		- </div>
38		- <div class="row" ng-show="flashcard.editCardText.length < 5">
39		- Please write a little more!
40		- </div>
41		- <div class="row" ng-show="flashcard.editCardText.length > 140">
42		- Good flashcards have a<br>
43		- single atomic fact
44		- </div>
45		- </div>
46		- </form>
47		-</div>
48		-
49		-
50	1	<div class="row">
51	2	<h2 class="weight" ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2>
52	3

...	...	@@ -17,7 +17,7 @@
17	17	<div class="bottom-box no-user-select">
18	18
19	19	<div class="left-box">
20		- <div class="center-me modal-trigger" href="#editModal" ng-click="flashcard.edit()"><i class="mdi-editor-border-color small"></i></div>
	20	+ <div class="center-me" ng-click="edit(flashcard)"><i class="mdi-editor-border-color small"></i></div>
21	21	</div>
22	22
23	23	<div class="right-box" ng-click="flashcard.hide()">

GITLAB

110swag / flashy-frontend

Merge branch 'master' of git.ucsd.edu:110swag/flashy-frontend