Merge pull request #2 from JohnRiv/Feb2021

Fix for extension not displayed on page after Feb 19, 2021 update
JohnRiv · Feb 22, 2021 · c77ba13 · c77ba13
2 parents 7979999 + d89212a
commit c77ba13
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 79 deletions.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,8 +1,8 @@
 {
   "name": "Recent Meeting Codes",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Adds buttons to launch recently used Meeting Codes to the Google Meet page for Google Classroom",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "content_scripts": [
     {
       "matches": [

diff --git a/extension/recentMeetingCodes.css b/extension/recentMeetingCodes.css
@@ -5,10 +5,10 @@
   opacity: 1;
   text-align :center;
   transition: box-shadow .03s linear, opacity .25s linear;
-  z-index: 4990;
+  z-index: 890;
   position: absolute;
   top: 70px;
-  left: 50px;
+  right: 47px;
   padding: 12px 0;
 }
 
@@ -50,15 +50,15 @@
   flex: 10;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  z-index: 4992;
+  z-index: 892;
   padding-left: 0;
 }
 
 .rmc-button .rmc-button__remove {
   flex: 1;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  z-index: 4991;
+  z-index: 891;
 }
 
 .rmc-button .rmc-button__remove::before {
@@ -76,7 +76,7 @@
 .rmc-error {
   position: absolute;
   width: 33vw;
-  right: calc(-33vw - 6em);
+  right: 300px;
   top: 0;
   background:#fff;
   box-shadow: 0 1px 2px 0 rgba(60,64,67,0.6),0 2px 6px 2px rgba(60,64,67,0.3);
@@ -87,7 +87,7 @@
   text-align: left;
   transform: scale(0.1);
   opacity: 0;
-  transition: opacity 0.25s, transform 0.5s ease-out 0.1s;
+  transition: opacity 0.25s, transform 0.3s ease-out 0.1s;
 }
 
 .rmc-error h3, .rmc-error p {
@@ -106,9 +106,6 @@
 
 @media (max-width: 767px) {
   .rmc-list {
-    top: 290px;
-  }
-  .rmc-list__lowerForTablet {
-    top: 355px;
+    top: 180px;
   }
 }
diff --git a/extension/recentMeetingCodes.js b/extension/recentMeetingCodes.js
@@ -1,8 +1,8 @@
-const BUTTON_SELECTOR = 'div[role="button"]';
-const OPENER_TEXT = 'Join or start a meeting';
-const OPENER_TEXT_RESTRICTED = 'Use a meeting code';
-const MEETING_CODE_SELECTOR = '[data-keyboard-title="Use a meeting code"]';
-const MEETING_CODE_SUBMIT_TEXT = 'Continue';
+const BUTTON_SELECTOR = 'button[jsaction]';
+const MEETING_CODE_INPUT_SELECTOR = 'input[placeholder="Enter a code or nickname"]'; // input for meeting code
+// const MEETING_CODE_INPUT_SELECTOR_UNAUTH = 'input[placeholder="Enter meeting code"]';
+// const MEETING_CODE_INPUT_SELECTOR_PERSONAL = 'input[placeholder="Enter a code or link"]';
+const MEETING_CODE_SUBMIT_BTN_TEXT = 'Join'; // button that submits the form
 const STORAGE_KEY = 'recentMeetingCodes';
 const MAX_CODES = 15;
 const RMC_CONTAINER_CLASS = 'rmc-list';
@@ -14,41 +14,23 @@ const RMC_ERROR_TIMEOUT = 15;
 let rmcErrorTimeoutId;
 let errorContainer;
 
-const getMeetingCodeModalOpener = _ => {
-  return Array.from(document.querySelectorAll(BUTTON_SELECTOR)).find(node => (node.innerText.includes(OPENER_TEXT) || node.innerText.includes(OPENER_TEXT_RESTRICTED)));
-}
-
-const modalOpener = getMeetingCodeModalOpener();
-
-const launchMeeting = meetingCode => {
-  if (modalOpener && modalOpener.click) {
-    modalOpener.click();
-    setTimeout(submitMeetingCodeForm.bind(this, meetingCode), 250);
-  } else {
-    displayError(`Cannot open meeting`, "Try typing it yourself");
-  }
-}
+const meetingCodeInput = document.querySelector(MEETING_CODE_INPUT_SELECTOR);
 
 const getMeetingCodeFormSubmitButton = _ => {
-  return Array.from(document.querySelectorAll(BUTTON_SELECTOR)).find(node => node.innerText == MEETING_CODE_SUBMIT_TEXT);
-}
-
-const removeLastClass = elem => {
-  const lastClass = elem.classList.value.split(" ").pop();
-  elem.classList.remove(lastClass);
+  return Array.from(document.querySelectorAll(BUTTON_SELECTOR)).find(node => node.innerText == MEETING_CODE_SUBMIT_BTN_TEXT);
 }
 
 const submitMeetingCodeForm = meetingCode => {
-  const meetingCodeInput = document.querySelector(MEETING_CODE_SELECTOR);
   if (meetingCodeInput) {
     meetingCodeInput.value = meetingCode;
     const submitButton = getMeetingCodeFormSubmitButton();
     if (submitButton && submitButton.click) {
-      removeLastClass(submitButton);
       submitButton.tabIndex = 0;
-      submitButton.removeAttribute("aria-disabled");
+      submitButton.removeAttribute("disabled");
       submitButton.click();
-    }
+    } else {
+      displayError(`Cannot open meeting`, "Try typing it yourself and press Enter or Return");
+    }
   }
 }
 
@@ -72,7 +54,6 @@ const storagePush = value => {
 }
 
 const saveMeetingCode = _ => {
-  const meetingCodeInput = document.querySelector(MEETING_CODE_SELECTOR);
   if (meetingCodeInput) {
     storagePush(meetingCodeInput.value);
     rerenderButtons();
@@ -111,33 +92,19 @@ const handleMeetingCodeButtonClick = e => {
 
 const addMeetingCodeSubmitListeners = _ => {
   // when "Enter" is pressed while text input is focused
-  const meetingCodeInput = document.querySelector(MEETING_CODE_SELECTOR);
   if (meetingCodeInput) {
     meetingCodeInput.addEventListener("keydown", handleMeetingCodeKey);
   }
 
   const submitButton = getMeetingCodeFormSubmitButton();
   if (submitButton) {
-    // when "Enter" or "Space" is pressed while Continue "button" is focused
+    // when "Enter" or "Space" is pressed while MEETING_CODE_SUBMIT_BTN is focused
     submitButton.addEventListener("keydown", handleMeetingCodeButtonKey);
-    // when Continue "button" is clicked
+    // when MEETING_CODE_SUBMIT_BTN is clicked
     submitButton.addEventListener("click", handleMeetingCodeButtonClick);
   }
 }
 
-const handleModalOpened = e => {
-  if (e.type != "keydown" || ((e.type == "keydown") && (e.code == "Space" || e.code == "Enter"))) {
-    setTimeout(addMeetingCodeSubmitListeners, 250);
-  }
-}
-
-const addModalOpenListeners = _ => {
-  if (modalOpener && modalOpener.click) {
-    modalOpener.addEventListener("click", handleModalOpened);
-    modalOpener.addEventListener("keydown", handleModalOpened);
-  }
-}
-
 const getRecentMeetingCodes = _ => {
   const codes = localStorage.getItem(STORAGE_KEY);
   if (codes) {
@@ -154,7 +121,7 @@ const createMeetingCodeButton = code => {
   btn.classList.add("rmc-button__launch")
   btn.innerText = code;
   btn.title = "Launch Meet Code " + code;
-  btn.addEventListener("click", launchMeeting.bind(this, code));
+  btn.addEventListener("click", submitMeetingCodeForm.bind(this, code));
   const remove = document.createElement("button");
   remove.classList.add("rmc-button__remove");
   const removeSpan = document.createElement("span");
@@ -186,25 +153,10 @@ const displayError = (heading, msg) => {
   rmcErrorTimeoutId = window.setTimeout(hideError, RMC_ERROR_TIMEOUT * 1000);
 }
 
-const isHeightOfCWizLarger = _ => {
-  let val = false;
-  let cWizChild = modalOpener;
-  while (cWizChild && cWizChild.parentElement && cWizChild.parentElement.nodeName != "C-WIZ") {
-    cWizChild = cWizChild.parentElement;
-  }
-  if (cWizChild.offsetHeight > 175) {
-    val = true;
-  }
-  return val;
-}
-
 const addRecentMeetingCodes = _ => {
   const codes = getRecentMeetingCodes();
   const list = document.createElement("div");
   list.classList.add(RMC_CONTAINER_CLASS);
-  if (isHeightOfCWizLarger()) {
-    list.classList.add("rmc-list__lowerForTablet");
-  }
   const heading = document.createElement("h2");
   if (codes.length == 0) {
     heading.innerText = "Recently used Meeting Codes will appear here";
@@ -219,9 +171,9 @@ const addRecentMeetingCodes = _ => {
   codes.forEach(code => {
     list.appendChild(createMeetingCodeButton(code));
   });
-  const firstDivInBody = document.querySelector("div");
-  if (firstDivInBody) {
-    firstDivInBody.appendChild(list);
+  const googleHeader = document.querySelector("header");
+  if (googleHeader && googleHeader.parentElement) {
+    googleHeader.parentElement.appendChild(list);
   } else {
     document.body.appendChild(list);
   }
@@ -233,8 +185,8 @@ const rerenderButtons = _ => {
 }
 
 const initRecentMeetingCodesExtension = _ => {
-  if (modalOpener) {
-    addModalOpenListeners();
+  if (meetingCodeInput) {
+    addMeetingCodeSubmitListeners();
     addRecentMeetingCodes();
   }
 }