110swag / flashy-frontend

Download as
Browse Code ยป

Commit fbb202c4cd70ea9d06cbaddd96771bb68e2d2af1

Authored by Kevin Mach
1 parent 0c0dbdc7ef
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

made a few changes for edit

Showing 3 changed files with 31 additions and 27 deletions Inline Diff

scripts/FlashcardDirective.js View file @ fbb202c
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', 3 3 directive('flashcard',
4 4
5 5
function($http, $state, $window) { 6 6 function($http, $state, $window) {
return { 7 7 return {
templateUrl: '/app/templates/flashcard.html', 8 8 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 9 9 restrict: 'E',
scope: { 10 10 scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html 11 11 flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html 12 12 refresh: '&' // eval refresh in parent html
}, 13 13 },
colNum: 0, 14 14 colNum: 0,
colRank: 0, 15 15 colRank: 0,
link: function(scope, element) { 16 16 /*link: function(scope, element) {
$('.tooltipped').tooltip(); 17 17 $('.tooltipped').tooltip();
// /* Handles width of the card */ 18 18 // /* Handles width of the card */
} 19 19 //}
}; 20 20 };
} 21 21 }
scripts/FlashcardFactory.js View file @ fbb202c
angular.module('flashy.FlashcardFactory', ['ui.router']). 1 1 angular.module('flashy.FlashcardFactory', ['ui.router']).
factory('Flashcard', function ($http, UserService) { 2 2 factory('Flashcard', function ($http, UserService) {
var FlashcardCache = []; 3 3 var FlashcardCache = [];
var Deck = null; 4 4 var Deck = null;
var Flashcard = function (data) { 5 5 var Flashcard = function (data) {
if (typeof data == 'number') return FlashcardCache[data]; 6 6 if (typeof data == 'number') return FlashcardCache[data];
if (FlashcardCache[data.id]) return FlashcardCache[data.id]; 7 7 if (FlashcardCache[data.id]) return FlashcardCache[data.id];
for (var k in data) this[k] = data[k]; 8 8 for (var k in data) this[k] = data[k];
this.textPieces = []; 9 9 this.textPieces = [];
this.mask.sort(function (a, b) { 10 10 this.mask.sort(function (a, b) {
return a[0] - b[0]; 11 11 return a[0] - b[0];
}); 12 12 });
var i = 0; 13 13 var i = 0;
this.mask.forEach(function (blank) { 14 14 this.mask.forEach(function (blank) {
this.textPieces.push({text: this.text.slice(i, blank[0])}); 15 15 this.textPieces.push({text: this.text.slice(i, blank[0])});
this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true}); 16 16 this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true});
i = blank[1]; 17 17 i = blank[1];
}, this); 18 18 }, this);
this.textPieces.push({text: this.text.slice(i)}); 19 19 this.textPieces.push({text: this.text.slice(i)});
this.formatted_text = ''; 20 20 this.formatted_text = '';
for (i in this.textPieces) { 21 21 for (i in this.textPieces) {
p = this.textPieces[i]; 22 22 p = this.textPieces[i];
this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text; 23 23 this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text;
} 24 24 }
FlashcardCache[this.id] = this; 25 25 FlashcardCache[this.id] = this;
}; 26 26 };
27 27
Flashcard.prototype.isInDeck = function () { 28 28 Flashcard.prototype.isInDeck = function () {
return !(typeof Deck.contains(this.id) === 'undefined'); 29 29 return !(typeof Deck.contains(this.id) === 'undefined');
}; 30 30 };
Flashcard.prototype.pullUnpull = function () { 31 31 Flashcard.prototype.pullUnpull = function () {
if (this.isInDeck()) this.unpull(); 32 32 if (this.isInDeck()) this.unpull();
else this.pull(); 33 33 else this.pull();
}; 34 34 };
Flashcard.prototype.pull = function () { 35 35 Flashcard.prototype.pull = function () {
if (this.isInDeck()) return console.log('Not pulling', this.id, "because it's already in deck"); 36 36 if (this.isInDeck()) return console.log('Not pulling', this.id, "because it's already in deck");
return $http.post('/api/flashcards/' + this.id + '/pull/'); 37 37 return $http.post('/api/flashcards/' + this.id + '/pull/');
}; 38 38 };
Flashcard.prototype.unpull = function () { 39 39 Flashcard.prototype.unpull = function () {
if (!this.isInDeck()) return console.log('Not unpulling', this.id, "because it's not in deck"); 40 40 if (!this.isInDeck()) return console.log('Not unpulling', this.id, "because it's not in deck");
return $http.post('/api/flashcards/' + this.id + '/unpull/'); 41 41 return $http.post('/api/flashcards/' + this.id + '/unpull/');
}; 42 42 };
Flashcard.prototype.hide = function () { 43 43 Flashcard.prototype.hide = function () {
return $http.post('/api/flashcards/' + this.id + '/hide/'); 44 44 return $http.post('/api/flashcards/' + this.id + '/hide/');
}; 45 45 };
Flashcard.prototype.unhide = function () { 46 46 Flashcard.prototype.unhide = function () {
return $http.post('/api/flashcards/' + this.id + '/unhide/'); 47 47 return $http.post('/api/flashcards/' + this.id + '/unhide/');
}; 48 48 };
Flashcard.cleanup = function () { 49 49 Flashcard.cleanup = function () {
Deck = null; 50 50 Deck = null;
FlashcardCache = []; 51 51 FlashcardCache = [];
}; 52 52 };
Flashcard.linkDeck = function(deck){ 53 53 Flashcard.linkDeck = function(deck){
Deck = deck; 54 54 Deck = deck;
} 55 55 }
56 56
Flashcard.prototype.edit = function () { 57 57 Flashcard.prototype.edit = function () {
58 58
59 59
var editableText = this.formatted_text; 60 60 var editableText = this.formatted_text;
61 61
//$('#flashcardEditText').html(this.formatted_text); 62
63
$('.modal-trigger').leanModal({ 64 62 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 65 63 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background 66 64 opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration 67 65 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 68 66 out_duration: 200, // Transition out duration
ready: function () { 69 67 ready: function () {
70 68
$('#edit-card-input').html(editableText); 71 69 $('#edit-card-input').html(editableText);
72 70
73 71
74
}, // Callback for Modal open 75 72 }, // Callback for Modal open
complete: function () { 76 73 complete: function () {
77 74
console.log("EDIT MODAL CLOSED"); 78 75 console.log("EDIT MODAL CLOSED");
79 76
} // Callback for Modal close 80 77 } // Callback for Modal close
}); 81 78 });
82 79
}; 83 80 };
84 81
85 82
86 83
Flashcard.prototype.refreshEditCardInput = function () { 87 84 Flashcard.prototype.refreshEditCardInput = function () {
88 85
console.log("ASDFASDFASDFASFD"); 89
90
91
this.editCardText = $('#edit-card-input').text(); 92 86 this.editCardText = $('#edit-card-input').text();
93 87
94
this.submit_enabled = this.editCardText.length >= 5 && this.editCardText.length <= 160; 95 88 this.submit_enabled = this.editCardText.length >= 5 && this.editCardText.length <= 160;
96 89
97 90
98 91
var i = 0; 99 92 var i = 0;
this.editCardBlanks = []; 100 93 this.editCardBlanks = [];
$('#edit-card-input')[0].childNodes.forEach(function (node) { 101 94 $('#edit-card-input')[0].childNodes.forEach(function (node) {
node = $(node)[0]; 102 95 node = $(node)[0];
if (node.tagName == 'B') { 103 96 if (node.tagName == 'B') {
var text = $(node).text(); 104 97 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 105 98 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 106 99 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 107 100 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 108 101 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 109 102 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 110 103 if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 111 104 i += text.length;
} else if (!node.data) { 112 105 } else if (!node.data) {
i += $(node).text().length; 113 106 i += $(node).text().length;
} else { 114 107 } else {
i += node.data.length; 115 108 i += node.data.length;
} 116 109 }
}); 117 110 });
this.editCardBlanks.sort(function (a, b) { 118 111 this.editCardBlanks.sort(function (a, b) {
return a[0] - b[0]; 119 112 return a[0] - b[0];
}); 120 113 });
i = 0; 121 114 i = 0;
newtext = ''; 122 115 newtext = '';
this.editCardBlanks.forEach(function (blank) { 123 116 this.editCardBlanks.forEach(function (blank) {
newtext += this.editCardText.slice(i, blank[0]); 124 117 newtext += this.editCardText.slice(i, blank[0]);
newtext += '<b>' + this.editCardText.slice(blank[0], blank[1]) + '</b>'; 125 118 newtext += '<b>' + this.editCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 126 119 i = blank[1];
}); 127 120 });
newtext += this.editCardText.slice(i); 128 121 newtext += this.editCardText.slice(i);
//$scope.newCardFormattedText = newtext;*/ 129 122 //$scope.newCardFormattedText = newtext;*/
130 123
131 124
}; 132 125 };
133 126
134 127
135 128
136 129
Flashcard.prototype.pushCard = function () { 137 130 Flashcard.prototype.pushCard = function () {
138 131
//console.log() 139 132 //console.log()
140 133
templates/flashcard.html View file @ fbb202c
<div class="card flashy smallify black-text text-darken-2" ng-class="{'in-deck':flashcard.isInDeck()}"> 1 1 <div class="card flashy smallify black-text text-darken-2" ng-class="{'in-deck':flashcard.isInDeck()}">
2 2
<div class="card flashy black-text" 3 3 <div class="card flashy black-text"
ng-class="{'in-deck':flashcard.isInDeck()}"> 4 4 ng-class="{'in-deck':flashcard.isInDeck()}">
<div class="valign-wrapper"> 5 5 <div class="valign-wrapper">
<div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div> 6 6 <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
</div> 7 7 </div>
8 8
9 9
10 10
11 11
12 12
<div class="card-overlay"> 13 13 <div class="card-overlay">
<div class="top-box no-user-select" 14 14 <div class="top-box no-user-select"
ng-click="flashcard.pullUnpull()"> 15 15 ng-click="flashcard.pullUnpull()">
<div class="center-me"> 16 16 <div class="center-me">
<i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i> 17 17 <i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i>
<i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i> 18 18 <i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i>
</div> 19 19 </div>
</div> 20 20 </div>
<div class="bottom-box no-user-select"> 21 21 <div class="bottom-box no-user-select">
22 22
23 23
<div class="left-box tooltipped" data-position=" bottom" data-tooltip="Info"> 24 24 <div class="left-box tooltipped" data-position=" bottom" data-tooltip="Edit">
<div class="center-me modal-trigger" href="#editModal" ng-click="flashcard.edit()"><i class="mdi-editor-border-color small"></i></div> 25 25 <div class="center-me modal-trigger" href="#editModal" ng-click="flashcard.edit()"><i class="mdi-editor-border-color small"></i></div>
</div> 26 26 </div>
27 27
28 28
29
30
<div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide"> 31 29 <div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 32 30 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 33 31 </div>
34 32
</div> 35 33 </div>
</div> 36 34 </div>
37 35
38 36
<!--<div id="editModal" class="modal"> 39 37 <!-- Edit Modal -->
<div class="modal-content"> 40
<h4 id="flashcardEditText"></h4> 41
</div> 42
<div class="modal-footer"> 43
44
</div> 45
</div>--> 46
47
48
49
<div id="editModal" class="modal row" style="max-height:none;"> 50 38 <div id="editModal" class="modal row" style="max-height:none;">
<form id="edit-card-form"> 51 39 <form id="edit-card-form">
<div class="modal-content col"> 52 40 <div class="modal-content col">
<div class="row" style="margin-bottom:0"> 53 41 <div class="row" style="margin-bottom:0">
<div class="card cyan-text text-darken-2" 54 42 <div class="card cyan-text text-darken-2"
style="width:300px; height:180px; margin-bottom:0; font-size:120%;"> 55 43 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div class="valign-wrapper"> 56 44 <div class="valign-wrapper">
<div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;" 57 45 <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
class="card-content valign center-align" 58 46 class="card-content valign center-align"
contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()"> 59 47 contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
</div> 60 48 </div>
</div> 61 49 </div>
</div> 62 50 </div>
</div> 63 51 </div>
</div> 64 52 </div>
<div class="col"> 65 53 <div class="col">
<div class="row"> 66 54 <div class="row">
</div> 67 55 </div>
<div class="row"> 68 56 <div class="row">
<button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()" 69 57 <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
data-position="left" 70 58 data-position="left"
data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'" 71 59 data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
data-tooltip="Enter"> 72 60 data-tooltip="Enter">
Edit 73 61 Edit
<i class="mdi-hardware-keyboard-return right"></i> 74 62 <i class="mdi-action-done right"></i>
</button> 75 63 </button>
</div> 76 64 </div>
65
66
<div class="row"> 77 67 <div class="row">
68 <button class="btn modal-close" ng-click="flashcard.discardChanges()"
69 data-position="left"
70 data-delay="50">
71 Discard Changes
72 <i class="mdi-content-clear right"></i>
73 </button>
74 </div>
75
76 <!--<div class="row">
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 78 77 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B"> 79 78 data-tooltip="Ctrl-B">
Blank Selected Text 80 79 Blank Selected Text
</button> 81 80 </button>
</div> 82 81 </div>-->
82
83
<div class="row" ng-show="flashcard.editCardText" ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}"> 83 84 <div class="row" ng-show="flashcard.editCardText" ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
{{flashcard.editCardText.length}}/160 characters 84 85 {{flashcard.editCardText.length}}/160 characters
</div> 85 86 </div>
<div class="row" ng-show="flashcard.editCardText.length < 5"> 86 87 <div class="row" ng-show="flashcard.editCardText.length < 5">
Please write a little more! 87 88 Please write a little more!
</div> 88 89 </div>