gryf/pentadactyl-pm
1
0
Fork 0
mirror of https://github.com/gryf/pentadactyl-pm.git synced 2025-12-22 23:58:00 +01:00
Code Issues Projects Releases Wiki Activity

experimental hinting of images with a transparent span

Browse Source
This commit is contained in:
Martin Stubenschrott
2007-10-26 02:59:39 +00:00
parent 11815eaa73
commit d468cfe790
1 changed files with 49 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
content/hints.js
View File

@@ -31,7 +31,7 @@ vimperator.Hints = function() //{{{
var linkNumString = ""; // the typed link number is in this string var linkNumString = ""; // the typed link number is in this string
var submode = ""; // used for extended mode, can be "o", "t", "y", etc. var submode = ""; // used for extended mode, can be "o", "t", "y", etc.
// hints[] = [elem, text, span, elem.style.backgroundColor, elem.style.color] // hints[] = [elem, text, span, imgspan, elem.style.backgroundColor, elem.style.color]
var hints = []; var hints = [];
var valid_hints = []; // store the indices of the "hints" array with valid elements var valid_hints = []; // store the indices of the "hints" array with valid elements
@@ -198,7 +198,7 @@ vimperator.Hints = function() //{{{
span.style.display = "none"; span.style.display = "none";
doc.body.appendChild(span); doc.body.appendChild(span);
hints.push([elem, text, span, elem.style.backgroundColor, elem.style.color]); hints.push([elem, text, span, null, elem.style.backgroundColor, elem.style.color]);
} }
hintsGenerated = true; hintsGenerated = true;
@@ -236,7 +236,7 @@ vimperator.Hints = function() //{{{
var scrollX = doc.defaultView.scrollX; var scrollX = doc.defaultView.scrollX;
var scrollY = doc.defaultView.scrollY; var scrollY = doc.defaultView.scrollY;
var elem, tagname, text, rect, span; var elem, tagname, text, rect, span, imgspan;
var hintnum = start_idx > 0 ? start_idx : 1; var hintnum = start_idx > 0 ? start_idx : 1;
var height = window.content.innerHeight; var height = window.content.innerHeight;
@@ -250,30 +250,62 @@ outer:
elem = hints[i][0]; elem = hints[i][0];
text = hints[i][1]; text = hints[i][1];
span = hints[i][2]; span = hints[i][2];
imgspan = hints[i][3];
for (var k = 0; k < find_tokens.length; k++) for (var k = 0; k < find_tokens.length; k++)
{ {
if (text.indexOf(find_tokens[k]) < 0) if (text.indexOf(find_tokens[k]) < 0)
{ {
// reset background color // reset background color
elem.style.backgroundColor = hints[i][3]; elem.style.backgroundColor = hints[i][4];
elem.style.color = hints[i][4]; elem.style.color = hints[i][5];
span.style.display = "none"; span.style.display = "none";
if (imgspan)
imgspan.style.display = "none";
continue outer; continue outer;
} }
} }
if (text == "" && elem.firstChild && elem.firstChild.tagName == "IMG")
{
rect = elem.firstChild.getBoundingClientRect();
if (!rect)
continue;
if (!imgspan)
{
imgspan = doc.createElementNS("http://www.w3.org/1999/xhtml", "span");
imgspan.style.backgroundColor = "yellow";
imgspan.style.position = "absolute";
imgspan.style.opacity = 0.5;
imgspan.style.zIndex = "4999";
imgspan.className = "vimperator-hint";
hints[i][3] = imgspan;
doc.body.appendChild(imgspan);
}
imgspan.style.left = (rect.left + scrollX) + "px";
imgspan.style.top = (rect.top + scrollY) + "px";
imgspan.style.width = (rect.right - rect.left) + "px";
imgspan.style.height = (rect.bottom - rect.top) + "px";
imgspan.style.display = "inline";
}
else
rect = elem.getClientRects()[0]; rect = elem.getClientRects()[0];
if (rect) if (rect)
{
if (!imgspan)
{ {
if (hintnum == 1) if (hintnum == 1)
elem.style.backgroundColor = "#88FF00"; elem.style.backgroundColor = "#88FF00";
else else
elem.style.backgroundColor = "yellow"; elem.style.backgroundColor = "yellow";
}
elem.style.color = "black"; elem.style.color = "black";
span.style.left = (rect.left + scrollX) + "px"; span.style.left = (rect.left + scrollX) + "px";
span.style.top = rect.top + scrollY + "px"; span.style.top = (rect.top + scrollY) + "px";
span.innerHTML = "" + (hintnum++); span.innerHTML = "" + (hintnum++);
span.style.display = "inline"; span.style.display = "inline";
valid_hints.push(elem); valid_hints.push(elem);
@@ -303,18 +335,20 @@ outer:
{ {
// remove the span for the numeric display part // remove the span for the numeric display part
doc.body.removeChild(hints[i][2]); doc.body.removeChild(hints[i][2]);
if (hints[i][3]) // a transparent span for images
doc.body.removeChild(hints[i][3]);
if (timeout && firstElem == hints[i][0]) if (timeout && firstElem == hints[i][0])
{ {
firstElemBgColor = hints[i][3]; firstElemBgColor = hints[i][4];
firstElemColor = hints[i][4]; firstElemColor = hints[i][5];
} }
else else
{ {
// restore colors // restore colors
var elem = hints[i][0]; var elem = hints[i][0];
elem.style.backgroundColor = hints[i][3]; elem.style.backgroundColor = hints[i][4];
elem.style.color = hints[i][4]; elem.style.color = hints[i][5];
} }
} }