Implements event delegation, fixes nitsvisual-review-script

1 files changed, 96 insertions, 120 deletions

diff --git a/public/visual-review-toolbar.js b/public/visual-review-toolbar.js
index 781fc1444f3..166d4a72cf7 100644
--- a/public/visual-review-toolbar.js
+++ b/public/visual-review-toolbar.js
@@ -127,6 +127,10 @@ const inputStyles = `
   max-width: 17rem;
 `;
 
+const svgInnerStyles = `
+  pointer-events: none;
+`;
+
 const wrapperClosedStyles = `
   max-width: 3.4rem;
   max-height: 3.4rem;
@@ -157,6 +161,10 @@ const wrapperStyles = `
 `;
 
 const gitlabStyles = `
+  #gitlab-collapse > * {
+    ${svgInnerStyles}
+  }
+
   #gitlab-form-wrapper {
     ${formStyles}
   }
@@ -273,11 +281,11 @@ const comment = `
 `;
 
 const commentIcon = `
-  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/comment</title><path d="M4 11.132l1.446-.964A1 1 0 0 1 6 10h5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v6.132zM6.303 12l-2.748 1.832A1 1 0 0 1 2 13V5a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H6.303z" id="a"/></svg>
+  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/comment</title><path d="M4 11.132l1.446-.964A1 1 0 0 1 6 10h5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v6.132zM6.303 12l-2.748 1.832A1 1 0 0 1 2 13V5a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H6.303z" id="gitlab-comment-icon"/></svg>
 `
 
 const compressIcon = `
-  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/compress</title><path d="M5.27 12.182l-1.562 1.561a1 1 0 0 1-1.414 0h-.001a1 1 0 0 1 0-1.415l1.56-1.56L2.44 9.353a.5.5 0 0 1 .353-.854H7.09a.5.5 0 0 1 .5.5v4.294a.5.5 0 0 1-.853.353l-1.467-1.465zm6.911-6.914l1.464 1.464a.5.5 0 0 1-.353.854H8.999a.5.5 0 0 1-.5-.5V2.793a.5.5 0 0 1 .854-.354l1.414 1.415 1.56-1.561a1 1 0 1 1 1.415 1.414l-1.561 1.56z" id="a"/></svg>
+  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/compress</title><path d="M5.27 12.182l-1.562 1.561a1 1 0 0 1-1.414 0h-.001a1 1 0 0 1 0-1.415l1.56-1.56L2.44 9.353a.5.5 0 0 1 .353-.854H7.09a.5.5 0 0 1 .5.5v4.294a.5.5 0 0 1-.853.353l-1.467-1.465zm6.911-6.914l1.464 1.464a.5.5 0 0 1-.353.854H8.999a.5.5 0 0 1-.5-.5V2.793a.5.5 0 0 1 .854-.354l1.414 1.415 1.56-1.561a1 1 0 1 1 1.415 1.414l-1.561 1.56z" id="gitlab-compress-icon"/></svg>
 `;
 
 const collapseButton = `
@@ -319,72 +327,17 @@ function getBrowserId (sUsrAg) {
   return aKeys[nIdx];
 }
 
-function addCommentButtonEvent () {
-  // get user agent data
-  const { innerWidth,
-          innerHeight,
-          location: { href },
-          navigator: {
-            platform, userAgent
-          } } = window;
-  const browser = getBrowserId(userAgent);
-
-  const scriptName = 'ReviewAppToolbar';
-  const projectId = document.querySelector(`script[data-name='${scriptName}']`).getAttribute('data-project');
-  const discussionId = document.querySelector(`script[data-name='${scriptName}']`).getAttribute('data-discussion');
-  const mrUrl = document.querySelector(`script[data-name='${scriptName}']`).getAttribute('data-mr-url');
-  const commentButton = document.getElementById('gitlab-comment-button');
-
-  const details = {
-    href,
-    platform,
-    browser,
-    userAgent,
-    innerWidth,
-    innerHeight,
-    projectId,
-    discussionId,
-    mrUrl,
-  };
-
-  commentButton.onclick = postComment.bind(null, details);
-
-}
-
-function addCollapseEvent () {
-  const collapseButton = document.getElementById('gitlab-collapse');
-  collapseButton.onclick = collapseForm;
-}
-
 function addCommentForm () {
   const formWrapper = document.getElementById('gitlab-form-wrapper');
   formWrapper.innerHTML = comment;
-  removeButtonAndClickEvent('gitlab-login', authorizeUser);
-  addCommentButtonEvent();
-  addLogoutButtonEvent();
-}
-
-function addLoginButtonEvent () {
-  const loginButton = document.getElementById('gitlab-login');
-  if (loginButton) { loginButton.onclick = authorizeUser; }
-}
-
-function addLogoutButtonEvent () {
-  const logoutButton = document.getElementById('gitlab-logout-button');
-  if (logoutButton) { logoutButton.onclick = logoutUser; }
 }
 
 function addLoginForm () {
   const formWrapper = document.getElementById('gitlab-form-wrapper');
   formWrapper.innerHTML = login;
-  removeButtonAndClickEvent('gitlab-comment-button', authorizeUser);
-  removeButtonAndClickEvent('gitlab-logout-button', logoutUser);
-
-  addLoginButtonEvent();
 }
 
 function authorizeUser () {
-
   // Clear any old errors
   clearNote('gitlab-token');
 
@@ -402,7 +355,6 @@ function authorizeUser () {
 
   authSuccess(token);
   return;
-
 }
 
 function authSuccess (token) {
@@ -429,68 +381,52 @@ function confirmAndClear (discussionId) {
   commentButton.innerText = 'Feedback sent';
   note.innerText = `Your comment was successfully posted to issue #${discussionId}`;
 
