Skip to content

erp5
erp5
Commit d161f838 authored by Georgios Dagkakis's avatar Georgios Dagkakis Committed by Cédric Le Ninivin
Browse files
Options

Jabber multiline 

erp5_web_jabber_client: Allow user to send multi-line messages

User can change between single-line and multi-line mode
using one button.

/reviewed-on nexedi/erp5!114
parents a08a3c33 b8af2f09
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 30 deletions
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_page_dialog_html.html
View file @ d161f838
......@@ -12,13 +12,24 @@
<!-- custom script -->
<script src="gadget_global.js" type="text/javascript"></script>
<script src="gadget_jabberclient_page_dialog.js" type="text/javascript"></script>
<script id="input-template" type="text/x-handlebars-template">
<input class="input-content" type="text" data-enhanced="true" name="content"
placeholder="Write something..." value="" required>
</script>
<script id="textarea-template" type="text/x-handlebars-template">
<textarea class="textarea-content" type="text" data-enhanced="true" name="content"
placeholder="Write a multi-line message..." value="" required></textarea>
</script>
</head>
<body>
<div class="discussion-content"></div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<form class="message-form">
<div class="ui-input-text ui-corner-all ui-body-inherit ui-shadow-inset ui-input-has-clear">
<input type="text" data-enhanced="true" name="content" placeholder="Write something..." value="" required>
<div class="ui-input-text ui-corner-all ui-body-inherit ui-shadow-inset ui-input-has-clear ui-input-has-multiline">
<div class="custom-mode-change ui-btn ui-btn-icon-notext ui-input-clear ui-input-btn ui-corner-all ui-icon-comment ui-btn-left">
<input data-enhanced="true" type="button" value="">
</div>
<div class="ui-btn ui-input-clear ui-input-btn ui-corner-all ui-icon-edit ui-btn-icon-notext">
<input data-enhanced="true" type="submit" value="Send">
</div>
......
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_page_dialog_html.xml
View file @ d161f838
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>949.30780.1199.42069</string> </value>
<value> <string>950.63332.2255.41369</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1456843290.96</float>
<float>1462370312.21</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_page_dialog_js.js
View file @ d161f838
/*global window, document, rJS, RSVP, loopEventListener*/
/*global window, document, rJS, RSVP, Handlebars, loopEventListener*/
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, document, rJS, RSVP, loopEventListener) {
(function (window, document, rJS, RSVP, Handlebars, loopEventListener) {
"use strict";
function scroll() {
......@@ -13,10 +13,29 @@
});
}
// MESSAGE_FRESHNESS 30 minutes
var MESSAGE_FRESHNESS = 1800000;
function getDomFromString(str) {
var temp_div = document.createElement('div');
temp_div.innerHTML = str.trim();
return temp_div.firstChild;
}
/////////////////////////////////////////////////////////////////
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
input_source = gadget_klass.__template_element
.getElementById("input-template")
.innerHTML,
input_template = Handlebars.compile(input_source),
textarea_source = gadget_klass.__template_element
.getElementById("textarea-template")
.innerHTML,
textarea_template = Handlebars.compile(textarea_source),
// MESSAGE_FRESHNESS 30 minutes
MESSAGE_FRESHNESS = 1800000;
rJS(window)
gadget_klass
/////////////////////////////////////////////////////////////////
// ready
/////////////////////////////////////////////////////////////////
......@@ -30,6 +49,10 @@
return g.getElement()
.push(function (element) {
g.props.element = element;
g.props.template_container = element.querySelector('.ui-input-has-multiline');
g.props.keep_text_dict = {'oneline': '', 'textarea': ''};
g.props.template_container.insertBefore(getDomFromString(input_template()),
g.props.template_container.firstChild);
});
})
......@@ -48,9 +71,12 @@
/////////////////////////////////////////////////////////////////
.declareMethod("render", function (options) {
var gadget = this,
ul = document.createElement("ul");
ul = document.createElement("ul"),
template_container = gadget.props.template_container;
ul.setAttribute("data-role", "listview");
gadget.props.jid = options.jid;
template_container.children[0].focus();
template_container.children[0].select();
return gadget.updateHeader({
page_title: options.jid
})
......@@ -108,21 +134,28 @@
index = line.indexOf('] ');
if (index !== -1) {
// Check message freshness
// If we receive one multiline message, then the lines after the first
// would not start with the date. So this would return Invalid Date
message_date = new Date(line.substring(1, index));
if (previous_message_date === undefined) {
previous_message_date = new Date(message_date - MESSAGE_FRESHNESS - 2);
}
if (message_date - previous_message_date > MESSAGE_FRESHNESS) {
is_old = true;
}
// Check direction
tmp_line = line.substring(index + 2);
if (tmp_line.indexOf('> ') === 0) {
message_is_incoming = false;
} else if (tmp_line.indexOf('< ') === 0) {
message_is_incoming = true;
// Check direction and cut the date from the start of the line.
// This should be done only if it is a unique line or the first
// line of a multi-line message. Other lines will retain direction
// of the first
if (isNaN(message_date) === false) {
if (previous_message_date === undefined) {
previous_message_date = new Date(message_date - MESSAGE_FRESHNESS - 2);
}
if (message_date - previous_message_date > MESSAGE_FRESHNESS) {
is_old = true;
}
tmp_line = line.substring(index + 2);
if (tmp_line.indexOf('> ') === 0) {
message_is_incoming = false;
} else if (tmp_line.indexOf('< ') === 0) {
message_is_incoming = true;
}
line = tmp_line.substring(2);
}
line = tmp_line.substring(2);
if (message_is_incoming !== is_incoming || is_old) {
appendText(displayed_text, is_incoming);
is_incoming = message_is_incoming;
......@@ -149,13 +182,21 @@
})
.declareService(function () {
var form_gadget = this;
var form_gadget = this,
template_container = form_gadget.props.template_container,
keep_text_dict = form_gadget.props.keep_text_dict;
function formSubmit(submit_event) {
return form_gadget.notifySubmitting()
.push(function () {
var text = submit_event.target[0].value;
submit_event.target[0].value = "";
keep_text_dict.oneline = "";
keep_text_dict.textarea = "";
template_container.removeChild(template_container.firstChild);
template_container.insertBefore(getDomFromString(input_template()),
template_container.firstChild);
template_container.children[0].focus();
template_container.children[0].select();
return form_gadget.jio_putAttachment(
form_gadget.props.jid,
'MESSAGE',
......@@ -185,8 +226,41 @@
);
})
.declareService(function () {
var gadget = this,
template_container = gadget.props.template_container,
keep_text_dict = gadget.props.keep_text_dict;
function changeMode() {
if (template_container.children[0].className === 'input-content') {
keep_text_dict.oneline = template_container.children[0].value;
template_container.removeChild(template_container.firstChild);
template_container.insertBefore(getDomFromString(textarea_template()),
template_container.firstChild);
template_container.children[0].value = keep_text_dict.textarea;
} else {
keep_text_dict.textarea = template_container.children[0].value;
template_container.removeChild(template_container.firstChild);
template_container.insertBefore(getDomFromString(input_template()),
template_container.firstChild);
template_container.children[0].value = keep_text_dict.oneline;
}
var typing_field = template_container.children[0];
typing_field.focus();
typing_field.select();
typing_field.selectionStart = typing_field.selectionEnd = typing_field.value.length;
}
// Listen to button click
return loopEventListener(
gadget.props.element.querySelector('.custom-mode-change'),
'click',
false,
changeMode
);
})
.declareService(function () {
scroll();
});
}(window, document, rJS, RSVP, loopEventListener));
\ No newline at end of file
}(window, document, rJS, RSVP, Handlebars, loopEventListener));
\ No newline at end of file
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_page_dialog_js.xml
View file @ d161f838
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>949.36447.38496.63744</string> </value>
<value> <string>950.63396.22857.42769</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1456908330.96</float>
<float>1462370315.51</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css
View file @ d161f838
......@@ -1371,6 +1371,13 @@ html .ui-table-header:before {
padding-left: 0;
padding-right: 0;
}
/* multiline */
.ui-input-has-multiline {
padding-left: 2.375em;
}
.ui-input-has-multiline textarea {
width: 100%;
}
/* correctly display loader TODO: REMOVE */
html body .ui-input-has-clear .ui-icon-spinner:after {
font-size: 1.5em;
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml
View file @ d161f838
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>949.22640.50771.7816</string> </value>
<value> <string>951.6248.60986.31163</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1456317267.11</float>
<float>1462873727.38</float>
<string>UTC</string>
</tuple>
</state>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7