1
|
|
|
import 'promise-polyfill/src/polyfill'; |
2
|
|
|
|
3
|
|
|
// Plain Javascript |
4
|
|
|
//event listener: DOM ready |
5
|
|
|
function addLoadEvent(func) { |
6
|
|
|
var oldonload = window.onload; |
7
|
|
|
if (typeof window.onload != 'function') { |
8
|
|
|
window.onload = func; |
9
|
|
|
} else { |
10
|
|
|
window.onload = function () { |
11
|
|
|
if (oldonload) { |
12
|
|
|
oldonload(); |
13
|
|
|
} |
14
|
|
|
func(); |
15
|
|
|
} |
16
|
|
|
} |
17
|
|
|
} |
18
|
|
|
|
19
|
|
|
//call plugin function after DOM ready |
20
|
|
|
addLoadEvent(function () { |
21
|
|
|
outdatedBrowser({ |
22
|
|
|
bgColor: '#f25648', |
23
|
|
|
color: '#ffffff', |
24
|
|
|
cssProp: 'borderImage' |
25
|
|
|
}) |
26
|
|
|
}); |
27
|
|
|
|
28
|
|
|
var outdatedBrowser = function (options) { |
29
|
|
|
//Variable definition (before ajax) |
30
|
|
|
var outdated = document.getElementById("outdated"); |
31
|
|
|
|
32
|
|
|
//Define opacity and fadeIn/fadeOut functions |
33
|
|
|
var done = true; |
34
|
|
|
|
35
|
|
|
function function_opacity(opacity_value) { |
36
|
|
|
outdated.style.opacity = opacity_value / 100; |
37
|
|
|
outdated.style.filter = 'alpha(opacity=' + opacity_value + ')'; |
38
|
|
|
} |
39
|
|
|
|
40
|
|
|
function function_fade_in(opacity_value) { |
41
|
|
|
function_opacity(opacity_value); |
42
|
|
|
if (opacity_value === 1) { |
43
|
|
|
outdated.style.display = 'block'; |
44
|
|
|
} |
45
|
|
|
if (opacity_value === 100) { |
46
|
|
|
done = true; |
47
|
|
|
} |
48
|
|
|
} |
49
|
|
|
var supports = (function () { |
50
|
|
|
var div = document.createElement('div'), |
51
|
|
|
vendors = 'Khtml Ms O Moz Webkit'.split(' '), |
52
|
|
|
len = vendors.length; |
53
|
|
|
|
54
|
|
|
return function (prop) { |
55
|
|
|
if (prop in div.style) return true; |
|
|
|
|
56
|
|
|
|
57
|
|
|
prop = prop.replace(/^[a-z]/, function (val) { |
58
|
|
|
return val.toUpperCase(); |
59
|
|
|
}); |
60
|
|
|
|
61
|
|
|
while (len--) { |
|
|
|
|
62
|
|
|
if (vendors[len] + prop in div.style) { |
63
|
|
|
return true; |
64
|
|
|
} |
65
|
|
|
} |
66
|
|
|
return false; |
67
|
|
|
}; |
68
|
|
|
})(); |
69
|
|
|
|
70
|
|
|
//if browser does not supports css3 property (transform=default), if does > exit all this |
71
|
|
|
if (!supports('' + options.cssProp + '')) { |
72
|
|
|
if (done && outdated.style.opacity !== '1') { |
73
|
|
|
done = false; |
|
|
|
|
74
|
|
|
for (var i = 1; i <= 100; i++) { |
75
|
|
|
setTimeout((function (x) { |
76
|
|
|
return function () { |
77
|
|
|
function_fade_in(x); |
78
|
|
|
}; |
79
|
|
|
})(i), i * 8); |
80
|
|
|
} |
81
|
|
|
} |
82
|
|
|
} else { |
83
|
|
|
return; |
84
|
|
|
} |
85
|
|
|
|
86
|
|
|
startStylesAndEvents(); |
87
|
|
|
|
88
|
|
|
//events and colors |
89
|
|
|
function startStylesAndEvents() { |
90
|
|
|
var btnClose = document.getElementById("btnCloseUpdateBrowser"); |
91
|
|
|
var btnUpdate = document.getElementById("btnUpdateBrowser"); |
92
|
|
|
|
93
|
|
|
//check settings attributes |
94
|
|
|
outdated.style.backgroundColor = options.bgColor; |
95
|
|
|
//way too hard to put !important on IE6 |
96
|
|
|
outdated.style.color = options.color; |
97
|
|
|
outdated.children[0].style.color = options.color; |
98
|
|
|
outdated.children[1].style.color = options.color; |
99
|
|
|
|
100
|
|
|
//check settings attributes |
101
|
|
|
btnUpdate.style.color = options.color; |
102
|
|
|
// btnUpdate.style.borderColor = options.color; |
103
|
|
|
if (btnUpdate.style.borderColor) btnUpdate.style.borderColor = options.color; |
|
|
|
|
104
|
|
|
btnClose.style.color = options.color; |
105
|
|
|
|
106
|
|
|
//close button |
107
|
|
|
btnClose.onmousedown = function () { |
108
|
|
|
outdated.style.display = 'none'; |
109
|
|
|
return false; |
110
|
|
|
}; |
111
|
|
|
|
112
|
|
|
//Override the update button color to match the background color |
113
|
|
|
btnUpdate.onmouseover = function () { |
114
|
|
|
this.style.color = options.bgColor; |
115
|
|
|
this.style.backgroundColor = options.color; |
116
|
|
|
}; |
117
|
|
|
btnUpdate.onmouseout = function () { |
118
|
|
|
this.style.color = options.color; |
119
|
|
|
this.style.backgroundColor = options.bgColor; |
120
|
|
|
}; |
121
|
|
|
}//end styles and events |
122
|
|
|
|
123
|
|
|
|
124
|
|
|
////////END of outdatedBrowser function |
125
|
|
|
}; |
126
|
|
|
|
127
|
|
|
|
128
|
|
|
|
129
|
|
|
|
130
|
|
|
|
131
|
|
|
|
132
|
|
|
|
133
|
|
|
|
Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.
Consider:
If you or someone else later decides to put another statement in, only the first statement will be executed.
In this case the statement
b = 42
will always be executed, while the logging statement will be executed conditionally.ensures that the proper code will be executed conditionally no matter how many statements are added or removed.