turn textarea to contenteditable div
we will need it for nice formatting of the mentioned user Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>
This commit is contained in:
parent
df0e72d8d9
commit
ec5607544c
|
@ -48,10 +48,15 @@
|
|||
margin-right: 6px;
|
||||
}
|
||||
|
||||
#commentsTabView .newCommentForm textarea {
|
||||
#commentsTabView .newCommentForm div.message {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#commentsTabView .newCommentForm div.message:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#commentsTabView .comment {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
'{{/if}}' +
|
||||
' </div>' +
|
||||
' <form class="newCommentForm">' +
|
||||
' <textarea rows="1" class="message" placeholder="{{newMessagePlaceholder}}">{{message}}</textarea>' +
|
||||
' <div contentEditable="true" class="message" data-placeholder="{{newMessagePlaceholder}}">{{message}}</div>' +
|
||||
' <input class="submit icon-confirm" type="submit" value="" />' +
|
||||
'{{#if isEditMode}}' +
|
||||
' <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
|
||||
|
@ -69,7 +69,11 @@
|
|||
'click .action.edit': '_onClickEditComment',
|
||||
'click .action.delete': '_onClickDeleteComment',
|
||||
'click .cancel': '_onClickCloseComment',
|
||||
'click .comment': '_onClickComment'
|
||||
'click .comment': '_onClickComment',
|
||||
'keyup div.message': '_onTextChange',
|
||||
'change div.message': '_onTextChange',
|
||||
'input div.message': '_onTextChange',
|
||||
'paste div.message': '_onPaste'
|
||||
},
|
||||
|
||||
_commentMaxLength: 1000,
|
||||
|
@ -152,11 +156,11 @@
|
|||
},
|
||||
function (data) {
|
||||
console.warn(data);
|
||||
$('textarea.message').atwho({
|
||||
$('#commentsTabView .newCommentForm .message').atwho({
|
||||
at: '@',
|
||||
data: data,
|
||||
displayTpl: "<li>${label}</li>",
|
||||
insertTpl: "${atwho-at}${label}",
|
||||
insertTpl: "<span data-uid='${id}'>${label}</span>",
|
||||
searchKey: "label"
|
||||
});
|
||||
}
|
||||
|
@ -187,7 +191,7 @@
|
|||
this.delegateEvents();
|
||||
this.$el.find('.message').on('keydown input change', this._onTypeComment);
|
||||
|
||||
autosize(this.$el.find('.newCommentRow textarea'))
|
||||
autosize(this.$el.find('.newCommentRow .message'))
|
||||
},
|
||||
|
||||
_formatItem: function(commentModel) {
|
||||
|
@ -333,14 +337,14 @@
|
|||
// spawn form
|
||||
$comment.after($formRow);
|
||||
$formRow.data('commentEl', $comment);
|
||||
$formRow.find('textarea').on('keydown input change', this._onTypeComment);
|
||||
$formRow.find('.message').on('keydown input change', this._onTypeComment);
|
||||
|
||||
// copy avatar element from original to avoid flickering
|
||||
$formRow.find('.avatar:first').replaceWith($comment.find('.avatar:first').clone());
|
||||
$formRow.find('.has-tooltip').tooltip();
|
||||
|
||||
// Enable autosize
|
||||
autosize($formRow.find('textarea'));
|
||||
autosize($formRow.find('.message'));
|
||||
|
||||
return false;
|
||||
},
|
||||
|
@ -428,7 +432,7 @@
|
|||
var self = this;
|
||||
var $submit = $form.find('.submit');
|
||||
var $loading = $form.find('.submitLoading');
|
||||
var $textArea = $form.find('.message');
|
||||
var $commentField = $form.find('.message');
|
||||
|
||||
model.fetch({
|
||||
success: function(model) {
|
||||
|
@ -443,7 +447,7 @@
|
|||
$row.remove();
|
||||
} else {
|
||||
$target = $('.commentsTabView .comments').find('li:first');
|
||||
$textArea.val('').prop('disabled', false);
|
||||
$commentField.text('').prop('disabled', false);
|
||||
}
|
||||
|
||||
var $message = $target.find('.message');
|
||||
|
@ -467,15 +471,15 @@
|
|||
var currentUser = OC.getCurrentUser();
|
||||
var $submit = $form.find('.submit');
|
||||
var $loading = $form.find('.submitLoading');
|
||||
var $textArea = $form.find('.message');
|
||||
var message = $textArea.val().trim();
|
||||
var $commentField = $form.find('.message');
|
||||
var message = $commentField.text().trim();
|
||||
e.preventDefault();
|
||||
|
||||
if (!message.length || message.length > this._commentMaxLength) {
|
||||
return;
|
||||
}
|
||||
|
||||
$textArea.prop('disabled', true);
|
||||
$commentField.prop('disabled', true);
|
||||
$submit.addClass('hidden');
|
||||
$loading.removeClass('hidden');
|
||||
|
||||
|
@ -483,7 +487,7 @@
|
|||
// edit mode
|
||||
var comment = this.collection.get(commentId);
|
||||
comment.save({
|
||||
message: $textArea.val()
|
||||
message: $commentField.text()
|
||||
}, {
|
||||
success: function(model) {
|
||||
self._onSubmitSuccess(model, $form, commentId);
|
||||
|
@ -498,7 +502,7 @@
|
|||
actorDisplayName: currentUser.displayName,
|
||||
actorType: 'users',
|
||||
verb: 'comment',
|
||||
message: $textArea.val(),
|
||||
message: $commentField.text(),
|
||||
creationDateTime: (new Date()).toUTCString()
|
||||
}, {
|
||||
at: 0,
|
||||
|
@ -536,6 +540,31 @@
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* ensures the contenteditable div is really empty, when user removed
|
||||
* all input, so that the placeholder will be shown again
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_onTextChange: function() {
|
||||
var $message = $('#commentsTabView .newCommentForm div.message');
|
||||
if(!$message.text().trim().length) {
|
||||
$message.empty();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Limit pasting to plain text
|
||||
*
|
||||
* @param e
|
||||
* @private
|
||||
*/
|
||||
_onPaste: function (e) {
|
||||
e.preventDefault();
|
||||
var text = e.originalEvent.clipboardData.getData("text/plain");
|
||||
document.execCommand('insertText', false, text);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns whether the given message is long and needs
|
||||
* collapsing
|
||||
|
|
Loading…
Reference in New Issue