Skip to content

Commit 683975a

Browse files
afshinmafshinm
committed
add window resize, add callbacks and change hint click logic
1 parent 32909e3 commit 683975a

File tree

3 files changed

+254
-39
lines changed

3 files changed

+254
-39
lines changed

‎example/programmatic/hint.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Hints</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
22+
<div class="container-narrow">
23+
24+
<div class="masthead">
25+
<ul class="nav nav-pills pull-right">
26+
<li id='step4'><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
27+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
28+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
29+
</ul>
30+
<h3 class="muted">Intro.js</h3>
31+
</div>
32+
33+
<hr>
34+
35+
<div class="jumbotron">
36+
<h1 id='step1'>Hints</h1>
37+
<p class="lead">Adding hints using JSON + callbacks</p>
38+
<a id='step2' class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:addHints();">Add hints</a>
39+
</div>
40+
41+
<hr>
42+
43+
<div class="row-fluid marketing">
44+
<div class="span6">
45+
<h4>Section One</h4>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
47+
48+
<h4>Section Two</h4>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
50+
51+
<h4>Section Three</h4>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
53+
</div>
54+
55+
<div class="span6">
56+
<h4>Section Four</h4>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
58+
59+
<h4>Section Five</h4>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
61+
62+
<h4>Section Six</h4>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
64+
65+
</div>
66+
</div>
67+
68+
<hr>
69+
</div>
70+
<script type="text/javascript" src="../../intro.js"></script>
71+
<script type="text/javascript">
72+
function addHints(){
73+
intro = introJs();
74+
intro.setOptions({
75+
hints: [
76+
{
77+
element: document.querySelector('#step1'),
78+
hint: "This is a tooltip.",
79+
hintPosition: 'top-middle'
80+
},
81+
{
82+
element: '#step2',
83+
hint: 'More features, more fun.',
84+
position: 'left'
85+
},
86+
{
87+
element: '#step4',
88+
hint: "<b>Another</b> step.",
89+
hintPosition: 'top-middle'
90+
}
91+
]
92+
});
93+
94+
intro.onhintsadded(function() {
95+
console.log('all hints added');
96+
});
97+
98+
intro.onhintclick(function(hintElement, item, stepId) {
99+
console.log('hint clicked', hintElement, item, stepId);
100+
});
101+
102+
intro.onhintremove(function (stepId) {
103+
console.log('hint removed', stepId);
104+
});
105+
106+
intro.onhintclose(function (stepId) {
107+
console.log('hint closed', stepId);
108+
});
109+
110+
intro.addHints();
111+
}
112+
</script>
113+
</body>
114+
</html>

‎intro.js

Lines changed: 134 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1180,6 +1180,7 @@
11801180
*/
11811181
function _populateHints(targetElm) {
11821182
var self = this;
1183+
this._introItems = []
11831184

11841185
if (this._options.hints) {
11851186
for (var i = 0, l = this._options.hints.length; i < l; i++) {
@@ -1209,6 +1210,7 @@
12091210
element: currentElement,
12101211
hint: currentElement.getAttribute('data-hint'),
12111212
hintPosition: currentElement.getAttribute('data-hintPosition') || this._options.hintPosition,
1213+
tooltipClass: currentElement.getAttribute('data-tooltipClass'),
12121214
position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
12131215
});
12141216
}
@@ -1219,14 +1221,27 @@
12191221
if (document.addEventListener) {
12201222
document.addEventListener('click', _removeHintTooltip.bind(this), false);
12211223
//for window resize
1222-
//window.addEventListener('resize', this._onResize, true);
1224+
window.addEventListener('resize', _reAlignHints.bind(this), true);
12231225
} else if (document.attachEvent) { //IE
12241226
//for window resize
1225-
document.attachEvent('onclick', _removeHintTooltip.bind(this));
1226-
//document.attachEvent('onresize', self._onResize);
1227+
document.attachEvent('onclick', _removeHintTooltip.bind(this));
1228+
document.attachEvent('onresize', _reAlignHints.bind(this));
12271229
}
12281230
};
12291231

