aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorgit-marijus <mario@mariovavti.com>2017-08-28 23:42:17 +0200
committergit-marijus <mario@mariovavti.com>2017-08-28 23:42:17 +0200
commite70bf975084ee44662bc2c1c19d2fe6aa0268dee (patch)
tree12a8d99f1500c08e0194b05d6d3b9d96e3335c7d /view
parent187f19b1704b8a877b53a3e66c67ec26383a3ee9 (diff)
downloadvolse-hubzilla-e70bf975084ee44662bc2c1c19d2fe6aa0268dee.tar.gz
volse-hubzilla-e70bf975084ee44662bc2c1c19d2fe6aa0268dee.tar.bz2
volse-hubzilla-e70bf975084ee44662bc2c1c19d2fe6aa0268dee.zip
rewrite comment form handling
Diffstat (limited to 'view')
-rw-r--r--view/css/conversation.css15
-rw-r--r--view/js/main.js75
-rw-r--r--view/theme/redbasic/css/style.css7
-rwxr-xr-xview/tpl/comment_item.tpl2
4 files changed, 67 insertions, 32 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css
index d10e1e14e..dcabb5f3c 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -183,24 +183,19 @@ a.wall-item-name-link {
/* comment_item */
-.comment-edit-text-empty,
-.comment-edit-text-full {
+
+.comment-edit-text {
padding: 0.5rem;
width: 100%;
display: inherit;
-}
-
-.comment-edit-text-empty {
- height: 2rem;
line-height: 1;
- overflow: hidden;
+ height: 2rem;
resize: none;
}
-.comment-edit-text-full {
- height: 7rem;
+.comment-edit-text.expanded {
line-height: 1.25;
- overflow: auto;
+ height: 7rem;
resize: vertical;
}
diff --git a/view/js/main.js b/view/js/main.js
index 47815d2c6..109b864a2 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1,6 +1,55 @@
function confirmDelete() { return confirm(aStr.delitem); }
+function handle_comment_form(e) {
+ e.stopPropagation();
+
+ //handle eventual expanded forms
+ var expanded = $('.comment-edit-text.expanded');
+ var i = 0;
+
+ if(expanded.length) {
+ expanded.each(function() {
+ var ex_form = $(expanded[i].form);
+ var ex_fields = ex_form.find(':input[type=text], textarea');
+ var ex_fields_empty = true;
+
+ ex_fields.each(function() {
+ if($(this).val() != '')
+ ex_fields_empty = false;
+ });
+ if(ex_fields_empty) {
+ ex_form.find('.comment-edit-text').removeClass('expanded').attr('placeholder', aStr.comment);
+ ex_form.find(':not(.comment-edit-text)').hide();
+ }
+ i++
+ });
+ }
+
+ // handle clicked form
+ var form = $(this);
+ var fields = form.find(':input[type=text], textarea');
+ var fields_empty = true;
+
+ if(form.find('.comment-edit-text').length) {
+ form.find('.comment-edit-text').addClass('expanded').removeAttr('placeholder');
+ form.find(':not(:visible)').show();
+ }
+
+ // handle click outside of form (close empty forms)
+ $(document).on('click', function(e) {
+ fields.each(function() {
+ if($(this).val() != '')
+ fields_empty = false;
+ });
+ if(fields_empty) {
+ form.find('.comment-edit-text').removeClass('expanded').attr('placeholder', aStr.comment);
+ form.find(':not(.comment-edit-text)').hide();
+ }
+ });
+}
+
+/*
function commentOpenUI(obj, id) {
$(document).unbind( "click.commentOpen", handler );
@@ -44,8 +93,7 @@ function commentCloseUI(obj, id) {
function commentOpen(obj, id) {
if(obj.value == aStr.comment) {
obj.value = '';
- $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+ $("#comment-edit-text-" + id).addClass("expanded");
$("#mod-cmnt-wrap-" + id).show();
$("#comment-tools-" + id).show();
$("#comment-edit-anon-" + id).show();
@@ -53,12 +101,11 @@ function commentOpen(obj, id) {
}
return false;
}
-
+*/
function commentClose(obj, id) {
if(obj.value === '') {
obj.value = aStr.comment;
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
+ $("#comment-edit-text-" + id).removeClass("expanded");
$("#mod-cmnt-wrap-" + id).hide();
$("#comment-tools-" + id).hide();
$("#comment-edit-anon-" + id).hide();
@@ -67,6 +114,7 @@ function commentClose(obj, id) {
return false;
}
+
function showHideCommentBox(id) {
if( $('#comment-edit-form-' + id).is(':visible')) {
$('#comment-edit-form-' + id).hide();
@@ -79,8 +127,7 @@ function commentInsert(obj, id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == '$comment') {
tmpStr = '';
- $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+ $("#comment-edit-text-" + id).addClass("expanded");
openMenu("comment-tools-" + id);
}
var ins = $(obj).html();
@@ -101,8 +148,7 @@ function insertbbcomment(comment, BBcode, id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == comment) {
tmpStr = "";
- $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+ $("#comment-edit-text-" + id).addClass("expanded");
openMenu("comment-tools-" + id);
$("#comment-edit-text-" + id).val(tmpStr);
}
@@ -160,8 +206,7 @@ function insertCommentURL(comment, id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == comment) {
tmpStr = "";
- $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+ $("#comment-edit-text-" + id).addClass("expanded");
openMenu("comment-tools-" + id);
$("#comment-edit-text-" + id).val(tmpStr);
}
@@ -183,8 +228,7 @@ function qCommentInsert(obj, id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == aStr.comment) {
tmpStr = '';
- $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+ $("#comment-edit-text-" + id).addClass("expanded");
openMenu("comment-edit-submit-wrapper-" + id);
}
var ins = $(obj).val();
@@ -728,7 +772,7 @@ function collapseHeight() {
function liveUpdate() {
if(typeof profile_uid === 'undefined') profile_uid = false; /* Should probably be unified with channelId defined in head.tpl */
if((src === null) || (stopped) || (! profile_uid)) { $('.like-rotator').spin(false); return; }
- if(($('.comment-edit-text-full').length) || (in_progress)) {
+ if(($('.comment-edit-text.expanded').length) || (in_progress)) {
if(livetime) {
clearTimeout(livetime);
}
@@ -1312,9 +1356,10 @@ Array.prototype.remove = function(item) {
return this.push.apply(this, rest);
};
-
$(document).ready(function() {
+ $(document).on('click focus', '.comment-edit-form', handle_comment_form);
+
jQuery.timeago.settings.strings = {
prefixAgo : aStr['t01'],
prefixFromNow : aStr['t02'],
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 37277b612..621fa2781 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1073,16 +1073,11 @@ img.mail-conv-sender-photo {
}
-.comment-edit-text-empty,
-.comment-edit-text-full {
+.comment-edit-text {
border: 1px solid #ccc;
border-radius: $radius;
}
-.comment-edit-text-empty {
- color: gray;
-}
-
.divgrow-showmore {
display: block;
border-top: 1px dashed #ccc;
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index cba4cd3c5..e53c14024 100755
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -18,7 +18,7 @@
{{$anon_extras}}
</div>
{{/if}}
- <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpenUI(this,{{$id}});" onBlur="commentCloseUI(this,{{$id}});" ondragenter="linkdropper(event);" ondragleave="linkdropexit(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >{{$comment}}</textarea>
+ <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text comment-edit-text-empty" placeholder="{{$comment}}" name="body" ondragenter="linkdropper(event);" ondragleave="linkdropexit(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" ></textarea>
{{if $qcomment}}
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});" >
<option value=""></option>