Statistics
| Branch: | Revision:

blinker / firefox.plugin / data / myscript.js @ a03cd52e

History | View | Annotate | Download (27.44 KB)

1 a03cd52e Thies Pfeiffer
/*
2
 * Copyright 2015 Thies Pfeiffer and Dimitri Heil
3
 * Blinker is distributed under the terms of the GNU General Public License
4
 * 
5
 * This file is part of Blinker.
6
 * 
7
 * Blinker is free software: you can redistribute it and/or modify
8
 * it under the terms of the GNU General Public License as published by
9
 * the Free Software Foundation, either version 3 of the License, or
10
 * (at your option) any later version.
11
 * 
12
 * Blinker is distributed in the hope that it will be useful,
13
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
14
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15
 * GNU General Public License for more details.
16
 * 
17
 * You should have received a copy of the GNU General Public License
18
 * along with Blinker. If not, see <http://www.gnu.org/licenses/>.
19
 */
20
 
21
//do not execute pagemod in iframes
22
if (window.location == window.parent.location) {
23
24
25
        /*
26
        *        Append the DOM Observer to listen for new elements that are being attached
27
        */
28
        var observer = new MutationObserver(function (mutations) {
29
            
30
            mutations.forEach(function (mutation) {
31
              
32
              if (mutation.type == "childList"){                      
33
                      for (var c = 0;c< mutation.addedNodes.length;c++){                                      
34
                              if ($(mutation.addedNodes.item(c)).data("gaze") !== undefined){
35
36
                                      /*
37
                                      *        if a dom change is observed and the change is of type 'childlist'
38
                                      *        send all the new nodes to the gazeEvent appender
39
                                      */
40
                                      appendGazeEvents(mutation.addedNodes.item(c));
41
                              }
42
                        }
43
              }
44
              //console.log("MutationType: "+mutation.type);
45
                });
46
        });
47
48
        /*
49
        *        Set some observer options
50
        */  
51
        observer.observe(document.body, {
52
            attributes: true,
53
            childList:true,
54
            characterData: true,
55
            characterDataOldValue: true,
56
            subtree: true
57
        });
58
59
                
60
 
61
62
                /*
63
                *        Append gaze-gesture divs to the body (4 point gaze)
64
                */        
65
                var gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureTopLeft\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"1\\\" ) {gestureString += \\\"1\\\"; lastGesture=\\\"1\\\"; }  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureTopLeft\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";
66
                $("body").prepend("<div data-gaze='" + gesturedata + "' id='gestureTopLeft'         class='gazeGestures'></div>");
67
                gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureTopRight\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"2\\\" ) {gestureString += \\\"2\\\"; lastGesture=\\\"2\\\";}  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureTopRight\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";
68
                $("body").prepend("<div data-gaze='" + gesturedata + "' id='gestureTopRight'         class='gazeGestures'></div>");
69
                gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureBottomLeft\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"3\\\" ) {gestureString += \\\"3\\\"; lastGesture=\\\"3\\\";}   \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureBottomLeft\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";
70
                $("body").prepend("<div data-gaze='" + gesturedata + "' id='gestureBottomLeft'         class='gazeGestures'></div>");
71
                gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureBottomRight\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"4\\\" ) {gestureString += \\\"4\\\"; lastGesture=\\\"4\\\";}  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureBottomRight\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";
72
                $("body").prepend("<div data-gaze='" + gesturedata + "'  id='gestureBottomRight' class='gazeGestures'></div>");
73
74
 
75
                
76
                /*
77
                *        Append gazeLinks Div to the body links that are found by a linkFinding algorithm are put into this div
78
                */        
79
                $("body").prepend("<div id='gazeLinks'></div>");
80
                
81
                /*
82
                *        Append the wheelselector to the body
83
                */        
84
                $("body").prepend("<div id='wheelSelector'></div>");
85
86
                /*
87
                *        Append the calibration_blackout div to the body to darken the background in calibration mode
88
                */
89
                $("body").prepend("<div id='calibration_blackout'></div>");
90
91
                /*
92
                *        Needed for calibration checking when adjusting gaze position offset
93
                */
94
                $("body").prepend("<div id='calibration_check'></div>");                
95
                
96
97
                /*
98
                *        Needed for BlickBrowser's own Notification
99
                */
100
                var dstr = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#notification\\\").stop();$(\\\"#notification\\\").fadeIn(10);  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#notification\\\").fadeOut(3000);  \"}}";
101
                $("body").prepend("<div id='notification' data-gaze='" + dstr + "' ></div>");
102
103
104
                /*
105
                *        Needed for the progress circle
106
                */
107
                $("body").prepend('<div id="gazeProgress"><input type="text" class="dial"></div>');
108
109
110
                $("body").prepend("<div id='status'></div>");
111
                //$("body").prepend("<div id='fixatedA'></div>");
112
                $("body").prepend("<div id='controlBar' class='controlBar'></div>");
113
114
115
116
                $("body").prepend("<canvas id='findLinkArea'>Your browser does not support the HTML5 canvas tag.</canvas>");
117
118
119
                /*
120
                *        Needed for the crosshair
121
                */
122
                $("body").prepend("<canvas id='crosshairTop' width='1' height='15'>Your browser does not support the HTML5 canvas tag.</canvas>");
123
                $("body").prepend("<canvas id='crosshairBottom' width='1' height='15'>Your browser does not support the HTML5 canvas tag.</canvas>");
124
                $("body").prepend("<canvas id='crosshairLeft' width='15' height='1'>Your browser does not support the HTML5 canvas tag.</canvas>");
125
                $("body").prepend("<canvas id='crosshairRight' width='15' height='1'>Your browser does not support the HTML5 canvas tag.</canvas>");
126
127
                /*
128
                * Hide browser screen when it's not active
129
                */
130
                $("body").prepend("<div id='noFocusHider' ></div>");
131
132
133
                /*
134
                *        Styling the newly appended elements
135
                */
136
                $("#fixatedA").css("backgroundColor", "#FFFFFF");
137
                $("#fixatedA").css("display", "none");
138
                $("#fixatedA").css("position", "fixed");
139
                $("#fixatedA").css("padding", "10");
140
                $("#fixatedA").css("border", "2px solid");
141
                $("#fixatedA").css("border-bottom-color", "#000000");
142
                $("#fixatedA").css("border-top-color", "#000000");
143
                $("#fixatedA").css("border-left-color", "#000000");
144
                $("#fixatedA").css("border-right-color", "#000000");
145
                $("#fixatedA").css("border-radius", "10px");
146
                $("#fixatedA").css("box-shadow", "5px 5px 2px");
147
                $("#fixatedA").css("zIndex", 100000);
148
149
                $("#wheelSelector").css("display", "none");
150
                $("#wheelSelector").css("backgroundColor", "#13D1EB");
151
                $("#wheelSelector").css("position", "absolute");
152
                $("#wheelSelector").css("left", ((window.innerWidth / 2) - 250) + "px");
153
                $("#wheelSelector").css("zIndex", 120000);
154
                $("#wheelSelector").css("width", "500px");
155
                $("#wheelSelector").css(<