Adjusting general chat to send message without extra modal when only text

Zambom
1 parent 3b9a88f6
Showing 4 changed files with 132 additions and 9 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/js/chat.js
chat/templates/chat/talk.html
chat/views.py
@@ -1439,22 +1439,50 @@ div.dataTables_wrapper div.dataTables_paginate {
 .message-sender-container .message-field {
     padding-left: 10px;
     padding-right: 0px;
-    height: 46px;
+    min-height: 46px;
+    max-height: 90px;
     text-align: left;
 }
 .message-sender-container .message-field h4 {
     margin-top: 0px;
 }
-.message-sender-container .message-field div {
-    height: 46px;
+.message-sender-container .message-field div.message-container {
+    min-height: 46px;
+    max-height: 90px;
+    overflow-y: scroll;
     padding-top: 14px;
-    padding-bottom: 14px;
+    padding-bottom: 10px;
     padding-left: 10px;
     padding-right: 10px;
     border-width: 1px;
     border-style: solid;
 }
  
+.msg_placeholder {
+    position: absolute;
+    z-index: 0;
+    pointer-events: none;
+    visibility: visible;
+}
+
+#msg_editable {
+    width: 100%;
+    z-index: 1;
+}
+
+.action-button {
+    position: absolute;
+    bottom: 5px;
+    right: 20px;
+    height: 36px;
+    font-size: 18px;
+    width: 40px;
+    padding: 2px;
+    border: none;
+    background: none;
+    margin-bottom: 0px !important;
+}
+
 .talking-header {
     line-height: 0.5 !important;
     margin-top: 0px;
@@ -18,13 +18,47 @@ function getModalInfo(btn, space, space_type) {
  
                     $(this).animate({scrollTop: height}, 0);
                 });
+
+                setShortChatFormSubmit();
+            });
+
+            $("#msg_editable").on('click', function () {
+                $(this).trigger('focusin');
+            });
+
+            $("#msg_editable").on('focusin', function () {
+                $("#send-img").hide();
+                $("#send-msg").show();
+
+                $(".msg_placeholder").hide();
+            });
+
+            $("#msg_editable").on('focusout', function (event) {
+                if (!$(event.relatedTarget).is("#send-msg")) {
+                    $("#send-img").show();
+                    $("#send-msg").hide();
+
+                    var content = $(this).html();
+
+                    if (content == "") {
+                        $(".msg_placeholder").show();     
+                    }
+                }
+            });
+
+            $("#msg_editable").on('keydown', function (e) {
+                if (e.keyCode == 13 && !e.shiftKey) {
+                    e.preventDefault();
+
+                    $("#short-chat").submit();
+                }
             });
 		}
 	});
 }
  
 function getForm(field) {
-    var url = field.find('h4').data('url');
+    var url = field.data('url');
  
     $.ajax({
         url: url,
@@ -74,4 +108,50 @@ function setChatFormSubmit() {
  
         return false;
     });
+}
+
+function setShortChatFormSubmit() {
+    var frm = $('#short-chat'),
+        editable = $("#msg_editable");
+
+    frm.submit(function (e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        if (editable.html() != "") {
+            $("#id_text").val("<p>" + editable.html() + "</p>");
+            var formData = new FormData($(this)[0]);
+
+            $.ajax({
+                type: frm.attr('method'),
+                url: frm.attr('action'),
+                data: formData,
+                dataType: "json",
+                async: false,
+                success: function (data) {
+                    $('.messages-list').append(data.view);
+
+                    $(".messages-container").each(function () {
+                        var height = $(this)[0].scrollHeight;
+
+                        $(this).animate({scrollTop: height}, 0);
+                    });
+
+                    editable.html("");
+                    editable.trigger("focusout");
+
+                    alertify.success(data.message);
+                },
+                error: function(data) {
+                    alertify.error(data.responseText);
+                    setShortChatFormSubmit();
+                },
+                cache: false,
+                contentType: false,
+                processData: false
+            });
+        }
+
+        return false;
+    });
 }
 \ No newline at end of file
 {% load static i18n chat_tags %}
+{% load widget_tweaks %}
  
 {% is_online participant as status %}
  
@@ -56,8 +57,20 @@
 					</div>
 				</div>
 				<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 message-field">
-					<div onclick="getForm($(this));">
-						<h4 data-url="{% url 'chat:create' participant.email talk_id space space_type %}">{% trans 'Type a new message to ' %}{{ participant }} <i class="fa fa-camera pull-right"></i></h4>
+					<div class="message-container">
+						<form id="short-chat" class="col-md-11" method="post" action="{{ form_url }}" enctype="multipart/form-data">
+							{% csrf_token %}
+
+							<div class="msg_placeholder">{% trans 'Type a new message to ' %}{{ participant }}</div>
+							<div id="msg_editable" contenteditable="true"></div>
+							{% render_field form.text style="display:none" %}
+						</form>
+						<button id="send-img" onclick="getForm($(this));" data-url="{% url 'chat:create' participant.email talk_id space space_type %}" class="action-button" type="button">
+							<i class="fa fa-camera"></i>
+						</button>
+						<button id="send-msg" class="action-button" type="submit" form="short-chat" style="display:none">
+							<i class="fa fa-send"></i>
+						</button>
 					</div>
 				</div>
 			</div>
@@ -137,7 +137,9 @@ class GetTalk(LoginRequiredMixin, generic.ListView):
 		context['talk_id'] = self.talk_id
 		context['space'] = self.request.GET.get('space', '0')
 		context['space_type'] = self.request.GET.get('space_type', 'general')
-		
+		context['form'] = ChatMessageForm()
+		context['form_url'] = reverse_lazy('chat:create', args = (), kwargs = {'email': self.kwargs.get('email', ''), 'talk_id': self.talk_id, 'space': self.kwargs.get('space', '0'), 'space_type': self.kwargs.get('space_type', 'general')})
+
 		return context
  
 class SendMessage(LoginRequiredMixin, generic.edit.CreateView):
@@ -205,7 +207,7 @@ class SendMessage(LoginRequiredMixin, generic.edit.CreateView):
 	def get_context_data(self, **kwargs):
 		context = super(SendMessage, self).get_context_data(**kwargs)
  
-		context['form_url'] = reverse_lazy('chat:create', args = (), kwargs = {'email': self.kwargs.get('email', ''), 'talk_id': self.kwargs.get('talk_id', None), 'space': self.kwargs.get('space', '0'), 'space_type': self.kwargs.get('space_type', 'general')})
+		context['form_url'] = reverse_lazy('chat:create', args = (), kwargs = {'email': self.kwargs.get('email', ''), 'talk_id': self.kwargs.get('talk_id', '-1'), 'space': self.kwargs.get('space', '0'), 'space_type': self.kwargs.get('space_type', 'general')})
  
 		return context
...	...	@@ -1439,22 +1439,50 @@ div.dataTables_wrapper div.dataTables_paginate {
1439	1439	.message-sender-container .message-field {
1440	1440	padding-left: 10px;
1441	1441	padding-right: 0px;
1442		- height: 46px;
	1442	+ min-height: 46px;
	1443	+ max-height: 90px;
1443	1444	text-align: left;
1444	1445	}
1445	1446	.message-sender-container .message-field h4 {
1446	1447	margin-top: 0px;
1447	1448	}
1448		-.message-sender-container .message-field div {
1449		- height: 46px;
	1449	+.message-sender-container .message-field div.message-container {
	1450	+ min-height: 46px;
	1451	+ max-height: 90px;
	1452	+ overflow-y: scroll;
1450	1453	padding-top: 14px;
1451		- padding-bottom: 14px;
	1454	+ padding-bottom: 10px;
1452	1455	padding-left: 10px;
1453	1456	padding-right: 10px;
1454	1457	border-width: 1px;
1455	1458	border-style: solid;
1456	1459	}
1457	1460
	1461	+.msg_placeholder {
	1462	+ position: absolute;
	1463	+ z-index: 0;
	1464	+ pointer-events: none;
	1465	+ visibility: visible;
	1466	+}
	1467	+
	1468	+#msg_editable {
	1469	+ width: 100%;
	1470	+ z-index: 1;
	1471	+}
	1472	+
	1473	+.action-button {
	1474	+ position: absolute;
	1475	+ bottom: 5px;
	1476	+ right: 20px;
	1477	+ height: 36px;
	1478	+ font-size: 18px;
	1479	+ width: 40px;
	1480	+ padding: 2px;
	1481	+ border: none;
	1482	+ background: none;
	1483	+ margin-bottom: 0px !important;
	1484	+}
	1485	+
1458	1486	.talking-header {
1459	1487	line-height: 0.5 !important;
1460	1488	margin-top: 0px;
...	...
...	...	@@ -18,13 +18,47 @@ function getModalInfo(btn, space, space_type) {
18	18
19	19	$(this).animate({scrollTop: height}, 0);
20	20	});
	21	+
	22	+ setShortChatFormSubmit();
	23	+ });
	24	+
	25	+ $("#msg_editable").on('click', function () {
	26	+ $(this).trigger('focusin');
	27	+ });
	28	+
	29	+ $("#msg_editable").on('focusin', function () {
	30	+ $("#send-img").hide();
	31	+ $("#send-msg").show();
	32	+
	33	+ $(".msg_placeholder").hide();
	34	+ });
	35	+
	36	+ $("#msg_editable").on('focusout', function (event) {
	37	+ if (!$(event.relatedTarget).is("#send-msg")) {
	38	+ $("#send-img").show();
	39	+ $("#send-msg").hide();
	40	+
	41	+ var content = $(this).html();
	42	+
	43	+ if (content == "") {
	44	+ $(".msg_placeholder").show();
	45	+ }
	46	+ }
	47	+ });
	48	+
	49	+ $("#msg_editable").on('keydown', function (e) {
	50	+ if (e.keyCode == 13 && !e.shiftKey) {
	51	+ e.preventDefault();
	52	+
	53	+ $("#short-chat").submit();
	54	+ }
21	55	});
22	56	}
23	57	});
24	58	}
25	59
26	60	function getForm(field) {
27		- var url = field.find('h4').data('url');
	61	+ var url = field.data('url');
28	62
29	63	$.ajax({
30	64	url: url,
...	...	@@ -74,4 +108,50 @@ function setChatFormSubmit() {
74	108
75	109	return false;
76	110	});
	111	+}
	112	+
	113	+function setShortChatFormSubmit() {
	114	+ var frm = $('#short-chat'),
	115	+ editable = $("#msg_editable");
	116	+
	117	+ frm.submit(function (e) {
	118	+ e.preventDefault();
	119	+ e.stopImmediatePropagation();
	120	+
	121	+ if (editable.html() != "") {
	122	+ $("#id_text").val("<p>" + editable.html() + "</p>");
	123	+ var formData = new FormData($(this)[0]);
	124	+
	125	+ $.ajax({
	126	+ type: frm.attr('method'),
	127	+ url: frm.attr('action'),
	128	+ data: formData,
	129	+ dataType: "json",
	130	+ async: false,
	131	+ success: function (data) {
	132	+ $('.messages-list').append(data.view);
	133	+
	134	+ $(".messages-container").each(function () {
	135	+ var height = $(this)[0].scrollHeight;
	136	+
	137	+ $(this).animate({scrollTop: height}, 0);
	138	+ });
	139	+
	140	+ editable.html("");
	141	+ editable.trigger("focusout");
	142	+
	143	+ alertify.success(data.message);
	144	+ },
	145	+ error: function(data) {
	146	+ alertify.error(data.responseText);
	147	+ setShortChatFormSubmit();
	148	+ },
	149	+ cache: false,
	150	+ contentType: false,
	151	+ processData: false
	152	+ });
	153	+ }
	154	+
	155	+ return false;
	156	+ });
77	157	}
78	158	\ No newline at end of file
...	...
1	1	{% load static i18n chat_tags %}
	2	+{% load widget_tweaks %}
2	3
3	4	{% is_online participant as status %}
4	5
...	...	@@ -56,8 +57,20 @@
56	57	</div>
57	58	</div>
58	59	<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 message-field">
59		- <div onclick="getForm($(this));">
60		- <h4 data-url="{% url 'chat:create' participant.email talk_id space space_type %}">{% trans 'Type a new message to ' %}{{ participant }} <i class="fa fa-camera pull-right"></i></h4>
	60	+ <div class="message-container">
	61	+ <form id="short-chat" class="col-md-11" method="post" action="{{ form_url }}" enctype="multipart/form-data">
	62	+ {% csrf_token %}
	63	+
	64	+ <div class="msg_placeholder">{% trans 'Type a new message to ' %}{{ participant }}</div>
	65	+ <div id="msg_editable" contenteditable="true"></div>
	66	+ {% render_field form.text style="display:none" %}
	67	+ </form>
	68	+ <button id="send-img" onclick="getForm($(this));" data-url="{% url 'chat:create' participant.email talk_id space space_type %}" class="action-button" type="button">
	69	+ <i class="fa fa-camera"></i>
	70	+ </button>
	71	+ <button id="send-msg" class="action-button" type="submit" form="short-chat" style="display:none">
	72	+ <i class="fa fa-send"></i>
	73	+ </button>
61	74	</div>
62	75	</div>
63	76	</div>
...	...
...	...	@@ -137,7 +137,9 @@ class GetTalk(LoginRequiredMixin, generic.ListView):
137	137	context['talk_id'] = self.talk_id
138	138	context['space'] = self.request.GET.get('space', '0')
139	139	context['space_type'] = self.request.GET.get('space_type', 'general')
140		-
	140	+ context['form'] = ChatMessageForm()
	141	+ context['form_url'] = reverse_lazy('chat:create', args = (), kwargs = {'email': self.kwargs.get('email', ''), 'talk_id': self.talk_id, 'space': self.kwargs.get('space', '0'), 'space_type': self.kwargs.get('space_type', 'general')})
	142	+
141	143	return context
142	144
143	145	class SendMessage(LoginRequiredMixin, generic.edit.CreateView):
...	...	@@ -205,7 +207,7 @@ class SendMessage(LoginRequiredMixin, generic.edit.CreateView):
205	207	def get_context_data(self, **kwargs):
206	208	context = super(SendMessage, self).get_context_data(**kwargs)
207	209
208		- context['form_url'] = reverse_lazy('chat:create', args = (), kwargs = {'email': self.kwargs.get('email', ''), 'talk_id': self.kwargs.get('talk_id', None), 'space': self.kwargs.get('space', '0'), 'space_type': self.kwargs.get('space_type', 'general')})
	210	+ context['form_url'] = reverse_lazy('chat:create', args = (), kwargs = {'email': self.kwargs.get('email', ''), 'talk_id': self.kwargs.get('talk_id', '-1'), 'space': self.kwargs.get('space', '0'), 'space_type': self.kwargs.get('space_type', 'general')})
209	211
210	212	return context
211	213
...	...