1232+
/**
1233+
* Re-aligns all hint elements
1234+
*
1235+
* @api private
1236+
* @method _reAlignHints
1237+
*/
1238+
function _reAlignHints() {
1239+
for (var i = 0, l = this._introItems.length; i < l; i++) {
1240+
var item = this._introItems[i];
1241+
_alignHintPosition.call(this, item.hintPosition, item.element, item.targetElement)
1242+
}
1243+
}
1244+
12301245
/**
12311246
* Remove single hint from the page
12321247
*
@@ -1240,6 +1255,45 @@
12401255
if (hint) {
12411256
hint.parentNode.removeChild(hint);
12421257
}
1258+
1259+
// call the callback function (if any)
1260+
if (typeof (this._hintRemoveCallback) !== 'undefined') {
1261+
this._hintRemoveCallback.call(this, stepId);
1262+
}
1263+
};
1264+
1265+
/**
1266+
* Hide a hint
1267+
*
1268+
* @api private
1269+
* @method _hideHint
1270+
*/
1271+
function _hideHint(stepId) {
1272+
_removeHintTooltip.call(this);
1273+
var hint = this._targetElement.querySelector('.introjs-hint[data-step="' + stepId + '"]');
1274+
1275+
if (hint) {
1276+
hint.className += ' introjs-hidehint';
1277+
}
1278+
1279+
// call the callback function (if any)
1280+
if (typeof (this._hintCloseCallback) !== 'undefined') {
1281+
this._hintCloseCallback.call(this, stepId);
1282+
}
1283+
};
1284+
1285+
/**
1286+
* Remove all hints from the page
1287+
*
1288+
* @api private
1289+
* @method _removeHints
1290+
*/
1291+
function _removeHints() {
1292+
var hints = this._targetElement.querySelectorAll('.introjs-hint');
1293+
1294+
for (var i = 0, l = hints.length; i < l; i++) {
1295+
_removeHint.call(this, hints[i].getAttribute('data-step'));
1296+
}
12431297
};
12441298

12451299
/**
@@ -1250,12 +1304,23 @@
12501304
*/
12511305
function _addHints() {
12521306
var self = this;
1253-
var hintsWrapper = document.createElement('div');
1254-
hintsWrapper.className = 'introjs-hints';
1307+
1308+
var oldHintsWrapper = document.querySelector('.introjs-hints');
1309+
1310+
if (oldHintsWrapper != null) {
1311+
hintsWrapper = oldHintsWrapper;
1312+
} else {
1313+
var hintsWrapper = document.createElement('div');
1314+
hintsWrapper.className = 'introjs-hints';
1315+
}
12551316

12561317
for (var i = 0, l = this._introItems.length; i < l; i++) {
12571318
var item = this._introItems[i];
12581319

1320+
// avoid append a hint twice
1321+
if (document.querySelector('.introjs-hint[data-step="' + i + '"]'))
1322+
continue;
1323+
12591324
var hint = document.createElement('a');
12601325
hint.href = "javascript:void(0);";
12611326

@@ -1280,48 +1345,67 @@
12801345
hint.appendChild(hintPulse);
12811346
hint.setAttribute('data-step', i);
12821347

1283-
// get/calculate offset of target element
1284-
var offset = _getOffset.call(this, item.element);
1285-
12861348
// we swap the hint element with target element
12871349
// because _setHelperLayerPosition uses `element` property
12881350
item.targetElement = item.element;
12891351
item.element = hint;
12901352

1291-
// align the hint element
1292-
switch (item.hintPosition) {
1293-
default:
1294-
case 'top-left':
1295-
hint.style.left = offset.left + 'px';
1296-
hint.style.top = offset.top + 'px';
1297-
break;
1298-
case 'top-right':
1299-
hint.style.left = (offset.left + offset.width) + 'px';
1300-
hint.style.top = offset.top + 'px';
1301-
break;
1302-
case 'bottom-left':
1303-
hint.style.left = offset.left + 'px';
1304-
hint.style.top = (offset.top + offset.height) + 'px';
1305-
break;
1306-
case 'bottom-right':
1307-
hint.style.left = (offset.left + offset.width) + 'px';
1308-
hint.style.top = (offset.top + offset.height) + 'px';
1309-
break;
1310-
case 'bottom-middle':
1311-
hint.style.left = (offset.left + (offset.width / 2)) + 'px';
1312-
hint.style.top = (offset.top + offset.height) + 'px';
1313-
break;
1314-
case 'top-middle':
1315-
hint.style.left = (offset.left + (offset.width / 2)) + 'px';
1316-
hint.style.top = offset.top + 'px';
1317-
break;
1318-
}
1353+
// align the hint position
1354+
_alignHintPosition.call(this, item.hintPosition, hint, item.targetElement);
13191355

13201356
hintsWrapper.appendChild(hint);
13211357
}
13221358

13231359
// adding the hints wrapper
13241360
document.body.appendChild(hintsWrapper);
1361+
1362+
// call the callback function (if any)
1363+
if (typeof (this._hintsAddedCallback) !== 'undefined') {
1364+
this._hintsAddedCallback.call(this);
1365+
}
1366+
};
1367+
1368+
/**
1369+
* Aligns hint position
1370+
*
1371+
* @api private
1372+
* @method _alignHintPosition
1373+
* @param {String} position
1374+
* @param {Object} hint
1375+
* @param {Object} element
1376+
*/
1377+
function _alignHintPosition(position, hint, element) {
1378+
// get/calculate offset of target element
1379+
var offset = _getOffset.call(this, element);
1380+
1381+
// align the hint element
1382+
switch (position) {
1383+
default:
1384+
case 'top-left':
1385+
hint.style.left = offset.left + 'px';
1386+
hint.style.top = offset.top + 'px';
1387+
break;
1388+
case 'top-right':
1389+
hint.style.left = (offset.left + offset.width) + 'px';
1390+
hint.style.top = offset.top + 'px';
1391+
break;
1392+
case 'bottom-left':
1393+
hint.style.left = offset.left + 'px';
1394+
hint.style.top = (offset.top + offset.height) + 'px';
1395+
break;
1396+
case 'bottom-right':
1397+
hint.style.left = (offset.left + offset.width) + 'px';
1398+
hint.style.top = (offset.top + offset.height) + 'px';
1399+
break;
1400+
case 'bottom-middle':
1401+
hint.style.left = (offset.left + (offset.width / 2)) + 'px';
1402+
hint.style.top = (offset.top + offset.height) + 'px';
1403+
break;
1404+
case 'top-middle':
1405+
hint.style.left = (offset.left + (offset.width / 2)) + 'px';
1406+
hint.style.top = offset.top + 'px';
1407+
break;
1408+
}
13251409
};
13261410

