Added a context menu, Made the options button auto hide, and Made the options menu popup the context menu.
This commit is contained in:
parent
4ab4b8d480
commit
51819ac81b
@ -98,3 +98,43 @@
|
|||||||
.flashfireBlocked .action:hover {
|
.flashfireBlocked .action:hover {
|
||||||
opacity: 0.5 !important;
|
opacity: 0.5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flashfireContextMenu {
|
||||||
|
position: absolute !important;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
-webkit-user-select: none !important;
|
||||||
|
color: #000 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
z-index: 3 !important;
|
||||||
|
-webkit-box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
|
||||||
|
list-style: none !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
padding: 4px 0 !important;
|
||||||
|
-webkit-transition-property: opacity;
|
||||||
|
-webkit-transition-duration: 0.15s;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flashfireMenuItem {
|
||||||
|
padding: 2px 16px !important;
|
||||||
|
-webkit-user-select: none !important;
|
||||||
|
cursor: default !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-family: "Lucida Grande", Helvetica, sans-serif !important;
|
||||||
|
}
|
||||||
|
.flashfireMenuItem:hover {
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(94, 121, 253)), to(rgb(29, 60, 252))) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
padding-top: 1px !important;
|
||||||
|
padding-bottom: 1px !important;
|
||||||
|
border-top: 1px solid rgb(84, 122, 244) !important;
|
||||||
|
border-bottom: 1px solid rgb(16, 39, 242) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flashfireMenuSeparator {
|
||||||
|
height: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 3px 0 2px 0 !important;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||||||
|
}
|
115
flashfire.js
115
flashfire.js
@ -36,6 +36,8 @@ function handleBeforeLoadEvent(event) {
|
|||||||
|
|
||||||
function unblockElement(event) {
|
function unblockElement(event) {
|
||||||
var element = event.target;
|
var element = event.target;
|
||||||
|
if (element.className=="action" || element.className=="flashfireContextMenu" || element.className=="flashfireMenuItem" || element.className=="flashfireMenuSeparator")
|
||||||
|
return;
|
||||||
while (element.className!="flashfireBlocked")
|
while (element.className!="flashfireBlocked")
|
||||||
element = element.parentNode;
|
element = element.parentNode;
|
||||||
|
|
||||||
@ -50,6 +52,111 @@ function unblockElement(event) {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function unblockElementById(id) {
|
||||||
|
var element = document.getElementById("flasfire" + id);
|
||||||
|
if (element!=null) {
|
||||||
|
if (element.allowedToLoad)
|
||||||
|
return;
|
||||||
|
var blockedElement = elementsBlocked[id];
|
||||||
|
blockedElement.allowedToLoad = true;
|
||||||
|
|
||||||
|
element.parentNode.replaceChild(blockedElement, element);
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unblockAllElements() {
|
||||||
|
for (i=0; i<elementsBlocked.length; i++) {
|
||||||
|
unblockElementById(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideElementById(id) {
|
||||||
|
var element = document.getElementById("flasfire" + id);
|
||||||
|
elementsBlocked[id].allowedToLoad = true;
|
||||||
|
element.parentNode.removeChild(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayContextMenu(event) {
|
||||||
|
var element = event.target;
|
||||||
|
var left = event.pageX;
|
||||||
|
var top = event.pageY;
|
||||||
|
console.log(event);
|
||||||
|
while (element.className!="flashfireBlocked")
|
||||||
|
element = element.parentNode;
|
||||||
|
|
||||||
|
var elementID = element.getAttribute("elementID");
|
||||||
|
|
||||||
|
var menuElement = document.createElement("menu");
|
||||||
|
menuElement.className = "flashfireContextMenu";
|
||||||
|
menuElement.id = "flashfireMenu" + elementID;
|
||||||
|
menuElement.style.left = left + "px !important";
|
||||||
|
menuElement.style.top = top + "px !important";
|
||||||
|
|
||||||
|
var loadElement = document.createElement("li");
|
||||||
|
loadElement.className = "flashfireMenuItem";
|
||||||
|
loadElement.innerHTML = "Load Flash";
|
||||||
|
loadElement.onclick = function() {unblockElementById(elementID);}
|
||||||
|
menuElement.appendChild(loadElement);
|
||||||
|
|
||||||
|
if (elementsBlocked.length>1) {
|
||||||
|
var loadALlElement = document.createElement("li");
|
||||||
|
loadALlElement.className = "flashfireMenuItem";
|
||||||
|
loadALlElement.innerHTML = "Load All Flash on this Page";
|
||||||
|
loadALlElement.onclick = function() {unblockAllElements();}
|
||||||
|
menuElement.appendChild(loadALlElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
var hideElement = document.createElement("li");
|
||||||
|
hideElement.className = "flashfireMenuItem";
|
||||||
|
hideElement.innerHTML = "Hide Flash";
|
||||||
|
hideElement.onclick = function() {hideElementById(elementID);}
|
||||||
|
menuElement.appendChild(hideElement);
|
||||||
|
|
||||||
|
var separatorElement = document.createElement("li");
|
||||||
|
separatorElement.className = "flashfireMenuSeparator";
|
||||||
|
menuElement.appendChild(separatorElement);
|
||||||
|
|
||||||
|
var autoLoadElement = document.createElement("li");
|
||||||
|
autoLoadElement.className = "flashfireMenuItem";
|
||||||
|
autoLoadElement.innerHTML = "Automatically Load Flash on "" + window.location.host + """;
|
||||||
|
menuElement.appendChild(autoLoadElement);
|
||||||
|
|
||||||
|
document.body.appendChild(menuElement);
|
||||||
|
|
||||||
|
var closeContentMenu = function(event) {
|
||||||
|
var removeMenuElement = function() {
|
||||||
|
document.body.removeChild(menuElement);
|
||||||
|
}
|
||||||
|
document.getElementsByTagName("body")[0].removeEventListener("mousedown", closeContentMenu, false);
|
||||||
|
menuElement.style.opacity = "0 !important";
|
||||||
|
setTimeout(removeMenuElement, 150);
|
||||||
|
}
|
||||||
|
document.body.addEventListener("mousedown", closeContentMenu, false);
|
||||||
|
|
||||||
|
var changePostition = function() {
|
||||||
|
if (menuElement.offsetWidth>0 && menuElement.offsetWidth>0) {
|
||||||
|
if ((left+menuElement.offsetWidth+20)>=window.innerWidth) {
|
||||||
|
menuElement.style.left = left-menuElement.offsetWidth-10 + "px !important";
|
||||||
|
document.body.removeChild(menuElement);
|
||||||
|
document.body.appendChild(menuElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((top+menuElement.offsetHeight+30)>=window.innerHeight) {
|
||||||
|
menuElement.style.top = top-menuElement.offsetHeight-10 + "px !important";
|
||||||
|
document.body.removeChild(menuElement);
|
||||||
|
document.body.appendChild(menuElement);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setTimeout(changePostition, 100);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
changePostition();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
function blockElement(element) {
|
function blockElement(element) {
|
||||||
if (element.getAttribute("elementID")!=null)
|
if (element.getAttribute("elementID")!=null)
|
||||||
return;
|
return;
|
||||||
@ -61,11 +168,13 @@ function blockElement(element) {
|
|||||||
|
|
||||||
var flashfireBlockedDiv = document.createElement("div");
|
var flashfireBlockedDiv = document.createElement("div");
|
||||||
flashfireBlockedDiv.setAttribute("elementID", elementID);
|
flashfireBlockedDiv.setAttribute("elementID", elementID);
|
||||||
|
flashfireBlockedDiv.id = "flasfire" + elementID;
|
||||||
flashfireBlockedDiv.style = element.style;
|
flashfireBlockedDiv.style = element.style;
|
||||||
flashfireBlockedDiv.style.width = element.offsetWidth + "px";
|
flashfireBlockedDiv.style.width = element.offsetWidth + "px";
|
||||||
flashfireBlockedDiv.style.height = element.offsetHeight + "px";
|
flashfireBlockedDiv.style.height = element.offsetHeight + "px";
|
||||||
flashfireBlockedDiv.className = "flashfireBlocked";
|
flashfireBlockedDiv.className = "flashfireBlocked";
|
||||||
flashfireBlockedDiv.onclick = unblockElement;
|
flashfireBlockedDiv.onclick = unblockElement;
|
||||||
|
flashfireBlockedDiv.oncontextmenu = displayContextMenu;
|
||||||
|
|
||||||
var flashfireContainerDiv = document.createElement("div");
|
var flashfireContainerDiv = document.createElement("div");
|
||||||
flashfireContainerDiv.className = "container";
|
flashfireContainerDiv.className = "container";
|
||||||
@ -93,6 +202,7 @@ function blockElement(element) {
|
|||||||
|
|
||||||
var flashfireActionDiv = document.createElement("div");
|
var flashfireActionDiv = document.createElement("div");
|
||||||
flashfireActionDiv.className = "action";
|
flashfireActionDiv.className = "action";
|
||||||
|
flashfireActionDiv.onclick = displayContextMenu;
|
||||||
flashfireContainerDiv.appendChild(flashfireActionDiv);
|
flashfireContainerDiv.appendChild(flashfireActionDiv);
|
||||||
|
|
||||||
setTimeout(function(){element.parentNode.replaceChild(flashfireBlockedDiv, element);}, 5);
|
setTimeout(function(){element.parentNode.replaceChild(flashfireBlockedDiv, element);}, 5);
|
||||||
@ -107,8 +217,11 @@ function blockElement(element) {
|
|||||||
flashfireHDiv.style.width = 17;
|
flashfireHDiv.style.width = 17;
|
||||||
}
|
}
|
||||||
if ((flashfireBlockedDiv.offsetWidth - 2) <= flashfireHDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 17) <= flashfireTextDiv.offsetHeight) {
|
if ((flashfireBlockedDiv.offsetWidth - 2) <= flashfireHDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 17) <= flashfireTextDiv.offsetHeight) {
|
||||||
flashfireHDiv.style.width = "inherit";
|
|
||||||
flashfireTextContainerDiv.style.display = "none";
|
flashfireTextContainerDiv.style.display = "none";
|
||||||
|
flashfireHDiv.style.width = "inherit";
|
||||||
|
}
|
||||||
|
if ((flashfireBlockedDiv.offsetWidth - 21) <= flashfireActionDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 21) <= flashfireActionDiv.offsetHeight) {
|
||||||
|
flashfireActionDiv.style.display = "none";
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setTimeout(changeSize, 100);
|
setTimeout(changeSize, 100);
|
||||||
|
Loading…
Reference in New Issue
Block a user