5
* Author: Gerd Weitenberg (hahnebuechen@web.de)
14
var $code; // unique code
15
var $status = 'new'; // current status (new,show,hide)
16
var $step = 0; // current step
17
var $position = array(); // current bar position
21
var $min = 0; // minimal steps
22
var $max = 100; // maximal steps
24
var $left = 10; // bar position from left
25
var $top = 25; // bar position from top
26
var $width = 300; // bar width
27
var $height = 25; // bar height
28
var $pedding = 0; // bar pedding
29
var $color = '#0033ff'; // bar color
30
var $bgr_color = '#c0c0c0'; // bar background color
31
var $border = 1; // bar border width
32
var $brd_color = '#000000'; // bar border color
34
var $direction = 'right'; // direction of motion (right,left,up,down)
36
var $frame = array('show' => false); // ProgressBar Frame
37
/* 'show' => false, # frame show (true/false)
38
'left' => 200, # frame position from left
39
'top' => 100, # frame position from top
40
'width' => 300, # frame width
41
'height' => 75, # frame height
42
'color' => '#c0c0c0', # frame color
43
'border' => 2, # frame border
44
'brd_color' => '#dfdfdf #404040 #404040 #dfdfdf' # frame border color
47
var $label = array(); // ProgressBar Labels
48
/* 'name' => array( # label name
49
'type' => 'text', # label type (text,button,step,percent,crossbar)
50
'value' => 'Please wait ...', # label value
51
'left' => 10, # label position from left
52
'top' => 20, # label position from top
53
'width' => 0, # label width
54
'height' => 0, # label height
55
'align' => 'left', # label align
56
'font-size' => 11, # label font size
57
'font-family' => 'Verdana, Tahoma, Arial', # label font family
58
'font-weight' => '', # label font weight
59
'color' => '#000000', # label font color
60
'bgr_color' => '' # label background color
66
function ProgressBar($width=0,$height=0)
68
$this->code = substr(md5(microtime()), 0, 6);
69
if ($width>0) {$this->width = $width;}
70
if ($height>0) {$this->height = $height;}
75
function _calculatePercent($step)
77
$percent = round(($step - $this->min) / ($this->max - $this->min) * 100);
78
if ($percent > 100) {$percent = 100;}
82
function _calculatePosition($step)
84
switch ($this->direction) {
95
$pixel = round(($step - $this->min) * ($bar - ($this->pedding * 2)) / ($this->max - $this->min));
96
if ($step <= $this->min) {$pixel = 0;}
97
if ($step >= $this->max) {$pixel = $bar - ($this->pedding * 2);}
99
switch ($this->direction) {
101
$position['left'] = $this->pedding;
102
$position['top'] = $this->pedding;
103
$position['width'] = $pixel;
104
$position['height'] = $this->height - ($this->pedding * 2);
107
$position['left'] = $this->width - $this->pedding - $pixel;
108
$position['top'] = $this->pedding;
109
$position['width'] = $pixel;
110
$position['height'] = $this->height - ($this->pedding * 2);
113
$position['left'] = $this->pedding;
114
$position['top'] = $this->pedding;
115
$position['width'] = $this->width - ($this->pedding * 2);
116
$position['height'] = $pixel;
119
$position['left'] = $this->pedding;
120
$position['top'] = $this->height - $this->pedding - $pixel;
121
$position['width'] = $this->width - ($this->pedding * 2);
122
$position['height'] = $pixel;
128
function _setStep($step)
130
if ($step > $this->max) {$step = $this->max;}
131
if ($step < $this->min) {$step = $this->min;}
137
function setFrame($width=0,$height=0)
139
$this->frame = array(
145
'color' => '#c0c0c0',
147
'brd_color' => '#dfdfdf #404040 #404040 #dfdfdf'
150
if ($width>0) {$this->frame['width'] = $width;}
151
if ($height>0) {$this->frame['height'] = $height;}
154
function addLabel($type,$name,$value=' ')
158
$this->label[$name] = array(
161
'left' => $this->left,
162
'top' => $this->top - 16,
167
'font-family' => 'Verdana, Tahoma, Arial',
168
'font-weight' => 'normal',
169
'color' => '#000000',
174
$this->label[$name] = array(
179
'left' => $this->left,
180
'top' => $this->top + $this->height + 10,
185
'font-family' => 'Verdana, Tahoma, Arial',
186
'font-weight' => 'normal',
187
'color' => '#000000',
192
$this->label[$name] = array(
195
'left' => $this->left + 5,
196
'top' => $this->top + 5,
201
'font-family' => 'Verdana, Tahoma, Arial',
202
'font-weight' => 'normal',
203
'color' => '#000000',
208
$this->label[$name] = array(
211
'left' => $this->left + $this->width - 50,
212
'top' => $this->top - 16,
217
'font-family' => 'Verdana, Tahoma, Arial',
218
'font-weight' => 'normal',
219
'color' => '#000000',
224
$this->label[$name] = array(
225
'type' => 'crossbar',
227
'left' => $this->left + ($this->width / 2),
228
'top' => $this->top - 16,
233
'font-family' => 'Verdana, Tahoma, Arial',
234
'font-weight' => 'normal',
235
'color' => '#000000',
242
function addButton($name,$value,$action,$target='self')
244
$this->addLabel('button',$name,$value);
245
$this->label[$name]['action'] = $action;
246
$this->label[$name]['target'] = $target;
249
function setLabelPosition($name,$left,$top,$width,$height,$align='')
251
$this->label[$name]['top'] = intval($top);
252
$this->label[$name]['left'] = intval($left);
253
$this->label[$name]['width'] = intval($width);
254
$this->label[$name]['height'] = intval($height);
255
if ($align!='') {$this->label[$name]['align'] = $align;}
257
if ($this->status!='new') {
258
echo '<script type="text/JavaScript">document.getElementById("plbl'.$name.$this->code.'").style.top="'.$this->label[$name]['top'].'px";document.getElementById("plbl'.$name.$this->code.'").style.left="'.$this->label[$name]['left'].'px";document.getElementById("plbl'.$name.$this->code.'").style.width="'.$this->label[$name]['width'].'px";document.getElementById("plbl'.$name.$this->code.'").style.height="'.$this->label[$name]['height'].'px";document.getElementById("plbl'.$name.$this->code.'").style.align="'.$this->label[$name]['align'].'";</script>'."\n";
263
function setLabelColor($name,$color)
265
$this->label[$name]['color'] = $color;
266
if ($this->status!='new') {
267
echo '<script type="text/JavaScript">document.getElementById("plbl'.$name.$this->code.'").style.color="'.$color.'";</script>'."\n";
272
function setLabelBackground($name,$color)
274
$this->label[$name]['bgr_color'] = $color;
275
if ($this->status!='new') {
276
echo '<script type="text/JavaScript">document.getElementById("plbl'.$name.$this->code.'").style.background="'.$color.'";</script>'."\n";
281
function setLabelFont($name,$size,$family='',$weight='')
283
$this->label[$name]['font-size'] = intval($size);
284
if ($family!='') {$this->label[$name]['font-family'] = $family;}
285
if ($weight!='') {$this->label[$name]['font-weight'] = $weight;}
287
if ($this->status!='new') {
288
echo '<script type="text/JavaScript">document.getElementById("plbl'.$name.$this->code.'").style.font-size="'.$this->label[$name]['font-size'].'px";document.getElementById("plbl'.$name.$this->code.'").style.font-family="'.$this->label[$name]['font-family'].'";document.getElementById("plbl'.$name.$this->code.'").style.font-weight="'.$this->label[$name]['font-weight'].'";</script>'."\n";
293
function setLabelValue($name,$value)
295
$this->label[$name]['value'] = $value;
296
if ($this->status!='new') {
297
echo '<script type="text/JavaScript">PBlabelText'.$this->code.'("'.$name.'","'.$this->label[$name]['value'].'");</script>'."\n";
302
function setBarColor($color)
304
$this->color = $color;
305
if ($this->status!='new') {
306
echo '<script type="text/JavaScript">document.getElementById("pbar'.$this->code.'").style.background="'.$color.'";</script>'."\n";
311
function setBarBackground($color)
313
$this->bgr_color = $color;
314
if ($this->status!='new') {
315
echo '<script type="text/JavaScript">document.getElementById("pbrd'.$this->code.'").style.background="'.$color.'";</script>'."\n";
320
function setBarDirection($direction)
322
$this->direction = $direction;
324
if ($this->status!='new') {
325
$this->position = $this->_calculatePosition($this->step);
327
echo '<script type="text/JavaScript">';
328
echo 'PBposition'.$this->code.'("left",'.$this->position['left'].');';
329
echo 'PBposition'.$this->code.'("top",'.$this->position['top'].');';
330
echo 'PBposition'.$this->code.'("width",'.$this->position['width'].');';
331
echo 'PBposition'.$this->code.'("height",'.$this->position['height'].');';
332
echo '</script>'."\n";
342
$this->_setStep($this->step);
343
$this->position = $this->_calculatePosition($this->step);
345
$style_brd = 'position:absolute;top:'.$this->top.'px;left:'.$this->left.'px;width:'.$this->width.'px;height:'.$this->height.'px;background:'.$this->bgr_color.';';
346
if ($this->border>0) {$style_brd .= 'border:'.$this->border.'px solid;border-color:'.$this->brd_color.';';}
348
$style_bar = 'position:absolute;top:'.$this->position['top'].'px;left:'.$this->position['left'].'px;'.'width:'.$this->position['width'].'px;height:'.$this->position['height'].'px;background:'.$this->color.';';
350
if ($this->frame['show']==true) {
351
if ($this->frame['border']>0) {$border = 'border:'.$this->frame['border'].'px solid;border-color:'.$this->frame['brd_color'].';';}
352
$html = '<div id="pfrm'.$this->code.'" style="position:absolute;top:'.$this->frame['top'].'px;left:'.$this->frame['left'].'px;width:'.$this->frame['width'].'px;height:'.$this->frame['height'].'px;'.$border.'background:'.$this->frame['color'].';">'."\n";
355
$html .= '<div id="pbrd'.$this->code.'" style="'.$style_brd.'">'."\n";
356
$html .= '<div id="pbar'.$this->code.'" style="'.$style_bar.'"></div></div>'."\n";
358
$js .= 'function PBposition'.$this->code.'(item,pixel) {'."\n";
359
$js .= ' pixel = parseInt(pixel);'."\n";
360
$js .= ' switch(item) {'."\n";
361
$js .= ' case "left": document.getElementById("pbar'.$this->code.'").style.left=(pixel) + \'px\'; break;'."\n";
362
$js .= ' case "top": document.getElementById("pbar'.$this->code.'").style.top=(pixel) + \'px\'; break;'."\n";
363
$js .= ' case "width": document.getElementById("pbar'.$this->code.'").style.width=(pixel) + \'px\'; break;'."\n";
364
$js .= ' case "height": document.getElementById("pbar'.$this->code.'").style.height=(pixel) + \'px\'; break;'."\n";
368
foreach($this->label as $name => $data) {
369
$style_lbl = 'position:absolute;top:'.$data['top'].'px;left:'.$data['left'].'px;text-align:'.$data['align'].';';
370
if ($data['width']>0) {$style_lbl .= 'width:'.$data['width'].'px;';}
371
if ($data['height']>0) {$style_lbl .= 'height:'.$data['height'].'px;';}
373
if (array_key_exists('font-size', $data)) {$style_lbl .= 'font-size:'.$data['font-size'].'px;';}
374
if (array_key_exists('font-family', $data)) {$style_lbl .= 'font-family:'.$data['font-family'].';';}
375
if (array_key_exists('font-weight', $data)) {$style_lbl .= 'font-weight:'.$data['font-weight'].';';}
376
if (array_key_exists('bgr_color', $data) && ($data['bgr_color']!='')) {$style_lbl .= 'background:'.$data['bgr_color'].';';}
378
if (array_key_exists('type', $data)) {
379
switch ($data['type']) {
381
$html .= '<div id="plbl'.$name.$this->code.'" style="'.$style_lbl.'">'.$data['value'].'</div>'."\n";
384
$html .= '<div><input id="plbl'.$name.$this->code.'" type="button" value="'.$data['value'].'" style="'.$style_lbl.'" onclick="'.$data['target'].'.location.href=\''.$data['action'].'\'" /></div>'."\n";
387
$html .= '<div id="plbl'.$name.$this->code.'" style="'.$style_lbl.'">'.$this->step.'</div>'."\n";
390
$html .= '<div id="plbl'.$name.$this->code.'" style="'.$style_lbl.'">'.$this->_calculatePercent($this->step).'%</div>'."\n";
393
$html .= '<div id="plbl'.$name.$this->code.'" style="'.$style_lbl.'">'.$data['value'].'</div>'."\n";
395
$js .= 'function PBrotaryCross'.$name.$this->code.'() {'."\n";
396
$js .= ' cross = document.getElementById("plbl'.$name.$this->code.'").firstChild.nodeValue;'."\n";
397
$js .= ' switch(cross) {'."\n";
398
$js .= ' case "--": cross = "\\\\"; break;'."\n";
399
$js .= ' case "\\\\": cross = "|"; break;'."\n";
400
$js .= ' case "|": cross = "/"; break;'."\n";
401
$js .= ' default: cross = "--"; break;'."\n";
403
$js .= ' document.getElementById("plbl'.$name.$this->code.'").firstChild.nodeValue = cross;'."\n";
410
if(count($this->label)>0) {
412
$js .= 'function PBlabelText'.$this->code.'(name,text) {'."\n";
413
$js .= ' name = "plbl" + name + "'.$this->code.'";'."\n";
414
$js .= ' document.getElementById(name).firstChild.nodeValue=text;'."\n";
418
if ($this->frame['show']==true) {
419
$html .= '</div>'."\n";
422
$html .= '<script type="text/JavaScript">'."\n";
424
$html .= '</script>'."\n";
431
$this->status = 'show';
432
echo $this->getHtml();
436
function moveStep($step)
438
$last_step = $this->step;
439
$this->_setStep($step);
443
$new_position = $this->_calculatePosition($this->step);
444
if ($new_position['width']!=$this->position['width'] && ($this->direction=='right' || $this->direction=='left')) {
445
if ($this->direction=='left') {
446
$js .= 'PBposition'.$this->code.'("left",'.$new_position['left'].');';
448
$js .= 'PBposition'.$this->code.'("width",'.$new_position['width'].');';
450
if ($new_position['height']!=$this->position['height'] && ($this->direction=='up' || $this->direction=='down')) {
451
if ($this->direction=='up') {
452
$js .= 'PBposition'.$this->code.'("top",'.$new_position['top'].');';
454
$js .= 'PBposition'.$this->code.'("height",'.$new_position['height'].');';
456
$this->position = $new_position;
458
foreach($this->label as $name => $data) {
459
if (array_key_exists('type', $data)) {
460
switch($data['type']) {
462
if ($this->step!=$last_step) {
463
$js .= 'PBlabelText'.$this->code.'("'.$name.'","'.$this->step.'/'.$this->max.'");';
467
$percent = $this->_calculatePercent($this->step);
468
if ($percent!=$this->_calculatePercent($last_step)) {
469
$js .= 'PBlabelText'.$this->code.'("'.$name.'","'.$percent.'%");';
473
$js .= 'PBrotaryCross'.$name.$this->code.'();';
479
echo '<script type="text/JavaScript">'.$js.'</script>'."\n";
486
$this->moveStep($this->step + 1);
491
$this->moveStep($this->min);
496
if ($this->status=='show') {
497
$this->status = 'hide';
499
echo '<script type="text/JavaScript">document.getElementById("pbrd'.$this->code.'").style.visibility="hidden";document.getElementById("pbar'.$this->code.'").style.visibility="hidden";';
500
if ($this->frame['show']==true) {
501
echo 'document.getElementById("pfrm'.$this->code.'").style.visibility="hidden";';
503
foreach($this->label as $name => $data) {
504
echo 'document.getElementById("plbl'.$name.$this->code.'").style.visibility="hidden";';
506
echo '</script>'."\n";
513
if ($this->status=='hide') {
514
$this->status = 'show';
516
echo '<script type="text/JavaScript">document.getElementById("pbrd'.$this->code.'").style.visibility="visible";document.getElementById("pbar'.$this->code.'").style.visibility="visible";';
517
if ($this->frame['show']==true) {
518
echo 'document.getElementById("pfrm'.$this->code.'").style.visibility="visible";';
520
foreach($this->label as $name => $data) {
521
echo 'document.getElementById("plbl'.$name.$this->code.'").style.visibility="visible";';
523
echo '</script>'."\n";