GRMrGecko/FlashFire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
GRMrGecko 2010-07-14 10:06:14 -05:00
parent 4ab4b8d480
commit 51819ac81b
2 changed files with 154 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
flashfire.css
View File

@ -98,3 +98,43 @@
.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
View File

@ -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);