-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (91 loc) · 3.56 KB
/
index.html
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Wheel Pickers</title>
<!-- Add libraries -->
<script type="text/javascript" src="js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/libs/jquery-ui-1.8.5.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.mobile-1.3.2.min.js"></script>
<!-- Add objects classes -->
<script src="js/Rect.js" type="text/javascript"></script>
<script src="js/WheelPicker.js" type="text/javascript"></script>
<!-- Add styles -->
<link href="css/wheelPicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Hide jQuery Mobile loading message
$.mobile.loadingMessage = false;
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="a">
<h1>Wheel Pickers</h1>
</div>
<div id="wheelFiniteVal"></div>
<div id="wheelInfiniteVal"></div>
<div data-role="content" class="content" data-theme="d">
</div>
</div>
<script type="text/javascript">
// Create UI handler
function UI() {
this.showFiniteVal = function(val) {
$('#wheelFiniteVal').html('Finite wheel value:' + val );
}
this.showInfiniteVal = function(val) {
$('#wheelInfiniteVal').html('Infinite wheel value:' + val );
}
}
// Grab screen size
var scrHeight = $(window).height();
var scrWidth = $(window).width();
// Define pickers sizes
var wheelX = scrWidth * 0.02;
var wheelY = scrHeight * 0.2;
var wheelWidth = scrWidth * 0.05;
var wheelHeight = scrHeight * 0.2;
var wheelRect = new Rect(wheelX, wheelY, wheelWidth, wheelHeight);
var wheelRect2 = new Rect(wheelX+ (2*wheelWidth), wheelY, wheelWidth, wheelHeight);
// Define elements
var wheelElements = new Array();
wheelElements[0] = 0;
wheelElements[1] = 1;
wheelElements[2] = 2;
wheelElements[3] = 3;
wheelElements[4] = 4;
wheelElements[5] = 5;
wheelElements[6] = 6;
wheelElements[7] = 7;
wheelElements[8] = 8;
wheelElements[9] = 9;
var context = $(document.body);
var label = "";
var finiteDefVal = 2;
var infiniteDefVal = 6;
// Create finite wheel
var wheelPicker = new WheelPicker('wheelPicker', wheelRect, wheelElements, finiteDefVal, false, false, label, context);
wheelPicker.add();
wheelPicker.setOnChangeListener(function(wheel) {
ui.showFiniteVal(wheel.getValue());
console.log('Wheel picker: ' + wheel.getValue());
});
// Create infinite wheel
var wheelPickerInf = new WheelPicker('wheelPickerInf', wheelRect2, wheelElements, infiniteDefVal, true, false, label, context);
wheelPickerInf.add();
wheelPickerInf.setOnChangeListener(function(wheel) {
ui.showInfiniteVal(wheel.getValue());
console.log('Wheel inf picker: ' + wheel.getValue());
});
// Show beggining values
var ui = new UI();
ui.showFiniteVal(finiteDefVal);
ui.showInfiniteVal(infiniteDefVal);
// Rotate that wheel!
setTimeout(function() {
wheelPickerInf.scrollBy(-100, true);
}, 800);
</script>
</body>
</html>