-  // we can add a fade animation here
   setTimeout(resetCommentButton, 1000);
-
-}
-
-function collapseForm () {
-  const container = document.getElementById('gitlab-review-container');
-  const collapseButton = document.getElementById('gitlab-collapse');
-  const form = document.getElementById('gitlab-form-wrapper');
-
-  container.classList.replace('gitlab-open-wrapper', 'gitlab-closed-wrapper')
-  container.style.backgroundColor = 'rgba(255, 255, 255, 0)';
-  form.style.display = 'none';
-
-  collapseButton.classList.replace('gitlab-collapse-open', 'gitlab-collapse-closed')
-  collapseButton.innerHTML = commentIcon;
-  collapseButton.onclick = expandForm;
-}
-
-function expandForm () {
-  const container = document.getElementById('gitlab-review-container');
-  const collapseButton = document.getElementById('gitlab-collapse');
-  const form = document.getElementById('gitlab-form-wrapper');
-
-  container.classList.replace('gitlab-closed-wrapper', 'gitlab-open-wrapper')
-  container.style.backgroundColor = 'rgba(255, 255, 255, 1)';
-  form.style.display = 'flex';
-
-  collapseButton.classList.replace('gitlab-collapse-closed', 'gitlab-collapse-open')
-  collapseButton.innerHTML = compressIcon;
-  collapseButton.onclick = collapseForm;
 }
 
 function getInitialState () {
   const { localStorage } = window;
-  const loginView = {
-    content: login,
-    addEvent: addLoginButtonEvent
-  };
-  const commentView = {
-    content: comment,
-    addEvent: () => {
-      addCommentButtonEvent();
-      addLogoutButtonEvent();
-    }
-  };
 
   try {
     let token = localStorage.getItem('token');
 
     if (token) {
       data.token = token;
-      return commentView;
+      return comment;
     }
 
-    return loginView;
+    return login;
 
   } catch (err) {
-    return loginView;
+    return login;
   }
 }
 
