First Guided Tour
Change-Id: Ia0d71307ba6a88c6037598cb7e500372780136b6
diff --git a/Gruntfile.js b/Gruntfile.js
index 2577394..9d71865 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -80,7 +80,7 @@
files: {
'public/css/kalamar-<%= pkg.version %>.css' : 'dev/scss/kalamar.scss',
'dev/css/kalamar.css' : 'dev/scss/kalamar.scss',
- 'dev/css/kwic.css' : 'dev/scss/main/kwic.scss'
+ 'dev/css/kwic.css' : 'dev/scss/main/kwic.scss',
}
}
},
@@ -148,7 +148,7 @@
'dev/scss/header/{header,hint,menu,searchbar,vc,statistics,datepicker}.scss',
'dev/scss/main/{alertify,intro,koralquery,highlight,kwic,logos,tagger,' +
'main,matchinfo,panel,tree,pagination,query,'+
- 'resultinfo,sidebar,tutorial,plugin,buttongroup}.scss'
+ 'resultinfo,sidebar,tutorial,plugin,buttongroup,introjs-ids,introjs}.scss'
],
tasks: ['sass'],
options: {
diff --git a/README.md b/README.md
index eaad909..75e3770 100644
--- a/README.md
+++ b/README.md
@@ -220,7 +220,8 @@
is released under the terms of the MIT License.
[Platform.js](https://mths.be/platform/)
is released under the terms of the MIT License.
-
+[INTRO.JS] (https://github.com/usablica/intro.js)
+is released under the terms of GNU AFFERO GENERAL PUBLIC LICENSE (GNU AGPLv3).
### Original Software
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 6ad1a48..f2134f8 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -5,6 +5,7 @@
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
<link type="text/css" rel="stylesheet" href="../css/kwic.css" />
+
<script>//<![CDATA[
window.KorAP = window.KorAP || {};
@@ -24,7 +25,7 @@
-->
</div>
- <form autocomplete="off" action="/kalamar" id="searchform">
+ <form autocomplete="off" action="/kalamar" id="searchform">
<div id="searchbar">
<input type="search"
placeholder="Find ..."
@@ -56,7 +57,7 @@
name="cutoff"
class="checkbox"
id="q-cutoff-field" />
- <label for="q-cutoff-field"><span></span>Glimpse</label>
+ <label for="q-cutoff-field"><span id="glimpse-intrjs"></span>Glimpse</label>
<!-- Todo: open tutorial - like openTutorial() -->
<a href="doc/faq" tabindex="-1" class="question"><span>Question</span></a>
@@ -245,17 +246,21 @@
</div>
<div id="menu"></div>
- <div class="intro">
- <p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
+ <div class="intro" >
+ <p ><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
<p>This is the new frontend for KorAP, with currently no access to restricted corpora. For full access, please visit the <a href="http://korap.ids-mannheim.de/app">first frontend</a>.</p>
- <p><strong>New to KorAP?</strong> Please check out our <a href="#">tutorial</a>!</p>
+ <p><strong>New to KorAP?</strong> Please check out our <a href="#" onclick="tourshow()"> guided tour </a> or our <a href="#">tutorial</a>!</p>
<p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Institute for the German Language</a> and funded by the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
+
</div>
+
<div id="logos">
<div>
+
<a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Developed at the Institute for the German Language (IDS)</span></p></a>
+
</div>
</div>
</main>
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 02a6190..c282103 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -771,8 +771,8 @@
"ref" : "This is my name"
};
*/
-
require(['app/en', 'init', 'hint/foundries/cnx'], function (lang) {
+//require([app/en', 'init', 'hint/foundries/cnx'], function (lang) {
KorAP.hintArray = hintArray;
// Set current virtual collection
@@ -805,6 +805,13 @@
};
+ tourshow = function(){
+ var tourClass = require('tour/tours');
+ let tour = tourClass.guidedTour();
+ tour.start();
+ };
+
+
/**
* Do some things at the beginning.
*/
diff --git a/dev/demo/sidebar-login.html b/dev/demo/sidebar-login.html
index cf36d7a..1700d07 100644
--- a/dev/demo/sidebar-login.html
+++ b/dev/demo/sidebar-login.html
@@ -74,7 +74,7 @@
name="cutoff"
class="checkbox"
id="q-cutoff-field" />
- <label for="q-cutoff-field"><span></span>Glimpse</label>
+ <label for="q-cutoff-field"><span id="glimpse-intrjs"></span>Glimpse</label>
<!-- Todo: open tutorial - like openTutorial() -->
<a href="doc/faq" tabindex="-1" class="question"><span>Question</span></a>
diff --git a/dev/js/lib/intro.js b/dev/js/lib/intro.js
new file mode 100644
index 0000000..76f0116
--- /dev/null
+++ b/dev/js/lib/intro.js
@@ -0,0 +1,2531 @@
+/**
+ * Intro.js v2.9.3
+ * https://github.com/usablica/intro.js
+ *
+ * Copyright (C) 2017 Afshin Mehrabani (@afshinmeh)
+ */
+
+(function(f) {
+ if (typeof exports === "object" && typeof module !== "undefined") {
+ module.exports = f();
+ // deprecated function
+ // @since 2.8.0
+ module.exports.introJs = function () {
+ console.warn('Deprecated: please use require("intro.js") directly, instead of the introJs method of the function');
+ // introJs()
+ return f().apply(this, arguments);
+ };
+ } else if (typeof define === "function" && define.amd) {
+ define([], f);
+ } else {
+ var g;
+ if (typeof window !== "undefined") {
+ g = window;
+ } else if (typeof global !== "undefined") {
+ g = global;
+ } else if (typeof self !== "undefined") {
+ g = self;
+ } else {
+ g = this;
+ }
+ g.introJs = f();
+ }
+})(function () {
+ //Default config/variables
+ var VERSION = '2.9.3';
+
+ /**
+ * IntroJs main class
+ *
+ * @class IntroJs
+ */
+ function IntroJs(obj) {
+ this._targetElement = obj;
+ this._introItems = [];
+
+ this._options = {
+ /* Next button label in tooltip box */
+ nextLabel: 'Next →',
+ /* Previous button label in tooltip box */
+ prevLabel: '← Back',
+ /* Skip button label in tooltip box */
+ skipLabel: 'Skip',
+ /* Done button label in tooltip box */
+ doneLabel: 'Done',
+ /* Hide previous button in the first step? Otherwise, it will be disabled button. */
+ hidePrev: false,
+ /* Hide next button in the last step? Otherwise, it will be disabled button. */
+ hideNext: false,
+ /* Default tooltip box position */
+ tooltipPosition: 'bottom',
+ /* Next CSS class for tooltip boxes */
+ tooltipClass: '',
+ /* CSS class that is added to the helperLayer */
+ highlightClass: '',
+ /* Close introduction when pressing Escape button? */
+ exitOnEsc: true,
+ /* Close introduction when clicking on overlay layer? */
+ exitOnOverlayClick: true,
+ /* Show step numbers in introduction? */
+ showStepNumbers: true,
+ /* Let user use keyboard to navigate the tour? */
+ keyboardNavigation: true,
+ /* Show tour control buttons? */
+ showButtons: true,
+ /* Show tour bullets? */
+ showBullets: true,
+ /* Show tour progress? */
+ showProgress: false,
+ /* Scroll to highlighted element? */
+ scrollToElement: true,
+ /*
+ * Should we scroll the tooltip or target element?
+ *
+ * Options are: 'element' or 'tooltip'
+ */
+ scrollTo: 'element',
+ /* Padding to add after scrolling when element is not in the viewport (in pixels) */
+ scrollPadding: 30,
+ /* Set the overlay opacity */
+ overlayOpacity: 0.8,
+ /* Precedence of positions, when auto is enabled */
+ positionPrecedence: ["bottom", "top", "right", "left"],
+ /* Disable an interaction with element? */
+ disableInteraction: false,
+ /* Set how much padding to be used around helper element */
+ helperElementPadding: 10,
+ /* Default hint position */
+ hintPosition: 'top-middle',
+ /* Hint button label */
+ hintButtonLabel: 'Got it',
+ /* Adding animation to hints? */
+ hintAnimation: true,
+ /* additional classes to put on the buttons */
+ buttonClass: "introjs-button"
+ };
+ }
+
+ /**
+ * Initiate a new introduction/guide from an element in the page
+ *
+ * @api private
+ * @method _introForElement
+ * @param {Object} targetElm
+ * @param {String} group
+ * @returns {Boolean} Success or not?
+ */
+ function _introForElement(targetElm, group) {
+ var allIntroSteps = targetElm.querySelectorAll("*[data-intro]"),
+ introItems = [];
+
+ if (this._options.steps) {
+ //use steps passed programmatically
+ _forEach(this._options.steps, function (step) {
+ var currentItem = _cloneObject(step);
+
+ //set the step
+ currentItem.step = introItems.length + 1;
+
+ //use querySelector function only when developer used CSS selector
+ if (typeof (currentItem.element) === 'string') {
+ //grab the element with given selector from the page
+ currentItem.element = document.querySelector(currentItem.element);
+ }
+
+ //intro without element
+ if (typeof (currentItem.element) === 'undefined' || currentItem.element === null) {
+ var floatingElementQuery = document.querySelector(".introjsFloatingElement");
+
+ if (floatingElementQuery === null) {
+ floatingElementQuery = document.createElement('div');
+ floatingElementQuery.className = 'introjsFloatingElement';
+
+ document.body.appendChild(floatingElementQuery);
+ }
+
+ currentItem.element = floatingElementQuery;
+ currentItem.position = 'floating';
+ }
+
+ currentItem.scrollTo = currentItem.scrollTo || this._options.scrollTo;
+
+ if (typeof (currentItem.disableInteraction) === 'undefined') {
+ currentItem.disableInteraction = this._options.disableInteraction;
+ }
+
+ if (currentItem.element !== null) {
+ introItems.push(currentItem);
+ }
+ }.bind(this));
+
+ } else {
+ //use steps from data-* annotations
+ var elmsLength = allIntroSteps.length;
+ var disableInteraction;
+
+ //if there's no element to intro
+ if (elmsLength < 1) {
+ return false;
+ }
+
+ _forEach(allIntroSteps, function (currentElement) {
+
+ // PR #80
+ // start intro for groups of elements
+ if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
+ return;
+ }
+
+ // skip hidden elements
+ if (currentElement.style.display === 'none') {
+ return;
+ }
+
+ var step = parseInt(currentElement.getAttribute('data-step'), 10);
+
+ if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') {
+ disableInteraction = !!currentElement.getAttribute('data-disable-interaction');
+ } else {
+ disableInteraction = this._options.disableInteraction;
+ }
+
+ if (step > 0) {
+ introItems[step - 1] = {
+ element: currentElement,
+ intro: currentElement.getAttribute('data-intro'),
+ step: parseInt(currentElement.getAttribute('data-step'), 10),
+ tooltipClass: currentElement.getAttribute('data-tooltipclass'),
+ highlightClass: currentElement.getAttribute('data-highlightclass'),
+ position: currentElement.getAttribute('data-position') || this._options.tooltipPosition,
+ scrollTo: currentElement.getAttribute('data-scrollto') || this._options.scrollTo,
+ disableInteraction: disableInteraction
+ };
+ }
+ }.bind(this));
+
+ //next add intro items without data-step
+ //todo: we need a cleanup here, two loops are redundant
+ var nextStep = 0;
+
+ _forEach(allIntroSteps, function (currentElement) {
+
+ // PR #80
+ // start intro for groups of elements
+ if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
+ return;
+ }
+
+ if (currentElement.getAttribute('data-step') === null) {
+
+ while (true) {
+ if (typeof introItems[nextStep] === 'undefined') {
+ break;
+ } else {
+ nextStep++;
+ }
+ }
+
+ if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') {
+ disableInteraction = !!currentElement.getAttribute('data-disable-interaction');
+ } else {
+ disableInteraction = this._options.disableInteraction;
+ }
+
+ introItems[nextStep] = {
+ element: currentElement,
+ intro: currentElement.getAttribute('data-intro'),
+ step: nextStep + 1,
+ tooltipClass: currentElement.getAttribute('data-tooltipclass'),
+ highlightClass: currentElement.getAttribute('data-highlightclass'),
+ position: currentElement.getAttribute('data-position') || this._options.tooltipPosition,
+ scrollTo: currentElement.getAttribute('data-scrollto') || this._options.scrollTo,
+ disableInteraction: disableInteraction
+ };
+ }
+ }.bind(this));
+ }
+
+ //removing undefined/null elements
+ var tempIntroItems = [];
+ for (var z = 0; z < introItems.length; z++) {
+ if (introItems[z]) {
+ // copy non-falsy values to the end of the array
+ tempIntroItems.push(introItems[z]);
+ }
+ }
+
+ introItems = tempIntroItems;
+
+ //Ok, sort all items with given steps
+ introItems.sort(function (a, b) {
+ return a.step - b.step;
+ });
+
+ //set it to the introJs object
+ this._introItems = introItems;
+
+ //add overlay layer to the page
+ if(_addOverlayLayer.call(this, targetElm)) {
+ //then, start the show
+ _nextStep.call(this);
+
+ if (this._options.keyboardNavigation) {
+ DOMEvent.on(window, 'keydown', _onKeyDown, this, true);
+ }
+ //for window resize
+ DOMEvent.on(window, 'resize', _onResize, this, true);
+ }
+ return false;
+ }
+
+ function _onResize () {
+ this.refresh.call(this);
+ }
+
+ /**
+ * on keyCode:
+ * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+ * This feature has been removed from the Web standards.
+ * Though some browsers may still support it, it is in
+ * the process of being dropped.
+ * Instead, you should use KeyboardEvent.code,
+ * if it's implemented.
+ *
+ * jQuery's approach is to test for
+ * (1) e.which, then
+ * (2) e.charCode, then
+ * (3) e.keyCode
+ * https://github.com/jquery/jquery/blob/a6b0705294d336ae2f63f7276de0da1195495363/src/event.js#L638
+ *
+ * @param type var
+ * @return type
+ */
+ function _onKeyDown (e) {
+ var code = (e.code === null) ? e.which : e.code;
+
+ // if code/e.which is null
+ if (code === null) {
+ code = (e.charCode === null) ? e.keyCode : e.charCode;
+ }
+
+ if ((code === 'Escape' || code === 27) && this._options.exitOnEsc === true) {
+ //escape key pressed, exit the intro
+ //check if exit callback is defined
+ _exitIntro.call(this, this._targetElement);
+ } else if (code === 'ArrowLeft' || code === 37) {
+ //left arrow
+ _previousStep.call(this);
+ } else if (code === 'ArrowRight' || code === 39) {
+ //right arrow
+ _nextStep.call(this);
+ } else if (code === 'Enter' || code === 13) {
+ //srcElement === ie
+ var target = e.target || e.srcElement;
+ if (target && target.className.match('introjs-prevbutton')) {
+ //user hit enter while focusing on previous button
+ _previousStep.call(this);
+ } else if (target && target.className.match('introjs-skipbutton')) {
+ //user hit enter while focusing on skip button
+ if (this._introItems.length - 1 === this._currentStep && typeof (this._introCompleteCallback) === 'function') {
+ this._introCompleteCallback.call(this);
+ }
+
+ _exitIntro.call(this, this._targetElement);
+ } else if (target && target.getAttribute('data-stepnumber')) {
+ // user hit enter while focusing on step bullet
+ target.click();
+ } else {
+ //default behavior for responding to enter
+ _nextStep.call(this);
+ }
+
+ //prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers
+ if(e.preventDefault) {
+ e.preventDefault();
+ } else {
+ e.returnValue = false;
+ }
+ }
+ }
+
+ /*
+ * makes a copy of the object
+ * @api private
+ * @method _cloneObject
+ */
+ function _cloneObject(object) {
+ if (object === null || typeof (object) !== 'object' || typeof (object.nodeType) !== 'undefined') {
+ return object;
+ }
+ var temp = {};
+ for (var key in object) {
+ if (typeof(window.jQuery) !== 'undefined' && object[key] instanceof window.jQuery) {
+ temp[key] = object[key];
+ } else {
+ temp[key] = _cloneObject(object[key]);
+ }
+ }
+ return temp;
+ }
+ /**
+ * Go to specific step of introduction
+ *
+ * @api private
+ * @method _goToStep
+ */
+ function _goToStep(step) {
+ //because steps starts with zero
+ this._currentStep = step - 2;
+ if (typeof (this._introItems) !== 'undefined') {
+ _nextStep.call(this);
+ }
+ }
+
+ /**
+ * Go to the specific step of introduction with the explicit [data-step] number
+ *
+ * @api private
+ * @method _goToStepNumber
+ */
+ function _goToStepNumber(step) {
+ this._currentStepNumber = step;
+ if (typeof (this._introItems) !== 'undefined') {
+ _nextStep.call(this);
+ }
+ }
+
+ /**
+ * Go to next step on intro
+ *
+ * @api private
+ * @method _nextStep
+ */
+ function _nextStep() {
+ this._direction = 'forward';
+
+ if (typeof (this._currentStepNumber) !== 'undefined') {
+ _forEach(this._introItems, function (item, i) {
+ if( item.step === this._currentStepNumber ) {
+ this._currentStep = i - 1;
+ this._currentStepNumber = undefined;
+ }
+ }.bind(this));
+ }
+
+ if (typeof (this._currentStep) === 'undefined') {
+ this._currentStep = 0;
+ } else {
+ ++this._currentStep;
+ }
+
+ var nextStep = this._introItems[this._currentStep];
+ var continueStep = true;
+
+ if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
+ continueStep = this._introBeforeChangeCallback.call(this, nextStep.element);
+ }
+
+ // if `onbeforechange` returned `false`, stop displaying the element
+ if (continueStep === false) {
+ --this._currentStep;
+ return false;
+ }
+
+ if ((this._introItems.length) <= this._currentStep) {
+ //end of the intro
+ //check if any callback is defined
+ if (typeof (this._introCompleteCallback) === 'function') {
+ this._introCompleteCallback.call(this);
+ }
+ _exitIntro.call(this, this._targetElement);
+ return;
+ }
+
+ _showElement.call(this, nextStep);
+ }
+
+ /**
+ * Go to previous step on intro
+ *
+ * @api private
+ * @method _previousStep
+ */
+ function _previousStep() {
+ this._direction = 'backward';
+
+ if (this._currentStep === 0) {
+ return false;
+ }
+
+ --this._currentStep;
+
+ var nextStep = this._introItems[this._currentStep];
+ var continueStep = true;
+
+ if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
+ continueStep = this._introBeforeChangeCallback.call(this, nextStep.element);
+ }
+
+ // if `onbeforechange` returned `false`, stop displaying the element
+ if (continueStep === false) {
+ ++this._currentStep;
+ return false;
+ }
+
+ _showElement.call(this, nextStep);
+ }
+
+ /**
+ * Update placement of the intro objects on the screen
+ * @api private
+ */
+ function _refresh() {
+ // re-align intros
+ _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
+ _setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer'));
+ _setHelperLayerPosition.call(this, document.querySelector('.introjs-disableInteraction'));
+
+ // re-align tooltip
+ if(this._currentStep !== undefined && this._currentStep !== null) {
+ var oldHelperNumberLayer = document.querySelector('.introjs-helperNumberLayer'),
+ oldArrowLayer = document.querySelector('.introjs-arrow'),
+ oldtooltipContainer = document.querySelector('.introjs-tooltip');
+ _placeTooltip.call(this, this._introItems[this._currentStep].element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
+ }
+
+ //re-align hints
+ _reAlignHints.call(this);
+ return this;
+ }
+
+ /**
+ * Exit from intro
+ *
+ * @api private
+ * @method _exitIntro
+ * @param {Object} targetElement
+ * @param {Boolean} force - Setting to `true` will skip the result of beforeExit callback
+ */
+ function _exitIntro(targetElement, force) {
+ var continueExit = true;
+
+ // calling onbeforeexit callback
+ //
+ // If this callback return `false`, it would halt the process
+ if (this._introBeforeExitCallback !== undefined) {
+ continueExit = this._introBeforeExitCallback.call(this);
+ }
+
+ // skip this check if `force` parameter is `true`
+ // otherwise, if `onbeforeexit` returned `false`, don't exit the intro
+ if (!force && continueExit === false) return;
+
+ //remove overlay layers from the page
+ var overlayLayers = targetElement.querySelectorAll('.introjs-overlay');
+
+ if (overlayLayers && overlayLayers.length) {
+ _forEach(overlayLayers, function (overlayLayer) {
+ overlayLayer.style.opacity = 0;
+ window.setTimeout(function () {
+ if (this.parentNode) {
+ this.parentNode.removeChild(this);
+ }
+ }.bind(overlayLayer), 500);
+ }.bind(this));
+ }
+
+ //remove all helper layers
+ var helperLayer = targetElement.querySelector('.introjs-helperLayer');
+ if (helperLayer) {
+ helperLayer.parentNode.removeChild(helperLayer);
+ }
+
+ var referenceLayer = targetElement.querySelector('.introjs-tooltipReferenceLayer');
+ if (referenceLayer) {
+ referenceLayer.parentNode.removeChild(referenceLayer);
+ }
+
+ //remove disableInteractionLayer
+ var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction');
+ if (disableInteractionLayer) {
+ disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
+ }
+
+ //remove intro floating element
+ var floatingElement = document.querySelector('.introjsFloatingElement');
+ if (floatingElement) {
+ floatingElement.parentNode.removeChild(floatingElement);
+ }
+
+ _removeShowElement();
+
+ //remove `introjs-fixParent` class from the elements
+ var fixParents = document.querySelectorAll('.introjs-fixParent');
+ _forEach(fixParents, function (parent) {
+ _removeClass(parent, /introjs-fixParent/g);
+ });
+
+ //clean listeners
+ DOMEvent.off(window, 'keydown', _onKeyDown, this, true);
+ DOMEvent.off(window, 'resize', _onResize, this, true);
+
+ //check if any callback is defined
+ if (this._introExitCallback !== undefined) {
+ this._introExitCallback.call(this);
+ }
+
+ //set the step to zero
+ this._currentStep = undefined;
+ }
+
+ /**
+ * Render tooltip box in the page
+ *
+ * @api private
+ * @method _placeTooltip
+ * @param {HTMLElement} targetElement
+ * @param {HTMLElement} tooltipLayer
+ * @param {HTMLElement} arrowLayer
+ * @param {HTMLElement} helperNumberLayer
+ * @param {Boolean} hintMode
+ */
+ function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer, hintMode) {
+ var tooltipCssClass = '',
+ currentStepObj,
+ tooltipOffset,
+ targetOffset,
+ windowSize,
+ currentTooltipPosition;
+
+ hintMode = hintMode || false;
+
+ //reset the old style
+ tooltipLayer.style.top = null;
+ tooltipLayer.style.right = null;
+ tooltipLayer.style.bottom = null;
+ tooltipLayer.style.left = null;
+ tooltipLayer.style.marginLeft = null;
+ tooltipLayer.style.marginTop = null;
+
+ arrowLayer.style.display = 'inherit';
+
+ if (typeof(helperNumberLayer) !== 'undefined' && helperNumberLayer !== null) {
+ helperNumberLayer.style.top = null;
+ helperNumberLayer.style.left = null;
+ }
+
+ //prevent error when `this._currentStep` is undefined
+ if (!this._introItems[this._currentStep]) return;
+
+ //if we have a custom css class for each step
+ currentStepObj = this._introItems[this._currentStep];
+ if (typeof (currentStepObj.tooltipClass) === 'string') {
+ tooltipCssClass = currentStepObj.tooltipClass;
+ } else {
+ tooltipCssClass = this._options.tooltipClass;
+ }
+
+ tooltipLayer.className = ('introjs-tooltip ' + tooltipCssClass).replace(/^\s+|\s+$/g, '');
+ tooltipLayer.setAttribute('role', 'dialog');
+
+ currentTooltipPosition = this._introItems[this._currentStep].position;
+
+ // Floating is always valid, no point in calculating
+ if (currentTooltipPosition !== "floating") {
+ currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition);
+ }
+
+ var tooltipLayerStyleLeft;
+ targetOffset = _getOffset(targetElement);
+ tooltipOffset = _getOffset(tooltipLayer);
+ windowSize = _getWinSize();
+
+ _addClass(tooltipLayer, 'introjs-' + currentTooltipPosition);
+
+ switch (currentTooltipPosition) {
+ case 'top-right-aligned':
+ arrowLayer.className = 'introjs-arrow bottom-right';
+
+ var tooltipLayerStyleRight = 0;
+ _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer);
+ tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px';
+ break;
+
+ case 'top-middle-aligned':
+ arrowLayer.className = 'introjs-arrow bottom-middle';
+
+ var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
+
+ // a fix for middle aligned hints
+ if (hintMode) {
+ tooltipLayerStyleLeftRight += 5;
+ }
+
+ if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) {
+ tooltipLayer.style.right = null;
+ _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer);
+ }
+ tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px';
+ break;
+
+ case 'top-left-aligned':
+ // top-left-aligned is the same as the default top
+ case 'top':
+ arrowLayer.className = 'introjs-arrow bottom';
+
+ tooltipLayerStyleLeft = (hintMode) ? 0 : 15;
+
+ _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
+ tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px';
+ break;
+ case 'right':
+ tooltipLayer.style.left = (targetOffset.width + 20) + 'px';
+ if (targetOffset.top + tooltipOffset.height > windowSize.height) {
+ // In this case, right would have fallen below the bottom of the screen.
+ // Modify so that the bottom of the tooltip connects with the target
+ arrowLayer.className = "introjs-arrow left-bottom";
+ tooltipLayer.style.top = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px";
+ } else {
+ arrowLayer.className = 'introjs-arrow left';
+ }
+ break;
+ case 'left':
+ if (!hintMode && this._options.showStepNumbers === true) {
+ tooltipLayer.style.top = '15px';
+ }
+
+ if (targetOffset.top + tooltipOffset.height > windowSize.height) {
+ // In this case, left would have fallen below the bottom of the screen.
+ // Modify so that the bottom of the tooltip connects with the target
+ tooltipLayer.style.top = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px";
+ arrowLayer.className = 'introjs-arrow right-bottom';
+ } else {
+ arrowLayer.className = 'introjs-arrow right';
+ }
+ tooltipLayer.style.right = (targetOffset.width + 20) + 'px';
+
+ break;
+ case 'floating':
+ arrowLayer.style.display = 'none';
+
+ //we have to adjust the top and left of layer manually for intro items without element
+ tooltipLayer.style.left = '50%';
+ tooltipLayer.style.top = '50%';
+ tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2) + 'px';
+ tooltipLayer.style.marginTop = '-' + (tooltipOffset.height / 2) + 'px';
+
+ if (typeof(helperNumberLayer) !== 'undefined' && helperNumberLayer !== null) {
+ helperNumberLayer.style.left = '-' + ((tooltipOffset.width / 2) + 18) + 'px';
+ helperNumberLayer.style.top = '-' + ((tooltipOffset.height / 2) + 18) + 'px';
+ }
+
+ break;
+ case 'bottom-right-aligned':
+ arrowLayer.className = 'introjs-arrow top-right';
+
+ tooltipLayerStyleRight = 0;
+ _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer);
+ tooltipLayer.style.top = (targetOffset.height + 20) + 'px';
+ break;
+
+ case 'bottom-middle-aligned':
+ arrowLayer.className = 'introjs-arrow top-middle';
+
+ tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
+
+ // a fix for middle aligned hints
+ if (hintMode) {
+ tooltipLayerStyleLeftRight += 5;
+ }
+
+ if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) {
+ tooltipLayer.style.right = null;
+ _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer);
+ }
+ tooltipLayer.style.top = (targetOffset.height + 20) + 'px';
+ break;
+
+ // case 'bottom-left-aligned':
+ // Bottom-left-aligned is the same as the default bottom
+ // case 'bottom':
+ // Bottom going to follow the default behavior
+ default:
+ arrowLayer.className = 'introjs-arrow top';
+
+ tooltipLayerStyleLeft = 0;
+ _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
+ tooltipLayer.style.top = (targetOffset.height + 20) + 'px';
+ }
+ }
+
+ /**
+ * Set tooltip left so it doesn't go off the right side of the window
+ *
+ * @return boolean true, if tooltipLayerStyleLeft is ok. false, otherwise.
+ */
+ function _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer) {
+ if (targetOffset.left + tooltipLayerStyleLeft + tooltipOffset.width > windowSize.width) {
+ // off the right side of the window
+ tooltipLayer.style.left = (windowSize.width - tooltipOffset.width - targetOffset.left) + 'px';
+ return false;
+ }
+ tooltipLayer.style.left = tooltipLayerStyleLeft + 'px';
+ return true;
+ }
+
+ /**
+ * Set tooltip right so it doesn't go off the left side of the window
+ *
+ * @return boolean true, if tooltipLayerStyleRight is ok. false, otherwise.
+ */
+ function _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer) {
+ if (targetOffset.left + targetOffset.width - tooltipLayerStyleRight - tooltipOffset.width < 0) {
+ // off the left side of the window
+ tooltipLayer.style.left = (-targetOffset.left) + 'px';
+ return false;
+ }
+ tooltipLayer.style.right = tooltipLayerStyleRight + 'px';
+ return true;
+ }
+
+ /**
+ * Determines the position of the tooltip based on the position precedence and availability
+ * of screen space.
+ *
+ * @param {Object} targetElement
+ * @param {Object} tooltipLayer
+ * @param {String} desiredTooltipPosition
+ * @return {String} calculatedPosition
+ */
+ function _determineAutoPosition(targetElement, tooltipLayer, desiredTooltipPosition) {
+
+ // Take a clone of position precedence. These will be the available
+ var possiblePositions = this._options.positionPrecedence.slice();
+
+ var windowSize = _getWinSize();
+ var tooltipHeight = _getOffset(tooltipLayer).height + 10;
+ var tooltipWidth = _getOffset(tooltipLayer).width + 20;
+ var targetElementRect = targetElement.getBoundingClientRect();
+
+ // If we check all the possible areas, and there are no valid places for the tooltip, the element
+ // must take up most of the screen real estate. Show the tooltip floating in the middle of the screen.
+ var calculatedPosition = "floating";
+
+ /*
+ * auto determine position
+ */
+
+ // Check for space below
+ if (targetElementRect.bottom + tooltipHeight + tooltipHeight > windowSize.height) {
+ _removeEntry(possiblePositions, "bottom");
+ }
+
+ // Check for space above
+ if (targetElementRect.top - tooltipHeight < 0) {
+ _removeEntry(possiblePositions, "top");
+ }
+
+ // Check for space to the right
+ if (targetElementRect.right + tooltipWidth > windowSize.width) {
+ _removeEntry(possiblePositions, "right");
+ }
+
+ // Check for space to the left
+ if (targetElementRect.left - tooltipWidth < 0) {
+ _removeEntry(possiblePositions, "left");
+ }
+
+ // @var {String} ex: 'right-aligned'
+ var desiredAlignment = (function (pos) {
+ var hyphenIndex = pos.indexOf('-');
+ if (hyphenIndex !== -1) {
+ // has alignment
+ return pos.substr(hyphenIndex);
+ }
+ return '';
+ })(desiredTooltipPosition || '');
+
+ // strip alignment from position
+ if (desiredTooltipPosition) {
+ // ex: "bottom-right-aligned"
+ // should return 'bottom'
+ desiredTooltipPosition = desiredTooltipPosition.split('-')[0];
+ }
+
+ if (possiblePositions.length) {
+ if (desiredTooltipPosition !== "auto" &&
+ possiblePositions.indexOf(desiredTooltipPosition) > -1) {
+ // If the requested position is in the list, choose that
+ calculatedPosition = desiredTooltipPosition;
+ } else {
+ // Pick the first valid position, in order
+ calculatedPosition = possiblePositions[0];
+ }
+ }
+
+ // only top and bottom positions have optional alignments
+ if (['top', 'bottom'].indexOf(calculatedPosition) !== -1) {
+ calculatedPosition += _determineAutoAlignment(targetElementRect.left, tooltipWidth, windowSize, desiredAlignment);
+ }
+
+ return calculatedPosition;
+ }
+
+ /**
+ * auto-determine alignment
+ * @param {Integer} offsetLeft
+ * @param {Integer} tooltipWidth
+ * @param {Object} windowSize
+ * @param {String} desiredAlignment
+ * @return {String} calculatedAlignment
+ */
+ function _determineAutoAlignment (offsetLeft, tooltipWidth, windowSize, desiredAlignment) {
+ var halfTooltipWidth = tooltipWidth / 2,
+ winWidth = Math.min(windowSize.width, window.screen.width),
+ possibleAlignments = ['-left-aligned', '-middle-aligned', '-right-aligned'],
+ calculatedAlignment = '';
+
+ // valid left must be at least a tooltipWidth
+ // away from right side
+ if (winWidth - offsetLeft < tooltipWidth) {
+ _removeEntry(possibleAlignments, '-left-aligned');
+ }
+
+ // valid middle must be at least half
+ // width away from both sides
+ if (offsetLeft < halfTooltipWidth ||
+ winWidth - offsetLeft < halfTooltipWidth) {
+ _removeEntry(possibleAlignments, '-middle-aligned');
+ }
+
+ // valid right must be at least a tooltipWidth
+ // width away from left side
+ if (offsetLeft < tooltipWidth) {
+ _removeEntry(possibleAlignments, '-right-aligned');
+ }
+
+ if (possibleAlignments.length) {
+ if (possibleAlignments.indexOf(desiredAlignment) !== -1) {
+ // the desired alignment is valid
+ calculatedAlignment = desiredAlignment;
+ } else {
+ // pick the first valid position, in order
+ calculatedAlignment = possibleAlignments[0];
+ }
+ } else {
+ // if screen width is too small
+ // for ANY alignment, middle is
+ // probably the best for visibility
+ calculatedAlignment = '-middle-aligned';
+ }
+
+ return calculatedAlignment;
+ }
+
+ /**
+ * Remove an entry from a string array if it's there, does nothing if it isn't there.
+ *
+ * @param {Array} stringArray
+ * @param {String} stringToRemove
+ */
+ function _removeEntry(stringArray, stringToRemove) {
+ if (stringArray.indexOf(stringToRemove) > -1) {
+ stringArray.splice(stringArray.indexOf(stringToRemove), 1);
+ }
+ }
+
+ /**
+ * Update the position of the helper layer on the screen
+ *
+ * @api private
+ * @method _setHelperLayerPosition
+ * @param {Object} helperLayer
+ */
+ function _setHelperLayerPosition(helperLayer) {
+ if (helperLayer) {
+ //prevent error when `this._currentStep` in undefined
+ if (!this._introItems[this._currentStep]) return;
+
+ var currentElement = this._introItems[this._currentStep],
+ elementPosition = _getOffset(currentElement.element),
+ widthHeightPadding = this._options.helperElementPadding;
+
+ // If the target element is fixed, the tooltip should be fixed as well.
+ // Otherwise, remove a fixed class that may be left over from the previous
+ // step.
+ if (_isFixed(currentElement.element)) {
+ _addClass(helperLayer, 'introjs-fixedTooltip');
+ } else {
+ _removeClass(helperLayer, 'introjs-fixedTooltip');
+ }
+
+ if (currentElement.position === 'floating') {
+ widthHeightPadding = 0;
+ }
+
+ //set new position to helper layer
+ helperLayer.style.cssText = 'width: ' + (elementPosition.width + widthHeightPadding) + 'px; ' +
+ 'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' +
+ 'top:' + (elementPosition.top - widthHeightPadding / 2) + 'px;' +
+ 'left: ' + (elementPosition.left - widthHeightPadding / 2) + 'px;';
+
+ }
+ }
+
+ /**
+ * Add disableinteraction layer and adjust the size and position of the layer
+ *
+ * @api private
+ * @method _disableInteraction
+ */
+ function _disableInteraction() {
+ var disableInteractionLayer = document.querySelector('.introjs-disableInteraction');
+
+ if (disableInteractionLayer === null) {
+ disableInteractionLayer = document.createElement('div');
+ disableInteractionLayer.className = 'introjs-disableInteraction';
+ this._targetElement.appendChild(disableInteractionLayer);
+ }
+
+ _setHelperLayerPosition.call(this, disableInteractionLayer);
+ }
+
+ /**
+ * Setting anchors to behave like buttons
+ *
+ * @api private
+ * @method _setAnchorAsButton
+ */
+ function _setAnchorAsButton(anchor){
+ anchor.setAttribute('role', 'button');
+ anchor.tabIndex = 0;
+ }
+
+ /**
+ * Show an element on the page
+ *
+ * @api private
+ * @method _showElement
+ * @param {Object} targetElement
+ */
+ function _showElement(targetElement) {
+ if (typeof (this._introChangeCallback) !== 'undefined') {
+ this._introChangeCallback.call(this, targetElement.element);
+ }
+
+ var self = this,
+ oldHelperLayer = document.querySelector('.introjs-helperLayer'),
+ oldReferenceLayer = document.querySelector('.introjs-tooltipReferenceLayer'),
+ highlightClass = 'introjs-helperLayer',
+ nextTooltipButton,
+ prevTooltipButton,
+ skipTooltipButton,
+ scrollParent;
+
+ //check for a current step highlight class
+ if (typeof (targetElement.highlightClass) === 'string') {
+ highlightClass += (' ' + targetElement.highlightClass);
+ }
+ //check for options highlight class
+ if (typeof (this._options.highlightClass) === 'string') {
+ highlightClass += (' ' + this._options.highlightClass);
+ }
+
+ if (oldHelperLayer !== null) {
+ var oldHelperNumberLayer = oldReferenceLayer.querySelector('.introjs-helperNumberLayer'),
+ oldtooltipLayer = oldReferenceLayer.querySelector('.introjs-tooltiptext'),
+ oldArrowLayer = oldReferenceLayer.querySelector('.introjs-arrow'),
+ oldtooltipContainer = oldReferenceLayer.querySelector('.introjs-tooltip');
+
+ skipTooltipButton = oldReferenceLayer.querySelector('.introjs-skipbutton');
+ prevTooltipButton = oldReferenceLayer.querySelector('.introjs-prevbutton');
+ nextTooltipButton = oldReferenceLayer.querySelector('.introjs-nextbutton');
+
+ //update or reset the helper highlight class
+ oldHelperLayer.className = highlightClass;
+ //hide the tooltip
+ oldtooltipContainer.style.opacity = 0;
+ oldtooltipContainer.style.display = "none";
+
+ if (oldHelperNumberLayer !== null) {
+ var lastIntroItem = this._introItems[(targetElement.step - 2 >= 0 ? targetElement.step - 2 : 0)];
+
+ if (lastIntroItem !== null && (this._direction === 'forward' && lastIntroItem.position === 'floating') || (this._direction === 'backward' && targetElement.position === 'floating')) {
+ oldHelperNumberLayer.style.opacity = 0;
+ }
+ }
+
+ // scroll to element
+ scrollParent = _getScrollParent( targetElement.element );
+
+ if (scrollParent !== document.body) {
+ // target is within a scrollable element
+ _scrollParentToElement(scrollParent, targetElement.element);
+ }
+
+ // set new position to helper layer
+ _setHelperLayerPosition.call(self, oldHelperLayer);
+ _setHelperLayerPosition.call(self, oldReferenceLayer);
+
+ //remove `introjs-fixParent` class from the elements
+ var fixParents = document.querySelectorAll('.introjs-fixParent');
+ _forEach(fixParents, function (parent) {
+ _removeClass(parent, /introjs-fixParent/g);
+ });
+
+ //remove old classes if the element still exist
+ _removeShowElement();
+
+ //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
+ if (self._lastShowElementTimer) {
+ window.clearTimeout(self._lastShowElementTimer);
+ }
+
+ self._lastShowElementTimer = window.setTimeout(function() {
+ //set current step to the label
+ if (oldHelperNumberLayer !== null) {
+ oldHelperNumberLayer.innerHTML = targetElement.step;
+ }
+ //set current tooltip text
+ oldtooltipLayer.innerHTML = targetElement.intro;
+ //set the tooltip position
+ oldtooltipContainer.style.display = "block";
+ _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
+
+ //change active bullet
+ if (self._options.showBullets) {
+ oldReferenceLayer.querySelector('.introjs-bullets li > a.active').className = '';
+ oldReferenceLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
+ }
+ oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').style.cssText = 'width:' + _getProgress.call(self) + '%;';
+ oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').setAttribute('aria-valuenow', _getProgress.call(self));
+
+ //show the tooltip
+ oldtooltipContainer.style.opacity = 1;
+ if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
+
+ //reset button focus
+ if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null && /introjs-donebutton/gi.test(skipTooltipButton.className)) {
+ // skip button is now "done" button
+ skipTooltipButton.focus();
+ } else if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ //still in the tour, focus on next
+ nextTooltipButton.focus();
+ }
+
+ // change the scroll of the window, if needed
+ _scrollTo.call(self, targetElement.scrollTo, targetElement, oldtooltipLayer);
+ }, 350);
+
+ // end of old element if-else condition
+ } else {
+ var helperLayer = document.createElement('div'),
+ referenceLayer = document.createElement('div'),
+ arrowLayer = document.createElement('div'),
+ tooltipLayer = document.createElement('div'),
+ tooltipTextLayer = document.createElement('div'),
+ bulletsLayer = document.createElement('div'),
+ progressLayer = document.createElement('div'),
+ buttonsLayer = document.createElement('div');
+
+ helperLayer.className = highlightClass;
+ referenceLayer.className = 'introjs-tooltipReferenceLayer';
+
+ // scroll to element
+ scrollParent = _getScrollParent( targetElement.element );
+
+ if (scrollParent !== document.body) {
+ // target is within a scrollable element
+ _scrollParentToElement(scrollParent, targetElement.element);
+ }
+
+ //set new position to helper layer
+ _setHelperLayerPosition.call(self, helperLayer);
+ _setHelperLayerPosition.call(self, referenceLayer);
+
+ //add helper layer to target element
+ this._targetElement.appendChild(helperLayer);
+ this._targetElement.appendChild(referenceLayer);
+
+ arrowLayer.className = 'introjs-arrow';
+
+ tooltipTextLayer.className = 'introjs-tooltiptext';
+ tooltipTextLayer.innerHTML = targetElement.intro;
+
+ bulletsLayer.className = 'introjs-bullets';
+
+ if (this._options.showBullets === false) {
+ bulletsLayer.style.display = 'none';
+ }
+
+ var ulContainer = document.createElement('ul');
+ ulContainer.setAttribute('role', 'tablist');
+
+ var anchorClick = function () {
+ self.goToStep(this.getAttribute('data-stepnumber'));
+ };
+
+ _forEach(this._introItems, function (item, i) {
+ var innerLi = document.createElement('li');
+ var anchorLink = document.createElement('a');
+
+ innerLi.setAttribute('role', 'presentation');
+ anchorLink.setAttribute('role', 'tab');
+
+ anchorLink.onclick = anchorClick;
+
+ if (i === (targetElement.step-1)) {
+ anchorLink.className = 'active';
+ }
+
+ _setAnchorAsButton(anchorLink);
+ anchorLink.innerHTML = " ";
+ anchorLink.setAttribute('data-stepnumber', item.step);
+
+ innerLi.appendChild(anchorLink);
+ ulContainer.appendChild(innerLi);
+ });
+
+ bulletsLayer.appendChild(ulContainer);
+
+ progressLayer.className = 'introjs-progress';
+
+ if (this._options.showProgress === false) {
+ progressLayer.style.display = 'none';
+ }
+ var progressBar = document.createElement('div');
+ progressBar.className = 'introjs-progressbar';
+ progressBar.setAttribute('role', 'progress');
+ progressBar.setAttribute('aria-valuemin', 0);
+ progressBar.setAttribute('aria-valuemax', 100);
+ progressBar.setAttribute('aria-valuenow', _getProgress.call(this));
+ progressBar.style.cssText = 'width:' + _getProgress.call(this) + '%;';
+
+ progressLayer.appendChild(progressBar);
+
+ buttonsLayer.className = 'introjs-tooltipbuttons';
+ if (this._options.showButtons === false) {
+ buttonsLayer.style.display = 'none';
+ }
+
+ tooltipLayer.className = 'introjs-tooltip';
+ tooltipLayer.appendChild(tooltipTextLayer);
+ tooltipLayer.appendChild(bulletsLayer);
+ tooltipLayer.appendChild(progressLayer);
+
+ //add helper layer number
+ var helperNumberLayer = document.createElement('span');
+ if (this._options.showStepNumbers === true) {
+ helperNumberLayer.className = 'introjs-helperNumberLayer';
+ helperNumberLayer.innerHTML = targetElement.step;
+ referenceLayer.appendChild(helperNumberLayer);
+ }
+
+ tooltipLayer.appendChild(arrowLayer);
+ referenceLayer.appendChild(tooltipLayer);
+
+ //next button
+ nextTooltipButton = document.createElement('a');
+
+ nextTooltipButton.onclick = function() {
+ if (self._introItems.length - 1 !== self._currentStep) {
+ _nextStep.call(self);
+ }
+ };
+
+ _setAnchorAsButton(nextTooltipButton);
+ nextTooltipButton.innerHTML = this._options.nextLabel;
+
+ //previous button
+ prevTooltipButton = document.createElement('a');
+
+ prevTooltipButton.onclick = function() {
+ if (self._currentStep !== 0) {
+ _previousStep.call(self);
+ }
+ };
+
+ _setAnchorAsButton(prevTooltipButton);
+ prevTooltipButton.innerHTML = this._options.prevLabel;
+
+ //skip button
+ skipTooltipButton = document.createElement('a');
+ skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton ';
+ _setAnchorAsButton(skipTooltipButton);
+ skipTooltipButton.innerHTML = this._options.skipLabel;
+
+ skipTooltipButton.onclick = function() {
+ if (self._introItems.length - 1 === self._currentStep && typeof (self._introCompleteCallback) === 'function') {
+ self._introCompleteCallback.call(self);
+ }
+
+ if (self._introItems.length - 1 !== self._currentStep && typeof (self._introExitCallback) === 'function') {
+ self._introExitCallback.call(self);
+ }
+
+ if (typeof(self._introSkipCallback) === 'function') {
+ self._introSkipCallback.call(self);
+ }
+
+ _exitIntro.call(self, self._targetElement);
+ };
+
+ buttonsLayer.appendChild(skipTooltipButton);
+
+ //in order to prevent displaying next/previous button always
+ if (this._introItems.length > 1) {
+ buttonsLayer.appendChild(prevTooltipButton);
+ buttonsLayer.appendChild(nextTooltipButton);
+ }
+
+ tooltipLayer.appendChild(buttonsLayer);
+
+ //set proper position
+ _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);
+
+ // change the scroll of the window, if needed
+ _scrollTo.call(this, targetElement.scrollTo, targetElement, tooltipLayer);
+
+ //end of new element if-else condition
+ }
+
+ // removing previous disable interaction layer
+ var disableInteractionLayer = self._targetElement.querySelector('.introjs-disableInteraction');
+ if (disableInteractionLayer) {
+ disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
+ }
+
+ //disable interaction
+ if (targetElement.disableInteraction) {
+ _disableInteraction.call(self);
+ }
+
+ // when it's the first step of tour
+ if (this._currentStep === 0 && this._introItems.length > 1) {
+ if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
+ skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';
+ }
+ if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';
+ }
+
+ if (this._options.hidePrev === true) {
+ if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-hidden';
+ }
+ if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ _addClass(nextTooltipButton, 'introjs-fullbutton');
+ }
+ } else {
+ if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-disabled';
+ }
+ }
+
+ if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
+ skipTooltipButton.innerHTML = this._options.skipLabel;
+ }
+ } else if (this._introItems.length - 1 === this._currentStep || this._introItems.length === 1) {
+ // last step of tour
+ if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
+ skipTooltipButton.innerHTML = this._options.doneLabel;
+ // adding donebutton class in addition to skipbutton
+ _addClass(skipTooltipButton, 'introjs-donebutton');
+ }
+ if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';
+ }
+
+ if (this._options.hideNext === true) {
+ if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-hidden';
+ }
+ if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
+ _addClass(prevTooltipButton, 'introjs-fullbutton');
+ }
+ } else {
+ if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-disabled';
+ }
+ }
+ } else {
+ // steps between start and end
+ if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
+ skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';
+ }
+ if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';
+ }
+ if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';
+ }
+ if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
+ skipTooltipButton.innerHTML = this._options.skipLabel;
+ }
+ }
+
+ prevTooltipButton.setAttribute('role', 'button');
+ nextTooltipButton.setAttribute('role', 'button');
+ skipTooltipButton.setAttribute('role', 'button');
+
+ //Set focus on "next" button, so that hitting Enter always moves you onto the next step
+ if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
+ nextTooltipButton.focus();
+ }
+
+ _setShowElement(targetElement);
+
+ if (typeof (this._introAfterChangeCallback) !== 'undefined') {
+ this._introAfterChangeCallback.call(this, targetElement.element);
+ }
+ }
+
+ /**
+ * To change the scroll of `window` after highlighting an element
+ *
+ * @api private
+ * @method _scrollTo
+ * @param {String} scrollTo
+ * @param {Object} targetElement
+ * @param {Object} tooltipLayer
+ */
+ function _scrollTo(scrollTo, targetElement, tooltipLayer) {
+ if (scrollTo === 'off') return;
+ var rect;
+
+ if (!this._options.scrollToElement) return;
+
+ if (scrollTo === 'tooltip') {
+ rect = tooltipLayer.getBoundingClientRect();
+ } else {
+ rect = targetElement.element.getBoundingClientRect();
+ }
+
+ if (!_elementInViewport(targetElement.element)) {
+ var winHeight = _getWinSize().height;
+ var top = rect.bottom - (rect.bottom - rect.top);
+
+ // TODO (afshinm): do we need scroll padding now?
+ // I have changed the scroll option and now it scrolls the window to
+ // the center of the target element or tooltip.
+
+ if (top < 0 || targetElement.element.clientHeight > winHeight) {
+ window.scrollBy(0, rect.top - ((winHeight / 2) - (rect.height / 2)) - this._options.scrollPadding); // 30px padding from edge to look nice
+
+ //Scroll down
+ } else {
+ window.scrollBy(0, rect.top - ((winHeight / 2) - (rect.height / 2)) + this._options.scrollPadding); // 30px padding from edge to look nice
+ }
+ }
+ }
+
+ /**
+ * To remove all show element(s)
+ *
+ * @api private
+ * @method _removeShowElement
+ */
+ function _removeShowElement() {
+ var elms = document.querySelectorAll('.introjs-showElement');
+
+ _forEach(elms, function (elm) {
+ _removeClass(elm, /introjs-[a-zA-Z]+/g);
+ });
+ }
+
+ /**
+ * To set the show element
+ * This function set a relative (in most cases) position and changes the z-index
+ *
+ * @api private
+ * @method _setShowElement
+ * @param {Object} targetElement
+ */
+ function _setShowElement(targetElement) {
+ var parentElm;
+ // we need to add this show element class to the parent of SVG elements
+ // because the SVG elements can't have independent z-index
+ if (targetElement.element instanceof SVGElement) {
+ parentElm = targetElement.element.parentNode;
+
+ while (targetElement.element.parentNode !== null) {
+ if (!parentElm.tagName || parentElm.tagName.toLowerCase() === 'body') break;
+
+ if (parentElm.tagName.toLowerCase() === 'svg') {
+ _addClass(parentElm, 'introjs-showElement introjs-relativePosition');
+ }
+
+ parentElm = parentElm.parentNode;
+ }
+ }
+
+ _addClass(targetElement.element, 'introjs-showElement');
+
+ var currentElementPosition = _getPropValue(targetElement.element, 'position');
+ if (currentElementPosition !== 'absolute' &&
+ currentElementPosition !== 'relative' &&
+ currentElementPosition !== 'fixed') {
+ //change to new intro item
+ _addClass(targetElement.element, 'introjs-relativePosition');
+ }
+
+ parentElm = targetElement.element.parentNode;
+ while (parentElm !== null) {
+ if (!parentElm.tagName || parentElm.tagName.toLowerCase() === 'body') break;
+
+ //fix The Stacking Context problem.
+ //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
+ var zIndex = _getPropValue(parentElm, 'z-index');
+ var opacity = parseFloat(_getPropValue(parentElm, 'opacity'));
+ var transform = _getPropValue(parentElm, 'transform') || _getPropValue(parentElm, '-webkit-transform') || _getPropValue(parentElm, '-moz-transform') || _getPropValue(parentElm, '-ms-transform') || _getPropValue(parentElm, '-o-transform');
+ if (/[0-9]+/.test(zIndex) || opacity < 1 || (transform !== 'none' && transform !== undefined)) {
+ _addClass(parentElm, 'introjs-fixParent');
+ }
+
+ parentElm = parentElm.parentNode;
+ }
+ }
+
+ /**
+ * Iterates arrays
+ *
+ * @param {Array} arr
+ * @param {Function} forEachFnc
+ * @param {Function} completeFnc
+ * @return {Null}
+ */
+ function _forEach(arr, forEachFnc, completeFnc) {
+ // in case arr is an empty query selector node list
+ if (arr) {
+ for (var i = 0, len = arr.length; i < len; i++) {
+ forEachFnc(arr[i], i);
+ }
+ }
+
+ if (typeof(completeFnc) === 'function') {
+ completeFnc();
+ }
+ }
+
+ /**
+ * Mark any object with an incrementing number
+ * used for keeping track of objects
+ *
+ * @param Object obj Any object or DOM Element
+ * @param String key
+ * @return Object
+ */
+ var _stamp = (function () {
+ var keys = {};
+ return function stamp (obj, key) {
+
+ // get group key
+ key = key || 'introjs-stamp';
+
+ // each group increments from 0
+ keys[key] = keys[key] || 0;
+
+ // stamp only once per object
+ if (obj[key] === undefined) {
+ // increment key for each new object
+ obj[key] = keys[key]++;
+ }
+
+ return obj[key];
+ };
+ })();
+
+ /**
+ * DOMEvent Handles all DOM events
+ *
+ * methods:
+ *
+ * on - add event handler
+ * off - remove event
+ */
+ var DOMEvent = (function () {
+ function DOMEvent () {
+ var events_key = 'introjs_event';
+
+ /**
+ * Gets a unique ID for an event listener
+ *
+ * @param Object obj
+ * @param String type event type
+ * @param Function listener
+ * @param Object context
+ * @return String
+ */
+ this._id = function (obj, type, listener, context) {
+ return type + _stamp(listener) + (context ? '_' + _stamp(context) : '');
+ };
+
+ /**
+ * Adds event listener
+ *
+ * @param Object obj
+ * @param String type event type
+ * @param Function listener
+ * @param Object context
+ * @param Boolean useCapture
+ * @return null
+ */
+ this.on = function (obj, type, listener, context, useCapture) {
+ var id = this._id.apply(this, arguments),
+ handler = function (e) {
+ return listener.call(context || obj, e || window.event);
+ };
+
+ if ('addEventListener' in obj) {
+ obj.addEventListener(type, handler, useCapture);
+ } else if ('attachEvent' in obj) {
+ obj.attachEvent('on' + type, handler);
+ }
+
+ obj[events_key] = obj[events_key] || {};
+ obj[events_key][id] = handler;
+ };
+
+ /**
+ * Removes event listener
+ *
+ * @param Object obj
+ * @param String type event type
+ * @param Function listener
+ * @param Object context
+ * @param Boolean useCapture
+ * @return null
+ */
+ this.off = function (obj, type, listener, context, useCapture) {
+ var id = this._id.apply(this, arguments),
+ handler = obj[events_key] && obj[events_key][id];
+
+ if (!handler) {
+ return;
+ }
+
+ if ('removeEventListener' in obj) {
+ obj.removeEventListener(type, handler, useCapture);
+ } else if ('detachEvent' in obj) {
+ obj.detachEvent('on' + type, handler);
+ }
+
+ obj[events_key][id] = null;
+ };
+ }
+
+ return new DOMEvent();
+ })();
+
+ /**
+ * Append a class to an element
+ *
+ * @api private
+ * @method _addClass
+ * @param {Object} element
+ * @param {String} className
+ * @returns null
+ */
+ function _addClass(element, className) {
+ if (element instanceof SVGElement) {
+ // svg
+ var pre = element.getAttribute('class') || '';
+
+ element.setAttribute('class', pre + ' ' + className);
+ } else {
+ if (element.classList !== undefined) {
+ // check for modern classList property
+ var classes = className.split(' ');
+ _forEach(classes, function (cls) {
+ element.classList.add( cls );
+ });
+ } else if (!element.className.match( className )) {
+ // check if element doesn't already have className
+ element.className += ' ' + className;
+ }
+ }
+ }
+
+ /**
+ * Remove a class from an element
+ *
+ * @api private
+ * @method _removeClass
+ * @param {Object} element
+ * @param {RegExp|String} classNameRegex can be regex or string
+ * @returns null
+ */
+ function _removeClass(element, classNameRegex) {
+ if (element instanceof SVGElement) {
+ var pre = element.getAttribute('class') || '';
+
+ element.setAttribute('class', pre.replace(classNameRegex, '').replace(/^\s+|\s+$/g, ''));
+ } else {
+ element.className = element.className.replace(classNameRegex, '').replace(/^\s+|\s+$/g, '');
+ }
+ }
+
+ /**
+ * Get an element CSS property on the page
+ * Thanks to JavaScript Kit: http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml
+ *
+ * @api private
+ * @method _getPropValue
+ * @param {Object} element
+ * @param {String} propName
+ * @returns Element's property value
+ */
+ function _getPropValue (element, propName) {
+ var propValue = '';
+ if (element.currentStyle) { //IE
+ propValue = element.currentStyle[propName];
+ } else if (document.defaultView && document.defaultView.getComputedStyle) { //Others
+ propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
+ }
+
+ //Prevent exception in IE
+ if (propValue && propValue.toLowerCase) {
+ return propValue.toLowerCase();
+ } else {
+ return propValue;
+ }
+ }
+
+ /**
+ * Checks to see if target element (or parents) position is fixed or not
+ *
+ * @api private
+ * @method _isFixed
+ * @param {Object} element
+ * @returns Boolean
+ */
+ function _isFixed (element) {
+ var p = element.parentNode;
+
+ if (!p || p.nodeName === 'HTML') {
+ return false;
+ }
+
+ if (_getPropValue(element, 'position') === 'fixed') {
+ return true;
+ }
+
+ return _isFixed(p);
+ }
+
+ /**
+ * Provides a cross-browser way to get the screen dimensions
+ * via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight
+ *
+ * @api private
+ * @method _getWinSize
+ * @returns {Object} width and height attributes
+ */
+ function _getWinSize() {
+ if (window.innerWidth !== undefined) {
+ return { width: window.innerWidth, height: window.innerHeight };
+ } else {
+ var D = document.documentElement;
+ return { width: D.clientWidth, height: D.clientHeight };
+ }
+ }
+
+ /**
+ * Check to see if the element is in the viewport or not
+ * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+ *
+ * @api private
+ * @method _elementInViewport
+ * @param {Object} el
+ */
+ function _elementInViewport(el) {
+ var rect = el.getBoundingClientRect();
+
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ (rect.bottom+80) <= window.innerHeight && // add 80 to get the text right
+ rect.right <= window.innerWidth
+ );
+ }
+
+ /**
+ * Add overlay layer to the page
+ *
+ * @api private
+ * @method _addOverlayLayer
+ * @param {Object} targetElm
+ */
+ function _addOverlayLayer(targetElm) {
+ var overlayLayer = document.createElement('div'),
+ styleText = '',
+ self = this;
+
+ //set css class name
+ overlayLayer.className = 'introjs-overlay';
+
+ //check if the target element is body, we should calculate the size of overlay layer in a better way
+ if (!targetElm.tagName || targetElm.tagName.toLowerCase() === 'body') {
+ styleText += 'top: 0;bottom: 0; left: 0;right: 0;position: fixed;';
+ overlayLayer.style.cssText = styleText;
+ } else {
+ //set overlay layer position
+ var elementPosition = _getOffset(targetElm);
+ if (elementPosition) {
+ styleText += 'width: ' + elementPosition.width + 'px; height:' + elementPosition.height + 'px; top:' + elementPosition.top + 'px;left: ' + elementPosition.left + 'px;';
+ overlayLayer.style.cssText = styleText;
+ }
+ }
+
+ targetElm.appendChild(overlayLayer);
+
+ overlayLayer.onclick = function() {
+ if (self._options.exitOnOverlayClick === true) {
+ _exitIntro.call(self, targetElm);
+ }
+ };
+
+ window.setTimeout(function() {
+ styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';';
+ overlayLayer.style.cssText = styleText;
+ }, 10);
+
+ return true;
+ }
+
+ /**
+ * Removes open hint (tooltip hint)
+ *
+ * @api private
+ * @method _removeHintTooltip
+ */
+ function _removeHintTooltip() {
+ var tooltip = document.querySelector('.introjs-hintReference');
+
+ if (tooltip) {
+ var step = tooltip.getAttribute('data-step');
+ tooltip.parentNode.removeChild(tooltip);
+ return step;
+ }
+ }
+
+ /**
+ * Start parsing hint items
+ *
+ * @api private
+ * @param {Object} targetElm
+ * @method _startHint
+ */
+ function _populateHints(targetElm) {
+
+ this._introItems = [];
+
+ if (this._options.hints) {
+ _forEach(this._options.hints, function (hint) {
+ var currentItem = _cloneObject(hint);
+
+ if (typeof(currentItem.element) === 'string') {
+ //grab the element with given selector from the page
+ currentItem.element = document.querySelector(currentItem.element);
+ }
+
+ currentItem.hintPosition = currentItem.hintPosition || this._options.hintPosition;
+ currentItem.hintAnimation = currentItem.hintAnimation || this._options.hintAnimation;
+
+ if (currentItem.element !== null) {
+ this._introItems.push(currentItem);
+ }
+ }.bind(this));
+ } else {
+ var hints = targetElm.querySelectorAll('*[data-hint]');
+
+ if (!hints || !hints.length) {
+ return false;
+ }
+
+ //first add intro items with data-step
+ _forEach(hints, function (currentElement) {
+ // hint animation
+ var hintAnimation = currentElement.getAttribute('data-hintanimation');
+
+ if (hintAnimation) {
+ hintAnimation = (hintAnimation === 'true');
+ } else {
+ hintAnimation = this._options.hintAnimation;
+ }
+
+ this._introItems.push({
+ element: currentElement,
+ hint: currentElement.getAttribute('data-hint'),
+ hintPosition: currentElement.getAttribute('data-hintposition') || this._options.hintPosition,
+ hintAnimation: hintAnimation,
+ tooltipClass: currentElement.getAttribute('data-tooltipclass'),
+ position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
+ });
+ }.bind(this));
+ }
+
+ _addHints.call(this);
+
+ /*
+ todo:
+ these events should be removed at some point
+ */
+ DOMEvent.on(document, 'click', _removeHintTooltip, this, false);
+ DOMEvent.on(window, 'resize', _reAlignHints, this, true);
+ }
+
+ /**
+ * Re-aligns all hint elements
+ *
+ * @api private
+ * @method _reAlignHints
+ */
+ function _reAlignHints() {
+ _forEach(this._introItems, function (item) {
+ if (typeof(item.targetElement) === 'undefined') {
+ return;
+ }
+
+ _alignHintPosition.call(this, item.hintPosition, item.element, item.targetElement);
+ }.bind(this));
+ }
+
+ /**
+ * Get a queryselector within the hint wrapper
+ *
+ * @param {String} selector
+ * @return {NodeList|Array}
+ */
+ function _hintQuerySelectorAll(selector) {
+ var hintsWrapper = document.querySelector('.introjs-hints');
+ return (hintsWrapper) ? hintsWrapper.querySelectorAll(selector) : [];
+ }
+
+ /**
+ * Hide a hint
+ *
+ * @api private
+ * @method _hideHint
+ */
+ function _hideHint(stepId) {
+ var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];
+
+ _removeHintTooltip.call(this);
+
+ if (hint) {
+ _addClass(hint, 'introjs-hidehint');
+ }
+
+ // call the callback function (if any)
+ if (typeof (this._hintCloseCallback) !== 'undefined') {
+ this._hintCloseCallback.call(this, stepId);
+ }
+ }
+
+ /**
+ * Hide all hints
+ *
+ * @api private
+ * @method _hideHints
+ */
+ function _hideHints() {
+ var hints = _hintQuerySelectorAll('.introjs-hint');
+
+ _forEach(hints, function (hint) {
+ _hideHint.call(this, hint.getAttribute('data-step'));
+ }.bind(this));
+ }
+
+ /**
+ * Show all hints
+ *
+ * @api private
+ * @method _showHints
+ */
+ function _showHints() {
+ var hints = _hintQuerySelectorAll('.introjs-hint');
+
+ if (hints && hints.length) {
+ _forEach(hints, function (hint) {
+ _showHint.call(this, hint.getAttribute('data-step'));
+ }.bind(this));
+ } else {
+ _populateHints.call(this, this._targetElement);
+ }
+ }
+
+ /**
+ * Show a hint
+ *
+ * @api private
+ * @method _showHint
+ */
+ function _showHint(stepId) {
+ var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];
+
+ if (hint) {
+ _removeClass(hint, /introjs-hidehint/g);
+ }
+ }
+
+ /**
+ * Removes all hint elements on the page
+ * Useful when you want to destroy the elements and add them again (e.g. a modal or popup)
+ *
+ * @api private
+ * @method _removeHints
+ */
+ function _removeHints() {
+ var hints = _hintQuerySelectorAll('.introjs-hint');
+
+ _forEach(hints, function (hint) {
+ _removeHint.call(this, hint.getAttribute('data-step'));
+ }.bind(this));
+ }
+
+ /**
+ * Remove one single hint element from the page
+ * Useful when you want to destroy the element and add them again (e.g. a modal or popup)
+ * Use removeHints if you want to remove all elements.
+ *
+ * @api private
+ * @method _removeHint
+ */
+ function _removeHint(stepId) {
+ var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];
+
+ if (hint) {
+ hint.parentNode.removeChild(hint);
+ }
+ }
+
+ /**
+ * Add all available hints to the page
+ *
+ * @api private
+ * @method _addHints
+ */
+ function _addHints() {
+ var self = this;
+
+ var hintsWrapper = document.querySelector('.introjs-hints');
+
+ if (hintsWrapper === null) {
+ hintsWrapper = document.createElement('div');
+ hintsWrapper.className = 'introjs-hints';
+ }
+
+ /**
+ * Returns an event handler unique to the hint iteration
+ *
+ * @param {Integer} i
+ * @return {Function}
+ */
+ var getHintClick = function (i) {
+ return function(e) {
+ var evt = e ? e : window.event;
+
+ if (evt.stopPropagation) {
+ evt.stopPropagation();
+ }
+
+ if (evt.cancelBubble !== null) {
+ evt.cancelBubble = true;
+ }
+
+ _showHintDialog.call(self, i);
+ };
+ };
+
+ _forEach(this._introItems, function(item, i) {
+ // avoid append a hint twice
+ if (document.querySelector('.introjs-hint[data-step="' + i + '"]')) {
+ return;
+ }
+
+ var hint = document.createElement('a');
+ _setAnchorAsButton(hint);
+
+ hint.onclick = getHintClick(i);
+
+ hint.className = 'introjs-hint';
+
+ if (!item.hintAnimation) {
+ _addClass(hint, 'introjs-hint-no-anim');
+ }
+
+ // hint's position should be fixed if the target element's position is fixed
+ if (_isFixed(item.element)) {
+ _addClass(hint, 'introjs-fixedhint');
+ }
+
+ var hintDot = document.createElement('div');
+ hintDot.className = 'introjs-hint-dot';
+ var hintPulse = document.createElement('div');
+ hintPulse.className = 'introjs-hint-pulse';
+
+ hint.appendChild(hintDot);
+ hint.appendChild(hintPulse);
+ hint.setAttribute('data-step', i);
+
+ // we swap the hint element with target element
+ // because _setHelperLayerPosition uses `element` property
+ item.targetElement = item.element;
+ item.element = hint;
+
+ // align the hint position
+ _alignHintPosition.call(this, item.hintPosition, hint, item.targetElement);
+
+ hintsWrapper.appendChild(hint);
+ }.bind(this));
+
+ // adding the hints wrapper
+ document.body.appendChild(hintsWrapper);
+
+ // call the callback function (if any)
+ if (typeof (this._hintsAddedCallback) !== 'undefined') {
+ this._hintsAddedCallback.call(this);
+ }
+ }
+
+ /**
+ * Aligns hint position
+ *
+ * @api private
+ * @method _alignHintPosition
+ * @param {String} position
+ * @param {Object} hint
+ * @param {Object} element
+ */
+ function _alignHintPosition(position, hint, element) {
+ // get/calculate offset of target element
+ var offset = _getOffset.call(this, element);
+ var iconWidth = 20;
+ var iconHeight = 20;
+
+ // align the hint element
+ switch (position) {
+ default:
+ case 'top-left':
+ hint.style.left = offset.left + 'px';
+ hint.style.top = offset.top + 'px';
+ break;
+ case 'top-right':
+ hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
+ hint.style.top = offset.top + 'px';
+ break;
+ case 'bottom-left':
+ hint.style.left = offset.left + 'px';
+ hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
+ break;
+ case 'bottom-right':
+ hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
+ hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
+ break;
+ case 'middle-left':
+ hint.style.left = offset.left + 'px';
+ hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
+ break;
+ case 'middle-right':
+ hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
+ hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
+ break;
+ case 'middle-middle':
+ hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
+ hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
+ break;
+ case 'bottom-middle':
+ hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
+ hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
+ break;
+ case 'top-middle':
+ hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
+ hint.style.top = offset.top + 'px';
+ break;
+ }
+ }
+
+ /**
+ * Triggers when user clicks on the hint element
+ *
+ * @api private
+ * @method _showHintDialog
+ * @param {Number} stepId
+ */
+ function _showHintDialog(stepId) {
+ var hintElement = document.querySelector('.introjs-hint[data-step="' + stepId + '"]');
+ var item = this._introItems[stepId];
+
+ // call the callback function (if any)
+ if (typeof (this._hintClickCallback) !== 'undefined') {
+ this._hintClickCallback.call(this, hintElement, item, stepId);
+ }
+
+ // remove all open tooltips
+ var removedStep = _removeHintTooltip.call(this);
+
+ // to toggle the tooltip
+ if (parseInt(removedStep, 10) === stepId) {
+ return;
+ }
+
+ var tooltipLayer = document.createElement('div');
+ var tooltipTextLayer = document.createElement('div');
+ var arrowLayer = document.createElement('div');
+ var referenceLayer = document.createElement('div');
+
+ tooltipLayer.className = 'introjs-tooltip';
+
+ tooltipLayer.onclick = function (e) {
+ //IE9 & Other Browsers
+ if (e.stopPropagation) {
+ e.stopPropagation();
+ }
+ //IE8 and Lower
+ else {
+ e.cancelBubble = true;
+ }
+ };
+
+ tooltipTextLayer.className = 'introjs-tooltiptext';
+
+ var tooltipWrapper = document.createElement('p');
+ tooltipWrapper.innerHTML = item.hint;
+
+ var closeButton = document.createElement('a');
+ closeButton.className = this._options.buttonClass;
+ closeButton.setAttribute('role', 'button');
+ closeButton.innerHTML = this._options.hintButtonLabel;
+ closeButton.onclick = _hideHint.bind(this, stepId);
+
+ tooltipTextLayer.appendChild(tooltipWrapper);
+ tooltipTextLayer.appendChild(closeButton);
+
+ arrowLayer.className = 'introjs-arrow';
+ tooltipLayer.appendChild(arrowLayer);
+
+ tooltipLayer.appendChild(tooltipTextLayer);
+
+ // set current step for _placeTooltip function
+ this._currentStep = hintElement.getAttribute('data-step');
+
+ // align reference layer position
+ referenceLayer.className = 'introjs-tooltipReferenceLayer introjs-hintReference';
+ referenceLayer.setAttribute('data-step', hintElement.getAttribute('data-step'));
+ _setHelperLayerPosition.call(this, referenceLayer);
+
+ referenceLayer.appendChild(tooltipLayer);
+ document.body.appendChild(referenceLayer);
+
+ //set proper position
+ _placeTooltip.call(this, hintElement, tooltipLayer, arrowLayer, null, true);
+ }
+
+ /**
+ * Get an element position on the page
+ * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966
+ *
+ * @api private
+ * @method _getOffset
+ * @param {Object} element
+ * @returns Element's position info
+ */
+ function _getOffset(element) {
+ var body = document.body;
+ var docEl = document.documentElement;
+ var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+ var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+ var x = element.getBoundingClientRect();
+ return {
+ top: x.top + scrollTop,
+ width: x.width,
+ height: x.height,
+ left: x.left + scrollLeft
+ };
+ }
+
+ /**
+ * Find the nearest scrollable parent
+ * copied from https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
+ *
+ * @param Element element
+ * @return Element
+ */
+ function _getScrollParent(element) {
+ var style = window.getComputedStyle(element);
+ var excludeStaticParent = (style.position === "absolute");
+ var overflowRegex = /(auto|scroll)/;
+
+ if (style.position === "fixed") return document.body;
+
+ for (var parent = element; (parent = parent.parentElement);) {
+ style = window.getComputedStyle(parent);
+ if (excludeStaticParent && style.position === "static") {
+ continue;
+ }
+ if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+ }
+
+ return document.body;
+ }
+
+ /**
+ * scroll a scrollable element to a child element
+ *
+ * @param Element parent
+ * @param Element element
+ * @return Null
+ */
+ function _scrollParentToElement (parent, element) {
+ parent.scrollTop = element.offsetTop - parent.offsetTop;
+ }
+
+ /**
+ * Gets the current progress percentage
+ *
+ * @api private
+ * @method _getProgress
+ * @returns current progress percentage
+ */
+ function _getProgress() {
+ // Steps are 0 indexed
+ var currentStep = parseInt((this._currentStep + 1), 10);
+ return ((currentStep / this._introItems.length) * 100);
+ }
+
+ /**
+ * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
+ * via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
+ *
+ * @param obj1
+ * @param obj2
+ * @returns obj3 a new object based on obj1 and obj2
+ */
+ function _mergeOptions(obj1,obj2) {
+ var obj3 = {},
+ attrname;
+ for (attrname in obj1) { obj3[attrname] = obj1[attrname]; }
+ for (attrname in obj2) { obj3[attrname] = obj2[attrname]; }
+ return obj3;
+ }
+
+ var introJs = function (targetElm) {
+ var instance;
+
+ if (typeof (targetElm) === 'object') {
+ //Ok, create a new instance
+ instance = new IntroJs(targetElm);
+
+ } else if (typeof (targetElm) === 'string') {
+ //select the target element with query selector
+ var targetElement = document.querySelector(targetElm);
+
+ if (targetElement) {
+ instance = new IntroJs(targetElement);
+ } else {
+ throw new Error('There is no element with given selector.');
+ }
+ } else {
+ instance = new IntroJs(document.body);
+ }
+ // add instance to list of _instances
+ // passing group to _stamp to increment
+ // from 0 onward somewhat reliably
+ introJs.instances[ _stamp(instance, 'introjs-instance') ] = instance;
+
+ return instance;
+ };
+
+ /**
+ * Current IntroJs version
+ *
+ * @property version
+ * @type String
+ */
+ introJs.version = VERSION;
+
+ /**
+ * key-val object helper for introJs instances
+ *
+ * @property instances
+ * @type Object
+ */
+ introJs.instances = {};
+
+ //Prototype
+ introJs.fn = IntroJs.prototype = {
+ clone: function () {
+ return new IntroJs(this);
+ },
+ setOption: function(option, value) {
+ this._options[option] = value;
+ return this;
+ },
+ setOptions: function(options) {
+ this._options = _mergeOptions(this._options, options);
+ return this;
+ },
+ start: function (group) {
+ _introForElement.call(this, this._targetElement, group);
+ return this;
+ },
+ goToStep: function(step) {
+ _goToStep.call(this, step);
+ return this;
+ },
+ addStep: function(options) {
+ if (!this._options.steps) {
+ this._options.steps = [];
+ }
+
+ this._options.steps.push(options);
+
+ return this;
+ },
+ addSteps: function(steps) {
+ if (!steps.length) return;
+
+ for(var index = 0; index < steps.length; index++) {
+ this.addStep(steps[index]);
+ }
+
+ return this;
+ },
+ goToStepNumber: function(step) {
+ _goToStepNumber.call(this, step);
+
+ return this;
+ },
+ nextStep: function() {
+ _nextStep.call(this);
+ return this;
+ },
+ previousStep: function() {
+ _previousStep.call(this);
+ return this;
+ },
+ exit: function(force) {
+ _exitIntro.call(this, this._targetElement, force);
+ return this;
+ },
+ refresh: function() {
+ _refresh.call(this);
+ return this;
+ },
+ onbeforechange: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introBeforeChangeCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onbeforechange was not a function');
+ }
+ return this;
+ },
+ onchange: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introChangeCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onchange was not a function.');
+ }
+ return this;
+ },
+ onafterchange: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introAfterChangeCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onafterchange was not a function');
+ }
+ return this;
+ },
+ oncomplete: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introCompleteCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for oncomplete was not a function.');
+ }
+ return this;
+ },
+ onhintsadded: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._hintsAddedCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onhintsadded was not a function.');
+ }
+ return this;
+ },
+ onhintclick: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._hintClickCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onhintclick was not a function.');
+ }
+ return this;
+ },
+ onhintclose: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._hintCloseCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onhintclose was not a function.');
+ }
+ return this;
+ },
+ onexit: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introExitCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onexit was not a function.');
+ }
+ return this;
+ },
+ onskip: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introSkipCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onskip was not a function.');
+ }
+ return this;
+ },
+ onbeforeexit: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._introBeforeExitCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onbeforeexit was not a function.');
+ }
+ return this;
+ },
+ addHints: function() {
+ _populateHints.call(this, this._targetElement);
+ return this;
+ },
+ hideHint: function (stepId) {
+ _hideHint.call(this, stepId);
+ return this;
+ },
+ hideHints: function () {
+ _hideHints.call(this);
+ return this;
+ },
+ showHint: function (stepId) {
+ _showHint.call(this, stepId);
+ return this;
+ },
+ showHints: function () {
+ _showHints.call(this);
+ return this;
+ },
+ removeHints: function () {
+ _removeHints.call(this);
+ return this;
+ },
+ removeHint: function (stepId) {
+ _removeHint.call(this, stepId);
+ return this;
+ },
+ showHintDialog: function (stepId) {
+ _showHintDialog.call(this, stepId);
+ return this;
+ }
+ };
+
+ return introJs;
+});
diff --git a/dev/js/runner/all.html b/dev/js/runner/all.html
index 124cb76..366c755 100644
--- a/dev/js/runner/all.html
+++ b/dev/js/runner/all.html
@@ -46,7 +46,8 @@
'spec/queryCreatorSpec',
'spec/corpusByMatchSpec',
'spec/statSpec',
- 'spec/vcSpec'
+ 'spec/vcSpec',
+ 'spec/tourSpec'
],
function () {
window.onload();
diff --git a/dev/js/runner/tour.html b/dev/js/runner/tour.html
new file mode 100644
index 0000000..4f16cc9
--- /dev/null
+++ b/dev/js/runner/tour.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Spec Runner for Guided Tour</title>
+ <link rel="shortcut icon" type="image/png" href="../lib/jasmine-2.1.1/jasmine_favicon.png">
+ <link rel="stylesheet" href="../lib/jasmine-2.1.1/jasmine.css">
+ <script src="../lib/require.js"></script>
+ <script>
+ require.config({
+ baseUrl: "../src",
+ paths: {
+ "lib" : "../lib",
+ "spec" : "../spec",
+ "jlib" : "lib/jasmine-2.1.1",
+ "jasmine" : ['../lib/jasmine-2.1.1/jasmine'],
+ "jasmine-html": ['../lib/jasmine-2.1.1/jasmine-html'],
+ "jasmine-boot": ['../lib/jasmine-2.1.1/boot']
+ },
+ shim : {
+ 'jasmine-html' : {
+ deps : ['jasmine']
+ },
+ 'jasmine-boot' : {
+ deps : ['jasmine','jasmine-html']
+ }
+ }
+ });
+ require(['jasmine-boot'], function () {
+ require([
+ 'spec/tourSpec'
+ ],
+ function () {
+ window.onload();
+ });
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dev/js/spec/tourSpec.js b/dev/js/spec/tourSpec.js
new file mode 100644
index 0000000..bb5df70
--- /dev/null
+++ b/dev/js/spec/tourSpec.js
@@ -0,0 +1,75 @@
+/**
+ * Test suite for guided tour.
+ *
+ * @author Helge Stallkamp
+ */
+
+define(['tour/tours', 'vc'], function(tourClass, vcClass){
+ const loc = KorAP.Locale;
+
+ //TODO Read this file from the file system, see https://korap.ids-mannheim.de/gerrit/#/c/KorAP/Kalamar/+/2241/
+ var introKorAP = "<form autocomplete='off' action='/' id='searchform'>" +
+ "<div id='searchbar'>" +
+ "<input autocapitalize='off' autocomplete='off ' autocorrect='off' autofocus='autofocus' id='q-field' name='q' placeholder='Find ...' spellcheck='false' type='search'>" +
+ "<button type='submit' title='Go!'><span>Go!</span></button>" +
+ "</div>"+
+ "<!-- Search in the following virtual collection -->"+
+ "<div id='vc-view'></div>" +
+ "in" +
+ "<input id='collection' name='collection' type='text'>" +
+ "with" +
+ "<span class='select'>" +
+ "<select id='ql-field' name='ql'><option value='poliqarp'>Poliqarp</option><option value='cosmas2'>Cosmas II</option><option value='annis'>Annis QL</option><option value='cql'>CQL v1.2</option><option value='fcsql'>FCSQL</option></select>" +
+ "</span>" +
+ "<div class='button right'>" +
+ "<input checked class='checkbox' id='q-cutoff-field' name='cutoff' type='checkbox' value='1'>"+
+ "<label for='q-cutoff-field' title='Just show the first matches in arbitrary order'><span id='glimpse-intrjs'></span>Glimpse</label>" +
+ "<a class='tutorial' href='/doc' id='view-tutorial' tabindex='-1' title='Tutorial'><span>Tutorial</span></a>" +
+ "</div>" +
+ "<div class='clear'></div>" +
+ "</form>";
+
+ let template = document.createElement('template');
+ html = introKorAP.trim(); // Do not return a text node of whitespace as the result
+ template.innerHTML = html;
+ intrkorap = template.content.firstChild;
+
+
+ //TODO Add hint and vc-choose, they are not part of the generated file
+ describe('KorAP.GuidedTour', function(){
+ it('IDs and classes, that are needed for the guided tour should be in existence', function(){
+ expect(intrkorap.querySelector('#searchbar')).not.toBeNull();
+ expect(intrkorap.querySelector('#q-field')).not.toBeNull();
+ //expect(intrkorap.querySelector('#hint')).not.toBeNull();
+ //expect(intrkorap.querySelector('#vc-choose')).not.toBeNull();
+ expect(intrkorap.querySelector('#vc-view')).not.toBeNull();
+ expect(intrkorap.querySelector('#ql-field').parentNode).not.toBeNull();
+ expect(intrkorap.querySelector('#glimpse-intrjs')).not.toBeNull();
+ expect(intrkorap.querySelector('#view-tutorial')).not.toBeNull();
+ expect(intrkorap.querySelector('#searchbar button[type=submit]')).not.toBeNull();
+ });
+
+
+ it('Guided Tour should be started and display steps and labels in the right order', function(){
+ let testTour = tourClass.guidedTour(intrkorap);
+ testTour.start();
+ let totalSteps = testTour.stepCount;
+
+ expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(loc.TOUR_sear1);
+ expect(document.querySelector(".introjs-skipbutton").textContent).toEqual(loc.TOUR_lskip);
+ expect(document.querySelector(".introjs-prevbutton").textContent).toEqual(loc.TOUR_lprev);
+ expect(document.querySelector(".introjs-nextbutton").textContent).toEqual(loc.TOUR_lnext);
+ testTour.exit();
+
+ for(let i = 2; i <= totalSteps; i++){
+ testTour.goToStepNumber(i);
+ expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(testTour.testIntros[i-1]);
+ if(i == totalSteps){
+ expect(document.querySelector('.introjs-donebutton').textContent).toEqual(loc.TOUR_ldone);
+ }
+ testTour.exit();
+ }
+ });
+ });
+}
+);
diff --git a/dev/js/src/hint/input.js b/dev/js/src/hint/input.js
index a163727..67d01f8 100644
--- a/dev/js/src/hint/input.js
+++ b/dev/js/src/hint/input.js
@@ -151,6 +151,8 @@
this._mirror.classList.add('hint', 'mirror');
this._mirror.appendChild(document.createElement("span"));
this._container = document.createElement("div");
+ this._container.setAttribute('id', 'hint');
+
this._mirror.appendChild(this._container);
this._mirror.style.height = "0px";
document.getElementsByTagName("body")[0].appendChild(this._mirror);
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index cc1d53b..b78e870 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -26,6 +26,7 @@
'session',
'selectMenu',
'panel/result',
+ 'tour/tours',
'api',
'mailToChiffre',
'util'
@@ -38,7 +39,8 @@
alertifyClass,
sessionClass,
selectMenuClass,
- resultPanelClass) {
+ resultPanelClass,
+ tourClass) {
const d = document;
@@ -357,4 +359,12 @@
return obj;
});
+
+
+ tourshow = function(){
+ let tour = tourClass.guidedTour();
+ tour.start();
+ };
+
+
});
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 6c121cf..76f72bc 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -43,4 +43,23 @@
//loc.VERB_SHOWSTAT = 'Korpusstatistik';
loc.NEW_CONSTRAINT = 'Neue Bedingung';
+
+ //Guided Tour:Buttonlabels
+ loc.TOUR_lskip = "Abbrechen";
+ loc.TOUR_lprev = "Zurück";
+ loc.TOUR_lnext = "Weiter";
+ loc.TOUR_ldone = "Beenden";
+
+ //Guided Tour: Steps
+ loc.TOUR_sear1 = "Geben Sie die Suchanfrage hier ein.";
+ loc.TOUR_sear2 = "Zum Beispiel die Suche nach 'Baum'";
+ loc.TOUR_searAnnot ="Für die Suche nach Annotationen steht der Annotationsassistent zur Verfügung.";
+ loc.TOUR_annotAss = "Der Annotationsassistent erleichert die Formulierung von Suchanfragen mit Annotationen.";
+ loc.TOUR_vccho1 = "Öffnen des Korpusassistenten";
+ loc.TOUR_vccho2 = "Eigene Definition von Subkorpora durch Verknüpfung beliebiger Metadatenfelder.";
+ loc.TOUR_vcStat = "Anzeigen der Korpusstatistik";
+ loc.TOUR_qlfield = "Auswahl der Suchanfragesprache";
+ loc.TOUR_glimpse = "Beim Wählen dieser Option wird festgelegt ob nur die ersten Treffer in zufälliger Reihenfolge ausgewählt werden.";
+ loc.TOUR_help = "Hier finden Sie Hilfe zu KorAP.";
+ loc.TOUR_seargo = "Suchanfrage starten";
});
diff --git a/dev/js/src/tour/tours.js b/dev/js/src/tour/tours.js
new file mode 100644
index 0000000..0b5d2a8
--- /dev/null
+++ b/dev/js/src/tour/tours.js
@@ -0,0 +1,153 @@
+/**
+ * Guided Tour to explain the UI
+ *
+ * @author Helge Stallkamp
+ */
+
+define(['lib/intro', 'vc'], function(introClass, vcClass) {
+
+ //needed for localization of labels and contents of the tour
+ const loc = KorAP.Locale;
+
+ //labels for nextStep, previousStep, done and abort
+ loc.TOUR_lskip = loc.TOUR_lskip || "Abort";
+ loc.TOUR_lprev = loc.TOUR_lprev || "Back";
+ loc.TOUR_lnext = loc.TOUR_lnext || "Next";
+ loc.TOUR_ldone = loc.TOUR_ldone || "Done";
+
+ //localization tours
+ loc.TOUR_sear1 = loc.TOUR_sear1 || "Enter your search enquiry here.";
+ loc.TOUR_sear2 = loc.TOUR_sear2 || "For example the search for 'Baum'...";
+ loc.TOUR_searAnnot = loc.TOUR_searAnnot || "Annotation helper: By clicking here, the annotations of the differents layers are displayed and can be selected.";
+ loc.TOUR_annotAss = loc.TOUR_annotAss || "The annoation assistant helps to formulate queries with annotations";
+ loc.TOUR_vccho1 = loc.TOUR_vccho1 || "Choose corpus by clicking here.";
+ loc.TOUR_vccho2 = loc.TOUR_vccho2 || "Define your corpus here.";
+ loc.TOUR_vcStat = loc.TOUR_vcStat || "Display corpus statistic.";
+ loc.TOUR_qlfield = loc.TOUR_qlfield|| "You can use KorAP with different query languages, select the query language here.";
+ loc.TOUR_help = loc.TOUR_help || "Help and more information about KorAP.";
+ loc.TOUR_glimpse = loc.TOUR_glimpse || "Select to show only the first hits in arbitrary order.";
+ loc.TOUR_seargo = loc.TOUR_seargo || "Start the search.";
+
+ //localization of button labels
+ let labelOptions = {
+ 'skipLabel': loc.TOUR_lskip,
+ 'prevLabel': loc.TOUR_lprev,
+ 'nextLabel': loc.TOUR_lnext,
+ 'doneLabel': loc.TOUR_ldone,
+ 'showStepNumbers': false,
+ };
+
+ let intro = introClass();
+ intro.setOptions(labelOptions);
+
+
+ return{
+
+ /**
+ * Guided Tour: Definition of steps
+ */
+ guidedTour:function(elparam){
+
+ var doe = document;
+ if(elparam){
+ doe = elparam;
+ }
+
+ let input = doe.querySelector("#q-field");
+ input.value="";
+
+ //steps of the example tour
+ let Steps =[
+ {
+ element: '#searchbar',
+ intro: loc.TOUR_sear1,
+ position: 'bottom'
+ },
+ {
+ element: '#searchbar',
+ intro: loc.TOUR_sear2,
+ position: 'bottom'
+ },
+ {
+ element: '#hint',
+ intro: loc.TOUR_searAnnot,
+ position: 'bottom'
+ },
+ {
+ element:'#vc-choose',
+ intro: loc.TOUR_vccho1,
+ position: "bottom",
+ },
+ {
+ element:'#vc-view',
+ intro: loc.TOUR_vccho2,
+ position: "bottom",
+ },
+ {
+ element: doe.querySelector('#ql-field').parentNode,
+ intro: loc.TOUR_qlfield,
+ position: "bottom",
+ },
+ {
+ element:'#glimpse-intrjs',
+ intro: loc.TOUR_glimpse,
+ position: "bottom",
+ },
+ {
+ element:'#view-tutorial',
+ intro: loc.TOUR_help,
+ position: "bottom",
+ },
+ {
+ element: doe.querySelector('#searchbar button[type=submit]'),
+ intro: loc.TOUR_seargo,
+ position: "bottom",
+ },
+ ];
+
+ //pass in the Steps array created earlier
+ intro.setOptions({steps: Steps});
+
+ //total number of steps, needed for jasmine tests
+ //See also: introJS.totalSteps() merge requested: //github.com/usablica/intro.js/pull/268/files
+ intro.stepCount = Steps.length;
+
+ //array of intro content needed for efficient testing
+ intro.testIntros = [];
+ for(let i = 0; i< Steps.length; i++){
+ intro.testIntros.push(Steps[i].intro);
+ }
+
+ //changes before executing the single steps
+ intro.onbeforechange(function(targetedElement){
+ switch(targetedElement.id){
+ case "searchbar":
+ if(this._currentStep == 1){
+ input = doe.querySelector('#q-field');
+ input.value="Baum";
+ }
+ break;
+
+ case "vc-view":
+ vchoo = doe.querySelector("#vc-choose");
+ vcv = doe.querySelector("#vc-view");
+ KorAP._delete.apply(KorAP.vc.root());
+ KorAP.vc.root().key("creationDate").update();
+ KorAP.vc.root().value("1820").update();
+ if(!(vcv.querySelector(".active"))){
+ vchoo.click();
+ }
+ break;
+ }
+ });
+
+ // Execute at the end of the tour (By clicking at the done-Button)
+ intro.oncomplete(function(){
+ input.value="";
+ KorAP._delete.apply(KorAP.vc.root());
+ });
+
+ return intro;
+ },
+ }
+});
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
new file mode 100644
index 0000000..12acbc1
--- /dev/null
+++ b/dev/scss/main/introjs-ids.scss
@@ -0,0 +1,11 @@
+@import "../util";
+
+
+.introjs-helperNumberLayer {
+ background:$ids-orange-2;
+ }
+
+.introjs-helperLayer {
+ background-color:transparent;
+ }
+
\ No newline at end of file
diff --git a/dev/scss/main/introjs.scss b/dev/scss/main/introjs.scss
new file mode 100644
index 0000000..33c159b
--- /dev/null
+++ b/dev/scss/main/introjs.scss
@@ -0,0 +1,506 @@
+.introjs-overlay {
+ position: absolute;
+ box-sizing: content-box;
+ z-index: 999999;
+ background-color: #000;
+ opacity: 0;
+ background: -moz-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
+ background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
+ background: -webkit-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
+ background: -o-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
+ background: -ms-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
+ background: radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
+ filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+ filter: alpha(opacity=50);
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ -ms-transition: all 0.3s ease-out;
+ -o-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+}
+
+.introjs-fixParent {
+ z-index: auto !important;
+ opacity: 1.0 !important;
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -ms-transform: none !important;
+ -o-transform: none !important;
+ transform: none !important;
+}
+
+.introjs-showElement,
+tr.introjs-showElement > td,
+tr.introjs-showElement > th {
+ z-index: 9999999 !important;
+}
+
+.introjs-disableInteraction {
+ z-index: 99999999 !important;
+ position: absolute;
+ background-color: white;
+ opacity: 0;
+ filter: alpha(opacity=0);
+}
+
+.introjs-relativePosition,
+tr.introjs-showElement > td,
+tr.introjs-showElement > th {
+ position: relative;
+}
+
+.introjs-helperLayer {
+ box-sizing: content-box;
+ position: absolute;
+ z-index: 9999998;
+ background-color: #FFF;
+ background-color: rgba(255,255,255,.9);
+ border: 1px solid #777;
+ border: 1px solid rgba(0,0,0,.5);
+ border-radius: 4px;
+ box-shadow: 0 2px 15px rgba(0,0,0,.4);
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ -ms-transition: all 0.3s ease-out;
+ -o-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+}
+
+.introjs-tooltipReferenceLayer {
+ box-sizing: content-box;
+ position: absolute;
+ visibility: hidden;
+ z-index: 100000000;
+ background-color: transparent;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ -ms-transition: all 0.3s ease-out;
+ -o-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+}
+
+.introjs-helperLayer *,
+.introjs-helperLayer *:before,
+.introjs-helperLayer *:after {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ -ms-box-sizing: content-box;
+ -o-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+.introjs-helperNumberLayer {
+ box-sizing: content-box;
+ position: absolute;
+ visibility: visible;
+ top: -16px;
+ left: -16px;
+ z-index: 9999999999 !important;
+ padding: 2px;
+ font-family: Arial, verdana, tahoma;
+ font-size: 13px;
+ font-weight: bold;
+ color: white;
+ text-align: center;
+ text-shadow: 1px 1px 1px rgba(0,0,0,.3);
+ background: #ff3019; /* Old browsers */
+ background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
+ background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
+ background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
+ background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
+ background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
+ width: 20px;
+ height:20px;
+ line-height: 20px;
+ border: 3px solid white;
+ border-radius: 50%;
+ filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)"; /* IE6-9 */
+ filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)"; /* IE10 text shadows */
+ box-shadow: 0 2px 5px rgba(0,0,0,.4);
+}
+
+.introjs-arrow {
+ border: 5px solid transparent;
+ content:'';
+ position: absolute;
+}
+.introjs-arrow.top {
+ top: -10px;
+ border-bottom-color:white;
+}
+.introjs-arrow.top-right {
+ top: -10px;
+ right: 10px;
+ border-bottom-color:white;
+}
+.introjs-arrow.top-middle {
+ top: -10px;
+ left: 50%;
+ margin-left: -5px;
+ border-bottom-color:white;
+}
+.introjs-arrow.right {
+ right: -10px;
+ top: 10px;
+ border-left-color:white;
+}
+.introjs-arrow.right-bottom {
+ bottom:10px;
+ right: -10px;
+ border-left-color:white;
+}
+.introjs-arrow.bottom {
+ bottom: -10px;
+ border-top-color:white;
+}
+.introjs-arrow.bottom-right {
+ bottom: -10px;
+ right: 10px;
+ border-top-color:white;
+}
+.introjs-arrow.bottom-middle {
+ bottom: -10px;
+ left: 50%;
+ margin-left: -5px;
+ border-top-color:white;
+}
+.introjs-arrow.left {
+ left: -10px;
+ top: 10px;
+ border-right-color:white;
+}
+.introjs-arrow.left-bottom {
+ left: -10px;
+ bottom:10px;
+ border-right-color:white;
+}
+
+.introjs-tooltip {
+ box-sizing: content-box;
+ position: absolute;
+ visibility: visible;
+ padding: 10px;
+ background-color: white;
+ min-width: 200px;
+ max-width: 300px;
+ border-radius: 3px;
+ box-shadow: 0 1px 10px rgba(0,0,0,.4);
+ -webkit-transition: opacity 0.1s ease-out;
+ -moz-transition: opacity 0.1s ease-out;
+ -ms-transition: opacity 0.1s ease-out;
+ -o-transition: opacity 0.1s ease-out;
+ transition: opacity 0.1s ease-out;
+}
+
+.introjs-tooltipbuttons {
+ text-align: right;
+ white-space: nowrap;
+}
+
+/*
+ Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
+ Changed by Afshin Mehrabani
+*/
+.introjs-button {
+ box-sizing: content-box;
+ position: relative;
+ overflow: visible;
+ display: inline-block;
+ padding: 0.3em 0.8em;
+ border: 1px solid #d4d4d4;
+ margin: 0;
+ text-decoration: none;
+ text-shadow: 1px 1px 0 #fff;
+ font: 11px/normal sans-serif;
+ color: #333;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
+ background-color: #ececec;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
+ background-image: -moz-linear-gradient(#f4f4f4, #ececec);
+ background-image: -o-linear-gradient(#f4f4f4, #ececec);
+ background-image: linear-gradient(#f4f4f4, #ececec);
+ -webkit-background-clip: padding;
+ -moz-background-clip: padding;
+ -o-background-clip: padding-box;
+ /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ /* IE hacks */
+ zoom: 1;
+ *display: inline;
+ margin-top: 10px;
+}
+
+.introjs-button:hover {
+ border-color: #bcbcbc;
+ text-decoration: none;
+ box-shadow: 0px 1px 1px #e3e3e3;
+}
+
+.introjs-button:focus,
+.introjs-button:active {
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
+ background-image: -moz-linear-gradient(#ececec, #f4f4f4);
+ background-image: -o-linear-gradient(#ececec, #f4f4f4);
+ background-image: linear-gradient(#ececec, #f4f4f4);
+}
+
+/* overrides extra padding on button elements in Firefox */
+.introjs-button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+.introjs-skipbutton {
+ box-sizing: content-box;
+ margin-right: 5px;
+ color: #7a7a7a;
+}
+
+.introjs-prevbutton {
+ -webkit-border-radius: 0.2em 0 0 0.2em;
+ -moz-border-radius: 0.2em 0 0 0.2em;
+ border-radius: 0.2em 0 0 0.2em;
+ border-right: none;
+}
+
+.introjs-prevbutton.introjs-fullbutton {
+ border: 1px solid #d4d4d4;
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+}
+
+.introjs-nextbutton {
+ -webkit-border-radius: 0 0.2em 0.2em 0;
+ -moz-border-radius: 0 0.2em 0.2em 0;
+ border-radius: 0 0.2em 0.2em 0;
+}
+
+.introjs-nextbutton.introjs-fullbutton {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+}
+
+.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
+ color: #9a9a9a;
+ border-color: #d4d4d4;
+ box-shadow: none;
+ cursor: default;
+ background-color: #f4f4f4;
+ background-image: none;
+ text-decoration: none;
+}
+
+.introjs-hidden {
+ display: none;
+}
+
+.introjs-bullets {
+ text-align: center;
+}
+.introjs-bullets ul {
+ box-sizing: content-box;
+ clear: both;
+ margin: 15px auto 0;
+ padding: 0;
+ display: inline-block;
+}
+.introjs-bullets ul li {
+ box-sizing: content-box;
+ list-style: none;
+ float: left;
+ margin: 0 2px;
+}
+.introjs-bullets ul li a {
+ box-sizing: content-box;
+ display: block;
+ width: 6px;
+ height: 6px;
+ background: #ccc;
+ border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ text-decoration: none;
+ cursor: pointer;
+}
+.introjs-bullets ul li a:hover {
+ background: #999;
+}
+.introjs-bullets ul li a.active {
+ background: #999;
+}
+
+.introjs-progress {
+ box-sizing: content-box;
+ overflow: hidden;
+ height: 10px;
+ margin: 10px 0 5px 0;
+ border-radius: 4px;
+ background-color: #ecf0f1
+}
+.introjs-progressbar {
+ box-sizing: content-box;
+ float: left;
+ width: 0%;
+ height: 100%;
+ font-size: 10px;
+ line-height: 10px;
+ text-align: center;
+ background-color: #08c;
+}
+
+.introjsFloatingElement {
+ position: absolute;
+ height: 0;
+ width: 0;
+ left: 50%;
+ top: 50%;
+}
+
+.introjs-fixedTooltip {
+ position: fixed;
+}
+
+.introjs-hint {
+ box-sizing: content-box;
+ position: absolute;
+ background: transparent;
+ width: 20px;
+ height: 15px;
+ cursor: pointer;
+}
+.introjs-hint:focus {
+ border: 0;
+ outline: 0;
+}
+.introjs-hidehint {
+ display: none;
+}
+
+.introjs-fixedhint {
+ position: fixed;
+}
+
+.introjs-hint:hover > .introjs-hint-pulse {
+ border: 5px solid rgba(60, 60, 60, 0.57);
+}
+
+.introjs-hint-pulse {
+ box-sizing: content-box;
+ width: 10px;
+ height: 10px;
+ border: 5px solid rgba(60, 60, 60, 0.27);
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ border-radius: 30px;
+ background-color: rgba(136, 136, 136, 0.24);
+ z-index: 10;
+ position: absolute;
+ -webkit-transition: all 0.2s ease-out;
+ -moz-transition: all 0.2s ease-out;
+ -ms-transition: all 0.2s ease-out;
+ -o-transition: all 0.2s ease-out;
+ transition: all 0.2s ease-out;
+}
+.introjs-hint-no-anim .introjs-hint-dot {
+ -webkit-animation: none;
+ -moz-animation: none;
+ animation: none;
+}
+.introjs-hint-dot {
+ box-sizing: content-box;
+ border: 10px solid rgba(146, 146, 146, 0.36);
+ background: transparent;
+ -webkit-border-radius: 60px;
+ -moz-border-radius: 60px;
+ border-radius: 60px;
+ height: 50px;
+ width: 50px;
+ -webkit-animation: introjspulse 3s ease-out;
+ -moz-animation: introjspulse 3s ease-out;
+ animation: introjspulse 3s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ position: absolute;
+ top: -25px;
+ left: -25px;
+ z-index: 1;
+ opacity: 0;
+}
+
+@-webkit-keyframes introjspulse {
+ 0% {
+ -webkit-transform: scale(0);
+ opacity: 0.0;
+ }
+ 25% {
+ -webkit-transform: scale(0);
+ opacity: 0.1;
+ }
+ 50% {
+ -webkit-transform: scale(0.1);
+ opacity: 0.3;
+ }
+ 75% {
+ -webkit-transform: scale(0.5);
+ opacity: 0.5;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ opacity: 0.0;
+ }
+}
+
+@-moz-keyframes introjspulse {
+ 0% {
+ -moz-transform: scale(0);
+ opacity: 0.0;
+ }
+ 25% {
+ -moz-transform: scale(0);
+ opacity: 0.1;
+ }
+ 50% {
+ -moz-transform: scale(0.1);
+ opacity: 0.3;
+ }
+ 75% {
+ -moz-transform: scale(0.5);
+ opacity: 0.5;
+ }
+ 100% {
+ -moz-transform: scale(1);
+ opacity: 0.0;
+ }
+}
+
+@keyframes introjspulse {
+ 0% {
+ transform: scale(0);
+ opacity: 0.0;
+ }
+ 25% {
+ transform: scale(0);
+ opacity: 0.1;
+ }
+ 50% {
+ transform: scale(0.1);
+ opacity: 0.3;
+ }
+ 75% {
+ transform: scale(0.5);
+ opacity: 0.5;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.0;
+ }
+}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 125839e..7d11e2f 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -14,7 +14,8 @@
@import "buttongroup"; // Button groups
@import "panel"; // Base panel system
@import "plugin"; // Plugin mechanism
-
+@import "introjs"; // Guided Tour
+@import "introjs-ids"; // Guided Tour: IDS specific
main {
margin: {
left: $standard-margin;
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index 1aa7178..3806197 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -9,6 +9,7 @@
<p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <%= doc_opener 'korap', begin %>Einführung<% end %>!</p>
+ <!--<p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a href="#" onclick="tourshow()"> Tour</a> oder mit der <%= doc_opener 'korap', begin %>Einführung<% end %>!</p> -->
%= include 'announcement', lang => 'de'
<p>KorAP wird am <a href="http://www.ids-mannheim.de">Leibniz-Institut für Deutsche Sprache</a> in Mannheim entwickelt, Mitglied der <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Gemeinschaft</a>. Die einzelnen Module werden als Open Source auf <a href="http://github.com/KorAP">GitHub</a> veröffentlicht.</p>
@@ -21,3 +22,4 @@
<a href="http://www.leibniz-gemeinschaft.de/" class="logo"><p id="leibniz-logo"><span>Mitglied der Leibniz Gemeinschaft</span></p></a>
</div>
</div>
+
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 28be17e..91761db 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -7,7 +7,8 @@
<p><noscript>KorAP expects activated JavaScript for some features.</noscript></p>
<p><strong>New to KorAP?</strong> Please check out our <%= doc_opener 'korap', begin %>tutorial<% end %>!</p>
-
+
+ <!-- <p><strong>New to KorAP?</strong> Please check out our <a href="#" onclick="tourshow()">guided tour</a> or our <%= doc_opener 'korap', begin %>tutorial<% end %>!</p> -->
%= include 'announcement', lang => 'en'
<p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Leibniz Institute for the German Language</a>, member of the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
diff --git a/templates/layouts/main.html.ep b/templates/layouts/main.html.ep
index 32dccb6..ee29e60 100644
--- a/templates/layouts/main.html.ep
+++ b/templates/layouts/main.html.ep
@@ -42,6 +42,7 @@
<link rel="apple-touch-icon" href="<%= url_for '/img/apple-touch-icon.png' %>" />
<link href="<%= stash 'prefix' %>/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="<%= stash 'prefix' %>/css/kalamar-<%= $Kalamar::VERSION %>.css" type="text/css" rel="stylesheet" />
+
%= javascript begin
window.KorAP = window.KorAP || {};
% my $api = url_for('index');
@@ -54,6 +55,8 @@
% } else {
<script src="<%= (stash('prefix') // '') . '/js/' . loc('jsFile', 'kalamar-' . $Kalamar::VERSION . '-en.js') %>" async="async"></script>
% };
+
+
</head>
% my $embedded = 0;
% $embedded = 1 if stash('embedded');
@@ -81,5 +84,6 @@
%= notifications 'Kalamar::Plugin::Notifications'
%= content_block 'scripts'
+
</body>
</html>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 5f1433d..de20994 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -22,7 +22,7 @@
<div class="button right">
% param(cutoff => 1) unless param 'q';
%= check_box cutoff => 1, id => 'q-cutoff-field', class => 'checkbox'
- <label for="q-cutoff-field" title="<%= loc('glimpse_desc') %>"><span></span><%= loc('glimpse') %></label>
+ <label for="q-cutoff-field" title="<%= loc('glimpse_desc') %>"><span id="glimpse-intrjs"></span><%= loc('glimpse') %></label>
<%= link_to 'doc_start', title => loc('tutorial'), class => "tutorial", id => "view-tutorial", tabindex => '-1', begin %><span><%= loc 'tutorial' %></span><% end %>
</div>
<div class="clear"></div>