Skip to content

Commit 7061e5b

Browse files
afshinmafshinm
committed
IE8 compatibility, related to usablica#59 
1 parent e4ba5bb commit 7061e5b

File tree

3 files changed

+54
-11
lines changed

3 files changed

+54
-11
lines changed

‎example/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,12 @@
1111
<link href="css/bootstrap.min.css" rel="stylesheet">
1212
<link href="css/demo.css" rel="stylesheet">
1313

14-
<!-- Add IntroJs style -->
14+
<!-- Add IntroJs styles -->
1515
<link href="../introjs.css" rel="stylesheet">
16+
<!--[if lte IE 8]>
17+
<link href="../introjs-ie.css" rel="stylesheet">
18+
<!-- <![endif]-->
19+
1620
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
1721
</head>
1822

‎intro.js

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Intro.js v0.2.1
2+
* Intro.js v0.2.2
33
* https://github.com/usablica/intro.js
44
* MIT licensed
55
*
@@ -9,7 +9,7 @@
99
(function () {
1010

1111
//Default config/variables
12-
var VERSION = "0.2.1";
12+
var VERSION = "0.2.2";
1313

1414
/**
1515
* IntroJs main class
@@ -64,7 +64,7 @@
6464
var skipButton = targetElm.querySelector(".introjs-skipbutton"),
6565
nextStepButton = targetElm.querySelector(".introjs-nextbutton");
6666

67-
window.onkeydown = function(e) {
67+
self._onKeyDown = function(e) {
6868
if (e.keyCode == 27) {
6969
//escape key pressed, exit the intro
7070
_exitIntro.call(self, targetElm);
@@ -76,6 +76,12 @@
7676
_nextStep.call(self);
7777
}
7878
};
79+
80+
if (window.addEventListener) {
81+
window.addEventListener("keydown", self._onKeyDown, true);
82+
} else if (document.attachEvent) { //IE
83+
document.attachEvent("onkeydown", self._onKeyDown);
84+
}
7985
}
8086
return false;
8187
}
@@ -145,10 +151,14 @@
145151
//remove `introjs-showElement` class from the element
146152
var showElement = document.querySelector(".introjs-showElement");
147153
if (showElement) {
148-
showElement.className = showElement.className.replace(/introjs-[a-zA-Z]+/g, '').trim();
154+
showElement.className = showElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); // This is a manual trim.
149155
}
150156
//clean listeners
151-
window.onkeydown = null;
157+
if (window.removeEventListener) {
158+
window.removeEventListener("keydown", this._onKeyDown, true);
159+
} else if (document.detachEvent) { //IE
160+
document.detachEvent("onkeydown", this._onKeyDown);
161+
}
152162
//set the step to zero
153163
this._currentStep = undefined;
154164
//check if any callback is defined
@@ -225,9 +235,12 @@
225235
"left: " + (elementPosition.left - 5) + "px;");
226236
//remove old classes
227237
var oldShowElement = document.querySelector(".introjs-showElement");
228-
oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').trim();
238+
oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, '');
229239
//we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
230-
setTimeout(function() {
240+
if (self._lastShowElementTimer) {
241+
clearTimeout(self._lastShowElementTimer);
242+
}
243+
self._lastShowElementTimer = setTimeout(function() {
231244
//set current step to the label
232245
oldHelperNumberLayer.innerHTML = targetElement.getAttribute("data-step");
233246
//set current tooltip text
@@ -323,9 +336,9 @@
323336
}
324337

325338
if (!_elementInViewport(targetElement)) {
326-
var rect = targetElement.getBoundingClientRect()
327-
top = rect.bottom - rect.height,
328-
bottom = rect.bottom - window.innerHeight;
339+
var rect = targetElement.getBoundingClientRect(),
340+
top = rect.bottom - (rect.bottom - rect.top),
341+
bottom = rect.bottom - _getWinSize().height;
329342

330343
// Scroll up
331344
if (top < 0) {
@@ -338,6 +351,23 @@
338351
}
339352
}
340353

354+
/**
355+
* Provides a cross-browser way to get the screen dimensions
356+
* via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight
357+
*
358+
* @api private
359+
* @method _getWinSize
360+
* @returns {Object} width and height attributes
361+
*/
362+
function _getWinSize() {
363+
if (window.innerWidth != undefined) {
364+
return { width: window.innerWidth, height: window.innerHeight };
365+
} else {
366+
var D = document.documentElement;
367+
return { width: D.clientWidth, height: D.clientHeight };
368+
}
369+
}
370+
341371
/**
342372
* Add overlay layer to the page
343373
* http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

‎introjs-ie.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.introjs-overlay {
2+
background-color: #000;
3+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
4+
filter: alpha(opacity=50);
5+
}
6+
.introjs-helperLayer {
7+
background-color: #FFF;
8+
border-color: #777;
9+
}

0 commit comments

Comments
 (0)