├── img
    ├── 16.png
    ├── 48.png
    ├── 64.png
    ├── 128.png
    ├── apple.png
    ├── 440x280.png
    ├── 440x280.xcf
    ├── 1280x800.png
    └── GesturesImages.png
├── README.md
├── research
    ├── test.html
    ├── mini.html
    ├── responsive.html
    ├── viewer.html
    ├── minimal.html
    └── experiment.html
├── manifest.json
├── background.js
├── options.js
├── options.html
└── swipe.js


/img/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/16.png


--------------------------------------------------------------------------------
/img/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/48.png


--------------------------------------------------------------------------------
/img/64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/64.png


--------------------------------------------------------------------------------
/img/128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/128.png


--------------------------------------------------------------------------------
/img/apple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/apple.png


--------------------------------------------------------------------------------
/img/440x280.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/440x280.png


--------------------------------------------------------------------------------
/img/440x280.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/440x280.xcf


--------------------------------------------------------------------------------
/img/1280x800.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/1280x800.png


--------------------------------------------------------------------------------
/img/GesturesImages.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antimatter15/swipe-gesture/HEAD/img/GesturesImages.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Apple Safari for OS X Lion style Back/Forward Gestures for Chrome
2 | 
3 | Basic principle:
4 | 
5 | 	onmousewheel = function(e){
6 | 		if(Math.abs(e.wheelDeltaX) > 100) //go foward/back
7 | 	}
8 | 
9 | 


--------------------------------------------------------------------------------
/research/test.html:
--------------------------------------------------------------------------------
1 | <script src="swipe.js"></script>
2 | <script>
3 | var states = 'one.618,two.718,three.159,four4,five.670,six.022,se7en,eight.987'
4 | states.split(',').forEach(function(e){
5 | 	history.pushState({}, '', '?'+e)
6 | })
7 | </script>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "Swipe Gesture",
 3 | 	"version": "1.99",
 4 | 	"manifest_version": 2,
 5 | 	"description": "Add OSX-style multitouch gestures to Chromebooks",
 6 | 	"icons": {
 7 | 		"64": "img/64.png",
 8 | 		"48": "img/48.png",
 9 | 		"16": "img/16.png",
10 | 		"128": "img/128.png"
11 | 	},
12 | 	"options_page": "options.html",
13 | 	"background": {
14 | 		"scripts": ["background.js"]
15 | 	},
16 | 	"content_scripts": [
17 | 		{
18 | 			"matches": ["<all_urls>"],
19 | 			"js": ["swipe.js"]
20 | 		}
21 | 	],
22 | 	"permissions": [
23 | 		"storage",
24 | 		"tabs"
25 | 	]
26 | }
27 | 


--------------------------------------------------------------------------------
/research/mini.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | var collected = [];
 3 | var ofst = +new Date;
 4 | window.addEventListener('mousewheel', function(e){
 5 | 	collected.push([e.wheelDeltaX, e.wheelDeltaY, +new Date - ofst])
 6 | })
 7 | function magic(){
 8 | 	document.getElementById('exp').style.display = 'none'
 9 | 	document.getElementById('ta').value = JSON.stringify(collected);
10 | 	document.getElementById('ta').style.display = ''
11 | }
12 | </script>
13 | <button onclick="magic()" id="exp">Export data</button>
14 | <textarea id="ta" style="width: 100%; height: 100%; position: aboslute; top: 0; left: 0; display: none"></textarea>


--------------------------------------------------------------------------------
/research/responsive.html:
--------------------------------------------------------------------------------
 1 | <canvas id="c" style="top:0;left:0;position:absolute"></canvas>
 2 | <script>
 3 | var canvas = document.getElementById('c');
 4 | canvas.width = innerWidth;
 5 | canvas.height = innerHeight;
 6 | var c = canvas.getContext('2d');
 7 | var posX = innerWidth / 2, posY = innerHeight / 2;
 8 | 
 9 | function sign(num){
10 | 	return num
11 | 	// return num ? (Math.abs(num) / num) : num
12 | }
13 | 
14 | window.addEventListener('mousewheel', function(e){
15 | 	c.beginPath()
16 | 	c.moveTo(posX, posY);
17 | 	posX -= sign(e.wheelDeltaX / 20);
18 | 	posY -= sign(e.wheelDeltaY / 20);
19 | 	c.lineTo(posX, posY);
20 | 	c.fillRect(posX - 1, posY - 1, 2, 2)
21 | 	c.stroke()
22 | })
23 | 
24 | 
25 | 
26 | </script>


--------------------------------------------------------------------------------
/research/viewer.html:
--------------------------------------------------------------------------------
 1 | <canvas id="c" style="top:0;left:0;position:absolute"></canvas>
 2 | <script>
 3 | var canvas = document.getElementById('c');
 4 | canvas.width = innerWidth;
 5 | canvas.height = innerHeight;
 6 | var c = canvas.getContext('2d');
 7 | 
 8 | var log = [[120,0,614],[120,0,628],[120,0,644],[120,0,652],[120,0,660],[120,0,676],[120,0,684],[120,0,700],[120,0,708],[120,0,716],[120,0,732],[120,0,740]]
 9 | 
10 | 
11 | 
12 | var posX = innerWidth / 2, posY = innerHeight / 2;
13 | c.beginPath()
14 | c.moveTo(posX, posY);
15 | function nextLog(){
16 | 	var e = log.shift();
17 | 	posX += e[0] / 20;
18 | 	posY += e[1] / 20;
19 | 	c.lineTo(posX, posY);
20 | 	c.fillRect(posX - 1, posY - 1, 2, 2)
21 | 	c.stroke()
22 | 	if(log[0]) 
23 | 		setTimeout(nextLog, log[0][2] - e[2]);
24 | }
25 | nextLog();
26 | </script>


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 2 | 	if(request.action == "reload"){
 3 | 		chrome.tabs.reload(sender.tab.id);
 4 | 		sendResponse('')
 5 | 	}else if(request.action == "open-settings"){
 6 | 		chrome.tabs.create({url: "options.html"})
 7 | 		sendResponse('')
 8 | 	}else if(request.action == "new-tab"){
 9 | 		chrome.tabs.create({})
10 | 		sendResponse('')
11 | 	}else if(request.action == "next-tab" || request.action == 'previous-tab'){
12 | 		var offset = (request.action == "next-tab") ? 1 : -1;
13 | 		chrome.windows.get(sender.tab.windowId, {populate: true}, function(e){
14 | 			var tab = e.tabs[(sender.tab.index + e.tabs.length + offset) % e.tabs.length];
15 | 			//wrap around!
16 | 			chrome.tabs.update(tab.id, {
17 | 				active: true
18 | 			})
19 | 		});
20 | 		sendResponse('')
21 | 	}else if(request.action == "back"){
22 | 		sendResponse('history.go(-1)')
23 | 	}else if(request.action == "forward"){
24 | 		sendResponse('history.go(1)')
25 | 	}else if(request.action == "close-tab"){
26 | 		chrome.tabs.remove(sender.tab.id);
27 | 		sendResponse('')
28 | 	}
29 | 	console.log(sender)
30 | });


