|
rlm@3
|
1 /**
|
|
rlm@3
|
2 * Fx.ProgressBar
|
|
rlm@3
|
3 *
|
|
rlm@3
|
4 * @version 1.1
|
|
rlm@3
|
5 *
|
|
rlm@3
|
6 * @license MIT License
|
|
rlm@3
|
7 *
|
|
rlm@3
|
8 * @author Harald Kirschner <mail [at] digitarald [dot] de>
|
|
rlm@3
|
9 * @copyright Authors
|
|
rlm@3
|
10 */
|
|
rlm@3
|
11
|
|
rlm@3
|
12 Fx.ProgressBar = new Class({
|
|
rlm@3
|
13
|
|
rlm@3
|
14 Extends: Fx,
|
|
rlm@3
|
15
|
|
rlm@3
|
16 options: {
|
|
rlm@3
|
17 text: null,
|
|
rlm@3
|
18 url: null,
|
|
rlm@3
|
19 transition: Fx.Transitions.Circ.easeOut,
|
|
rlm@3
|
20 fit: true,
|
|
rlm@3
|
21 link: 'cancel'
|
|
rlm@3
|
22 },
|
|
rlm@3
|
23
|
|
rlm@3
|
24 initialize: function(element, options) {
|
|
rlm@3
|
25 this.element = $(element);
|
|
rlm@3
|
26 this.parent(options);
|
|
rlm@3
|
27
|
|
rlm@3
|
28 var url = this.options.url;
|
|
rlm@3
|
29 if (url) {
|
|
rlm@3
|
30 this.element.setStyles({
|
|
rlm@3
|
31 'background-image': 'url(' + url + ')',
|
|
rlm@3
|
32 'background-repeat': 'no-repeat'
|
|
rlm@3
|
33 });
|
|
rlm@3
|
34 }
|
|
rlm@3
|
35
|
|
rlm@3
|
36 if (this.options.fit) {
|
|
rlm@3
|
37 url = url || this.element.getStyle('background-image').replace(/^url\(["']?|["']?\)$/g, '');
|
|
rlm@3
|
38 if (url) {
|
|
rlm@3
|
39 var fill = new Image();
|
|
rlm@3
|
40 fill.onload = function() {
|
|
rlm@3
|
41 this.fill = fill.width;
|
|
rlm@3
|
42 fill = fill.onload = null;
|
|
rlm@3
|
43 this.set(this.now || 0);
|
|
rlm@3
|
44 }.bind(this);
|
|
rlm@3
|
45 fill.src = url;
|
|
rlm@3
|
46 if (!this.fill && fill.width) fill.onload();
|
|
rlm@3
|
47 }
|
|
rlm@3
|
48 } else {
|
|
rlm@3
|
49 this.set(0);
|
|
rlm@3
|
50 }
|
|
rlm@3
|
51 },
|
|
rlm@3
|
52
|
|
rlm@3
|
53 start: function(to, total) {
|
|
rlm@3
|
54 return this.parent(this.now, (arguments.length == 1) ? to.limit(0, 100) : to / total * 100);
|
|
rlm@3
|
55 },
|
|
rlm@3
|
56
|
|
rlm@3
|
57 set: function(to) {
|
|
rlm@3
|
58 this.now = to;
|
|
rlm@3
|
59 var css = (this.fill)
|
|
rlm@3
|
60 ? (((this.fill / -2) + (to / 100) * (this.element.width || 1) || 0).round() + 'px')
|
|
rlm@3
|
61 : ((100 - to) + '%');
|
|
rlm@3
|
62
|
|
rlm@3
|
63 this.element.setStyle('backgroundPosition', css + ' 0px').title = Math.round(to) + '%';
|
|
rlm@3
|
64
|
|
rlm@3
|
65 var text = $(this.options.text);
|
|
rlm@3
|
66 if (text) text.set('text', Math.round(to) + '%');
|
|
rlm@3
|
67
|
|
rlm@3
|
68 return this;
|
|
rlm@3
|
69 }
|
|
rlm@3
|
70
|
|
rlm@3
|
71 }); |
