Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft: fix #24 #53

Merged
merged 5 commits into from
Apr 17, 2024
Merged

Draft: fix #24 #53

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28481d0
fix #24
Dufgui Apr 7, 2024
6b4f69c
first try
Dufgui Apr 14, 2024
372ec89
fix move popup
dufoli Apr 14, 2024
3bffc29
fix insext popup
Dufgui Apr 16, 2024
d5e30ce
fix position popup and default
Dufgui Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 91 additions & 29 deletions addon/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ function initButton(sfHost, inInspector) {
btn.tabIndex = 0;
btn.accessKey = "i";
btn.title = "Show Salesforce details (Alt+I / Shift+Alt+I)";
rootEl.appendChild(btn);
loadPopup();
rootEl.appendChild(btn);
document.body.appendChild(rootEl);

addFlowScrollability();
Expand Down Expand Up @@ -81,22 +81,71 @@ function initButton(sfHost, inInspector) {
}
}

function setRootCSSProperties(rootElement, buttonElement) {
function updateButtonCSSPropertiesFromStorage(rootElement, buttonElement, popupEl) {
let popupArrowOrientation = iFrameLocalStorage.popupArrowOrientation ? iFrameLocalStorage.popupArrowOrientation : "vertical";
let popupArrowPosition = iFrameLocalStorage.popupArrowPosition ? (iFrameLocalStorage.popupArrowPosition + "%") : "122px";
let img = document.createElement("img");
let popupArrowPosition = iFrameLocalStorage.popupArrowPosition ? (iFrameLocalStorage.popupArrowPosition) : "15";
updateButtonCSSPropertiesIfNeeded(rootElement, buttonElement, popupEl, popupArrowOrientation, popupArrowPosition);
}

function updateButtonCSSPropertiesIfNeeded(rootElement, buttonElement, popupEl, popupArrowOrientation, popupArrowPosition) {

if (popupArrowOrientation == "vertical") {
rootElement.style.right = 0;
rootElement.style.top = popupArrowPosition;
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAA40lEQVQoz2P4//8/AzpWzGj6L59U/V8urgxMg/g4FUn6J/+X9E38LxWc8V8htR67IpCkuGfMfxCQjSpENRFFkXvk/1+/foGxQloDSD0DVkVfvnyBY7hCdEVv3rxBwXCFIIdKh2WDFT1+/BgDo1qd2fL/1q1bWDFcoW5xz3/Xppn/oycu/X/x4kUMDFeoWdD136R8wn+f9rlgxSdOnEDBKFajK96/fz8coyjEpnj79u1gjKEQXXFE/+L/Gzdu/G9WMfG/am4HZlzDFAf3LPwfOWEJWBPIwwzYUg9MsXXNFDAN4gMAmASShdkS4AcAAAAASUVORK5CYII=";
buttonElement.classList.add("insext-btn-vertical");
rootElement.style.top = popupArrowPosition + "%";

popupEl.classList.remove("insext-popup-horizontal");
popupEl.classList.remove("insext-popup-horizontal-left");
popupEl.classList.remove("insext-popup-horizontal-right");
popupEl.classList.remove("insext-popup-horizontal-centered");

popupEl.classList.add("insext-popup-vertical");
if (popupArrowPosition >= 55) {
popupEl.classList.add("insext-popup-vertical-up");
} else {
popupEl.classList.remove("insext-popup-vertical-up");
}

if (!(buttonElement.classList.contains("insext-btn-vertical"))) {
rootElement.style.right = "0px";
buttonElement.classList.add("insext-btn-vertical");
buttonElement.classList.remove("insext-btn-horizontal");
buttonElement.innerText = "";
let img = document.createElement("img");
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAA40lEQVQoz2P4//8/AzpWzGj6L59U/V8urgxMg/g4FUn6J/+X9E38LxWc8V8htR67IpCkuGfMfxCQjSpENRFFkXvk/1+/foGxQloDSD0DVkVfvnyBY7hCdEVv3rxBwXCFIIdKh2WDFT1+/BgDo1qd2fL/1q1bWDFcoW5xz3/Xppn/oycu/X/x4kUMDFeoWdD136R8wn+f9rlgxSdOnEDBKFajK96/fz8coyjEpnj79u1gjKEQXXFE/+L/Gzdu/G9WMfG/am4HZlzDFAf3LPwfOWEJWBPIwwzYUg9MsXXNFDAN4gMAmASShdkS4AcAAAAASUVORK5CYII=";
buttonElement.appendChild(img);
}
} else {
rootElement.style.bottom = "0px";
rootElement.style.right = popupArrowPosition;
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAD6ADAAQAAAABAAAACgAAAADdC3pnAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABKElEQVQoFWNgwAI0C7r+6xb3/AdJKaTW/1fMaAKz0ZUyoguANHKzszEIcnMy3Hn+muHX2+cMLDwCDExs7Az3Z9ShqGdC1gzTKCHAyyDGz8OwszCM4c/Hdwy/P75l+PfrJwO6C+CakTXyc3EwlDnogM09M6eL4e+Xj1gNAGtG15hrrozsIIarSydjNYARXWOKnhQDJycnBubg4GBQDk5lYObhZ2DlFwaHARMocORFBRl4ONgYYtSEUGxE5zzevJDh77cvwEB8AQ4DJnZWFgY2FmaGSCU+dLVY+S+2LWZg+PeP4f+f3wwsP3//Yfj8/SdD6/G3DK/evceqAVkQFHiMwGhjZGFlYPn68xfDwzfvGX78+sPwYFYDSjwia4KxQdHF/JePgZGZmQEASqV1t0W3n+oAAAAASUVORK5CYII=";
buttonElement.classList.add("insext-btn-horizontal");
// horizontal
rootElement.style.right = popupArrowPosition + "%";

if (popupArrowPosition < 8) {
popupEl.classList.add("insext-popup-horizontal-left");
popupEl.classList.remove("insext-popup-horizontal-right");
popupEl.classList.remove("insext-popup-horizontal-centered");
} else if (popupArrowPosition >= 90) {
popupEl.classList.remove("insext-popup-horizontal-left");
popupEl.classList.add("insext-popup-horizontal-right");
popupEl.classList.remove("insext-popup-horizontal-centered");
} else {
popupEl.classList.remove("insext-popup-horizontal-left");
popupEl.classList.remove("insext-popup-horizontal-right");
popupEl.classList.add("insext-popup-horizontal-centered");
}

popupEl.classList.add("insext-popup-horizontal");
popupEl.classList.remove("insext-popup-vertical");
popupEl.classList.remove("insext-popup-vertical-up");

if (!(buttonElement.classList.contains("insext-btn-horizontal"))) {
rootElement.style.bottom = "0px";
rootElement.style.top = "";
buttonElement.classList.add("insext-btn-horizontal");
buttonElement.classList.remove("insext-btn-vertical");
buttonElement.innerText = "";
let img = document.createElement("img");
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAD6ADAAQAAAABAAAACgAAAADdC3pnAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABKElEQVQoFWNgwAI0C7r+6xb3/AdJKaTW/1fMaAKz0ZUyoguANHKzszEIcnMy3Hn+muHX2+cMLDwCDExs7Az3Z9ShqGdC1gzTKCHAyyDGz8OwszCM4c/Hdwy/P75l+PfrJwO6C+CakTXyc3EwlDnogM09M6eL4e+Xj1gNAGtG15hrrozsIIarSydjNYARXWOKnhQDJycnBubg4GBQDk5lYObhZ2DlFwaHARMocORFBRl4ONgYYtSEUGxE5zzevJDh77cvwEB8AQ4DJnZWFgY2FmaGSCU+dLVY+S+2LWZg+PeP4f+f3wwsP3//Yfj8/SdD6/G3DK/evceqAVkQFHiMwGhjZGFlYPn68xfDwzfvGX78+sPwYFYDSjwia4KxQdHF/JePgZGZmQEASqV1t0W3n+oAAAAASUVORK5CYII=";
buttonElement.appendChild(img);
}
}
buttonElement.appendChild(img);
}

function loadPopup() {
Expand All @@ -108,8 +157,34 @@ function initButton(sfHost, inInspector) {
}
});