--------------------------------------------------------------------------------
/research/minimal.html:
--------------------------------------------------------------------------------
 1 | <h1 id="status">Start Scrolling</h1>
 2 | 
 3 | <div style="width: 300px; height: 300px; overflow: scroll">
 4 | 	<div style="background:#dddddd; width: 600px; height: 600px;">
 5 | 	</div>
 6 | </div>
 7 | 
 8 | <script>
 9 | var scrollListened = [];
10 | var lastDetectedScroll = 0;
11 | var lastWheelTimer = -1;
12 | var wheelType = -1;
13 | 
14 | function detectScroll(e){
15 | 	lastDetectedScroll = +new Date;
16 | 	removeListeners();
17 | }
18 | 
19 | function removeListeners(){
20 | 	for(var i = 0; i < scrollListened.length; i++){
21 | 		scrollListened[i].removeEventListener('scroll', detectScroll, false)
22 | 	}
23 | 	scrollListened = [];
24 | }
25 | 
26 | function endTrigger(){
27 | 	wheelType = -1;
28 | 	clearTimeout(lastWheelTimer);
29 | 	console.log("reset")
30 | }
31 | 
32 | window.addEventListener('mousewheel', function(e){
33 | 	clearTimeout(lastWheelTimer);
34 | 	lastWheelTimer = setTimeout(endTrigger, 500);
35 | 	if(wheelType == -1){
36 | 		var el = document.elementFromPoint(e.clientX, e.clientY);
37 | 		do {
38 | 			scrollListened.push(el);
39 | 			el.addEventListener('scroll', detectScroll, false);	
40 | 		} while (el = el.parentNode);
41 | 		var checkpointScroll = lastDetectedScroll;
42 | 		wheelType = 0;
43 | 		setTimeout(function(){
44 | 			if(wheelType != 0) return;
45 | 			if(checkpointScroll == lastDetectedScroll){
46 | 				console.log("SWIPE")
47 | 				document.getElementById('status').innerHTML = 'SWIPE'
48 | 				wheelType = 2;
49 | 			}else{
50 | 				document.getElementById('status').innerHTML = 'SCROLL'
51 | 				console.log("SCROLL")
52 | 				wheelType = 1;
53 | 			}
54 | 		}, 150)	
55 | 	}
56 | })
57 | </script>


--------------------------------------------------------------------------------
/options.js:
--------------------------------------------------------------------------------
 1 | function $(sel){
 2 | 	var s = document.querySelectorAll(sel);
 3 | 	return s.length == 1 ? s[0] : [].slice.call(s, 0)
 4 | }
 5 | 
 6 | $('#dev').addEventListener('change', function(){
 7 | 	$('#devmode').style.display = $('#dev').checked ? '' : 'none';
 8 | })
 9 | 
10 | var options = [ "Disabled", "Forward", "Back", "Reload", "Next Tab", "Previous Tab", "Close Tab", "New Tab", 'Open Settings']
11 | 
12 | function setSelect(i){
13 | 	var el = document.getElementById('a' + i);
14 | 	for(var j = 0; j < options.length; j++){
15 | 		var slug = options[j].replace(/ /g, '-').toLowerCase();
16 | 		el.options.add(new Option(options[j], slug))	
17 | 	}	
18 | 	el.addEventListener('change', function(){
19 | 		var obj = {};
20 | 		obj['a' + i] = el.value;
21 | 		chrome.storage.local.set(obj, function(){
22 | 			loadConfiguration();
23 | 			notifyUpdates();
24 | 		})
25 | 	})
26 | }
27 | 
28 | for(var i = 0; i < 360; i += 45) setSelect(i); //configure each of the select things
29 | 
30 | $('#reverse').addEventListener('change', function(){
31 | 	var val = $('#reverse').checked;
32 | 	chrome.storage.local.set({INVERT_ARROW: val})
33 | 	INVERT_ARROW = val;
34 | })
35 | 
36 | $('#thresh').addEventListener('change', function(){
37 | 	var val = +$('#thresh').value;
38 | 	chrome.storage.local.set({LENGTH_THRESHOLD: val});
39 | 	LENGTH_THRESHOLD = val;
40 | })
41 | 
42 | 
43 | function updateConfiguration(){
44 | 	$('#reverse').checked = INVERT_ARROW;
45 | 	$('#thresh').value = LENGTH_THRESHOLD;
46 | 	for(var i = 0; i < 360; i += 45){
47 | 		document.getElementById("a" + i).value = ACTION_MAP[i]
48 | 	}
49 | 
50 | }
51 | 
52 | function notifyUpdates(){
53 | 	chrome.windows.getAll({populate: true}, function(wins){
54 | 		wins.forEach(function(win){
55 | 			win.tabs.forEach(function(tab){
56 | 				chrome.tabs.sendMessage(tab.id, {action: "update"}, function(e){
57 | 					if(typeof e == 'undefined'){
58 | 						console.log('err', chrome.extension.lastError
59 | );
60 | 						// chrome.tabs.executeScript(tab.id, {file: "swipe.js"});
61 | 					}else{
62 | 						console.log("got response", tab.id, e)	
63 | 					}
64 | 				})
65 | 			})
66 | 		})
67 | 	})
68 | }
69 | 
70 | 
71 | function showWord(word){
72 | 	$('#modal').innerHTML = word;
73 | 	$('#modal').style.display = '';
74 | 	setTimeout(function(){
75 | 		$('#modal').style.opacity = '0.5';
76 | 	}, 10)
77 | }
78 | 
79 | $('#modal').addEventListener('webkitTransitionEnd', function(){
80 | 	if(+$('#modal').style.opacity == 0){
81 | 		$('#modal').style.display = 'none';	
82 | 	}else{
83 | 		$('#modal').style.opacity = '0';	
84 | 	}
85 | })
86 | 
87 | function signalCompletion(){
88 | 	var slugmap = {};
89 | 	for(var j = 0; j < options.length; j++){
90 | 		var slug = options[j].replace(/ /g, '-').toLowerCase();
91 | 		slugmap[slug] = options[j]
92 | 	}
93 | 	showWord(slugmap[ACTION_MAP[direction]])
94 | 	
95 | }


