110swag / flashy-frontend

Compare View

switch
from
...
to
 
Commits (2)

Diff

Showing 5 changed files Side-by-side Diff

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