1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
/* This is the basic linkfollowing script.
* Its pretty stable, only using numbers to navigate.
*
* TODO: Some pages mess around a lot with the zIndex which
* lets some hints in the background.
* TODO: Some positions are not calculated correctly (mostly
* because of uber-fancy-designed-webpages. Basic HTML and CSS
* works good
* TODO: Still some links can't be followed/unexpected things
* happen. Blame some freaky webdesigners ;)
*/
//Just some shortcuts and globals
var uzblid = 'uzbl_link_hint';
var uzbldivid = uzblid + '_div_container';
var doc = document;
var win = window;
var links = document.links;
var forms = document.forms;
//Reset keycmd, modcmd and return to default mode.
function clearKeycmd() { Uzbl.run('set mode ='); }
//Make onlick-links "clickable"
try {
HTMLElement.prototype.click = function() {
if (typeof this.onclick == 'function') {
this.onclick({
type: 'click'
});
}
};
} catch(e) {}
//Catch the ESC keypress to stop linkfollowing
function keyPressHandler(e) {
var kC = window.event ? event.keyCode: e.keyCode;
var Esc = window.event ? 27 : e.DOM_VK_ESCAPE;
if (kC == Esc) {
removeAllHints();
}
}
//Calculate element position to draw the hint
//Pretty accurate but on fails in some very fancy cases
function elementPosition(el) {
var up = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while (el.offsetParent) {
el = el.offsetParent;
up += el.offsetTop;
left += el.offsetLeft;
}
return [up, left, width, height];
}
//Calculate if an element is visible
function isVisible(el) {
if (el == doc) {
return true;
}
if (!el) {
return false;
}
if (!el.parentNode) {
return false;
}
if (el.style) {
if (el.style.display == 'none') {
return false;
}
if (el.style.visibility == 'hidden') {
return false;
}
}
return isVisible(el.parentNode);
}
//Calculate if an element is on the viewport.
function elementInViewport(el) {
offset = elementPosition(el);
var up = offset[0];
var left = offset[1];
var width = offset[2];
var height = offset[3];
return up < window.pageYOffset + window.innerHeight && left < window.pageXOffset + window.innerWidth && (up + height) > window.pageYOffset && (left + width) > window.pageXOffset;
}
//Removes all hints/leftovers that might be generated
//by this script.
function removeAllHints() {
var elements = doc.getElementById(uzbldivid);
if (elements) {
elements.parentNode.removeChild(elements);
}
}
//Generate a hint for an element with the given label
//Here you can play around with the style of the hints!
function generateHint(el, label) {
var pos = elementPosition(el);
var hint = doc.createElement('div');
hint.setAttribute('name', uzblid);
hint.innerText = label;
hint.style.display = 'inline';
hint.style.backgroundColor = '#B9FF00';
hint.style.border = '2px solid #4A6600';
hint.style.color = 'black';
hint.style.fontSize = '9px';
hint.style.fontWeight = 'bold';
hint.style.lineHeight = '9px';
hint.style.margin = '0px';
hint.style.padding = '1px';
hint.style.position = 'absolute';
hint.style.zIndex = '1000';
hint.style.left = pos[1] + 'px';
hint.style.top = pos[0] + 'px';
var img = el.getElementsByTagName('img');
if (img.length > 0) {
hint.style.left = pos[1] + img[0].width / 2 + 'px';
}
hint.style.textDecoration = 'none';
hint.style.webkitBorderRadius = '6px';
// Play around with this, pretty funny things to do :)
hint.style.webkitTransform = 'scale(1) rotate(0deg) translate(-6px,-5px)';
return hint;
}
//Here we choose what to do with an element if we
//want to "follow" it. On form elements we "select"
//or pass the focus, on links we try to perform a click,
//but at least set the href of the link. (needs some improvements)
function clickElem(item) {
removeAllHints();
clearKeycmd();
if (item) {
var name = item.tagName;
if (name == 'A') {
item.click();
window.location = item.href;
} else if (name == 'INPUT') {
var type = item.getAttribute('type').toUpperCase();
if (type == 'TEXT' || type == 'FILE' || type == 'PASSWORD') {
item.focus();
item.select();
} else {
item.click();
}
} else if (name == 'TEXTAREA' || name == 'SELECT') {
item.focus();
item.select();
} else {
item.click();
window.location = item.href;
}
}
}
//Returns a list of all links (in this version
//just the elements itself, but in other versions, we
//add the label here.
function addLinks() {
res = [[], []];
for (var l = 0; l < links.length; l++) {
var li = links[l];
if (isVisible(li) && elementInViewport(li)) {
res[0].push(li);
}
}
return res;
}
//Same as above, just for the form elements
function addFormElems() {
res = [[], []];
for (var f = 0; f < forms.length; f++) {
for (var e = 0; e < forms[f].elements.length; e++) {
var el = forms[f].elements[e];
if (el && ['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName) + 1 && isVisible(el) && elementInViewport(el)) {
res[0].push(el);
}
}
}
return res;
}
//Draw all hints for all elements passed. "len" is for
//the number of chars we should use to avoid collisions
function reDrawHints(elems, chars) {
removeAllHints();
var hintdiv = doc.createElement('div');
hintdiv.setAttribute('id', uzbldivid);
for (var i = 0; i < elems[0].length; i++) {
if (elems[0][i]) {
var label = elems[1][i].substring(chars);
var h = generateHint(elems[0][i], label);
hintdiv.appendChild(h);
}
}
if (document.body) {
document.body.appendChild(hintdiv);
}
}
//Put it all together
function followLinks(follow) {
var s = follow.split('');
var linknr = parseInt(follow, 10);
if (document.body) document.body.setAttribute('onkeyup', 'keyPressHandler(event)');
var linkelems = addLinks();
var formelems = addFormElems();
var elems = [linkelems[0].concat(formelems[0]), linkelems[1].concat(formelems[1])];
var len = (elems[0].length + '').length;
var oldDiv = doc.getElementById(uzbldivid);
var leftover = [[], []];
if (linknr + 1 && s.length == len && linknr < elems[0].length && linknr >= 0) {
clickElem(elems[0][linknr]);
} else {
for (var j = 0; j < elems[0].length; j++) {
var b = true;
var label = j + '';
var n = label.length;
for (n; n < len; n++) {
label = '0' + label;
}
for (var k = 0; k < s.length; k++) {
b = b && label.charAt(k) == s[k];
}
if (b) {
leftover[0].push(elems[0][j]);
leftover[1].push(label);
}
}
reDrawHints(leftover, s.length);
}
}
followLinks('%s');
|
