110swag / flashy-frontend

Commit 45cc59836deb735d77d6eeecb1a6312015ae757e

Authored by Kevin Mach 2015-06-03 16:10:29 -0700

Exists in master

edit stuff

Showing 5 changed files with 158 additions and 190 deletions Side-by-side Diff

config.js
scripts/DeckController.js
scripts/FlashcardFactory.js
templates/deck.html
templates/flashcard.html

...	...	@@ -119,12 +119,12 @@
119	119	templateUrl: 'templates/study.html',
120	120	controller: 'StudyController'
121	121	}).
122		- state('flashcard', {
	122	+ /*state('flashcard', {
123	123	resolve: auth_resolve,
124	124	url: '/flashcard',
125	125	templateUrl: 'templates/flashcard.html',
126	126	controller: 'FlashcardController'
127		- }).
	127	+ }).*/
128	128	state('settings', {
129	129	resolve: auth_resolve,
130	130	url: '/settings',

...	...	@@ -9,6 +9,99 @@
9	9	$scope.deckPullCallback = $scope.addCardToGrid;
10	10	$scope.deckUnpullCallback = $scope.hideCardFromGrid;
11	11
	12	+
	13	+
	14	+
	15	+
	16	+ $scope.refreshEditCardInput = function () {
	17	+
	18	+
	19	+ console.log("CARD IS BEING EDITED");
	20	+
	21	+ $scope.editCardText = $('#edit-card-input').text();
	22	+
	23	+ $scope.submit_enabled = $scope.editCardText.length >= 5 && $scope.editCardText.length <= 160;
	24	+
	25	+
	26	+
	27	+ var i = 0;
	28	+ $scope.editCardBlanks = [];
	29	+ $('#edit-card-input')[0].childNodes.forEach(function (node) {
	30	+ node = $(node)[0];
	31	+ if (node.tagName == 'B') {
	32	+ var text = $(node).text();
	33	+ var leftspaces = 0, rightspaces = 0;
	34	+ // awful way to find the first non-space character from the left or the right. thanks.js
	35	+ while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;
	36	+ while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
	37	+ console.log(leftspaces, text.length);
	38	+ if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
	39	+ i += text.length;
	40	+ } else if (!node.data) {
	41	+ i += $(node).text().length;
	42	+ } else {
	43	+ i += node.data.length;
	44	+ }
	45	+ });
	46	+ $scope.editCardBlanks.sort(function (a, b) {
	47	+ return a[0] - b[0];
	48	+ });
	49	+ i = 0;
	50	+ newtext = '';
	51	+ $scope.editCardBlanks.forEach(function (blank) {
	52	+ newtext += $scope.editCardText.slice(i, blank[0]);
	53	+ newtext += '<b>' + $scope.editCardText.slice(blank[0], blank[1]) + '</b>';
	54	+ i = blank[1];
	55	+ });
	56	+ newtext += $scope.editCardText.slice(i);
	57	+ //$scope.newCardFormattedText = newtext;
	58	+
	59	+
	60	+ };
	61	+
	62	+
	63	+
	64	+ $scope.saveChanges = function () {
	65	+
	66	+
	67	+ var myCard = {
	68	+ 'text': $('#edit-card-input').text(),
	69	+ 'mask': $scope.editCardBlanks,
	70	+ };
	71	+
	72	+ //console.log($scope.Flashcard.id);
	73	+
	74	+ if (myCard.text == '') {
	75	+ console.log('blank flashcard not pushed:' + myCard.text);
	76	+ //return closeNewCard();
	77	+
	78	+ $('#editModal').closeModal();
	79	+
	80	+ }
	81	+ $http.patch('/api/flashcards/' + $scope.Flashcard.id, myCard).
	82	+ success(function (data) {
	83	+ console.log('flashcard pushed: ' + myCard.text);
	84	+ if (!UserService.hasVerifiedEmail()) {
	85	+ Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
	86	+ }
	87	+ });
	88	+
	89	+ $('#editModal').closeModal();
	90	+
	91	+ }
	92	+
	93	+
	94	+
	95	+
	96	+ $scope.discardChanges = function() {
	97	+
	98	+ $('#editModal').closeModal();
	99	+
	100	+ }
	101	+
	102	+
	103	+
	104	+
12	105	}
13	106	);

...	...	@@ -83,86 +83,14 @@
83	83
84	84	};
85	85
86		- Flashcard.prototype.refreshEditCardInput = function () {
	86	+
	87	+
	88	+
87	89
88		- this.editCardText = $('#edit-card-input').text();
89		-
90		- this.submit_enabled = this.editCardText.length >= 5 && this.editCardText.length <= 160;
91		-
92		-
93		-
94		- var i = 0;
95		- this.editCardBlanks = [];
96		- $('#edit-card-input')[0].childNodes.forEach(function (node) {
97		- node = $(node)[0];
98		- if (node.tagName == 'B') {
99		- var text = $(node).text();
100		- var leftspaces = 0, rightspaces = 0;
101		- // awful way to find the first non-space character from the left or the right. thanks.js
102		- while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;
103		- while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
104		- console.log(leftspaces, text.length);
105		- if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
106		- i += text.length;
107		- } else if (!node.data) {
108		- i += $(node).text().length;
109		- } else {
110		- i += node.data.length;
111		- }
112		- });
113		- this.editCardBlanks.sort(function (a, b) {
114		- return a[0] - b[0];
115		- });
116		- i = 0;
117		- newtext = '';
118		- this.editCardBlanks.forEach(function (blank) {
119		- newtext += this.editCardText.slice(i, blank[0]);
120		- newtext += '<b>' + this.editCardText.slice(blank[0], blank[1]) + '</b>';
121		- i = blank[1];
122		- });
123		- newtext += this.editCardText.slice(i);
124		- //$scope.newCardFormattedText = newtext;*/
125		-
126		-
127		- };
128		-
129	90
130	91
131	92
132		- Flashcard.prototype.pushCard = function () {
133		-
134		- //console.log()
135		-
136		- var myCard = {
137		- 'text': $('#edit-card-input').text(),
138		- 'mask': this.editCardBlanks,
139		- //section: this.section.id
140		- };
141		- if (myCard.text == '') {
142		- console.log('blank flashcard not pushed:' + myCard.text);
143		- //return closeNewCard();
144		-
145		- $('#editModal').closeModal(modal_options);
146		-
147		- }
148		- $http.patch('/api/flashcards/' + this.id, myCard).
149		- success(function (data) {
150		- console.log('flashcard pushed: ' + myCard.text);
151		- if (!UserService.hasVerifiedEmail()) {
152		- Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
153		- }
154		- });
155		-
156		- $('#editModal').closeModal(modal_options);
157		-
158		- }
159		-
160		-
161		- Flashcard.prototype.discardChanges = function() {
162		-
163		- $('#editModal').closeModal(modal_options);
164		-
165		- }
	93	+
166	94
167	95
168	96	return Flashcard;

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()">
	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>
11	13	</div>
12	14	</div>
13	15	</div>
14	16	</div>
15		- </div>
16		- <div class="col">
17		- <div class="row">
	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>
	28	+
	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>
	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>
	44	+
	45	+
	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>
18	56	</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>
	57	+ </form>
	58	+ </div>
	59	+
	60	+
	61	+
	62	+
	63	+
48	64
49	65	<div class="row">
50	66	<h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it

...	...	@@ -27,77 +27,8 @@
27	27	</div>
28	28	</div>
29	29
30		- <!-- Edit Modal -->
31		- <div id="editModal" class="modal row" style="max-height:none;">
32		- <form id="edit-card-form">
33		- <div class="modal-content col">
34		- <div class="row" style="margin-bottom:0">
35		- <div class="card cyan-text text-darken-2"
36		- style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
37		- <div class="valign-wrapper">
38		- <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
39		- class="card-content valign center-align"
40		- contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
41		- </div>
42		- </div>
43		- </div>
44		- </div>
45		- </div>
46		- <div class="col">
47		- <div class="row">
48		- </div>
49		- <div class="row">
50		- <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
51		- data-position="left"
52		- data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
53		- data-tooltip="Enter">
54		- Edit
55		- <i class="mdi-action-done right"></i>
56		- </button>
57		- </div>
	30	+
58	31
59		-
60		- <div class="row">
61		- <button class="btn modal-close" ng-click="flashcard.discardChanges()"
62		- data-position="left"
63		- data-delay="50">
64		- Discard Changes
65		- <i class="mdi-content-clear right"></i>
66		- </button>
67		- </div>
68		-
69		- <!--<div class="row">
70		- <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
71		- data-tooltip="Ctrl-B">
72		- Blank Selected Text
73		- </button>
74		- </div>-->
75		-
76		-
77		- <div class="row" ng-show="flashcard.editCardText" ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
78		- {{flashcard.editCardText.length}}/160 characters
79		- </div>
80		- <div class="row" ng-show="flashcard.editCardText.length < 5">
81		- Please write a little more!
82		- </div>
83		- <div class="row" ng-show="flashcard.editCardText.length > 140">
84		- Good flashcards have a<br>
85		- single atomic fact
86		- </div>
87		- </div>
88		- </form>
89		- </div>
90		-
91		-
92		-
93		- <!--<div id="editModal" class="modal">
94		- <div class="modal-content">
95		- <h4 id="flashcardEditText"></h4>
96		- </div>
97		- <div class="modal-footer">
98		-
99		- </div>
100		- </div>-->
101	32
102	33
103	34	<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">