--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 | <style>
  5 | body {
  6 | 	font-family: sans-serif;
  7 | 	-webkit-transition: background 0.3s linear;
  8 | }
  9 | #devmode label {
 10 | 	font-size: small;
 11 | }
 12 | 
 13 | #container {
 14 | 	/*background: #DFE8EC;*/
 15 | 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 16 | 	border: 1px solid #E1E1E8;
 17 | 	border-radius: 4px;
 18 | 	background: #F9F9F9;
 19 | 
 20 | 	overflow: auto;
 21 | }
 22 | 
 23 | fieldset {
 24 | 	border-color: #E1E1E8;
 25 | 	border-style: solid;
 26 | 	border-width: 1px;
 27 | 	background: whiteSmoke;
 28 | 	border-radius: 4px;
 29 | 	padding: 15px;
 30 | 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 31 | 	width: 180px;
 32 | 	display: inline;
 33 | }
 34 | 
 35 | fieldset select {
 36 | 	float: right;
 37 | }
 38 | 
 39 | .pic {
 40 | 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 41 | 	border: 1px solid #E1E1E8;
 42 | 	border-radius: 4px;
 43 | 	background: #F9F9F9;
 44 | }
 45 | 
 46 | .center, #container {
 47 | 	margin-left:auto;
 48 | 	margin-right:auto;
 49 | 	width:750px;
 50 | 	padding-left:25px;
 51 | 	padding-top:5px;
 52 | 	padding-right:25px;
 53 | 
 54 | }
 55 | #modal {
 56 | 	background: black;
 57 | 	border-radius: 10px;
 58 | 	font-size: x-large;
 59 | 	color: white;
 60 | 	padding: 20px;
 61 | 	margin-left: auto;
 62 | 	margin-right: auto;
 63 | 	position: absolute;
 64 | 	top: -webkit-calc(50% - 30px);
 65 | 	left: -webkit-calc(50% - 100px);
 66 | 	width: 200px;
 67 | 	height: 30px;
 68 | 	text-align: center;
 69 | 	-webkit-transition: 1s opacity;
 70 | }
 71 | </style>
 72 | <title>Swipe Gesture</title>
 73 | </head>
 74 | <body>
 75 | 
 76 | <div class="center" style="margin-top:60px;">
 77 | 	<h1>Swipe Gestures <span style="color:gray">Settings</span></h1>
 78 | </div>
 79 | <div id="container">
 80 | 	<div class="pic" style="float:right; padding: 10px; background:white;width:250px;font-size:x-small; margin-left: 25px; margin-top: 15px">
 81 | 		<img src="img/apple.png" style="margin-bottom:10px;">
 82 | 		Here's a picture gently stolen from Apple showing exactly what this extension enables.
 83 | 	</div>
 84 | 	<p>
 85 | 		This page is a place where you can experiment with the extension and the settings which you can configure on this page.
 86 | 	</p>
 87 | 	
 88 | 	<p>
 89 | 		<input type="checkbox" id="reverse"> <label for="reverse">Flip Arrow Direction</label>
 90 | 	</p>
 91 | 	<div>
 92 | 		<label style="display:inline-block;width:215px">Activation Threshold</label>
 93 | 		<input type="range" style="vertical-align:middle; width: 210px" min="100" max="2000" id="thresh">
 94 | 	</div>
 95 | 	<p>	
 96 | 		<fieldset>
 97 | 			<legend>Simple Gestures</legend>
 98 | 			<div style="overflow:auto">
 99 | 				<label style="width:100px">&rarr; </label>
100 | 				<select id="a0"></select>
101 | 			</div>
102 | 			<div style="overflow:auto">
103 | 				<label style="width:100px">&larr; </label>
104 | 				<select id="a180"></select>
105 | 			</div>
106 | 			<div style="overflow:auto">
107 | 				<label style="width:100px">&uarr; </label>
108 | 				<select id="a270"></select>
109 | 			</div>
110 | 			<div style="overflow:auto">
111 | 				<label style="width:100px">&darr; </label>
112 | 				<select id="a90"></select>
113 | 			</div>
114 | 		</fieldset>
115 | 		<fieldset>
116 | 			<legend>Diagonal Gestures</legend>
117 | 			<div style="overflow:auto">
118 | 				<label style="width:100px">&#8598; </label>
119 | 				<select id="a225"></select>
120 | 			</div>
121 | 			<div style="overflow:auto">
122 | 				<label style="width:100px">&#8599; </label>
123 | 				<select id="a315"></select>
124 | 			</div>
125 | 			<div style="overflow:auto">
126 | 				<label style="width:100px">&#8600; </label>
127 | 				<select id="a45"></select>
128 | 			</div>
129 | 			<div style="overflow:auto">
130 | 				<label style="width:100px">&#8601; </label>
131 | 				<select id="a135"></select>
132 | 			</div>
133 | 		</fieldset>
134 | 	</p>
135 | 	<p>
136 | 		<input type="checkbox" id="dev" > <label for="dev">Advanced Options</label> 
137 | 	</p>
138 | 	<div id="devmode" style="display:none; border-left: 5px solid gray; padding-left: 13px; margin-left: 5px">
139 | 		<p>
140 | 			Eventually this might let you add your own custom actions (for instance, launching bookmarklets). If you really want this, please email me at <a href="mailto:antimatter15@gmail.com">antimatter15@gmail.com</a> or file an issue on Github.
141 | 		</p>
142 | 	</div>
143 | 
144 | </div>
145 | <div class="center">
146 | 		<p style="font-size: 70%">
147 | 		Made by <a href="http://twitter.com/antimatter15">@antimatter15</a>. Follow me on <a href="https://plus.google.com/116347431032639424492/about">Google+</a> or read my <a href="http://antimatter15.com">blog</a>. Submit issues or contribute through <a href="https://github.com/antimatter15/swipe-gesture">Github</a>.
148 | 	</p>
149 | </div>
150 | 
151 | <div id="modal" style="opacity:0;display:none"></div>
152 | <script src="swipe.js"></script>
153 | <script src="options.js"></script>
154 | </body>
155 | </html>


