dnet45/modules/uoa-repository-dashboard-gui/trunk/src/public/js/core/leader.js @ 46812
1 |
import { Class } from '../mixin/index'; |
---|---|
2 |
import { getCssVar } from '../util/index'; |
3 |
|
4 |
export default function (UIkit) { |
5 |
|
6 |
UIkit.component('leader', { |
7 |
|
8 |
mixins: [Class], |
9 |
|
10 |
props: { |
11 |
fill: String, |
12 |
media: 'media' |
13 |
},
|
14 |
|
15 |
defaults: { |
16 |
fill: '', |
17 |
media: false, |
18 |
clsWrapper: 'uk-leader-fill', |
19 |
clsHide: 'uk-leader-hide', |
20 |
attrFill: 'data-fill' |
21 |
},
|
22 |
|
23 |
computed: { |
24 |
|
25 |
fill() { |
26 |
return this.$props.fill || getCssVar('leader-fill'); |
27 |
}
|
28 |
|
29 |
},
|
30 |
|
31 |
connected() { |
32 |
this.wrapper = this.$el.wrapInner(`<span class="${this.clsWrapper}">`).children().first(); |
33 |
},
|
34 |
|
35 |
disconnected() { |
36 |
this.wrapper.contents().unwrap(); |
37 |
},
|
38 |
|
39 |
update: [ |
40 |
|
41 |
{
|
42 |
|
43 |
read() { |
44 |
var prev = this._width; |
45 |
this._width = Math.floor(this.$el[0].offsetWidth / 2); |
46 |
this._changed = prev !== this._width; |
47 |
this._hide = this.media && !window.matchMedia(this.media).matches; |
48 |
},
|
49 |
|
50 |
write() { |
51 |
|
52 |
this.wrapper.toggleClass(this.clsHide, this._hide); |
53 |
|
54 |
if (this._changed) { |
55 |
this.wrapper.attr(this.attrFill, Array(this._width).join(this.fill)); |
56 |
}
|
57 |
|
58 |
},
|
59 |
|
60 |
events: ['load', 'resize'] |
61 |
|
62 |
}
|
63 |
]
|
64 |
});
|
65 |
|
66 |
}
|