let popupSrc = chrome.runtime.getURL("popup.html");
let popupEl = document.createElement("iframe");

function onbuttonmove(event) {
let popupArrowOrientation;
let popupArrowPosition;
// if above the diagonal
if (event.clientY > (event.clientX / document.documentElement.clientWidth) * document.documentElement.clientHeight) {
popupArrowOrientation = "horizontal";
popupArrowPosition = 100 - Math.floor(event.clientX * 100 / document.documentElement.clientWidth);
} else {
popupArrowOrientation = "vertical";
popupArrowPosition = Math.floor(event.clientY * 100 / document.documentElement.clientHeight);
}
localStorage.setItem("popupArrowOrientation", popupArrowOrientation);
localStorage.setItem("popupArrowPosition", popupArrowPosition);
updateButtonCSSPropertiesIfNeeded(rootEl, btn, popupEl, popupArrowOrientation, popupArrowPosition);

}
function endmove(event) {
window.removeEventListener("mousemove", onbuttonmove);
window.removeEventListener("mouseup", endmove);
}
btn.addEventListener("mousedown", (event) => {
window.addEventListener("mousemove", onbuttonmove);
window.addEventListener("mouseup", endmove);
});

let popupSrc = chrome.runtime.getURL("popup.html");
popupEl.className = "insext-popup";
popupEl.classList.add(localStorage.getItem("popupArrowOrientation") == "horizontal" ? "insext-popup-horizontal" : "insext-popup-vertical");
popupEl.src = popupSrc;
Expand All @@ -120,21 +195,8 @@ function initButton(sfHost, inInspector) {
if (e.data.insextInitRequest) {
// Set CSS classes for arrow button position
iFrameLocalStorage = e.data.iFrameLocalStorage;
popupEl.classList.add(iFrameLocalStorage.popupArrowOrientation == "horizontal" ? "insext-popup-horizontal" : "insext-popup-vertical");
if (iFrameLocalStorage.popupArrowOrientation == "horizontal") {
if (iFrameLocalStorage.popupArrowPosition < 8) {
popupEl.classList.add("insext-popup-horizontal-left");
} else if (iFrameLocalStorage.popupArrowPosition >= 90) {
popupEl.classList.add("insext-popup-horizontal-right");
} else {
popupEl.classList.add("insext-popup-horizontal-centered");
}
} else if (iFrameLocalStorage.popupArrowOrientation == "vertical") {
if (iFrameLocalStorage.popupArrowPosition >= 55) {
popupEl.classList.add("insext-popup-vertical-up");
}
}
setRootCSSProperties(rootEl, btn);

updateButtonCSSPropertiesFromStorage(rootEl, btn, popupEl);
addFlowScrollability(popupEl);
popupEl.contentWindow.postMessage({
insextInitResponse: true,
Expand Down