Skip to content

Commit 98c7d4e

Browse files
afshinmafshinm
committed
Add v0.8.0
1 parent f4d9641 commit 98c7d4e

File tree

3 files changed

+159
-28
lines changed

3 files changed

+159
-28
lines changed

‎intro.js

100755100644
Lines changed: 151 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Intro.js v0.6.0
2+
* Intro.js v0.8.0
33
* https://github.com/usablica/intro.js
44
* MIT licensed
55
*
@@ -19,7 +19,7 @@
1919
}
2020
} (this, function (exports) {
2121
//Default config/variables
22-
var VERSION = '0.6.0';
22+
var VERSION = '0.8.0';
2323

2424
/**
2525
* IntroJs main class
@@ -53,7 +53,9 @@
5353
/* Show tour control buttons? */
5454
showButtons: true,
5555
/* Show tour bullets? */
56-
showBullets: true
56+
showBullets: true,
57+
/* Scroll to highlighted element? */
58+
scrollToElement: true
5759
};
5860
}
5961

@@ -74,15 +76,33 @@
7476
var allIntroSteps = [];
7577

7678
for (var i = 0, stepsLength = this._options.steps.length; i < stepsLength; i++) {
77-
var currentItem = this._options.steps[i];
79+
var currentItem = _cloneObject(this._options.steps[i]);
7880
//set the step
79-
currentItem.step = i + 1;
81+
currentItem.step = introItems.length + 1;
8082
//use querySelector function only when developer used CSS selector
8183
if (typeof(currentItem.element) === 'string') {
8284
//grab the element with given selector from the page
8385
currentItem.element = document.querySelector(currentItem.element);
8486
}
85-
introItems.push(currentItem);
87+
88+
//intro without element
89+
if (typeof(currentItem.element) === 'undefined' || currentItem.element == null) {
90+
var floatingElementQuery = document.querySelector(".introjsFloatingElement");
91+
92+
if (floatingElementQuery == null) {
93+
floatingElementQuery = document.createElement('div');
94+
floatingElementQuery.className = 'introjsFloatingElement';
95+
96+
document.body.appendChild(floatingElementQuery);
97+
}
98+
99+
currentItem.element = floatingElementQuery;
100+
currentItem.position = 'floating';
101+
}
102+
103+
if (currentItem.element != null) {
104+
introItems.push(currentItem);
105+
}
86106
}
87107

88108
} else {
@@ -103,7 +123,7 @@
103123
element: currentElement,
104124
intro: currentElement.getAttribute('data-intro'),
105125
step: parseInt(currentElement.getAttribute('data-step'), 10),
106-
tooltipClass: currentElement.getAttribute('data-tooltipClass'),
126+
tooltipClass: currentElement.getAttribute('data-tooltipClass'),
107127
position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
108128
};
109129
}
@@ -116,7 +136,7 @@
116136
var currentElement = allIntroSteps[i];
117137

118138
if (currentElement.getAttribute('data-step') == null) {
119-
139+
120140
while (true) {
121141
if (typeof introItems[nextStep] == 'undefined') {
122142
break;
@@ -129,7 +149,7 @@
129149
element: currentElement,
130150
intro: currentElement.getAttribute('data-intro'),
131151
step: nextStep + 1,
132-
tooltipClass: currentElement.getAttribute('data-tooltipClass'),
152+
tooltipClass: currentElement.getAttribute('data-tooltipClass'),
133153
position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
134154
};
135155
}
@@ -141,7 +161,7 @@
141161
for (var z = 0; z < introItems.length; z++) {
142162
introItems[z] && tempIntroItems.push(introItems[z]); // copy non-empty values to the end of the array
143163
}
144-
164+
145165
introItems = tempIntroItems;
146166

147167
//Ok, sort all items with given steps
@@ -204,6 +224,21 @@
204224
return false;
205225
}
206226

