-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (167 loc) · 6.06 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<title>Proficio JS</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="libs/input-range-stylize.min.css">
<link rel="stylesheet" type="text/css" href="libs/syntax-chroma-default.css">
<link rel="stylesheet" type="text/css" href="libs/syntax-chroma-red.css">
<link rel="stylesheet" type="text/css" href="css/proficio.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body>
<div id="header" class="container-fluid">
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Proficio JS</h1>
<p class="lead">An abstract interactive range visualization engine in vanilla JS.</p>
<hr class="my-4">
<div class="col-6 mx-auto">
<p>Build really cool transitional effects, such as interactive infographics, spread or progress of whatever (illnesses, populations, ideas, etc.) on maps, and whatever else you can dream up.</p>
</div>
<p class="lead">
<a class="btn btn-outline-warning btn-lg" href="https://github.com/ArtBlue/ProficioJS" role="button">View on Github</a>
</p>
</div>
</div>
</div>
<div class="container">
<div class="demo-group">
<h2>Basic Implementation</h2>
<code data-lang="JS">
document.addEventListener('DOMContentLoaded',function() {
var options = {
id: 'demo1',
name: 'demo1',
targetContainer: '#demo1-target',
rangeContainer: '#demo1',
val: 25,
min: 0,
max: 100,
granularity: "5"
}
var myProficio1 = new Proficio(options);
},false);
</code>
<p>Drag the control...</p>
<div id="demo1"></div>
<div id="demo1-target"></div>
</div>
<div class="demo-group">
<h2>Vertical Implementation</h2>
<p>Advanced demo with custom callback for range changes:</p>
<code data-lang="JS">
document.addEventListener('DOMContentLoaded',function() {
var options = {
id: 'demo2',
name: 'demo2',
targetContainer: '#demo2-target',
rangeContainer: '#demo2',
val: 10,
min: 0,
max: 100,
granularity: "10",
orientation: 'v',
callback: function() {
var myRangeInstance = this
, myTargetElem = document.querySelector('#demo2-target')
, myRangeVal = myRangeInstance.val
, myNewOpacity = myRangeVal/100;
;
console.log('My custom callback with my Proficio JS instance: ', myRangeInstance)
console.log('Setting the opacity of the target based on the progress made in the range: ' + myNewOpacity);
myTargetElem.style.cssText = 'opacity: ' + myNewOpacity;
}
}
var myProficio2 = new Proficio(options);
},false);
</code>
<p>Drag the control...</p>
<div id="demo2"></div>
<div id="demo2-target"></div>
</div>
<code data-lang="JS">
document.addEventListener('DOMContentLoaded',function() {
var options = {
id: 'demo3',
name: 'demo3',
targetContainer: '#demo3-target',
rangeContainer: '#demo3',
val: 25,
min: 0,
max: 100,
granularity: "5",
orientation: 'h'
}
var myProficio3 = new Proficio(options);
// use new instance to call API methods
myProficio3.step('down');
myProficio3.step('up');
myProficio3.set(10);
},false);
</code>
<div class="demo-group">
<h2>Advanced Implementation With step() and set() Controls</h2>
<p>Advanced demo with external <u>step()</u> and <u>set()</u> controls.</p>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2 rangeStepper" role="group" aria-label="First group">
<button type="button" id="demo3-stepUp" data-direction="up" class="btn btn-primary">+</button>
<button type="button" id="demo3-stepDown" data-direction="down" class="btn btn-primary">-</button>
</div>
<form id="demo3-form" class="input-group">
<input type="text" id="demo3-input" class="form-control" placeholder="Enter Value" aria-label="Enter Value" aria-describedby="btnGroupAddon">
<button type="submit" class="btn btn-primary">Change Value</button>
</form>
</div>
<div id="demo3"></div>
<div id="demo3-target"></div>
</div>
<div class="demo-group">
<h2>Advanced Implementation With play(), pause() and stop() Controls</h2>
<p>Advanced demo with external `play()` functionality and custom play speed.</p>
<code data-lang="JS">
document.addEventListener('DOMContentLoaded',function() {
var options = {
id: 'demo4',
name: 'demo4',
targetContainer: '#demo4-target',
rangeContainer: '#demo4',
val: 1,
min: 1,
max: 10,
granularity: "1",
playSpeed: 500
}
var myProficio4 = new Proficio(options);
// use new instance to call API methods
myProficio4.play(); // automatically plays the range
myProficio4.pause(); // pauses the playing range
myProficio4.stop(); // stops and reset the range
},false);
</code>
<div class="rangePlayer">
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" id="demo4-play" data-action="play" class="btn btn-primary">Play</button>
<button type="button" id="demo4-pause" data-action="pause" class="btn btn-primary">Pause</button>
<button type="button" id="demo4-stop" data-action="stop" class="btn btn-primary">Stop</button>
</div>
</div>
</div>
<div id="demo4"></div>
<div id="demo4-target"></div>
</div>
<h3>Documentation</h3>
<p>
For full documentation, please see the `docs` folder or the readme of the <a href="https://github.com/ArtBlue/ProficioJS" target="_blank">Github repository</a>.
</p>
</div>
<script type="text/javascript" src="libs/syntax-chroma.min.js"></script>
<script type="text/javascript" src="src/proficio.js"></script>
<script type="text/javascript" src="src/demo.js"></script>
</body>
</html>