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(< |