Foxy.io's "Make Zoho Desk Actually Usable" Userscript

zohodesk.foxyio.user.js

// ==UserScript==
// @name         Foxy.io's "Make Zoho Desk Actually Usable" Userscript
// @downloadUrl  https://gist.github.com/brettflorio/db0701fa5a78119924b67bc4b1b2673b
// @updateUrl    https://gist.github.com/brettflorio/db0701fa5a78119924b67bc4b1b2673b
// @namespace    http://support.foxy.io/
// @version      0.2.3
// @description  Trying to make Zoho Desk a little more tolerable.
// @author       Foxy.io
// @match        https://support.foxy.io/*
// @grant        GM_addStyle
// @require      https://cdn.statically.io/gh/jaywcjlove/hotkeys/master/dist/hotkeys.min.js
// ==/UserScript==

"use strict";

/* CSS!!! */
// Pastel colour scheme
GM_addStyle(".comment-add-box { border-left:2em solid #F9F0C1 !important; } ");

function canAccessIframe(iframe) {
  try {
    return Boolean(iframe.contentDocument);
  } catch (e) {
    return false;
  }
}

const resetFocus = () => {
  console.log("Resetting focus. Was on", document.activeElement);
  // We don't have callbacks for any of the other events,
  // and clicking seems to work. `.focus()` on the body just doesn't.
  document.querySelector("body").click({ preventScroll: true });
  setTimeout(() => {
    document.querySelector("body").click({ preventScroll: true }); // We don't have callbacks, so this hopefully should work.
  }, 1000);
};

const recentActivityTweak = async () => {
  const supportView = document.getElementById("supportview");
  const reqtimeline = document.getElementById("reqtimeline");
  const reqrpdata = document.getElementById("reqrpdata");
  const timelineIcon = document.getElementById("lhs-timeline");

  if (reqtimeline && reqtimeline.classList.contains("hide") && timelineIcon) {
    timelineIcon.click();
    reqtimeline.classList.remove("hide");
  }

  if (supportView && reqtimeline && reqrpdata) {
    reqrpdata.insertBefore(supportView, reqtimeline);
  }

  // Hide extra stuff
  document
    .querySelectorAll('[sectionanme="Ticket Information"]')
    .forEach((el) => {
      el.style.display = "none";
    });
  document.querySelectorAll('[label="Language"]').forEach((el) => {
    el.style.display = "none";
  });
};

const closeTicket = (e) => {
  console.log("Closing ticket.", e);
  document.getElementById("close-ticket").click();
  resetFocus();
};

const markUnassigned = (e) => {
  console.log("Marking unassigned.", e);
  document.querySelectorAll("div.mark_assi")[0].click();
  resetFocus();
};

const closeTagDialog = (e) => {
  console.log("Getting out of tags.", e);
  document.querySelectorAll(".fol_close")[0].click();
  resetFocus();
};

const showTags = () => {
  let tags = [];
  document.querySelectorAll(".tagBody").forEach((tag) => {
    tags.push(tag.innerText.replace(/ x/, "").trim());
  });
  let tagContainer = document.getElementById("tag-count");
  if (tagContainer) tagContainer.innerHTML = `(${tags.join(" ")})`;
};
showTags();

const submitComment = (e) => {
  console.log("Submitting comment.", e);
  // let commentId = e.view.frameElement.id.replace(/commentConv_/, "");
  // if (!commentId) {
  //   console.log("Hrm… No ID on the target iframe?");
  //   return false;
  // }

  // let parentDocument;
  // for (let i = 0; i < e.path.length; i++) {
  //   const path = e.path[i];
  //   if (path.window) {
  //     parentDocument = path.parent.document;
  //   }
  // }
  // eval(
  //   parentDocument
  //     .getElementById(`save_comment_${commentId}`)
  //     .getAttribute("onclick")
  // );
  resetFocus();
};

const init = () => {
  setInterval(recentActivityTweak, 2000);
};

(function () {
  init();

  App.instance.on("ticket_Shift", function (data) {
    init();
  });

  const hotkeys = window.hotkeys;

  // Save Comment: Ctrl/Cmd+Enter
  // TODO: make this work in the iframe
  hotkeys(["command+return", "ctrl+enter"], "comment", submitComment);

  // Assigning
  hotkeys("escape", "assigning", markUnassigned);

  // Tags
  hotkeys("shift+escape", "tags", closeTagDialog);

  // Close Ticket
  hotkeys("shift+x", closeTicket);

  setInterval(function () {
    let el = document.activeElement;
    let elTag = el.tagName.toLowerCase();
    let elId = el.id;
    let elClasses = el.classList;
    if (elTag === "iframe") {
      hotkeys.setScope("comment");
    } else if (elId === "ownersearchinpopup") {
      hotkeys.setScope("assigning");
    } else if (elId === "Tag") {
      hotkeys.setScope("tags");
    } else {
      hotkeys.setScope("all");
    }
  }, 250);

  setInterval(function () {
    showTags();
  }, 10000);
})();