Widget.ProgressBar/index.htm at gh-pages · raphpell/Widget.ProgressBar · GitHub

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
<html>
<head>
	<title>Barre de progression</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<style>
	FIELDSET {
		float: left;
		margin: 1em 0 2em;
		border: 4px solid #000;
		}
	CODE, PRE {
		background: #000;
		border-radius: .5em;
		color: #EEE;
		font: bold 1em Courier;
		padding: .25em .5em;
		}
	#eProgressBar {
		float: right;
		margin: 0.5em;
		width: 50%;
		}
	.animForm {
		float: left;
		}
	.description {
		float: right;
		padding: 2em;
		}
	</style>
</head>
<body>

<a href="https://github.com/raphpell/Widget.ProgressBar">Répertoire du projet</a>

<h1>Barre de progression</h1>

<pre>var oProgressBar = new ProgressBar ( eProgressBar, nTotal )</pre>


<fieldset>
	<legend><code>oProgressBar</code></legend>
	<table>
		<tr>
			<td>
				<code>.add(1)</code>
				<input type="button" onclick="oProgressBar.add(1)" value="Ajouter un bloc">
			</td><td>Ajoute des bloques</td>
		</tr>
		<tr>
			<td>
				<code>.reset()</code>
				<input type="button" onclick="oProgressBar.reset()" value="Initialiser">
			</td><td>Initialise le compteur</td>
		</tr>
		<tr>
			<td>
				<code>.hide()</code>
				<input type="button" onclick="oProgressBar.hide()" value="Masquer">
			</td><td>Masque le widget.</td>
		</tr>
		<tr>
			<td>
				<code>.show()</code>
				<input type="button" onclick="oProgressBar.show()" value="Afficher">
			</td><td>Affiche le widget.</td>
		</tr>
		<tr>
			<td>
				<code><label for="eColor">.bColor</label></code>
				<input type="checkbox" onclick="oProgressBar.bColor=eColor.checked" id="eColor" checked>
			</td><td>Couleurs de rouge à verte utilisées.</td>
		</tr>
		<tr>
			<td>
				<code><label for="eColorInverted">.bInvertedColor</label></code>
				<input type="checkbox" onclick="oProgressBar.bInvertedColor=eColorInverted.checked" id="eColorInverted">
			</td><td>Couleurs de verte à rouge utilisées (inversion).</td>
		</tr>
		<tr>
			<td>
				<code><label for="ePercent">.bPercentage</label></code>
				<input type="checkbox" onclick="oProgressBar.bPercentage=ePercent.checked" id="ePercent" checked>
			</td><td>Afficher les pourcentages.</td>
		</tr>
		<tr>
			<td><code>
				<label for="eTotal">.setTotal</label>
				(<input type="textbox" id="eTotal" onchange="oProgressBar.setTotal( eTotal.value )" value="5" size="3">)
			</code></td><td>Nombre de bloc.</td>
		</tr>
	</table>
</fieldset>


<div id="eProgressBar"></div>

<ul class="animForm">
	<li><input type="checkbox" onclick="switchAnimate()" id="eAnimate"><label for="eAnimate">Animer. </label></li>
	<li><label for="eTime">Temps: </label><input type="textbox" id="eTime" value="500" size="3"></li>
</ul>

<div class="description">
	<dl>
		<dt><b>De rouge à vert</b></dt>
		<dd>Le widget se masque automatiquement à 100%.</dd>
		<dd>Usage: <i>Affichage de la complétion d'une tâche.</i></dd>
		<dt><b>De vert à rouge</b></dt>
		<dd>Le widget reste affiché si il dépasse les 100%.</dd>
		<dd>Usage: <i>Affichage du dépassement de limite autorisée.</i></dd>
	</dl>
<div>

<script src="js/scripts.js"></script>
<script>
// Eléments HTML
var eProgressBar = document.getElementById( 'eProgressBar' )
var eColor = document.getElementById( 'eColor' )
var eColorInverted = document.getElementById( 'eColorInverted' )
var eTotal = document.getElementById( 'eTotal' )
var ePercent = document.getElementById( 'ePercent' )
var eAnimate = document.getElementById( 'eAnimate' )
var eTime = document.getElementById( 'eTime' )

// Barre de progression
var oProgressBar = new ProgressBar ( eProgressBar )
oProgressBar.bColor = eColor.checked
oProgressBar.bInvertedColor=eColorInverted.checked
oProgressBar.bPercentage = ePercent.checked
oProgressBar.setTotal( eTotal.value )
oProgressBar.reset()

// Animation de la barre
var nInterval
var nTimeOut
function switchAnimate (){
	if( nInterval ){
		clearInterval( nInterval )
		nInterval = null
		}
	else
		nInterval = setInterval( function(){
			oProgressBar.add(1)
			if( oProgressBar.nValue == oProgressBar.nTotal && ! nTimeOut ){
				switchAnimate()
				nTimeOut = setTimeout( function(){
					oProgressBar.reset()
					nTimeOut = null
					switchAnimate()
					}, 1000 )
				}
			}, eTime.value )
	}
if( eAnimate.checked ) switchAnimate()
</script>

</body>
</html>