110swag / flashy-frontend

Commit a8ff455c2411c4248a0c9aeb6d52cf32468484dc

Authored by Kevin Mach 2015-06-03 03:33:27 -0700

editing card in progress

Showing 4 changed files with 227 additions and 19 deletions Side-by-side Diff

scripts/FeedController.js
scripts/FlashcardDirective.js
scripts/FlashcardFactory.js
templates/flashcard.html

...	...	@@ -22,8 +22,15 @@
22	22	$scope.updateColRanks($scope.cardCols[card.colNum]);
23	23	};
24	24
	25	+
	26	+
	27	+
25	28	$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
26		- $scope.feed_ws.onMessage(function(e) {
	29	+ $scope.feed_ws.onMessage(function (e) {
	30	+
	31	+
	32	+ console.log("oh yeaaaaaaaaaaaaaaaaaaa");
	33	+
27	34	data = JSON.parse(e.data);
28	35	console.log('message', data);
29	36	if (data.event_type == 'new_card') {

1	1	angular.module('flashy.FlashcardDirective', []).
2	2
3	3	directive('flashcard',
4		- function($http, $state, $window) {
5		- return {
6		- templateUrl: '/app/templates/flashcard.html',
7		- restrict: 'E',
8		- scope: {
9		- flashcard: '=flashcardObj', // flashcard-obj in parent html
10		- refresh: '&' // eval refresh in parent html
11		- },
12		- //link: function(scope, element) {
13		- // $('.tooltipped').tooltip();
14		- // /* Handles width of the card */
15		- //}
16		- };
	4	+ function ($http, $state, $window) {
	5	+ return {
	6	+ templateUrl: '/app/templates/flashcard.html',
	7	+ restrict: 'E',
	8	+ scope: {
	9	+ flashcard: '=flashcardObj', // flashcard-obj in parent html
	10	+ refresh: '&', // eval refresh in parent html
	11	+
	12	+ },
	13	+
	14	+
	15	+ link: function (scope, element) {
	16	+ $('.tooltipped').tooltip();
	17	+ /* Handles width of the card */
	18	+ //console.log(scope.flashcard);
	19	+ }
	20	+ }
17	21	}
	22	+
	23	+
	24	+ /*.directive('flashcardDeck',
	25	+ function ($http, $state, $window) {
	26	+ return {
	27	+
	28	+ }
	29	+
	30	+ })*/
	31	+
18	32	);

1	1	angular.module('flashy.FlashcardFactory', ['ui.router']).
2		- factory('Flashcard', function ($http) {
	2	+ factory('Flashcard', function ($http, UserService) {
3	3	var FlashcardCache = [];
4	4	var Deck = null;
5	5	var Flashcard = function (data, deck) {
...	...	@@ -39,6 +39,112 @@
39	39	Flashcard.prototype.hide = function () {
40	40	return $http.post('/api/flashcards/' + this.id + '/hide/');
41	41	};
	42	+
	43	+ Flashcard.prototype.edit = function () {
	44	+
	45	+
	46	+ var editableText = this.formatted_text;
	47	+
	48	+ //$('#flashcardEditText').html(this.formatted_text);
	49	+
	50	+ $('.modal-trigger').leanModal({
	51	+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
	52	+ opacity: .5, // Opacity of modal background
	53	+ in_duration: 300, // Transition in duration
	54	+ out_duration: 200, // Transition out duration
	55	+ ready: function () {
	56	+
	57	+ $('#edit-card-input').html(editableText);
	58	+
	59	+
	60	+
	61	+ }, // Callback for Modal open
	62	+ complete: function () {
	63	+
	64	+ console.log("EDIT MODAL CLOSED");
	65	+
	66	+ } // Callback for Modal close
	67	+ });
	68	+
	69	+ };
	70	+
	71	+
	72	+
	73	+ Flashcard.prototype.refreshEditCardInput = function () {
	74	+
	75	+ console.log("ASDFASDFASDFASFD");
	76	+
	77	+
	78	+ this.editCardText = $('#edit-card-input').text();
	79	+
	80	+
	81	+ this.submit_enabled = this.editCardText.length >= 5 && this.editCardText.length <= 160;
	82	+
	83	+
	84	+
	85	+ var i = 0;
	86	+ this.editCardBlanks = [];
	87	+ $('#edit-card-input')[0].childNodes.forEach(function (node) {
	88	+ node = $(node)[0];
	89	+ if (node.tagName == 'B') {
	90	+ var text = $(node).text();
	91	+ var leftspaces = 0, rightspaces = 0;
	92	+ // awful way to find the first non-space character from the left or the right. thanks.js
	93	+ while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;
	94	+ while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
	95	+ console.log(leftspaces, text.length);
	96	+ if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
	97	+ i += text.length;
	98	+ } else if (!node.data) {
	99	+ i += $(node).text().length;
	100	+ } else {
	101	+ i += node.data.length;
	102	+ }
	103	+ });
	104	+ this.editCardBlanks.sort(function (a, b) {
	105	+ return a[0] - b[0];
	106	+ });
	107	+ i = 0;
	108	+ newtext = '';
	109	+ this.editCardBlanks.forEach(function (blank) {
	110	+ newtext += this.editCardText.slice(i, blank[0]);
	111	+ newtext += '<b>' + this.editCardText.slice(blank[0], blank[1]) + '</b>';
	112	+ i = blank[1];
	113	+ });
	114	+ newtext += this.editCardText.slice(i);
	115	+ //$scope.newCardFormattedText = newtext;*/
	116	+
	117	+
	118	+ };
	119	+
	120	+
	121	+
	122	+
	123	+ Flashcard.prototype.pushCard = function () {
	124	+
	125	+ //console.log()
	126	+
	127	+ var myCard = {
	128	+ 'text': $('#edit-card-input').text(),
	129	+ 'mask': this.editCardBlanks,
	130	+ //section: this.section.id
	131	+ };
	132	+ if (myCard.text == '') {
	133	+ console.log('blank flashcard not pushed:' + myCard.text);
	134	+ return closeNewCard();
	135	+ }
	136	+ $http.patch('/api/flashcards/' + this.id, myCard).
	137	+ success(function (data) {
	138	+ console.log('flashcard pushed: ' + myCard.text);
	139	+ if (!UserService.hasVerifiedEmail()) {
	140	+ Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
	141	+ }
	142	+ });
	143	+ //return .closeNewCardModal();
	144	+
	145	+ }
	146	+
	147	+
42	148
43	149	return Flashcard;
44	150	});

1		-<div class="card flashy smallify black-text text-darken-2"
2		- ng-class="{'in-deck':flashcard.isInDeck()}">
	1	+<div class="card flashy smallify black-text text-darken-2" ng-class="{'in-deck':flashcard.isInDeck()}">
3	2	<div class="valign-wrapper">
4	3	<div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
5	4	</div>
	5	+
	6	+
	7	+
	8	+
	9	+
6	10	<div class="card-overlay">
7	11	<div class="top-box no-user-select" ng-show="!flashcard.isInDeck()"
8	12	ng-click="flashcard.pull()">
9	13
10	14
...	...	@@ -13,15 +17,87 @@
13	17	<div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
14	18	</div>
15	19	<div class="bottom-box no-user-select">
16		- <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info">
17		- <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
	20	+
	21	+
	22	+ <div class="left-box tooltipped" data-position=" bottom" data-tooltip="Info">
	23	+ <div class="center-me modal-trigger" href="#editModal" ng-click="flashcard.edit()"><i class="mdi-editor-border-color small"></i></div>
18	24	</div>
	25	+
	26	+
	27	+
	28	+
19	29	<div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide">
20	30	<div class="center-me"><i class="mdi-action-delete small"></i></div>
21	31	</div>
22	32
23	33	</div>
24	34	</div>
	35	+
	36	+
	37	+ <!--<div id="editModal" class="modal">
	38	+ <div class="modal-content">
	39	+ <h4 id="flashcardEditText"></h4>
	40	+ </div>
	41	+ <div class="modal-footer">
	42	+
	43	+ </div>
	44	+ </div>-->
	45	+
	46	+
	47	+
	48	+ <div id="editModal" class="modal row" style="max-height:none;">
	49	+ <form id="edit-card-form">
	50	+ <div class="modal-content col">
	51	+ <div class="row" style="margin-bottom:0">
	52	+ <div class="card cyan-text text-darken-2"
	53	+ style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
	54	+ <div class="valign-wrapper">
	55	+ <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
	56	+ class="card-content valign center-align"
	57	+ contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
	58	+ </div>
	59	+ </div>
	60	+ </div>
	61	+ </div>
	62	+ </div>
	63	+ <div class="col">
	64	+ <div class="row">
	65	+ </div>
	66	+ <div class="row">
	67	+ <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
	68	+ data-position="left"
	69	+ data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
	70	+ data-tooltip="Enter">
	71	+ Edit
	72	+ <i class="mdi-hardware-keyboard-return right"></i>
	73	+ </button>
	74	+ </div>
	75	+ <div class="row">
	76	+ <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
	77	+ data-tooltip="Ctrl-B">
	78	+ Blank Selected Text
	79	+ </button>
	80	+ </div>
	81	+ <div class="row" ng-show="flashcard.editCardText" ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
	82	+ {{flashcard.editCardText.length}}/160 characters
	83	+ </div>
	84	+ <div class="row" ng-show="flashcard.editCardText.length < 5">
	85	+ Please write a little more!
	86	+ </div>
	87	+ <div class="row" ng-show="flashcard.editCardText.length > 140">
	88	+ Good flashcards have a<br>
	89	+ single atomic fact
	90	+ </div>
	91	+ </div>
	92	+ </form>
	93	+ </div>
	94	+
	95	+
	96	+
	97	+
	98	+
	99	+
	100	+
25	101	<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
26	102	<div class="center-me tooltipped" data-position="bottom" data-tooltip="In deck"><i
27	103	class="mdi-action-done small"></i></div>
...	...	@@ -29,5 +105,10 @@
29	105	<div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
30	106	<span class="center-me">score:{{flashcard.score}}</span>
31	107	</div>
	108	+
	109	+
	110	+
	111	+
	112	+
32	113	</div>