diff options
| -rw-r--r-- | Zotlabs/Lib/ThreadItem.php | 6 | ||||
| -rw-r--r-- | view/css/conversation.css | 15 | ||||
| -rw-r--r-- | view/js/main.js | 75 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 7 | ||||
| -rwxr-xr-x | view/tpl/comment_item.tpl | 2 |
5 files changed, 70 insertions, 35 deletions
diff --git a/Zotlabs/Lib/ThreadItem.php b/Zotlabs/Lib/ThreadItem.php index 313001cc7..f9565d339 100644 --- a/Zotlabs/Lib/ThreadItem.php +++ b/Zotlabs/Lib/ThreadItem.php @@ -758,9 +758,9 @@ class ThreadItem { '$sourceapp' => \App::$sourcename, '$observer' => get_observer_hash(), '$anoncomments' => (($conv->get_mode() === 'channel' && perm_is_allowed($conv->get_profile_owner(),'','post_comments')) ? true : false), - '$anonname' => [ 'anonname', t('Your full name (required)'),'','','','onBlur="commentCloseUI(this,\'' . $this->get_id() . '\')"' ], - '$anonmail' => [ 'anonmail', t('Your email address (required)'),'','','','onBlur="commentCloseUI(this,\'' . $this->get_id() . '\')"' ], - '$anonurl' => [ 'anonurl', t('Your website URL (optional)'),'','','','onBlur="commentCloseUI(this,\'' . $this->get_id() . '\')"' ] + '$anonname' => [ 'anonname', t('Your full name (required)') ], + '$anonmail' => [ 'anonmail', t('Your email address (required)') ], + '$anonurl' => [ 'anonurl', t('Your website URL (optional)') ] )); return $comment_box; 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> |