Skip to content

Commit

Permalink
Draft: fix #24 (#53)
Browse files Browse the repository at this point in the history 
* fix #24

* first try

* fix move popup

* fix insext popup

* fix position popup and default

---------

Co-authored-by: olivier Dufour <[email protected]>
  • Loading branch information
@Dufgui @dufoli
Dufgui and dufoli authored Apr 17, 2024
1 parent 7cf9d65 commit 8172fc0
Showing 1 changed file with 91 additions and 29 deletions.
120 changes: 91 additions & 29 deletions addon/button.js
View file
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

0 comments on commit 8172fc0

Please sign in to comment.