+function getProjectDetails () {
+  const { innerWidth,
+          innerHeight,
+          location: { href },
+          navigator: {
+            platform, userAgent
+          } } = window;
+  const browser = getBrowserId(userAgent);
+
+  const scriptEl = document.getElementById('review-app-toolbar-script')
+  const { projectId, discussionId, mrUrl } = scriptEl.dataset;
+
+  return {
+    href,
+    platform,
+    browser,
+    userAgent,
+    innerWidth,
+    innerHeight,
+    projectId,
+    discussionId,
+    mrUrl,
+  };
+}
+
 function logoutUser () {
   const { localStorage } = window;
 
@@ -516,16 +452,15 @@ function postComment ({
   discussionId,
   mrUrl,
 }) {
-
   // Clear any old errors
   clearNote('gitlab-comment');
 
   setInProgressState();
 
-  const commentText = document.getElementById('gitlab-comment').value;
+  const commentText = document.getElementById('gitlab-comment').value.trim();
 
   if (!commentText) {
-    postError(`Your comment appears to be empty.`, 'gitlab-comment');
+    postError('Your comment appears to be empty.', 'gitlab-comment');
     resetCommentBox();
     return;
   }
@@ -553,20 +488,17 @@ function postComment ({
     body: JSON.stringify({ body }),
   })
   .then((response) => {
-
     if (response.ok) {
       confirmAndClear(discussionId);
       return;
     }
 
     throw new Error(`${response.status}: ${response.statusText}`)
-
   })
   .catch((err) => {
     postError(`The feedback was not sent successfully. Please try again. Error: ${err.message}`, 'gitlab-comment');
     resetCommentBox();
   });
-
 }
 
 function postError (message, inputId) {
@@ -577,13 +509,6 @@ function postError (message, inputId) {
   note.innerText = message;
 }
 
-function removeButtonAndClickEvent (buttonId, eventListener) {
-  const button = document.getElementById(buttonId);
-  if (button) {
-    button.removeEventListener(eventListener);
-  }
-}
-
 function resetCommentBox() {
   const commentBox = document.getElementById('gitlab-comment');
   const commentButton = document.getElementById('gitlab-comment-button');
@@ -620,7 +545,6 @@ function storeToken (token) {
 
   const { localStorage } = window;
 
-
   // All the browsers we support have localStorage, so let's silently fail
   // and go on with the rest of the functionality.
   try {
@@ -630,21 +554,73 @@ function storeToken (token) {
   }
 }
 
+function toggleForm () {
+  const container = document.getElementById('gitlab-review-container');
+  const collapseButton = document.getElementById('gitlab-collapse');
+  const form = document.getElementById('gitlab-form-wrapper');
+  const OPEN = 'open';
+  const CLOSED = 'closed';
+
+  const stateVals = {
+    [OPEN]: {
+      buttonClasses: ['gitlab-collapse-closed', 'gitlab-collapse-open'],
+      containerClasses: ['gitlab-closed-wrapper', 'gitlab-open-wrapper'],
+      icon: compressIcon,
+      display: 'flex',
+      backgroundColor: 'rgba(255, 255, 255, 1)',
+    },
+    [CLOSED]: {
+      buttonClasses: ['gitlab-collapse-open', 'gitlab-collapse-closed'],
+      containerClasses: ['gitlab-open-wrapper', 'gitlab-closed-wrapper'],
+      icon: commentIcon,
+      display: 'none',
+      backgroundColor: 'rgba(255, 255, 255, 0)',
+    },
+  }
+
+  const nextState = collapseButton.classList.contains('gitlab-collapse-open') ? CLOSED : OPEN;
+
+  container.classList.replace(...stateVals[nextState].containerClasses);
+  container.style.backgroundColor = stateVals[nextState].backgroundColor;
+  form.style.display = stateVals[nextState].display;
+  collapseButton.classList.replace(...stateVals[nextState].buttonClasses);
+  collapseButton.innerHTML = stateVals[nextState].icon;
+}
 
 ///////////////////////////////////////////////
 ///////////////// INJECTION //////////////////
 ///////////////////////////////////////////////
 
-window.addEventListener('load', () => {
-  const { content, addEvent } = getInitialState();
+function noop() {};
+
+const genEventLookup = (projectDetails) => ({target: { id }}) => {
+  switch (id) {
+    case 'gitlab-collapse':
+      return toggleForm;
+    case 'gitlab-comment-button':
+      return postComment.bind(null, projectDetails);
+    case 'gitlab-login':
+      return authorizeUser;
+    case 'gitlab-logout-button':
+      return logoutUser;
+    default:
+      return noop;
+  }
+};
 
+window.addEventListener('load', () => {
+  const content = getInitialState();
+  const eventLookup = genEventLookup(getProjectDetails());
   const container = document.createElement('div');
+
   container.setAttribute('id', 'gitlab-review-container');
   container.insertAdjacentHTML('beforeend', collapseButton);
   container.insertAdjacentHTML('beforeend', form(content));
 
   document.body.insertBefore(container, document.body.firstChild);
   addStylesheet();
-  addEvent();
-  addCollapseEvent();
+
+  document.getElementById('gitlab-review-container').addEventListener('click', (event) => {
+    eventLookup(event)();
+  });
 });