110swag / flashy-frontend

Commit 4a8b43927abf11abcf7396d95456ea341969900a

Authored by Andrew Buss 2015-06-01 03:10:04 -0700

start improving card push

Showing 3 changed files with 59 additions and 39 deletions Side-by-side Diff

home.html
scripts/FeedController.js
templates/feed.html

...	...	@@ -150,6 +150,7 @@
150	150	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
151	151	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
152	152	<script src="https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.9/angular-websocket.min.js"></script>
	153	+<script src="https://cdn.rawgit.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
153	154	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
154	155
155	156

1		-angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket']).
	1	+angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).
2	2
3	3	controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
4	4	angular.module('flashy.CardGridController').controller.apply(this, arguments);
5	5
...	...	@@ -80,18 +80,12 @@
80	80	}
81	81	});
82	82
83		- var resetModal = function() {
84		- $('#new-card-input').html('');
85		- $('#newCard').closeModal(modal_options);
86		- };
87		-
88	83	$scope.pushCard = function() {
89	84	var i = 0;
90	85	var blanks = [];
91	86	$('#new-card-input')[0].childNodes.forEach(function(node) {
92	87	if (typeof node.data == 'undefined') {
93	88	console.log('undefined node');
94		- //return resetModal();
95	89	}
96	90	node = $(node)[0];
97	91	if (node.tagName == 'B') {
...	...	@@ -118,7 +112,7 @@
118	112	};
119	113	if (myCard.text == '') {
120	114	console.log('blank flashcard not pushed:' + myCard.text);
121		- return resetModal();
	115	+ return closeNewCard();
122	116	}
123	117	$http.post('/api/flashcards/', myCard).
124	118	success(function(data) {
125	119
...	...	@@ -126,12 +120,11 @@
126	120	if (!UserService.hasVerifiedEmail()) {
127	121	Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
128	122	}
129		-
130	123	}).
131	124	error(function(error) {
132	125	console.log('something went wrong pushing a card!');
133	126	});
134		- return resetModal();
	127	+ return $scope.closeNewCardModal();
135	128	};
136	129
137	130	/* Key bindings for the whole feed window. Hotkey it up! */
138	131
139	132
140	133
141	134
142	135
...	...	@@ -146,29 +139,35 @@
146	139	in_duration: 300, // Transition in duration
147	140	out_duration: 200, // Transition out duration
148	141	ready: function() {
149		- listenForC = false;
150		- console.log('modal OPENING');
151	142	$('#new-card-input').focus();
152		- },
153		- complete: function() {
154		- listenForC = true;
155		- console.log('modal done, closing');
156		- $('#new-card-input').blur();
	143	+ document.execCommand('selectAll', false, null);
157	144	}
158	145	};
159	146
160	147	$(document).keydown(function(e) {
161	148	var keyed = e.which;
162	149	if (keyed == 67 && listenForC) { // "c" for compose
163		- $('#newCard').openModal(modal_options);
	150	+ $scope.openNewCardModal();
164	151	e.preventDefault();
165		- listenForC = false;
166	152	return false;
167	153	} else if (keyed == 27) { // clear on ESC
168		- listenForC = true;
169		- document.getElementById('new-card-input').value = '';
	154	+ $scope.closeNewCardModal();
170	155	}
171	156	});
	157	+
	158	+ $scope.openNewCardModal = function() {
	159	+ $('#newCard').openModal(modal_options);
	160	+ listenForC = false;
	161	+ $('#new-card-input').html('Write a flashcard!');
	162	+
	163	+ };
	164	+
	165	+ $scope.closeNewCardModal = function() {
	166	+ listenForC = true;
	167	+ $('#new-card-input').html('').blur();
	168	+ $('#newCard').closeModal(modal_options);
	169	+ };
	170	+
172	171	$('.tooltipped').tooltip({delay: 50});
173	172	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
174	173	$('.modal-trigger').leanModal(modal_options);

...	...	@@ -15,36 +15,56 @@
15	15
16	16	<!--Lil plus button in corner-->
17	17	<div class="fixed-action-btn" style="bottom: 96px; right: 24px;">
18		- <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" href="#newCard" data-position="left"
19		- data-delay="50"
	18	+ <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left"
	19	+ data-delay="50" ng-click="openNewCardModal()"
20	20	data-tooltip="(C)ompose">
21	21	<i class="large mdi-content-add"></i>
22	22	</a>
23	23	</div>
24	24
25		-<div id="newCard" class="modal bottom-sheet" style="max-height:none;">
	25	+<div id="newCard" class="modal bottom-sheet row" style="max-height:none;">
26	26	<form id="new-card-form">
27		- <div class="modal-content">
28		- <div class="card cyan-text text-darken-2"
29		- style="margin-left: auto; margin-right:auto;width:300px; height:180px; font-size:120%;">
30		- <div class="valign-wrapper">
31		- <div id="new-card-input" style="outline:0px solid transparent;" class="card-content valign center-align"
32		- contenteditable>
	27	+ <div class="modal-content col">
	28	+ <div class="row" style="margin-bottom:0">
	29	+ <div class="card cyan-text text-darken-2"
	30	+ style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
	31	+ <div class="valign-wrapper">
	32	+ <div id="new-card-input" ng-model="newcardtext" style="outline:0px solid transparent;"
	33	+ class="card-content valign center-align"
	34	+ contenteditable>
33	35
	36	+ </div>
34	37	</div>
	38	+
35	39	</div>
36	40	</div>
37	41	</div>
38	42
39		- <div class="modal-footer">
40		- <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left"
41		- data-delay="50"
42		- data-tooltip="Enter">Submit
43		- <i class="mdi-hardware-keyboard-return right"></i>
44		- </button>
45		- <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
46		- data-tooltip="Ctrl-B">Blank Selected Text
47		- </button>
	43	+ <div class="col">
	44	+ <div class="row">
	45	+
	46	+ </div>
	47	+ <div class="row">
	48	+ <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left"
	49	+ data-delay="50" ng-class="newcardtext.length >= 5?{}:'disabled'"
	50	+ data-tooltip="Enter">Submit
	51	+ <i class="mdi-hardware-keyboard-return right"></i>
	52	+ </button>
	53	+ </div>
	54	+ <div class="row">
	55	+ <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
	56	+ data-tooltip="Ctrl-B">Blank Selected Text
	57	+ </button>
	58	+ </div>
	59	+ <div class="row" ng-show="newcardtext">
	60	+ {{newcardtext.length}}/160 characters
	61	+ </div>
	62	+ <div class="row" ng-show="newcardtext.length < 5">
	63	+ Please write a little more!
	64	+ </div>
	65	+ <div class="row" ng-show="newcardtext.length > 140">
	66	+ You'
	67	+ </div>
48	68	</div>
49	69	</form>
50	70	</div>