227+
/*
228+
* makes a copy of the object
229+
* @api private
230+
* @method _cloneObject
231+
*/
232+
function _cloneObject(object) {
233+
if (object == null || typeof (object) != 'object' || typeof (object.nodeType) != 'undefined') {
234+
return object;
235+
}
236+
var temp = {};
237+
for (var key in object) {
238+
temp[key] = _cloneObject(object[key]);
239+
}
240+
return temp;
241+
}
207242
/**
208243
* Go to specific step of introduction
209244
*
@@ -225,6 +260,8 @@
225260
* @method _nextStep
226261
*/
227262
function _nextStep() {
263+
this._direction = 'forward';
264+
228265
if (typeof (this._currentStep) === 'undefined') {
229266
this._currentStep = 0;
230267
} else {
@@ -256,6 +293,8 @@
256293
* @method _nextStep
257294
*/
258295
function _previousStep() {
296+
this._direction = 'backward';
297+
259298
if (this._currentStep === 0) {
260299
return false;
261300
}
@@ -278,18 +317,32 @@
278317
function _exitIntro(targetElement) {
279318
//remove overlay layer from the page
280319
var overlayLayer = targetElement.querySelector('.introjs-overlay');
320+
321+
//return if intro already completed or skipped
322+
if (overlayLayer == null) {
323+
return;
324+
}
325+
281326
//for fade-out animation
282327
overlayLayer.style.opacity = 0;
283328
setTimeout(function () {
284329
if (overlayLayer.parentNode) {
285330
overlayLayer.parentNode.removeChild(overlayLayer);
286331
}
287332
}, 500);
333+
288334
//remove all helper layers
289335
var helperLayer = targetElement.querySelector('.introjs-helperLayer');
290336
if (helperLayer) {
291337
helperLayer.parentNode.removeChild(helperLayer);
292338
}
339+
340+
//remove intro floating element
341+
var floatingElement = document.querySelector('.introjsFloatingElement');
342+
if (floatingElement) {
343+
floatingElement.parentNode.removeChild(floatingElement);
344+
}
345+
293346
//remove `introjs-showElement` class from the element
294347
var showElement = document.querySelector('.introjs-showElement');
295348
if (showElement) {
@@ -303,12 +356,14 @@
303356
fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
304357
};
305358
}
359+
306360
//clean listeners
307361
if (window.removeEventListener) {
308362
window.removeEventListener('keydown', this._onKeyDown, true);
309363
} else if (document.detachEvent) { //IE
310364
document.detachEvent('onkeydown', this._onKeyDown);
311365
}
366+
312367
//set the step to zero
313368
this._currentStep = undefined;
314369
}
@@ -322,12 +377,21 @@
322377
* @param {Object} tooltipLayer
323378
* @param {Object} arrowLayer
324379
*/
325-
function _placeTooltip(targetElement, tooltipLayer, arrowLayer) {
380+
function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) {
326381
//reset the old style
327-
tooltipLayer.style.top = null;
328-
tooltipLayer.style.right = null;
329-
tooltipLayer.style.bottom = null;
330-
tooltipLayer.style.left = null;
382+
tooltipLayer.style.top = null;
383+
tooltipLayer.style.right = null;
384+
tooltipLayer.style.bottom = null;
385+
tooltipLayer.style.left = null;
386+
tooltipLayer.style.marginLeft = null;
387+
tooltipLayer.style.marginTop = null;
388+
389+
arrowLayer.style.display = 'inherit';
390+
391+
if (typeof(helperNumberLayer) != 'undefined' && helperNumberLayer != null) {
392+
helperNumberLayer.style.top = null;
393+
helperNumberLayer.style.left = null;
394+
}
331395

332396
//prevent error when `this._currentStep` is undefined
333397
if (!this._introItems[this._currentStep]) return;
@@ -359,9 +423,28 @@
359423
arrowLayer.className = 'introjs-arrow left';
360424
break;
361425
case 'left':
362-
tooltipLayer.style.top = '15px';
426+
if (this._options.showStepNumbers == true) {
427+
tooltipLayer.style.top = '15px';
428+
}
363429
tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px';
364430
arrowLayer.className = 'introjs-arrow right';
431+
break;
432+
case 'floating':
433+
arrowLayer.style.display = 'none';
434+
435+
//we have to adjust the top and left of layer manually for intro items without element{
436+
var tooltipOffset = _getOffset(tooltipLayer);
437+
438+
tooltipLayer.style.left = '50%';
439+
tooltipLayer.style.top = '50%';
440+
tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2) + 'px';
441+
tooltipLayer.style.marginTop = '-' + (tooltipOffset.height / 2) + 'px';
442+
443+
if (typeof(helperNumberLayer) != 'undefined' && helperNumberLayer != null) {
444+
helperNumberLayer.style.left = '-' + ((tooltipOffset.width / 2) + 18) + 'px';
445+
helperNumberLayer.style.top = '-' + ((tooltipOffset.height / 2) + 18) + 'px';
446+
}
447+
365448
break;
366449
case 'bottom':
367450
// Bottom going to follow the default behavior
@@ -384,10 +467,17 @@
384467
//prevent error when `this._currentStep` in undefined
385468
if (!this._introItems[this._currentStep]) return;
386469

387-
var elementPosition = _getOffset(this._introItems[this._currentStep].element);
470+
var currentElement = this._introItems[this._currentStep];
471+
var elementPosition = _getOffset(currentElement.element);
472+
473+
var widthHeightPadding = 10;
474+
if (currentElement.position == 'floating') {
475+
widthHeightPadding = 0;
476+
}
477+
388478
//set new position to helper layer
389-
helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + 10) + 'px; ' +
390-
'height:' + (elementPosition.height + 10) + 'px; ' +
479+
helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + widthHeightPadding) + 'px; ' +
480+
'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' +
391481
'top:' + (elementPosition.top - 5) + 'px;' +
392482
'left: ' + (elementPosition.left - 5) + 'px;');
393483
}
@@ -418,10 +508,18 @@
418508
skipTooltipButton = oldHelperLayer.querySelector('.introjs-skipbutton'),
419509
prevTooltipButton = oldHelperLayer.querySelector('.introjs-prevbutton'),
420510
nextTooltipButton = oldHelperLayer.querySelector('.introjs-nextbutton');
421-
511+
422512
//hide the tooltip
423513
oldtooltipContainer.style.opacity = 0;
424514