--------------------------------------------------------------------------------
/research/experiment.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 | body {
  3 | 	-webkit-transition: background-color 0.5s;
  4 | }
  5 | </style>
  6 | <script>
  7 | function signalCompletion(){
  8 | 	console.log('asdfja9ofjawerjwoaer', direction)
  9 | 	document.body.style.backgroundColor = '#B9D3B9';
 10 | }
 11 | function signalCancellation(){
 12 | 	document.body.style.backgroundColor = '#D1A5A5';
 13 | }
 14 | function signalScroll(){
 15 | 	console.log('you see me scrolling') //my front lawn
 16 | 	//i know you're all thinking he's so white and nerdy
 17 | 	document.body.style.backgroundColor = '#D7DB7F';
 18 | }
 19 | function signalEnd(){
 20 | 	console.log("DONE")
 21 | 	setTimeout(function(){
 22 | 		document.body.style.backgroundColor = '';
 23 | 	}, 500)
 24 | }
 25 | 
 26 | function transformLength(x){ //x is a positive real number
 27 | 	// return Math.sqrt(x)
 28 | 	// return 1
 29 | 	return x
 30 | }
 31 | 
 32 | 
 33 | var orientations = [180, 0, 315, 225, 90, 270, 135, 45];
 34 | var LENGTH_THRESHOLD = 500;
 35 | var XY_SPLIT = 0.5; //50-50
 36 | var INVERT_ARROW = false;
 37 | 
 38 | function drawArrow(canvas, orientation){
 39 | 	//parameters of drawing an arrow
 40 | 	var shaft_rad = 5, 
 41 | 		point_len = 15, 
 42 | 		head_rad = 15, 
 43 | 		shaft_len = 30;
 44 | 
 45 | 	orientation = (2 * 360 + (orientation || 0)) % 360;
 46 | 
 47 | 	canvas.width = 50;
 48 | 	canvas.height = 50;
 49 | 
 50 | 	var c = canvas.getContext('2d');
 51 | 
 52 | 	c.beginPath()
 53 | 	c.fillStyle = 'white';
 54 | 	c.translate(25, 25)
 55 | 	c.rotate(Math.PI/180 * orientation);
 56 | 
 57 | 	var x = -(shaft_len + point_len) / 2, y = 0;
 58 | 
 59 | 	c.moveTo(x, y - shaft_rad);
 60 | 	c.lineTo(x + shaft_len, y - shaft_rad) // le shaft
 61 | 	c.lineTo(x + shaft_len, y - head_rad) // arrow face
 62 | 	c.lineTo(x + shaft_len + point_len, y) // le cusp
 63 | 	c.lineTo(x + shaft_len, y + head_rad) // arrow face
 64 | 	c.lineTo(x + shaft_len, y + shaft_rad) 
 65 | 	c.lineTo(x, y + shaft_rad); // le shaft
 66 | 	c.lineTo(x, y - shaft_rad); // the butt
 67 | 	c.fill();
 68 | }
 69 | 
 70 | function createArrow(){
 71 | 	var container = document.createElement('div');
 72 | 	container.style.position = 'fixed';
 73 | 	container.style.top = 0;
 74 | 	container.style.left = 0;
 75 | 	container.style.overflow = 'hidden';
 76 | 	container.style.width = innerWidth + 'px';
 77 | 	container.style.height = innerHeight + 'px';
 78 | 	container.style.zIndex = '9999999999999999';
 79 | 
 80 | 	var canvas = document.createElement('canvas');
 81 | 	canvas.style.opacity = 0;
 82 | 	canvas.style.background = 'black';
 83 | 	canvas.style.borderRadius = '10px';
 84 | 	canvas.style.padding = '10px';
 85 | 
 86 | 	canvas.style.webkitTransitionProperty = 'opacity, -webkit-transform, transform, top, left, right, bottom';
 87 | 	canvas.style.webkitTransitionDuration = '0.5s, 0.5s, 0s, 0s, 0s, 0s'
 88 | 	canvas.style.position = 'absolute';
 89 | 	canvas.style.zIndex = '9999999999999999';
 90 | 	
 91 | 
 92 | 	container.appendChild(canvas);
 93 | 	document.body.appendChild(container)
 94 | 	return canvas;
 95 | }
 96 | 
 97 | function renderProgress(pct){
 98 | 	if(!navArrow) return; //nav arrow is necessary
 99 | 	if(pct == 0){
100 | 		navArrow.style.opacity = pct;
101 | 	}else{
102 | 		navArrow.style.opacity = pct * 0.4 + 0.1;	
103 | 	}
104 | 
105 | 	if(INVERT_ARROW) pct = 1 - pct;	
106 | 	
107 | 	var boxEdge = 50 + 10 * 2; //50px w/h + 10px padding
108 | 	
109 | 	//CAVEAT EMPTOR, the 45deg multiples render slightly off
110 | 	//but fixing that might incur moar code, ergo not doing it
111 | 	//not now at least, but if you feel like doing it, have fun
112 | 
113 | 	var nW = ((innerWidth + boxEdge) * pct - boxEdge) + 'px';
114 | 	var nH = ((innerHeight + boxEdge) * pct - boxEdge) + 'px';
115 | 	// console.log(nW, nH)
116 | 	if(direction == 180 || direction == 0){
117 | 		navArrow.style.top = (innerHeight / 2 - boxEdge / 2) + 'px';
118 | 	}else if(direction == 270 || direction == 90){
119 | 		navArrow.style.left = (innerWidth / 2 - boxEdge / 2) + 'px';
120 | 	}
121 | 	//these are for the diags
122 | 	if(direction == 315 || direction == 225 || direction == 270){ // UP
123 | 		navArrow.style.bottom = nH;
124 | 	}else if(direction == 135 || direction == 45 || direction == 90){ //DOWN
125 | 		navArrow.style.top = nH;
126 | 	}
127 | 	if(direction == 315 || direction == 45 || direction == 0){ //RIGHT
128 | 		navArrow.style.left = nW;
129 | 	}else if(direction == 225 || direction == 135 || direction == 180){ //LEFT
130 | 		navArrow.style.right = nW;
131 | 	}
132 | }
133 | 
134 | 
135 | var scrollListened = [];
136 | var lastDetectedScroll = 0;
137 | var wheelBuffer = [];
138 | var lastWheelTimer = -1;
139 | var direction;
140 | var navArrow;
141 | var len = 0;
142 | var currentSession = -1;
143 | // 0 = unknown/not begun
144 | // 1 = scroll
145 | // 2 = MAGICALPONIES
146 | 
147 | function detectScroll(e){
148 | 	console.log("detected scroll on", e.target, e, +new Date)
149 | 	lastDetectedScroll = +new Date;
150 | 	removeListeners();
151 | }
152 | 
153 | function removeListeners(){
154 | 	for(var i = 0; i < scrollListened.length; i++){
155 | 		scrollListened[i].removeEventListener('scroll', detectScroll, false)
156 | 	}
157 | 	scrollListened = [];
158 | }
159 | 
160 | function mouseWheel(x, y){
161 | 	// if(navArrow && x % 10 == 0 && y % 10 == 0 && (Math.abs(x) > 100 || Math.abs(y) > 100)){
162 | 	// 	navArrow.style.webkitTransitionDuration = '0.5s, 0.5s, 0.5s, 0.2s, 0.2s, 0.2s';
163 | 	// }
164 | 
165 | 	//dot product of direction and the stuff, why, i dont know im dumb
166 | 	var ty = XY_SPLIT * y, tx = (1 - XY_SPLIT) * x;
167 | 	var r_dir = direction / 180 * Math.PI;
168 | 	var r_cmp = Math.atan2(ty, tx);
169 | 	var mag = Math.sqrt(ty*ty + tx*tx);
170 | 	var dp = mag * Math.cos(r_cmp - r_dir);
171 | 	var ortho = mag * Math.sin(r_cmp - r_dir)
172 | 
173 | 	// console.log(Math.round(xortho), Math.round(ortho))
174 | 	//give transformLength a positive thing just cause
175 | 	len += transformLength(Math.abs(dp)) * (dp < 0 ? -1 : 1) - Math.abs(ortho / 3); //subtract ortho to punish deviation
176 | 
177 | 	var pct = Math.max(0, Math.min(1, len / LENGTH_THRESHOLD));
178 | 	// console.log(dp, len, pct);
179 | 	renderProgress(pct);
180 | 
181 | 	if(pct >= 0.80){
182 | 		//DONE!
183 | 		removeArrow(navArrow, true);
184 | 		if(currentSession != 3){
185 | 			signalCompletion();	
186 | 		}
187 | 		
188 | 		currentSession = 3;
189 | 	}
190 | }
191 | 
192 | function removeArrow(arrow, complete){
193 | 	if(arrow && arrow.style){
194 | 		if(complete){
195 | 			arrow.style.webkitTransitionDuration = '0.5s, 0.5s, 0.2s, 0.2s, 0.2s, 0.2s'	
196 | 			renderProgress(1)	
197 | 		}else if(currentSession != 3){
198 | 			arrow.style.webkitTransitionDuration = '0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s';
199 | 			renderProgress(0)
200 | 			arrow.style.webkitTransform = 'scale(2.0)';
201 | 			signalCancellation()
202 | 		}
203 | 		
204 | 		arrow.addEventListener('webkitTransitionEnd', function(){
205 | 			var container = arrow.parentNode;
206 | 			if(container.parentNode)
207 | 				container.parentNode.removeChild(container);
208 | 		})
209 | 	}
210 | 	if(arrow === navArrow){
211 | 		navArrow = null;
212 | 	}
213 | }
214 | 
215 | function endTrigger(){
216 | 	signalEnd();
217 | 	removeArrow(navArrow);
218 | 	currentSession = -1;
219 | 	wheelBuffer = [];
220 | 	len = 0;
221 | 	clearTimeout(lastWheelTimer);
222 | }
223 | 
224 | function scrollTrigger(){
225 | 	if(navArrow) navArrow.style.display = 'none';
226 | 	removeArrow(navArrow);
227 | 	wheelBuffer = [];
228 | 	currentSession = 1;
229 | 	signalScroll();
230 | }
231 | 
232 | 
233 | function wheelEvent(e){
234 | 	clearTimeout(lastWheelTimer);
235 | 
236 | 	//to convert wheelDeltas to cartesian, you have to flip it
237 | 	//because negative = scroll down
238 | 
239 | 	var deltaX = -e.wheelDeltaX, deltaY = -e.wheelDeltaY;
240 | 
241 | 	if(currentSession == 1 || currentSession == 3){
242 | 		lastWheelTimer = setTimeout(endTrigger, 600);	
243 | 	}else{
244 | 		lastWheelTimer = setTimeout(endTrigger, 900);	
245 | 	}
246 | 	
247 | 	if(currentSession == 0 || currentSession == -1){
248 | 		wheelBuffer.push([deltaX, deltaY]);
249 | 	}
250 | 	if(currentSession == 2 || currentSession == 3){
251 | 		if(len > LENGTH_THRESHOLD * 0.01){
252 | 			e.preventDefault();
253 | 			e.stopPropagation();	
254 | 		}else if(len < -0.1 * LENGTH_THRESHOLD){
255 | 			scrollTrigger();
256 | 		}
257 | 	}
258 | 	if(currentSession == 2){
259 | 		mouseWheel(deltaX, deltaY);
260 | 
261 | 	}else if(currentSession == -1){
262 | 		removeListeners();
263 | 		var el = document.elementFromPoint(e.clientX, e.clientY);
264 | 		do {
265 | 			// console.log("parent", el);
266 | 			scrollListened.push(el);
267 | 			el.addEventListener('scroll', detectScroll, false);	
268 | 		} while (el = el.parentNode);
269 | 		var checkpointScroll = lastDetectedScroll;
270 | 		// isTriggering = 1;
271 | 		currentSession = 0;
272 | 		setTimeout(function(){
273 | 			var orientation = 0;
274 | 			// console.log(wheelBuffer)
275 | 			var mag_sum = 0, ang_sum = 0;
276 | 			var angles = wheelBuffer.forEach(function(xy){
277 | 				var x = xy[0], y = xy[1], mag = Math.sqrt(x * x + y * y);
278 | 				mag_sum += mag;
279 | 				ang_sum += ((2 * 360 + Math.atan2(y, x) / Math.PI * 180) % 360) * mag;
280 | 			});
281 | 			var mean = ang_sum / Math.max(1, mag_sum);
282 | 			
283 | 			var closest = orientations.sort(function(a, b){
284 | 				return Math.pow(mean - a, 2) - Math.pow(mean - b, 2)
285 | 			})[0];
286 | 			// console.log(mean, stdev, closest);
287 | 			// console.log(wheelBuffer.length)
288 | 			if(checkpointScroll == lastDetectedScroll && 
289 | 				wheelBuffer.length > 0 && 
290 | 				// stdev < 15 && 
291 | 				Math.abs(closest - mean) < 30
292 | 			){
293 | 				direction = closest;
294 | 				navArrow = createArrow();
295 | 				drawArrow(navArrow, closest);
296 | 				renderProgress(0)
297 | 				currentSession = 2;
298 | 				wheelBuffer = [];
299 | 			
300 | 			}else{
301 | 				scrollTrigger()
302 | 			}
303 | 			
304 | 		}, 100)
305 | 		// empirically, the margin is usually only about 3msecs
306 | 		// so having an order of magnitude's worth in leeway is probably
307 | 		// sufficient
308 | 	}
309 | }
310 | 
311 | window.addEventListener('mousewheel', wheelEvent);
312 | 
313 | // window.addEventListener('DOMMouseScroll', function(e){
314 | // 	e.wheelDeltaX = e.axis == e.HORIZONTAL_AXIS ? e.detail * -60 : 0;
315 | // 	e.wheelDeltaY = e.axis == e.VERTICAL_AXIS ? e.detail * -60 : 0;
316 | // 	wheelEvent(e);
317 | // });
318 | 
319 | </script>
320 | <br><br><br><br><br><br>
321 | <div style="width:400px; height: 200px;background-color:#c0ffee;overflow:scroll">
322 | 	<div style="width: 300px; height: 150px; background-color: #007fff; margin: 100px"></div>
323 | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
324 | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
325 | </div>
326 | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
327 | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
328 | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


