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;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .newCommentForm textarea {
|
#commentsTabView .newCommentForm div.message {
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#commentsTabView .newCommentForm div.message:empty:before {
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
#commentsTabView .comment {
|
#commentsTabView .comment {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
'{{/if}}' +
|
'{{/if}}' +
|
||||||
' </div>' +
|
' </div>' +
|
||||||
' <form class="newCommentForm">' +
|
' <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="" />' +
|
' <input class="submit icon-confirm" type="submit" value="" />' +
|
||||||
'{{#if isEditMode}}' +
|
'{{#if isEditMode}}' +
|
||||||
' <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
|
' <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
|
||||||
|
@ -69,7 +69,11 @@
|
||||||
'click .action.edit': '_onClickEditComment',
|
'click .action.edit': '_onClickEditComment',
|
||||||
'click .action.delete': '_onClickDeleteComment',
|
'click .action.delete': '_onClickDeleteComment',
|
||||||
'click .cancel': '_onClickCloseComment',
|
'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,
|
_commentMaxLength: 1000,
|
||||||
|
@ -152,11 +156,11 @@
|
||||||
},
|
},
|
||||||
function (data) {
|
function (data) {
|
||||||
console.warn(data);
|
console.warn(data);
|
||||||
$('textarea.message').atwho({
|
$('#commentsTabView .newCommentForm .message').atwho({
|
||||||
at: '@',
|
at: '@',
|
||||||
data: data,
|
data: data,
|
||||||
displayTpl: "<li>${label}</li>",
|
displayTpl: "<li>${label}</li>",
|
||||||
insertTpl: "${atwho-at}${label}",
|
insertTpl: "<span data-uid='${id}'>${label}</span>",
|
||||||
searchKey: "label"
|
searchKey: "label"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -187,7 +191,7 @@
|
||||||
this.delegateEvents();
|
this.delegateEvents();
|
||||||
this.$el.find('.message').on('keydown input change', this._onTypeComment);
|
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) {
|
_formatItem: function(commentModel) {
|
||||||
|
@ -333,14 +337,14 @@
|
||||||
// spawn form
|
// spawn form
|
||||||
$comment.after($formRow);
|
$comment.after($formRow);
|
||||||
$formRow.data('commentEl', $comment);
|
$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
|
// copy avatar element from original to avoid flickering
|
||||||
$formRow.find('.avatar:first').replaceWith($comment.find('.avatar:first').clone());
|
$formRow.find('.avatar:first').replaceWith($comment.find('.avatar:first').clone());
|
||||||
$formRow.find('.has-tooltip').tooltip();
|
$formRow.find('.has-tooltip').tooltip();
|
||||||
|
|
||||||
// Enable autosize
|
// Enable autosize
|
||||||
autosize($formRow.find('textarea'));
|
autosize($formRow.find('.message'));
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
@ -428,7 +432,7 @@
|
||||||
var self = this;
|
var self = this;
|
||||||
var $submit = $form.find('.submit');
|
var $submit = $form.find('.submit');
|
||||||
var $loading = $form.find('.submitLoading');
|
var $loading = $form.find('.submitLoading');
|
||||||
var $textArea = $form.find('.message');
|
var $commentField = $form.find('.message');
|
||||||
|
|
||||||
model.fetch({
|
model.fetch({
|
||||||
success: function(model) {
|
success: function(model) {
|
||||||
|
@ -443,7 +447,7 @@
|
||||||
$row.remove();
|
$row.remove();
|
||||||
} else {
|
} else {
|
||||||
$target = $('.commentsTabView .comments').find('li:first');
|
$target = $('.commentsTabView .comments').find('li:first');
|
||||||
$textArea.val('').prop('disabled', false);
|
$commentField.text('').prop('disabled', false);
|
||||||
}
|
}
|
||||||
|
|
||||||
var $message = $target.find('.message');
|
var $message = $target.find('.message');
|
||||||
|
@ -467,15 +471,15 @@
|
||||||
var currentUser = OC.getCurrentUser();
|
var currentUser = OC.getCurrentUser();
|
||||||
var $submit = $form.find('.submit');
|
var $submit = $form.find('.submit');
|
||||||
var $loading = $form.find('.submitLoading');
|
var $loading = $form.find('.submitLoading');
|
||||||
var $textArea = $form.find('.message');
|
var $commentField = $form.find('.message');
|
||||||
var message = $textArea.val().trim();
|
var message = $commentField.text().trim();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
if (!message.length || message.length > this._commentMaxLength) {
|
if (!message.length || message.length > this._commentMaxLength) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$textArea.prop('disabled', true);
|
$commentField.prop('disabled', true);
|
||||||
$submit.addClass('hidden');
|
$submit.addClass('hidden');
|
||||||
$loading.removeClass('hidden');
|
$loading.removeClass('hidden');
|
||||||
|
|
||||||
|
@ -483,7 +487,7 @@
|
||||||
// edit mode
|
// edit mode
|
||||||
var comment = this.collection.get(commentId);
|
var comment = this.collection.get(commentId);
|
||||||
comment.save({
|
comment.save({
|
||||||
message: $textArea.val()
|
message: $commentField.text()
|
||||||
}, {
|
}, {
|
||||||
success: function(model) {
|
success: function(model) {
|
||||||
self._onSubmitSuccess(model, $form, commentId);
|
self._onSubmitSuccess(model, $form, commentId);
|
||||||
|
@ -498,7 +502,7 @@
|
||||||
actorDisplayName: currentUser.displayName,
|
actorDisplayName: currentUser.displayName,
|
||||||
actorType: 'users',
|
actorType: 'users',
|
||||||
verb: 'comment',
|
verb: 'comment',
|
||||||
message: $textArea.val(),
|
message: $commentField.text(),
|
||||||
creationDateTime: (new Date()).toUTCString()
|
creationDateTime: (new Date()).toUTCString()
|
||||||
}, {
|
}, {
|
||||||
at: 0,
|
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
|
* Returns whether the given message is long and needs
|
||||||
* collapsing
|
* collapsing
|
||||||
|
|
Loading…
Reference in New Issue