aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Bidelman2012-04-14 14:39:08 -0700
committerEric Bidelman2012-04-14 14:39:08 -0700
commitba1842bd2162d4fa3c7189621825afd765bea5fa (patch)
treea001e4f56275a0c19ce889b5aa44c2d7dc34e6c7
parent92d59f701df13fe8e99d2c908dcf18450c53b762 (diff)
downloadio-slides-remote-ba1842bd2162d4fa3c7189621825afd765bea5fa.tar.gz
Hammer.js instead. Touch working on mobile
style sheets now in main .html file. Better for mobile rather than dynamically loading in js matcMedia polyfill
Diffstat
-rw-r--r--images/barchart.pngbin35110 -> 17632 bytes
-rw-r--r--images/chart.pngbin160060 -> 91914 bytes
-rw-r--r--images/google_developers_icon_128.pngbin7911 -> 4316 bytes
-rw-r--r--images/google_developers_icon_64.svg55
-rw-r--r--images/google_developers_logo.pngbin21013 -> 14800 bytes
-rw-r--r--images/google_developers_logo_white.pngbin10427 -> 7105 bytes
-rw-r--r--images/io2012_logo.pngbin18834 -> 13016 bytes
-rw-r--r--images/sky.jpgbin204942 -> 194552 bytes
-rwxr-xr-xjs/hammer.js586
-rw-r--r--js/polyfills/matchMedia.js30
-rw-r--r--js/slides.js52
-rw-r--r--template.html16
-rw-r--r--theme/css/phone.css21
-rw-r--r--theme/sass/phone.scss27
14 files changed, 715 insertions, 72 deletions
diff --git a/images/barchart.png b/images/barchart.png
index 5349b86..1e57437 100644
--- a/images/barchart.png
+++ b/images/barchart.png
Binary files differ
diff --git a/images/chart.png b/images/chart.png
index faef742..09b5451 100644
--- a/images/chart.png
+++ b/images/chart.png
Binary files differ
diff --git a/images/google_developers_icon_128.png b/images/google_developers_icon_128.png
index 582f905..befbd0b 100644
--- a/images/google_developers_icon_128.png
+++ b/images/google_developers_icon_128.png
Binary files differ
diff --git a/images/google_developers_icon_64.svg b/images/google_developers_icon_64.svg
deleted file mode 100644
index 093f87a..0000000
--- a/images/google_developers_icon_64.svg
+++ /dev/null
@@ -1,55 +0,0 @@
1<?xml version="1.0" encoding="utf-8"?>
2<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
6<g>
7 <g>
8 <radialGradient id="SVGID_1_" cx="46.6426" cy="3.9438" r="44.8096" gradientUnits="userSpaceOnUse">
9 <stop offset="0" style="stop-color:#0DA960"/>
10 <stop offset="1" style="stop-color:#03914B"/>
11 </radialGradient>
12 <path fill="url(#SVGID_1_)" d="M55.595,43.111c0.652,1.079,0.666,2.783,0.105,3.952l7.779-12.955c0.694-1.162,0.694-3.054,0-4.21
13 L50.905,8.956c-0.695-1.155-2.369-2.104-3.722-2.104H36.228c-1.349,0-1.885,0.949-1.19,2.104l7.827,13.031
14 c0.048,0.066,0.115,0.125,0.156,0.185L55.595,43.111z"/>
15 <radialGradient id="SVGID_2_" cx="48.1445" cy="32.0298" r="33.2363" gradientUnits="userSpaceOnUse">
16 <stop offset="0" style="stop-color:#FFCD4D"/>
17 <stop offset="1" style="stop-color:#F6C338"/>
18 </radialGradient>
19 <path fill="url(#SVGID_2_)" d="M36.228,57.148h10.956c1.353,0,3.026-0.941,3.722-2.105l4.795-7.979
20 c0.561-1.169,0.547-2.873-0.105-3.952l-7.979-13.213c0.694,1.156,0.694,3.048,0,4.21l-7.779,12.945
21 c-0.04,0.087-0.06,0.188-0.103,0.269l-4.776,7.951C34.468,56.318,34.971,57.148,36.228,57.148z"/>
22 <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="58.6494" y1="38.4805" x2="44.5011" y2="38.4805">
23 <stop offset="0" style="stop-color:#231F20;stop-opacity:0.2"/>
24 <stop offset="1" style="stop-color:#F1F2F2;stop-opacity:0.25"/>
25 </linearGradient>
26 <path fill="url(#SVGID_3_)" d="M55.595,43.111l-7.979-13.213c0.694,1.156,0.694,3.048,0,4.21l-2.809,4.681L55.7,47.063
27 C56.261,45.895,56.247,44.19,55.595,43.111z"/>
28 </g>
29 <g>
30
31 <radialGradient id="SVGID_4_" cx="-163.5859" cy="70.9922" r="44.812" gradientTransform="matrix(-1 0 0 -1 -146.2246 131.0488)" gradientUnits="userSpaceOnUse">
32 <stop offset="0" style="stop-color:#4387FD"/>
33 <stop offset="1" style="stop-color:#4683EA"/>
34 </radialGradient>
35 <path fill="url(#SVGID_4_)" d="M8.403,20.889c-0.645-1.081-0.667-2.783-0.099-3.953L0.521,29.893
36 c-0.693,1.161-0.693,3.053,0,4.211l12.58,20.938c0.693,1.157,2.37,2.105,3.714,2.105h10.958c1.352,0,1.89-0.948,1.194-2.105
37 l-7.831-13.029c-0.044-0.066-0.116-0.125-0.154-0.188L8.403,20.889z"/>
38
39 <radialGradient id="SVGID_5_" cx="-162.0825" cy="99.0752" r="33.2407" gradientTransform="matrix(-1 0 0 -1 -146.2246 131.0488)" gradientUnits="userSpaceOnUse">
40 <stop offset="0" style="stop-color:#E04A3F"/>
41 <stop offset="1" style="stop-color:#CD372D"/>
42 </radialGradient>
43 <path fill="url(#SVGID_5_)" d="M27.773,6.852H16.815c-1.345,0-3.021,0.944-3.714,2.104l-4.796,7.979
44 c-0.568,1.17-0.546,2.873,0.099,3.953l7.985,13.216c-0.696-1.158-0.696-3.05,0-4.211l7.778-12.948
45 c0.039-0.086,0.058-0.185,0.108-0.269l4.773-7.949C29.538,7.681,29.029,6.852,27.773,6.852z"/>
46
47 <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-151.5752" y1="105.5283" x2="-165.7284" y2="105.5283" gradientTransform="matrix(-1 0 0 -1 -146.2246 131.0488)">
48 <stop offset="0" style="stop-color:#231F20;stop-opacity:0.2"/>
49 <stop offset="1" style="stop-color:#F1F2F2;stop-opacity:0.25"/>
50 </linearGradient>
51 <path fill="url(#SVGID_6_)" d="M8.403,20.889l7.985,13.216c-0.696-1.158-0.696-3.05,0-4.211l2.811-4.681L8.305,16.936
52 C7.737,18.105,7.758,19.808,8.403,20.889z"/>
53 </g>
54</g>
55</svg>
diff --git a/images/google_developers_logo.png b/images/google_developers_logo.png
index 4e75eac..49b34b7 100644
--- a/images/google_developers_logo.png
+++ b/images/google_developers_logo.png
Binary files differ
diff --git a/images/google_developers_logo_white.png b/images/google_developers_logo_white.png
index 4fe17f7..72a9cb7 100644
--- a/images/google_developers_logo_white.png
+++ b/images/google_developers_logo_white.png
Binary files differ
diff --git a/images/io2012_logo.png b/images/io2012_logo.png
index e92436d..ae3babf 100644
--- a/images/io2012_logo.png
+++ b/images/io2012_logo.png
Binary files differ
diff --git a/images/sky.jpg b/images/sky.jpg
index 480893c..9b50b1d 100644
--- a/images/sky.jpg
+++ b/images/sky.jpg
Binary files differ
diff --git a/js/hammer.js b/js/hammer.js
new file mode 100755
index 0000000..44a5802
--- /dev/null
+++ b/js/hammer.js
@@ -0,0 +1,586 @@
1/*
2 * Hammer.JS
3 * version 0.4
4 * author: Eight Media
5 * https://github.com/EightMedia/hammer.js
6 */
7function Hammer(element, options, undefined)
8{
9 var self = this;
10
11 var defaults = {
12 // prevent the default event or not... might be buggy when false
13 prevent_default : false,
14 css_hacks : true,
15
16 drag : true,
17 drag_vertical : true,
18 drag_horizontal : true,
19 // minimum distance before the drag event starts
20 drag_min_distance : 20, // pixels
21
22 // pinch zoom and rotation
23 transform : true,
24 scale_treshold : 0.1,
25 rotation_treshold : 15, // degrees
26
27 tap : true,
28 tap_double : true,
29 tap_max_interval : 300,
30 tap_double_distance: 20,
31
32 hold : true,
33 hold_timeout : 500
34 };
35 options = mergeObject(defaults, options);
36
37 // some css hacks
38 (function() {
39 if(!options.css_hacks) {
40 return false;
41 }
42
43 var vendors = ['webkit','moz','ms','o',''];
44 var css_props = {
45 "userSelect": "none",
46 "touchCallout": "none",
47 "userDrag": "none",
48 "tapHighlightColor": "rgba(0,0,0,0)"
49 };
50
51 var prop = '';
52 for(var i = 0; i < vendors.length; i++) {
53 for(var p in css_props) {
54 prop = p;
55 if(vendors[i]) {
56 prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
57 }
58 element.style[ prop ] = css_props[p];
59 }
60 }
61 })();
62
63 // holds the distance that has been moved
64 var _distance = 0;
65
66 // holds the exact angle that has been moved
67 var _angle = 0;
68
69 // holds the diraction that has been moved
70 var _direction = 0;
71
72 // holds position movement for sliding
73 var _pos = { };
74
75 // how many fingers are on the screen
76 var _fingers = 0;
77
78 var _first = false;
79
80 var _gesture = null;
81 var _prev_gesture = null;
82
83 var _touch_start_time = null;
84 var _prev_tap_pos = {x: 0, y: 0};
85 var _prev_tap_end_time = null;
86
87 var _hold_timer = null;
88
89 var _offset = {};
90
91 // keep track of the mouse status
92 var _mousedown = false;
93
94 var _event_start;
95 var _event_move;
96 var _event_end;
97
98
99 /**
100 * angle to direction define
101 * @param float angle
102 * @return string direction
103 */
104 this.getDirectionFromAngle = function( angle )
105 {
106 var directions = {
107 down: angle >= 45 && angle < 135, //90
108 left: angle >= 135 || angle <= -135, //180
109 up: angle < -45 && angle > -135, //270
110 right: angle >= -45 && angle <= 45 //0
111 };
112
113 var direction, key;
114 for(key in directions){
115 if(directions[key]){
116 direction = key;
117 break;
118 }
119 }
120 return direction;
121 };
122
123
124 /**
125 * count the number of fingers in the event
126 * when no fingers are detected, one finger is returned (mouse pointer)
127 * @param event
128 * @return int fingers
129 */
130 function countFingers( event )
131 {
132 // there is a bug on android (until v4?) that touches is always 1,
133 // so no multitouch is supported, e.g. no, zoom and rotation...
134 return event.touches ? event.touches.length : 1;
135 }
136
137
138 /**
139 * get the x and y positions from the event object
140 * @param event
141 * @return array [{ x: int, y: int }]