515+
if (oldHelperNumberLayer != null) {
516+
var lastIntroItem = this._introItems[(targetElement.step - 2 >= 0 ? targetElement.step - 2 : 0)];
517+
518+
if (lastIntroItem != null && (this._direction == 'forward' && lastIntroItem.position == 'floating') || (this._direction == 'backward' && targetElement.position == 'floating')) {
519+
oldHelperNumberLayer.style.opacity = 0;
520+
}
521+
}
522+
425523
//set new position to helper layer
426524
_setHelperLayerPosition.call(self, oldHelperLayer);
427525

@@ -448,14 +546,15 @@
448546
//set current tooltip text
449547
oldtooltipLayer.innerHTML = targetElement.intro;
450548
//set the tooltip position
451-
_placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer);
452-
549+
_placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
550+
453551
//change active bullet
454552
oldHelperLayer.querySelector('.introjs-bullets li > a.active').className = '';
455553
oldHelperLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
456554

457555
//show the tooltip
458556
oldtooltipContainer.style.opacity = 1;
557+
oldHelperNumberLayer.style.opacity = 1;
459558
}, 350);
460559

461560
} else {
@@ -478,7 +577,7 @@
478577

479578
tooltipTextLayer.className = 'introjs-tooltiptext';
480579
tooltipTextLayer.innerHTML = targetElement.intro;
481-
580+
482581
bulletsLayer.className = 'introjs-bullets';
483582

484583
if (this._options.showBullets === false) {
@@ -579,14 +678,14 @@
579678
tooltipLayer.appendChild(buttonsLayer);
580679

581680
//set proper position
582-
_placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer);
681+
_placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);
583682
}
584683

585-
if (this._currentStep == 0) {
684+
if (this._currentStep == 0 && this._introItems.length > 1) {
586685
prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
587686
nextTooltipButton.className = 'introjs-button introjs-nextbutton';
588687
skipTooltipButton.innerHTML = this._options.skipLabel;
589-
} else if (this._introItems.length - 1 == this._currentStep) {
688+
} else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
590689
skipTooltipButton.innerHTML = this._options.doneLabel;
591690
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
592691
nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
@@ -613,14 +712,18 @@
613712
while (parentElm != null) {
614713
if (parentElm.tagName.toLowerCase() === 'body') break;
615714

715+
//fix The Stacking Contenxt problem.
716+
//More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
616717
var zIndex = _getPropValue(parentElm, 'z-index');
617-
if (/[0-9]+/.test(zIndex)) {
718+
var opacity = parseFloat(_getPropValue(parentElm, 'opacity'));
719+
if (/[0-9]+/.test(zIndex) || opacity < 1) {
618720
parentElm.className += ' introjs-fixParent';
619721
}
722+
620723
parentElm = parentElm.parentNode;
621724
}
622725

623-
if (!_elementInViewport(targetElement.element)) {
726+
if (!_elementInViewport(targetElement.element) && this._options.scrollToElement === true) {
624727
var rect = targetElement.element.getBoundingClientRect(),
625728
winHeight=_getWinSize().height,
626729
top = rect.bottom - (rect.bottom - rect.top),
@@ -635,6 +738,10 @@
635738
window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice
636739
}
637740
}
741+
742+
if (typeof (this._introAfterChangeCallback) !== 'undefined') {
743+
this._introAfterChangeCallback.call(this, targetElement.element);
744+
}
638745
}
639746

640747
/**
@@ -844,6 +951,14 @@
844951
_goToStep.call(this, step);
845952
return this;
846953
},
954+
nextStep: function() {
955+
_nextStep.call(this);
956+
return this;
957+
},
958+
previousStep: function() {
959+
_previousStep.call(this);
960+
return this;
961+
},
847962
exit: function() {
848963
_exitIntro.call(this, this._targetElement);
849964
},
@@ -867,6 +982,14 @@
867982
}
868983
return this;
869984
},
985+
onafterchange: function(providedCallback) {
986+
if (typeof (providedCallback) === 'function') {
987+
this._introAfterChangeCallback = providedCallback;
988+
} else {
989+
throw new Error('Provided callback for onafterchange was not a function');
990+
}
991+
return this;
992+
},
870993
oncomplete: function(providedCallback) {
871994
if (typeof (providedCallback) === 'function') {
872995
this._introCompleteCallback = providedCallback;

‎introjs-rtl.css

100755100644
File mode changed.

0 commit comments

Comments
 (0)