Reimplemented caret position manipulation. Move caret inside the bbcode tags if inserted

boards/static/js/panel.js

@@ -1,60 +1,60 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 /**
  * Add the desired characters to the start and end of selection.
  *
  * @param start Start (left) text
  * @param end End (right) text
  */
 function addMarkToMsg(start, end) {
     var textareas = getPostTextarea();
 
     for (var i = 0; i < textareas.length; i++) {
         var textarea = textareas[i];
 
-        if (document.selection) {
-            textarea.focus();
-
-            var sel = document.selection.createRange();
-            sel.text = start + sel.text + end;
-        } else if (textarea.selectionStart || textarea.selectionStart == '0') {
+        if (textarea.selectionStart || textarea.selectionStart == '0') {
             textarea.focus();
 
             var startPos = textarea.selectionStart;
             var endPos = textarea.selectionEnd;
 
             var oldValue = textarea.value;
             textarea.value = oldValue.substring(0, startPos) + start +
                     oldValue.substring(startPos, endPos) + end +
                     oldValue.substring(endPos, oldValue.length);
+
+            if (startPos == endPos) {
+                var newPos = startPos + start.length;
+                textarea.setSelectionRange(newPos, newPos);
+            }
         } else {
             textarea.value += start + end;
         }
     }
 
     return false;
 }
 

boards/static/js/thread.js

@@ -1,168 +1,160 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var CLOSE_BUTTON = '#form-close-button';
 var REPLY_TO_MSG = '.reply-to-message';
 var REPLY_TO_MSG_ID = '#reply-to-message-id';
 
 var $html = $("html, body");
 
 function moveCaretToEnd(el) {
-        if (typeof el.selectionStart == "number") {
-            el.selectionStart = el.selectionEnd = el.value.length;
-        } else if (typeof el.createTextRange != "undefined") {
-            el.focus();
-            var range = el.createTextRange();
-            range.collapse(false);
-            range.select();
-        }
+    var newPos = el.val().length;
+    el[0].setSelectionRange(newPos, newPos);
 }
 
 function getForm() {
     return $('.post-form-w');
 }
 
 function resetFormPosition() {
     var form = getForm();
     form.insertAfter($('.thread'));
 
     $(CLOSE_BUTTON).hide();
     $(REPLY_TO_MSG).hide();
 }
 
 function showFormAfter(blockToInsertAfter) {
     var form = getForm();
     form.insertAfter(blockToInsertAfter);
 
     $(CLOSE_BUTTON).show();
     form.show();
     $(REPLY_TO_MSG_ID).text(blockToInsertAfter.attr('id'));
     $(REPLY_TO_MSG).show();
 }
 
 function addQuickReply(postId) {
     // If we click "reply" on the same post, it means "cancel"
     if (getForm().prev().attr('id') == postId) {
         resetFormPosition();
     } else {
         var blockToInsert = null;
         var textAreaJq = getPostTextarea();
         var postLinkRaw = '[post]' + postId + '[/post]'
         var textToAdd = '';
 
         if (postId != null) {
             var post = $('#' + postId);
 
             // If this is not OP, add reflink to the post. If there already is
             // the same reflink, don't add it again.
             var postText = textAreaJq.val();
             if (!post.is(':first-child') && postText.indexOf(postLinkRaw) < 0) {
                 // Insert line break if none is present.
                 if (postText.length > 0 && !postText.endsWith('\n') && !postText.endsWith('\r')) {
                     textToAdd += '\n';
                 }
                 textToAdd += postLinkRaw + '\n';
             }
 
             textAreaJq.val(textAreaJq.val()+ textToAdd);
             blockToInsert = post;
         } else {
             blockToInsert = $('.thread');
         }
         showFormAfter(blockToInsert);
     
         textAreaJq.focus();
 
-        var textarea = document.getElementsByTagName('textarea')[0];
-        moveCaretToEnd(textarea);
+        moveCaretToEnd(textAreaJq);
     }
 }
 
 function addQuickQuote() {
     var textAreaJq = getPostTextarea();
 
     var quoteButton = $("#quote-button");
     var postId = quoteButton.attr('data-post-id');
     if (postId != null && getForm().prev().attr('id') != postId) {
         addQuickReply(postId);
     }
 
     var textToAdd = '';
     var selection = window.getSelection().toString();
     if (selection.length == 0) {
         selection = quoteButton.attr('data-text');
     }
     if (selection.length > 0) {
         textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     textAreaJq.val(textAreaJq.val() + textToAdd);
 
     textAreaJq.focus();
 
-    var textarea = document.getElementsByTagName('textarea')[0];
-    moveCaretToEnd(textarea);
+    moveCaretToEnd(textAreaJq);
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }
 
 function showQuoteButton() {
     var selection = window.getSelection().getRangeAt(0).getBoundingClientRect();
     var quoteButton = $("#quote-button");
     if (selection.width > 0) {
         // quoteButton.offset({ top: selection.top - selection.height, left: selection.left });
         quoteButton.css({top: selection.top + $(window).scrollTop() - 30, left: selection.left});
         quoteButton.show();
 
         var text = window.getSelection().toString();
         quoteButton.attr('data-text', text);
 
         var rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
         var element = $(document.elementFromPoint(rect.x, rect.y));
         var postId = null;
         if (element.hasClass('post')) {
             postId = element.attr('id');
         } else {
             var postParent = element.parents('.post');
             if (postParent.length > 0) {
                 postId = postParent.attr('id');
             }
         }
         quoteButton.attr('data-post-id', postId);
     } else {
         quoteButton.hide();
     }
 }
 
 $(document).ready(function() {
     $('body').on('mouseup', function() {
         showQuoteButton();
     });
     $("#quote-button").click(function() {
         addQuickQuote();
     })
 });