|
1
|
import { Class } from '../mixin/index';
|
|
2
|
import { $, extend, isRtl, promise, swap } from '../util/index';
|
|
3
|
import closeIcon from '../../images/components/close-icon.svg';
|
|
4
|
import closeLarge from '../../images/components/close-large.svg';
|
|
5
|
import navbarToggleIcon from '../../images/components/navbar-toggle-icon.svg';
|
|
6
|
import overlayIcon from '../../images/components/overlay-icon.svg';
|
|
7
|
import paginationNext from '../../images/components/pagination-next.svg';
|
|
8
|
import paginationPrevious from '../../images/components/pagination-previous.svg';
|
|
9
|
import searchIcon from '../../images/components/search-icon.svg';
|
|
10
|
import searchLarge from '../../images/components/search-large.svg';
|
|
11
|
import searchNavbar from '../../images/components/search-navbar.svg';
|
|
12
|
import slidenavNext from '../../images/components/slidenav-next.svg';
|
|
13
|
import slidenavNextLarge from '../../images/components/slidenav-next-large.svg';
|
|
14
|
import slidenavPrevious from '../../images/components/slidenav-previous.svg';
|
|
15
|
import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
|
|
16
|
import spinner from '../../images/components/spinner.svg';
|
|
17
|
import totop from '../../images/components/totop.svg';
|
|
18
|
|
|
19
|
export default function (UIkit) {
|
|
20
|
|
|
21
|
var parsed = {},
|
|
22
|
icons = {
|
|
23
|
spinner,
|
|
24
|
totop,
|
|
25
|
'close-icon': closeIcon,
|
|
26
|
'close-large': closeLarge,
|
|
27
|
'navbar-toggle-icon': navbarToggleIcon,
|
|
28
|
'overlay-icon': overlayIcon,
|
|
29
|
'pagination-next': paginationNext,
|
|
30
|
'pagination-previous': paginationPrevious,
|
|
31
|
'search-icon': searchIcon,
|
|
32
|
'search-large': searchLarge,
|
|
33
|
'search-navbar': searchNavbar,
|
|
34
|
'slidenav-next': slidenavNext,
|
|
35
|
'slidenav-next-large': slidenavNextLarge,
|
|
36
|
'slidenav-previous': slidenavPrevious,
|
|
37
|
'slidenav-previous-large': slidenavPreviousLarge
|
|
38
|
};
|
|
39
|
|
|
40
|
UIkit.component('icon', UIkit.components.svg.extend({
|
|
41
|
|
|
42
|
attrs: ['icon', 'ratio'],
|
|
43
|
|
|
44
|
mixins: [Class],
|
|
45
|
|
|
46
|
name: 'icon',
|
|
47
|
|
|
48
|
args: 'icon',
|
|
49
|
|
|
50
|
props: ['icon'],
|
|
51
|
|
|
52
|
defaults: {exclude: ['id', 'style', 'class', 'src']},
|
|
53
|
|
|
54
|
init() {
|
|
55
|
this.$el.addClass('uk-icon');
|
|
56
|
|
|
57
|
if (isRtl) {
|
|
58
|
this.icon = swap(swap(this.icon, 'left', 'right'), 'previous', 'next');
|
|
59
|
}
|
|
60
|
},
|
|
61
|
|
|
62
|
update: {
|
|
63
|
|
|
64
|
read() {
|
|
65
|
|
|
66
|
if (this.delay) {
|
|
67
|
var icon = this.getIcon();
|
|
68
|
|
|
69
|
if (icon) {
|
|
70
|
this.delay(icon);
|
|
71
|
}
|
|
72
|
}
|
|
73
|
},
|
|
74
|
|
|
75
|
events: ['load']
|
|
76
|
|
|
77
|
},
|
|
78
|
|
|
79
|
methods: {
|
|
80
|
|
|
81
|
getSvg() {
|
|
82
|
|
|
83
|
var icon = this.getIcon();
|
|
84
|
|
|
85
|
if (!icon) {
|
|
86
|
|
|
87
|
if (document.readyState !== 'complete') {
|
|
88
|
return promise(resolve => {
|
|
89
|
this.delay = resolve;
|
|
90
|
});
|
|
91
|
}
|
|
92
|
|
|
93
|
return promise.reject('Icon not found.');
|
|
94
|
|
|
95
|
}
|
|
96
|
|
|
97
|
return promise.resolve(icon);
|
|
98
|
},
|
|
99
|
|
|
100
|
getIcon() {
|
|
101
|
|
|
102
|
if (!icons[this.icon]) {
|
|
103
|
return null;
|
|
104
|
}
|
|
105
|
|
|
106
|
if (!parsed[this.icon]) {
|
|
107
|
parsed[this.icon] = this.parse(icons[this.icon]);
|
|
108
|
}
|
|
109
|
|
|
110
|
return parsed[this.icon];
|
|
111
|
}
|
|
112
|
|
|
113
|
}
|
|
114
|
|
|
115
|
}));
|
|
116
|
|
|
117
|
[
|
|
118
|
'navbar-toggle-icon',
|
|
119
|
'overlay-icon',
|
|
120
|
'pagination-previous',
|
|
121
|
'pagination-next',
|
|
122
|
'totop'
|
|
123
|
].forEach(name => registerComponent(name));
|
|
124
|
|
|
125
|
[
|
|
126
|
'slidenav-previous',
|
|
127
|
'slidenav-next'
|
|
128
|
].forEach(name => registerComponent(name, {
|
|
129
|
|
|
130
|
init() {
|
|
131
|
this.$el.addClass('uk-slidenav');
|
|
132
|
|
|
133
|
if (this.$el.hasClass('uk-slidenav-large')) {
|
|
134
|
this.icon += '-large';
|
|
135
|
}
|
|
136
|
}
|
|
137
|
|
|
138
|
}));
|
|
139
|
|
|
140
|
registerComponent('search-icon', {
|
|
141
|
|
|
142
|
init() {
|
|
143
|
if (this.$el.hasClass('uk-search-icon') && this.$el.parents('.uk-search-large').length) {
|
|
144
|
this.icon = 'search-large';
|
|
145
|
} else if (this.$el.parents('.uk-search-navbar').length) {
|
|
146
|
this.icon = 'search-navbar';
|
|
147
|
}
|
|
148
|
}
|
|
149
|
|
|
150
|
});
|
|
151
|
|
|
152
|
registerComponent('close', {
|
|
153
|
|
|
154
|
init() {
|
|
155
|
this.icon = `close-${this.$el.hasClass('uk-close-large') ? 'large' : 'icon'}`;
|
|
156
|
}
|
|
157
|
|
|
158
|
});
|
|
159
|
|
|
160
|
registerComponent('spinner', {
|
|
161
|
|
|
162
|
connected() {
|
|
163
|
|
|
164
|
this.height = this.width = this.$el.width();
|
|
165
|
|
|
166
|
this.svg.then(svg => {
|
|
167
|
|
|
168
|
var circle = $(svg).find('circle'),
|
|
169
|
diameter = Math.floor(this.width / 2);
|
|
170
|
|
|
171
|
svg.setAttribute('viewBox', `0 0 ${this.width} ${this.width}`);
|
|
172
|
|
|
173
|
circle.attr({cx: diameter, cy: diameter, r: diameter - parseFloat(circle.css('stroke-width') || 0)});
|
|
174
|
});
|
|
175
|
}
|
|
176
|
|
|
177
|
});
|
|
178
|
|
|
179
|
UIkit.icon.add = added => extend(icons, added);
|
|
180
|
|
|
181
|
function registerComponent(name, mixin) {
|
|
182
|
|
|
183
|
UIkit.component(name, UIkit.components.icon.extend({
|
|
184
|
|
|
185
|
name,
|
|
186
|
|
|
187
|
mixins: mixin ? [mixin] : [],
|
|
188
|
|
|
189
|
defaults: {
|
|
190
|
icon: name
|
|
191
|
}
|
|
192
|
|
|
193
|
}));
|
|
194
|
}
|
|
195
|
|
|
196
|
}
|