--------------------------------------------------------------------------------
/swipe.js:
--------------------------------------------------------------------------------
  1 | 
  2 | function signalCompletion(){
  3 | 	// console.log('asdfja9ofjawerjwoaer', ACTION_MAP[direction])
  4 | 	// document.body.style.backgroundColor = '#B9D3B9';
  5 | 	chrome.extension.sendMessage({
  6 | 		action: ACTION_MAP[direction]
  7 | 	}, function(code){
  8 | 		if(code == ""){
  9 | 			var gc;
 10 | 			while(gc = document.querySelector('.swipe-gestures-container-element'))
 11 | 				gc.parentNode.removeChild(gc);
 12 | 		}else{
 13 | 			eval(code); //arghhh super scary!
 14 | 		}
 15 | 	});
 16 | }
 17 | function signalCancellation(){
 18 | 	// document.body.style.backgroundColor = '#D1A5A5';
 19 | }
 20 | function signalScroll(){
 21 | 	console.log('you see me scrolling') //my front lawn
 22 | 	//i know you're all thinking he's so white and nerdy
 23 | 	// document.body.style.backgroundColor = '#D7DB7F';
 24 | }
 25 | function signalEnd(){
 26 | 	console.log("DONE")
 27 | 	// setTimeout(function(){
 28 | 	// 	document.body.style.backgroundColor = '';
 29 | 	// }, 500)
 30 | }
 31 | function transformLength(x){ //x is a positive real number
 32 | 	// return Math.sqrt(x)
 33 | 	// return 1
 34 | 	return x
 35 | }
 36 | function updateConfiguration(){
 37 | 	console.log("config loaded")
 38 | }
 39 | 
 40 | chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 41 | 	if(request.action == "update"){
 42 | 		loadConfiguration();	
 43 | 		sendResponse("done")
 44 | 	}
 45 | })
 46 | 
 47 | var ACTION_MAP = {
 48 | 	"0": "forward",
 49 | 	"45": "disabled",
 50 | 	"90": "disabled",
 51 | 	"135": "disabled",
 52 | 	"180": "back",
 53 | 	"225": "previous-tab",
 54 | 	"270": "open-settings",
 55 | 	"315": "next-tab"
 56 | }
 57 | 
 58 | 
 59 | // var orientations = [180, 0, 315, 225, 90, 270, 135, 45];
 60 | var LENGTH_THRESHOLD = 500;
 61 | var INVERT_ARROW = false;
 62 | 
 63 | 
 64 | function loadConfiguration(){
 65 | 	chrome.storage.local.get(function(e){
 66 | 		console.log(e)
 67 | 		INVERT_ARROW = e.INVERT_ARROW;
 68 | 		LENGTH_THRESHOLD = e.LENGTH_THRESHOLD;
 69 | 		Object.keys(ACTION_MAP).forEach(function(angle){
 70 | 			if(e["a"+angle]){
 71 | 				ACTION_MAP[angle] = e["a"+angle];
 72 | 			}
 73 | 		})
 74 | 		updateConfiguration();
 75 | 	})
 76 | }
 77 | 
 78 | loadConfiguration()
 79 | 
 80 | var XY_SPLIT = 0.42; //50-50 is 50, .42 favors vertical axis as most trackpads have something like a 4-3 ratio
 81 | 
 82 | function drawArrow(canvas, orientation){
 83 | 	//parameters of drawing an arrow
 84 | 	var shaft_rad = 5, 
 85 | 		point_len = 15, 
 86 | 		head_rad = 15, 
 87 | 		shaft_len = 30;
 88 | 
 89 | 	orientation = (2 * 360 + (orientation || 0)) % 360;
 90 | 
 91 | 	canvas.width = 50;
 92 | 	canvas.height = 50;
 93 | 
 94 | 	var c = canvas.getContext('2d');
 95 | 
 96 | 	c.beginPath()
 97 | 	c.fillStyle = 'white';
 98 | 	c.translate(25, 25)
 99 | 	c.rotate(Math.PI/180 * orientation);
100 | 
101 | 	var x = -(shaft_len + point_len) / 2, y = 0;
102 | 
103 | 	c.moveTo(x, y - shaft_rad);
104 | 	c.lineTo(x + shaft_len, y - shaft_rad) // le shaft
105 | 	c.lineTo(x + shaft_len, y - head_rad) // arrow face
106 | 	c.lineTo(x + shaft_len + point_len, y) // le cusp
107 | 	c.lineTo(x + shaft_len, y + head_rad) // arrow face
108 | 	c.lineTo(x + shaft_len, y + shaft_rad) 
109 | 	c.lineTo(x, y + shaft_rad); // le shaft
110 | 	c.lineTo(x, y - shaft_rad); // the butt
111 | 	c.fill();
112 | }
113 | 
114 | function createArrow(){
115 | 	var container = document.createElement('div');
116 | 	container.className = 'swipe-gestures-container-element';
117 | 
118 | 	container.style.position = 'fixed';
119 | 	container.style.top = 0;
120 | 	container.style.left = 0;
121 | 	container.style.overflow = 'hidden';
122 | 	container.style.width = innerWidth + 'px';
123 | 	container.style.height = innerHeight + 'px';
124 | 	container.style.zIndex = '9999999999999999';
125 | 
126 | 	var canvas = document.createElement('canvas');
127 | 	canvas.style.opacity = 0;
128 | 	canvas.style.background = 'black';
129 | 	canvas.style.borderRadius = '10px';
130 | 	canvas.style.padding = '10px';
131 | 
132 | 	canvas.style.webkitTransitionProperty = 'opacity, -webkit-transform, transform, top, left, right, bottom';
133 | 	canvas.style.webkitTransitionDuration = '0.5s, 0.5s, 0s, 0s, 0s, 0s'
134 | 	canvas.style.position = 'absolute';
135 | 	canvas.style.zIndex = '9999999999999999';
136 | 	
137 | 
138 | 	container.appendChild(canvas);
139 | 	document.body.appendChild(container)
140 | 	return canvas;
141 | }
142 | 
143 | function renderProgress(pct){
144 | 	if(!navArrow) return; //nav arrow is necessary
145 | 	if(pct == 0){
146 | 		navArrow.style.opacity = pct;
147 | 	}else{
148 | 		navArrow.style.opacity = pct * 0.4 + 0.1;	
149 | 	}
150 | 
151 | 	if(INVERT_ARROW) pct = 1 - pct;	
152 | 	
153 | 	var boxEdge = 50 + 10 * 2; //50px w/h + 10px padding
154 | 	
155 | 	//CAVEAT EMPTOR, the 45deg multiples render slightly off
156 | 	//but fixing that might incur moar code, ergo not doing it
157 | 	//not now at least, but if you feel like doing it, have fun
158 | 
159 | 	var nW = ((innerWidth + boxEdge) * pct - boxEdge) + 'px';
160 | 	var nH = ((innerHeight + boxEdge) * pct - boxEdge) + 'px';
161 | 	// console.log(nW, nH)
162 | 	if(direction == 180 || direction == 0){
163 | 		navArrow.style.top = (innerHeight / 2 - boxEdge / 2) + 'px';
164 | 	}else if(direction == 270 || direction == 90){
165 | 		navArrow.style.left = (innerWidth / 2 - boxEdge / 2) + 'px';
166 | 	}
167 | 	//these are for the diags
168 | 	if(direction == 315 || direction == 225 || direction == 270){ // UP
169 | 		navArrow.style.bottom = nH;
170 | 	}else if(direction == 135 || direction == 45 || direction == 90){ //DOWN
171 | 		navArrow.style.top = nH;
172 | 	}
173 | 	if(direction == 315 || direction == 45 || direction == 0){ //RIGHT
174 | 		navArrow.style.left = nW;
175 | 	}else if(direction == 225 || direction == 135 || direction == 180){ //LEFT
176 | 		navArrow.style.right = nW;
177 | 	}
178 | }
179 | 
180 | 
181 | var scrollListened = [];
182 | var lastDetectedScroll = 0;
183 | var wheelBuffer = [];
184 | var lastWheelTimer = -1;
185 | var direction;
186 | var navArrow;
187 | var len = 0;
188 | var currentSession = -1;
189 | // 0 = unknown/not begun
190 | // 1 = scroll
191 | // 2 = MAGICALPONIES
192 | 
193 | function detectScroll(e){
194 | 	console.log("detected scroll on", e.target, e, +new Date)
195 | 	lastDetectedScroll = +new Date;
196 | 	removeListeners();
197 | }
198 | 
199 | function removeListeners(){
200 | 	for(var i = 0; i < scrollListened.length; i++){
201 | 		scrollListened[i].removeEventListener('scroll', detectScroll, false)
202 | 	}
203 | 	scrollListened = [];
204 | }
205 | 
206 | function mouseWheel(x, y){
207 | 	// if(navArrow && x % 10 == 0 && y % 10 == 0 && (Math.abs(x) > 100 || Math.abs(y) > 100)){
208 | 	// 	navArrow.style.webkitTransitionDuration = '0.5s, 0.5s, 0.5s, 0.2s, 0.2s, 0.2s';
209 | 	// }
210 | 
211 | 	//dot product of direction and the stuff, why, i dont know im dumb
212 | 	var ty = (XY_SPLIT) * y, tx = (1 - XY_SPLIT) * x;
213 | 	var r_dir = direction / 180 * Math.PI;
214 | 	var r_cmp = Math.atan2(ty, tx);
215 | 	var mag = Math.sqrt(ty*ty + tx*tx);
216 | 	var dp = mag * Math.cos(r_cmp - r_dir);
217 | 	var ortho = mag * Math.sin(r_cmp - r_dir)
218 | 
219 | 	// console.log(Math.round(xortho), Math.round(ortho))
220 | 	//give transformLength a positive thing just cause
221 | 	len += transformLength(Math.abs(dp)) * (dp < 0 ? -1 : 1) - Math.abs(ortho / 3); //subtract ortho to punish deviation
222 | 
223 | 	var pct = Math.max(0, Math.min(1, len / LENGTH_THRESHOLD));
224 | 	// console.log(dp, len, pct);
225 | 	renderProgress(pct);
226 | 
227 | 	if(pct >= 0.80){
228 | 		//DONE!
229 | 		removeArrow(navArrow, true);
230 | 		if(currentSession != 3){
231 | 			signalCompletion();	
232 | 		}
233 | 		
234 | 		currentSession = 3;
235 | 	}
236 | }
237 | 
238 | function removeArrow(arrow, complete){
239 | 	if(arrow && arrow.style){
240 | 		if(complete){
241 | 			arrow.style.webkitTransitionDuration = '0.5s, 0.5s, 0.2s, 0.2s, 0.2s, 0.2s'	
242 | 			renderProgress(1)	
243 | 		}else if(currentSession != 3){
244 | 			arrow.style.webkitTransitionDuration = '0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s';
245 | 			renderProgress(0)
246 | 			arrow.style.webkitTransform = 'scale(2.0)';
247 | 			signalCancellation()
248 | 		}
249 | 		
250 | 		arrow.addEventListener('webkitTransitionEnd', function(){
251 | 			var gc;
252 | 			while(gc = document.querySelector('.swipe-gestures-container-element'))
253 | 				gc.parentNode.removeChild(gc);
254 | 		})
255 | 	}
256 | 	if(arrow === navArrow){
257 | 		navArrow = null;
258 | 	}
259 | }
260 | 
261 | function endTrigger(){
262 | 	signalEnd();
263 | 	removeArrow(navArrow);
264 | 	currentSession = -1;
265 | 	wheelBuffer = [];
266 | 	len = 0;
267 | 	clearTimeout(lastWheelTimer);
268 | }
269 | 
270 | function scrollTrigger(){
271 | 	if(navArrow) navArrow.style.display = 'none';
272 | 	removeArrow(navArrow);
273 | 	wheelBuffer = [];
274 | 	currentSession = 1;
275 | 	signalScroll();
276 | 	var gc;
277 | 	while(gc = document.querySelector('.swipe-gestures-container-element'))
278 | 		gc.parentNode.removeChild(gc);
279 | }
280 | 
281 | 
282 | function wheelEvent(e){
283 | 	var orientations = Object.keys(ACTION_MAP).filter(function(e){
284 | 		return ACTION_MAP[e] != 'disabled'
285 | 	}).map(function(e){
286 | 		return parseInt(e, 10)
287 | 	});
288 | 
289 | 	if(orientations.length == 0) return;
290 | 
291 | 	clearTimeout(lastWheelTimer);
292 | 
293 | 	//to convert wheelDeltas to cartesian, you have to flip it
294 | 	//because negative = scroll down
295 | 
296 | 	var deltaX = -e.wheelDeltaX, deltaY = -e.wheelDeltaY;
297 | 
298 | 	if(currentSession == 1){
299 | 		lastWheelTimer = setTimeout(endTrigger, 600);
300 | 	}else if(currentSession == 3){
301 | 		lastWheelTimer = setTimeout(endTrigger, 400);	
302 | 	}else{
303 | 		lastWheelTimer = setTimeout(endTrigger, 900);	
304 | 	}
305 | 	
306 | 	if(currentSession == 0 || currentSession == -1){
307 | 		wheelBuffer.push([deltaX, deltaY]);
308 | 	}
309 | 	if(currentSession == 2 || currentSession == 3){
310 | 		if(len > LENGTH_THRESHOLD * 0.01){
311 | 			e.preventDefault();
312 | 			e.stopPropagation();	
313 | 		}else if(len < -0.1 * LENGTH_THRESHOLD){
314 | 			scrollTrigger();
315 | 		}
316 | 	}
317 | 	if(currentSession == 2){
318 | 		mouseWheel(deltaX, deltaY);
319 | 
320 | 	}else if(currentSession == -1){
321 | 		removeListeners();
322 | 		var el = document.elementFromPoint(e.clientX, e.clientY);
323 | 		do {
324 | 			// console.log("parent", el);
325 | 			scrollListened.push(el);
326 | 			el.addEventListener('scroll', detectScroll, false);	
327 | 		} while (el = el.parentNode);
328 | 		var checkpointScroll = lastDetectedScroll;
329 | 		// isTriggering = 1;
330 | 		currentSession = 0;
331 | 		setTimeout(function(){
332 | 			var orientation = 0;
333 | 			// console.log(wheelBuffer)
334 | 			var mag_sum = 0, ang_sum = 0;
335 | 			var angles = wheelBuffer.forEach(function(xy){
336 | 				var x = xy[0], y = xy[1], mag = Math.sqrt(x * x + y * y);
337 | 				mag_sum += mag;
338 | 				ang_sum += ((2 * 360 + Math.atan2(y, x) / Math.PI * 180) % 360) * mag;
339 | 			});
340 | 			var mean = ang_sum / Math.max(1, mag_sum);
341 | 			
342 | 			var closest = orientations.sort(function(a, b){
343 | 				return Math.pow(mean - a, 2) - Math.pow(mean - b, 2)
344 | 			})[0];
345 | 			// console.log(mean, stdev, closest);
346 | 			// console.log(wheelBuffer.length)
347 | 			if(checkpointScroll == lastDetectedScroll && 
348 | 				wheelBuffer.length > 0 && 
349 | 				// stdev < 15 && 
350 | 				Math.abs(closest - mean) < 30
351 | 			){
352 | 				direction = closest;
353 | 				navArrow = createArrow();
354 | 				drawArrow(navArrow, closest);
355 | 				renderProgress(0)
356 | 				currentSession = 2;
357 | 				wheelBuffer = [];
358 | 			
359 | 			}else{
360 | 				scrollTrigger()
361 | 			}
362 | 			
363 | 		}, 100)
364 | 		// empirically, the margin is usually only about 3msecs
365 | 		// so having an order of magnitude's worth in leeway is probably
366 | 		// sufficient
367 | 	}
368 | }
369 | 
370 | window.addEventListener('mousewheel', wheelEvent);


--------------------------------------------------------------------------------