BSPKeynav/keybrowser-front.js at master · binarez/BSPKeynav · GitHub

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

browser.runtime.onMessage.addListener(handleKeynav);

var keynavDiv = null;
var selectStack = [];

function intersectRect(r1, r2)
{
  return !(r2.left > r1.right ||
           r2.right < r1.left ||
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}

function configureKeynavDiv(rect)
{
    if( keynavDiv )
    {
        keynavDiv.style.top = rect.y + 'px';
        keynavDiv.style.left = rect.x + 'px';
        keynavDiv.style.width = rect.width + 'px';
        keynavDiv.style.height = rect.height + 'px';
    }
}

function stopKeynav()
{
    if( keynavDiv )
    {
        keynavDiv.remove();
        keynavDiv = null;
    }
    selectStack = [];
}

function handleKeynav(message)
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

    if( message.keynav == "toggle" )
    {
        if( selectStack.length > 1 )
        {
            configureKeynavDiv(selectStack[selectStack.length - 2]);
            selectStack.pop();
        }
        else if( keynavDiv )
        {
            stopKeynav();
        }
        else
        {
            keynavDiv = document.createElement('div');
            keynavDiv.style.position = 'absolute';
    		keynavDiv.style.border = '1px solid red';
            keynavDiv.style.margin = '0';
            keynavDiv.style.padding = '0';
    		document.body.appendChild(keynavDiv);
            var selectRect = new DOMRect(scrollLeft, scrollTop, document.documentElement.clientWidth - 2, document.documentElement.clientHeight - 2 );
            configureKeynavDiv(selectRect);
            selectStack.push( selectRect );
        }
    }
    else if( keynavDiv )
    {
        var lastRect = selectStack[ selectStack.length - 1 ];
        var newSelectRect = new DOMRect( lastRect.x, lastRect.y, lastRect.width, lastRect.height );
        if( message.keynav == "up" ) {
            newSelectRect.height -= newSelectRect.height / 2;
        } else if( message.keynav == "down" ) {
            newSelectRect.y += newSelectRect.height / 2;
            newSelectRect.height -= newSelectRect.height / 2;
        } else if( message.keynav == "left" ) {
            newSelectRect.width -= newSelectRect.width / 2;
        } else if( message.keynav == "right" ) {
            newSelectRect.x += newSelectRect.width / 2;
            newSelectRect.width -= newSelectRect.width / 2;
        }

        configureKeynavDiv(newSelectRect);
        selectStack.push( newSelectRect );

        var links = document.getElementsByTagName("a");
        var intersectedLink = null;
        for( var i=0, max=links.length; i<max; ++i )
        {
            var linkRect = links[i].getBoundingClientRect();
            linkRect.x += scrollLeft;
            linkRect.y += scrollTop;
            if( intersectRect(linkRect, newSelectRect) )
            {
                if( intersectedLink )
                {
                    return;
                }
                intersectedLink = links[i];
            }
        }

        if( intersectedLink )
        {
//            intersectedLink.style.color = "red";
            //intersectedLink.addClass("");
            intersectedLink.click();
        }
    }
}