semanticUI.js
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
$.noty.themes.semanticUI = {
name: 'semanticUI',
template: '<div class="ui message"><div class="content"><div class="header"></div></div></div>',
animation: {
open : {
animation: 'fade',
duration : '800ms'
},
close: {
animation: 'fade left',
duration : '800ms'
}
},
modal : {
css: {
position : 'fixed',
width : '100%',
height : '100%',
backgroundColor: '#000',
zIndex : 10000,
opacity : 0.6,
display : 'none',
left : 0,
top : 0
}
},
style : function () {
this.$message = this.$bar.find('.ui.message');
this.$message.find('.header').html(this.options.header);
this.$message.find('.content').append(this.options.text);
this.$bar.css({
margin : '0.5em',
position: 'relative'
});
if (this.options.icon) {
this.$message.addClass('icon').prepend($('<i/>').addClass(this.options.icon));
}
this.$progressBar.css({
position : 'absolute',
left : 0,
bottom : 0,
height : 4,
width : '100%',
backgroundColor: '#000000',
opacity : 0.2,
'-ms-filter' : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)',
filter : 'alpha(opacity=20)'
});
switch (this.options.size) {
case 'mini':
this.$message.addClass('mini');
break;
case 'tiny':
this.$message.addClass('tiny');
break;
case 'small':
this.$message.addClass('small');
break;
case 'large':
this.$message.addClass('large');
break;
case 'big':
this.$message.addClass('big');
break;
case 'huge':
this.$message.addClass('huge');
break;
case 'massive':
this.$message.addClass('massive');
break;
}
switch (this.options.type) {
case 'info':
this.$message.addClass('info');
break;
case 'warning':
this.$message.addClass('warning');
break;
case 'error':
this.$message.addClass('error');
break;
case 'negative':
this.$message.addClass('negative');
break;
case 'success':
this.$message.addClass('success');
break;
case 'positive':
this.$message.addClass('positive');
break;
case 'floating':
this.$message.addClass('floating');
break;
}
},
callback: {
onShow : function () {
// Enable transition
this.$bar.addClass('transition');
// Actual transition
this.$bar.transition(this.options.animation.open);
},
onClose: function () {
this.$bar.transition(this.options.animation.close);
}
}
};