ep_comments_page 1.0.0 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Adds comments on sidebar and link it to the text.  For no-skin use ep_page_view.",
   "name": "ep_comments_page",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": {
     "name": "Nicolas Lescop",
     "email": "limplementeur@gmail.com"

package/static/js/index.js

@@ -901,12 +901,6 @@ EpComments.prototype.displayNewCommentForm = function () {
   // Write the text to the changeFrom form
   $('#newComment').find('.from-value').text(selectedText);
 
-  // Display form
-  setTimeout(() => {
-    const position = getXYOffsetOfRep(rep);
-    newComment.showNewCommentPopup(position);
-  });
-
   // Check if the first element selected is visible in the viewport
   const $firstSelectedElement = this.getFirstElementSelected();
   const firstSelectedElementInViewport = this.isElementInViewport($firstSelectedElement);
@@ -915,8 +909,9 @@ EpComments.prototype.displayNewCommentForm = function () {
     this.scrollViewportIfSelectedTextIsNotVisible($firstSelectedElement);
   }
 
-  // Adjust focus on the form
-  $('#newComment').find('.comment-content').focus();
+  // Display form
+  const position = getXYOffsetOfRep(rep);
+  newComment.showNewCommentPopup(position);
 };
 
 EpComments.prototype.scrollViewportIfSelectedTextIsNotVisible = function ($firstSelectedElement) {

package/static/js/newComment.js

@@ -2,6 +2,8 @@
 
 const commentL10n = require('ep_comments_page/static/js/commentL10n');
 
+let $newComment = $();
+
 // Create a comment object with data filled on the given form
 const buildCommentFrom = (form) => {
   const text = form.find('.comment-content').val();
@@ -26,15 +28,16 @@ const cancelNewComment = () => {
 // Callback for new comment Submit
 const submitNewComment = (callback) => {
   const index = 0;
-  const form = $('#newComment');
-  const comment = buildCommentFrom(form);
+  const comment = buildCommentFrom($newComment);
   if (comment.text.length > 0 || comment.changeTo && comment.changeTo.length > 0) {
-    form.find('.comment-content, .to-value').removeClass('error');
+    $newComment.find('.comment-content, .to-value').removeClass('error');
     hideNewCommentPopup();
     callback(comment, index);
   } else {
-    if (comment.text.length === 0) form.find('.comment-content').addClass('error');
-    if (comment.changeTo && comment.changeTo.length === 0) form.find('.to-value').addClass('error');
+    if (comment.text.length === 0) $newComment.find('.comment-content').addClass('error');
+    if (comment.changeTo && comment.changeTo.length === 0) {
+      $newComment.find('.to-value').addClass('error');
+    }
   }
   return false;
 };
@@ -42,36 +45,35 @@ const submitNewComment = (callback) => {
 /* ***** Public methods: ***** */
 
 const localizenewCommentPopup = () => {
-  const newCommentPopup = $('#newComment');
-  if (newCommentPopup.length !== 0) commentL10n.localize(newCommentPopup);
+  if ($newComment.length !== 0) commentL10n.localize($newComment);
 };
 
 // Insert new Comment Form
 const insertNewCommentPopupIfDontExist = (comment, callback) => {
-  $('#newComment').remove();
+  $newComment.remove();
 
   comment.commentId = '';
-  const newCommentPopup = $('#newCommentTemplate').tmpl(comment);
-  newCommentPopup.appendTo($('#editorcontainerbox'));
+  $newComment = $('#newCommentTemplate').tmpl(comment);
+  $newComment.appendTo($('#editorcontainerbox'));
 
   localizenewCommentPopup();
 
   // Listen for include suggested change toggle
-  $('#newComment').find('.suggestion-checkbox').change(function () {
-    $('#newComment').find('.suggestion').toggle($(this).is(':checked'));
+  $newComment.find('.suggestion-checkbox').change(function () {
+    $newComment.find('.suggestion').toggle($(this).is(':checked'));
   });
 
   // Cancel btn
-  newCommentPopup.find('#comment-reset').on('click', () => {
+  $newComment.find('#comment-reset').on('click', () => {
     cancelNewComment();
   });
   // Create btn
-  $('#newComment').on('submit', (e) => {
+  $newComment.on('submit', (e) => {
     e.preventDefault();
     return submitNewComment(callback);
   });
 
-  return newCommentPopup;
+  return $newComment;
 };
 
 const showNewCommentPopup = (position) => {
@@ -82,27 +84,28 @@ const showNewCommentPopup = (position) => {
     left = $('.toolbar .addComment').offset().left;
   }
   const top = position[1];
-  $('#newComment').css('left', left);
+  $newComment.css('left', left);
   if (left === position[0]) {
-    $('#newComment').css('top', top);
+    $newComment.css('top', top);
   }
   // Reset form to make sure it is all clear
-  $('#newComment').find('.suggestion-checkbox').prop('checked', false).trigger('change');
-  $('#newComment').find('textarea').val('');
-  $('#newComment').find('.comment-content, .to-value').removeClass('error');
+  $newComment.find('.suggestion-checkbox').prop('checked', false).trigger('change');
+  $newComment.find('textarea').val('');
+  $newComment.find('.comment-content, .to-value').removeClass('error');
 
   // Show popup
-  $('#newComment').addClass('popup-show');
+  $newComment.addClass('popup-show');
+  $newComment.find('.comment-content').focus();
 
   // mark selected text, so it is clear to user which text range the comment is being applied to
   pad.plugins.ep_comments_page.preCommentMarker.markSelectedText();
 };
 
 const hideNewCommentPopup = () => {
-  $('#newComment').removeClass('popup-show');
+  $newComment.removeClass('popup-show');
 
   // force focus to be lost, so virtual keyboard is hidden on mobile devices
-  $('#newComment').find(':focus').blur();
+  $newComment.find(':focus').blur();
 
   // unmark selected text, as now there is no text being commented
   pad.plugins.ep_comments_page.preCommentMarker.unmarkSelectedText();

package/static/tests/frontend/specs/newComment.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const utils = require('../utils');
+
+before(async function () {
+  await utils.aNewPad();
+  helper.padInner$('div').first()
+      .sendkeys('{selectall}')
+      .sendkeys('{del}')
+      .text('commented text')
+      .sendkeys('{selectall}');
+});
+
+it('new comment button focuses on comment textarea', async function () {
+  helper.padChrome$('.addComment').click();
+  expect(helper.padChrome$.document.activeElement)
+      .to.be(helper.padChrome$('#newComment').find('.comment-content')[0]);
+});