Browse Source

Added a context menu, Made the options button auto hide, and Made the options menu popup the context menu.

master
GRMrGecko 13 years ago
parent
commit
51819ac81b
  1. 40
      flashfire.css
  2. 115
      flashfire.js

40
flashfire.css

@ -97,4 +97,44 @@
}
.flashfireBlocked .action:hover {
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

@ -36,6 +36,8 @@ function handleBeforeLoadEvent(event) {
function unblockElement(event) {
var element = event.target;
if (element.className=="action" || element.className=="flashfireContextMenu" || element.className=="flashfireMenuItem" || element.className=="flashfireMenuSeparator")
return;
while (element.className!="flashfireBlocked")
element = element.parentNode;
@ -50,6 +52,111 @@ function unblockElement(event) {
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 &quot;" + window.location.host + "&quot;";
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) {
if (element.getAttribute("elementID")!=null)
return;
@ -61,11 +168,13 @@ function blockElement(element) {
var flashfireBlockedDiv = document.createElement("div");
flashfireBlockedDiv.setAttribute("elementID", elementID);
flashfireBlockedDiv.id = "flasfire" + elementID;
flashfireBlockedDiv.style = element.style;
flashfireBlockedDiv.style.width = element.offsetWidth + "px";
flashfireBlockedDiv.style.height = element.offsetHeight + "px";
flashfireBlockedDiv.className = "flashfireBlocked";
flashfireBlockedDiv.onclick = unblockElement;
flashfireBlockedDiv.oncontextmenu = displayContextMenu;
var flashfireContainerDiv = document.createElement("div");
flashfireContainerDiv.className = "container";
@ -93,6 +202,7 @@ function blockElement(element) {
var flashfireActionDiv = document.createElement("div");
flashfireActionDiv.className = "action";
flashfireActionDiv.onclick = displayContextMenu;
flashfireContainerDiv.appendChild(flashfireActionDiv);
setTimeout(function(){element.parentNode.replaceChild(flashfireBlockedDiv, element);}, 5);
@ -107,8 +217,11 @@ function blockElement(element) {
flashfireHDiv.style.width = 17;
}
if ((flashfireBlockedDiv.offsetWidth - 2) <= flashfireHDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 17) <= flashfireTextDiv.offsetHeight) {
flashfireHDiv.style.width = "inherit";
flashfireTextContainerDiv.style.display = "none";
flashfireHDiv.style.width = "inherit";
}
if ((flashfireBlockedDiv.offsetWidth - 21) <= flashfireActionDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 21) <= flashfireActionDiv.offsetHeight) {
flashfireActionDiv.style.display = "none";
}
} else {
setTimeout(changeSize, 100);

Loading…
Cancel
Save