1 | /**
|
2 | * @license
|
3 | * Copyright 2015 Google Inc. All Rights Reserved.
|
4 | *
|
5 | * Licensed under the Apache License, Version 2.0 (the "License");
|
6 | * you may not use this file except in compliance with the License.
|
7 | * You may obtain a copy of the License at
|
8 | *
|
9 | * http://www.apache.org/licenses/LICENSE-2.0
|
10 | *
|
11 | * Unless required by applicable law or agreed to in writing, software
|
12 | * distributed under the License is distributed on an "AS IS" BASIS,
|
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
14 | * See the License for the specific language governing permissions and
|
15 | * limitations under the License.
|
16 | */
|
17 |
|
18 | (function() {
|
19 | ;
|
20 |
|
21 | /**
|
22 | * Class constructor for Progress MDL component.
|
23 | * Implements MDL component design pattern defined at:
|
24 | * https://github.com/jasonmayes/mdl-component-design-pattern
|
25 | *
|
26 | * @constructor
|
27 | * @param {HTMLElement} element The element that will be upgraded.
|
28 | */
|
29 | var MaterialProgress = function MaterialProgress(element) {
|
30 | this.element_ = element;
|
31 |
|
32 | // Initialize instance.
|
33 | this.init();
|
34 | };
|
35 | window['MaterialProgress'] = MaterialProgress;
|
36 |
|
37 | /**
|
38 | * Store constants in one place so they can be updated easily.
|
39 | *
|
40 | * @enum {string | number}
|
41 | * @private
|
42 | */
|
43 | MaterialProgress.prototype.Constant_ = {
|
44 | };
|
45 |
|
46 | /**
|
47 | * Store strings for class names defined by this component that are used in
|
48 | * JavaScript. This allows us to simply change it in one place should we
|
49 | * decide to modify at a later date.
|
50 | *
|
51 | * @enum {string}
|
52 | * @private
|
53 | */
|
54 | MaterialProgress.prototype.CssClasses_ = {
|
55 | INDETERMINATE_CLASS: 'mdl-progress__indeterminate'
|
56 | };
|
57 |
|
58 | /**
|
59 | * Set the current progress of the progressbar.
|
60 | *
|
61 | * @param {number} p Percentage of the progress (0-100)
|
62 | * @public
|
63 | */
|
64 | MaterialProgress.prototype.setProgress = function(p) {
|
65 | if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
|
66 | return;
|
67 | }
|
68 |
|
69 | this.progressbar_.style.width = p + '%';
|
70 | };
|
71 | MaterialProgress.prototype['setProgress'] =
|
72 | MaterialProgress.prototype.setProgress;
|
73 |
|
74 | /**
|
75 | * Set the current progress of the buffer.
|
76 | *
|
77 | * @param {number} p Percentage of the buffer (0-100)
|
78 | * @public
|
79 | */
|
80 | MaterialProgress.prototype.setBuffer = function(p) {
|
81 | this.bufferbar_.style.width = p + '%';
|
82 | this.auxbar_.style.width = (100 - p) + '%';
|
83 | };
|
84 | MaterialProgress.prototype['setBuffer'] =
|
85 | MaterialProgress.prototype.setBuffer;
|
86 |
|
87 | /**
|
88 | * Initialize element.
|
89 | */
|
90 | MaterialProgress.prototype.init = function() {
|
91 | if (this.element_) {
|
92 | var el = document.createElement('div');
|
93 | el.className = 'progressbar bar bar1';
|
94 | this.element_.appendChild(el);
|
95 | this.progressbar_ = el;
|
96 |
|
97 | el = document.createElement('div');
|
98 | el.className = 'bufferbar bar bar2';
|
99 | this.element_.appendChild(el);
|
100 | this.bufferbar_ = el;
|
101 |
|
102 | el = document.createElement('div');
|
103 | el.className = 'auxbar bar bar3';
|
104 | this.element_.appendChild(el);
|
105 | this.auxbar_ = el;
|
106 |
|
107 | this.progressbar_.style.width = '0%';
|
108 | this.bufferbar_.style.width = '100%';
|
109 | this.auxbar_.style.width = '0%';
|
110 |
|
111 | this.element_.classList.add('is-upgraded');
|
112 | }
|
113 | };
|
114 |
|
115 | // The component registers itself. It can assume componentHandler is available
|
116 | // in the global scope.
|
117 | componentHandler.register({
|
118 | constructor: MaterialProgress,
|
119 | classAsString: 'MaterialProgress',
|
120 | cssClass: 'mdl-js-progress',
|
121 | widget: true
|
122 | });
|
123 | })();
|