13271411
/**
@@ -1334,6 +1418,11 @@
13341418
* @param {Number} stepId
13351419
*/
13361420
function _hintClick(hintElement, item, stepId) {
1421+
// call the callback function (if any)
1422+
if (typeof (this._hintClickCallback) !== 'undefined') {
1423+
this._hintClickCallback.call(this, hintElement, item, stepId);
1424+
}
1425+
13371426
// remove all open tooltips
13381427
var removedStep = _removeHintTooltip.call(this);
13391428

@@ -1368,7 +1457,7 @@
13681457
var closeButton = document.createElement('a');
13691458
closeButton.className = 'introjs-button';
13701459
closeButton.innerHTML = this._options.hintButtonLabel;
1371-
closeButton.onclick = _removeHint.bind(this, stepId);
1460+
closeButton.onclick = _hideHint.bind(this, stepId);
13721461

13731462
tooltipTextLayer.appendChild(tooltipWrapper);
13741463
tooltipTextLayer.appendChild(closeButton);
@@ -1568,6 +1657,14 @@
15681657
}
15691658
return this;
15701659
},
1660+
onhintclose: function(providedCallback) {
1661+
if (typeof (providedCallback) === 'function') {
1662+
this._hintCloseCallback = providedCallback;
1663+
} else {
1664+
throw new Error('Provided callback for onhintclose was not a function.');
1665+
}
1666+
return this;
1667+
},
15711668
onhintremove: function(providedCallback) {
15721669
if (typeof (providedCallback) === 'function') {
15731670
this._hintRemoveCallback = providedCallback;

‎introjs.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -352,14 +352,18 @@ tr.introjs-showElement > th {
352352
height: 15px;
353353
}
354354

355+
.introjs-hidehint {
356+
display: none;
357+
}
358+
355359
.introjs-hint:hover > .introjs-hint-pulse {
356-
border: 5px solid rgba(179, 179, 179, 5.27);
360+
border: 5px solid rgba(60, 60, 60, 0.57);
357361
}
358362

359363
.introjs-hint-pulse {
360364
width: 10px;
361365
height: 10px;
362-
border: 5px solid rgba(179, 179, 179, 0.27);
366+
border: 5px solid rgba(60, 60, 60, 0.27);
363367
-webkit-border-radius: 30px;
364368
-moz-border-radius: 30px;
365369
border-radius: 30px;

0 commit comments

Comments
 (0)