diff --git a/docs/guides_core-steps_copy-text-element.js.html b/docs/guides_core-steps_copy-text-element.js.html index 3f17f56..0db89cd 100644 --- a/docs/guides_core-steps_copy-text-element.js.html +++ b/docs/guides_core-steps_copy-text-element.js.html @@ -92,6 +92,7 @@

guides/core-steps/copy-text-element.js

import * as Utils from '../utils.js';
 
 const COPY_TEXT = 'guide.step_plugin.core-steps.copy-text-element.copy-to-input';
+const COPY_TEXT_ELEMENT = 'guide.step_plugin.core-steps.copy-text-element.content';
 
 /**
  * @name copy-text-element
@@ -145,8 +146,7 @@ 

guides/core-steps/copy-text-element.js

guideBlockName: 'input-element', options: { ...options, - content: 'guide.step_plugin.core-steps.copy-text-element.content', - textAsHtmlCodeElement: '<div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '</div>', + content: translate(this.translationBundle, COPY_TEXT_ELEMENT, {textAsHtmlCodeElement: '<div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '</div>'}), show: (guide) => () => { stepHTMLElement = guide.currentStep.el.querySelector(`.${copyToInputQueryButtonClass}`); stepHTMLElement.addEventListener('click', copyToInputListener); @@ -162,10 +162,12 @@

guides/core-steps/copy-text-element.js

}, translationBundle: { en: { - [COPY_TEXT]: 'Copy to input' + [COPY_TEXT]: 'Copy to input', + [COPY_TEXT_ELEMENT]: 'Enter the following in the input: {{textAsHtmlCodeElement}}' }, fr: { - [COPY_TEXT]: 'Copier dans la saisie' + [COPY_TEXT]: 'Copier dans la saisie', + [COPY_TEXT_ELEMENT]: 'Entrez le texte suivant dans la saisie : {{textAsHtmlCodeElement}}' } } }; diff --git a/docs/guides_ttyg_ttyg-ask-explain-answer-more.js.html b/docs/guides_ttyg_ttyg-ask-explain-answer-more.js.html index 55e5256..a81192a 100644 --- a/docs/guides_ttyg_ttyg-ask-explain-answer-more.js.html +++ b/docs/guides_ttyg_ttyg-ask-explain-answer-more.js.html @@ -89,10 +89,9 @@

guides/ttyg/ttyg-ask-explain-answer-more.js

-
import * as Utils from '../utils.js';
-
-const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
+            
const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const EXPLAIN_ANSWER_MORE = 'guide.step_plugin.ask-ttyg-agent.explain-answer-more';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-ask-explain-answer-more
@@ -164,18 +163,30 @@ 

guides/ttyg/ttyg-ask-explain-answer-more.js

} } }, - Utils.getWaitForAnswerStep(GuideUtils, options) + { + guideBlockName: 'hold-and-wait-until-hidden', + options: { + title, + content: translate(this.translationBundle, WAIT_FOR_ANSWER), + class: 'wait-for-answer', + url: 'ttyg', + elementSelector: GuideUtils.getGuideElementSelector('chat-details'), + elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), + ...options + } + } ]; }, translationBundle: { en: { [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent', - [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button' + [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button', + [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.' }, - fr: { [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent', - [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton' + [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton', + [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.' } } }; diff --git a/docs/guides_ttyg_ttyg-ask-question.js.html b/docs/guides_ttyg_ttyg-ask-question.js.html index c0df170..3d62284 100644 --- a/docs/guides_ttyg_ttyg-ask-question.js.html +++ b/docs/guides_ttyg_ttyg-ask-question.js.html @@ -89,11 +89,10 @@

guides/ttyg/ttyg-ask-question.js

-
import * as Utils from '../utils.js';
-
-const CHAT_DETAILS_SELECTOR = 'chat-details';
+            
const CHAT_DETAILS_SELECTOR = 'chat-details';
 const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const INPUT_QUESTION = 'guide.step_plugin.ask-ttyg-agent.input-question';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-ask-question
@@ -158,18 +157,30 @@ 

guides/ttyg/ttyg-ask-question.js

} } }, - Utils.getWaitForAnswerStep(GuideUtils, options) + { + guideBlockName: 'hold-and-wait-until-hidden', + options: { + title, + content: translate(this.translationBundle, WAIT_FOR_ANSWER), + class: 'wait-for-answer', + url: 'ttyg', + elementSelector: GuideUtils.getGuideElementSelector('chat-details'), + elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), + ...options + } + } ]; }, translationBundle: { en: { [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent', - [INPUT_QUESTION]: 'Type "<b>{{question}}</b>" in the input and press enter' + [INPUT_QUESTION]: 'Type "<b>{{question}}</b>" in the input and press enter', + [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.' }, - fr: { [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent', - [INPUT_QUESTION]: 'Tapez "<b>{{question}}</b>" dans le champ de saisie et appuyez sur la touche \'Entrée\'' + [INPUT_QUESTION]: 'Tapez "<b>{{question}}</b>" dans le champ de saisie et appuyez sur la touche \'Entrée\'', + [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.' } } }; diff --git a/docs/guides_ttyg_ttyg-explain-response.js.html b/docs/guides_ttyg_ttyg-explain-response.js.html index db6662a..ed07aca 100644 --- a/docs/guides_ttyg_ttyg-explain-response.js.html +++ b/docs/guides_ttyg_ttyg-explain-response.js.html @@ -89,10 +89,9 @@

guides/ttyg/ttyg-explain-response.js

-
import * as Utils from '../utils.js';
-
-const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
+            
const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const EXPLAIN_ANSWER = 'guide.step_plugin.ask-ttyg-agent.explain-answer';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-explain-response
@@ -150,18 +149,30 @@ 

guides/ttyg/ttyg-explain-response.js

elementSelector } }, - Utils.getWaitForAnswerStep(GuideUtils, options) + { + guideBlockName: 'hold-and-wait-until-hidden', + options: { + title, + content: translate(this.translationBundle, WAIT_FOR_ANSWER), + class: 'wait-for-answer', + url: 'ttyg', + elementSelector: GuideUtils.getGuideElementSelector('chat-details'), + elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), + ...options + } + } ]; }, translationBundle: { en: { [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent', - [EXPLAIN_ANSWER]: 'Explain the answer by clicking on the \'Explain response\' button.' + [EXPLAIN_ANSWER]: 'Explain the answer by clicking on the \'Explain response\' button.', + [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.' }, - fr: { [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent', - [EXPLAIN_ANSWER]: 'Expliquez la réponse en cliquant sur le bouton \'Expliquer la réponse\'' + [EXPLAIN_ANSWER]: 'Expliquez la réponse en cliquant sur le bouton \'Expliquer la réponse\'', + [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.' } } }; diff --git a/docs/guides_utils.js.html b/docs/guides_utils.js.html index 8028a27..ddfccd9 100644 --- a/docs/guides_utils.js.html +++ b/docs/guides_utils.js.html @@ -272,20 +272,6 @@

guides/utils.js

$('.node-wrapper').removeClass('disable-visual-graph-node'); }; -export const getWaitForAnswerStep = (GuideUtils, options) => { - return { - guideBlockName: 'hold-and-wait-until-hidden', - options: { - content: 'guide.step_plugin.ask-ttyg-agent.wait-for-answer', - class: 'wait-for-answer', - url: 'ttyg', - elementSelector: GuideUtils.getGuideElementSelector('chat-details'), - elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), - ...options - } - }; -}; - export const getConnectorNameSelector = (options, services) => { return services.GuideUtils.getGuideElementSelector(`connector-name-${options.connectorName}`); }; diff --git a/docs/guides_visual-graph_visual-graph-properties.js.html b/docs/guides_visual-graph_visual-graph-properties.js.html index 507c074..4ec7625 100644 --- a/docs/guides_visual-graph_visual-graph-properties.js.html +++ b/docs/guides_visual-graph_visual-graph-properties.js.html @@ -152,12 +152,12 @@

guides/visual-graph/visual-graph-properties.js

if (mouseEventTimer) { // Cancels expansion of the sidebar panel if user double-clicked. if (event.timeStamp - mouseClickTimeStamp < 400) { - services.$timeout.cancel(mouseEventTimer); + clearTimeout(mouseEventTimer); mouseEventTimer = null; } } else { mouseClickTimeStamp = event.timeStamp; - mouseEventTimer = services.$timeout(function() { + mouseEventTimer = setTimeout(function() { GuideUtils.graphVizShowNodeInfo(elementSelector); mouseEventTimer = null; guide.next(); @@ -180,11 +180,19 @@

guides/visual-graph/visual-graph-properties.js

show: (guide) => () => { // Add "click" listener to the element. Processing of click event is disabled for the visual graph when guide is started. // So we have to open side panel info manually when a selected node is clicked. - $(elementSelector).on('click.onNodeClicked', onClick(services, guide)); + const element = document.querySelector(elementSelector); + if (element) { + element._onNodeClicked = onClick(services, guide); + element.addEventListener('click', element._onNodeClicked); + } }, hide: () => () => { // Remove the "click" listener of element. It is important when step is hided. - $(elementSelector).off('click.onNodeClicked'); + const element = document.querySelector(elementSelector); + if (element && element._onNodeClicked) { + element.removeEventListener('click', element._onNodeClicked); + delete element._onNodeClicked; + } }, onNextClick: (guide, step) => { GuideUtils.graphVizShowNodeInfo(step.elementSelector); @@ -208,7 +216,7 @@

guides/visual-graph/visual-graph-properties.js

onPreviousClick: () => new Promise(function(resolve) { GuideUtils.waitFor(closeButtonSelector, 3) .then(() => { - $(closeButtonSelector).trigger('click'); + document.querySelector(closeButtonSelector).click(); resolve(); }).catch(() => resolve()); }), @@ -272,7 +280,7 @@

guides/visual-graph/visual-graph-properties.js

GuideUtils.graphVizShowNodeInfo(elementSelector); return GuideUtils.deferredShow(500)(); }, - onNextClick: () => GuideUtils.waitFor(closeButtonSelector, 3).then(() => $(closeButtonSelector).trigger('click')), + onNextClick: () => GuideUtils.waitFor(closeButtonSelector, 3).then(() => document.querySelector(closeButtonSelector).click()), ...options } }); diff --git a/docs/module-Interactive%20Guide.html b/docs/module-Interactive%20Guide.html index a240199..b72a76e 100644 --- a/docs/module-Interactive%20Guide.html +++ b/docs/module-Interactive%20Guide.html @@ -10204,7 +10204,7 @@
Properties:

View Source - guides/core-steps/copy-text-element.js, line 5 + guides/core-steps/copy-text-element.js, line 6

@@ -18488,7 +18488,7 @@

View Source - guides/ttyg/ttyg-ask-explain-answer-more.js, line 6 + guides/ttyg/ttyg-ask-explain-answer-more.js, line 5

@@ -18637,7 +18637,7 @@

Properties:

View Source - guides/ttyg/ttyg-ask-question.js, line 7 + guides/ttyg/ttyg-ask-question.js, line 6

@@ -19511,7 +19511,7 @@

View Source - guides/ttyg/ttyg-explain-response.js, line 6 + guides/ttyg/ttyg-explain-response.js, line 5

diff --git a/plugins/guides/core-steps/copy-text-element.js b/plugins/guides/core-steps/copy-text-element.js index b20951e..fce9098 100644 --- a/plugins/guides/core-steps/copy-text-element.js +++ b/plugins/guides/core-steps/copy-text-element.js @@ -1,6 +1,7 @@ import * as Utils from '../utils.js'; const COPY_TEXT = 'guide.step_plugin.core-steps.copy-text-element.copy-to-input'; +const COPY_TEXT_ELEMENT = 'guide.step_plugin.core-steps.copy-text-element.content'; /** * @name copy-text-element @@ -54,8 +55,7 @@ const step = { guideBlockName: 'input-element', options: { ...options, - content: 'guide.step_plugin.core-steps.copy-text-element.content', - textAsHtmlCodeElement: '
' + code.outerHTML + copy.outerHTML + '
', + content: translate(this.translationBundle, COPY_TEXT_ELEMENT, {textAsHtmlCodeElement: '
' + code.outerHTML + copy.outerHTML + '
'}), show: (guide) => () => { stepHTMLElement = guide.currentStep.el.querySelector(`.${copyToInputQueryButtonClass}`); stepHTMLElement.addEventListener('click', copyToInputListener); @@ -71,10 +71,12 @@ const step = { }, translationBundle: { en: { - [COPY_TEXT]: 'Copy to input' + [COPY_TEXT]: 'Copy to input', + [COPY_TEXT_ELEMENT]: 'Enter the following in the input: {{textAsHtmlCodeElement}}' }, fr: { - [COPY_TEXT]: 'Copier dans la saisie' + [COPY_TEXT]: 'Copier dans la saisie', + [COPY_TEXT_ELEMENT]: 'Entrez le texte suivant dans la saisie : {{textAsHtmlCodeElement}}' } } }; diff --git a/plugins/guides/ttyg/ttyg-ask-explain-answer-more.js b/plugins/guides/ttyg/ttyg-ask-explain-answer-more.js index 53f7edf..a78684b 100644 --- a/plugins/guides/ttyg/ttyg-ask-explain-answer-more.js +++ b/plugins/guides/ttyg/ttyg-ask-explain-answer-more.js @@ -1,7 +1,6 @@ -import * as Utils from '../utils.js'; - const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent'; const EXPLAIN_ANSWER_MORE = 'guide.step_plugin.ask-ttyg-agent.explain-answer-more'; +const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer'; /** * @name ttyg-ask-explain-answer-more @@ -73,18 +72,30 @@ const step = { } } }, - Utils.getWaitForAnswerStep(GuideUtils, options) + { + guideBlockName: 'hold-and-wait-until-hidden', + options: { + title, + content: translate(this.translationBundle, WAIT_FOR_ANSWER), + class: 'wait-for-answer', + url: 'ttyg', + elementSelector: GuideUtils.getGuideElementSelector('chat-details'), + elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), + ...options + } + } ]; }, translationBundle: { en: { [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent', - [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button' + [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button', + [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.' }, - fr: { [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent', - [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton' + [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton', + [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.' } } }; diff --git a/plugins/guides/ttyg/ttyg-ask-question.js b/plugins/guides/ttyg/ttyg-ask-question.js index 0129844..32cda6c 100644 --- a/plugins/guides/ttyg/ttyg-ask-question.js +++ b/plugins/guides/ttyg/ttyg-ask-question.js @@ -1,8 +1,7 @@ -import * as Utils from '../utils.js'; - const CHAT_DETAILS_SELECTOR = 'chat-details'; const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent'; const INPUT_QUESTION = 'guide.step_plugin.ask-ttyg-agent.input-question'; +const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer'; /** * @name ttyg-ask-question @@ -67,18 +66,30 @@ const step = { } } }, - Utils.getWaitForAnswerStep(GuideUtils, options) + { + guideBlockName: 'hold-and-wait-until-hidden', + options: { + title, + content: translate(this.translationBundle, WAIT_FOR_ANSWER), + class: 'wait-for-answer', + url: 'ttyg', + elementSelector: GuideUtils.getGuideElementSelector('chat-details'), + elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), + ...options + } + } ]; }, translationBundle: { en: { [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent', - [INPUT_QUESTION]: 'Type "{{question}}" in the input and press enter' + [INPUT_QUESTION]: 'Type "{{question}}" in the input and press enter', + [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.' }, - fr: { [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent', - [INPUT_QUESTION]: 'Tapez "{{question}}" dans le champ de saisie et appuyez sur la touche \'Entrée\'' + [INPUT_QUESTION]: 'Tapez "{{question}}" dans le champ de saisie et appuyez sur la touche \'Entrée\'', + [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.' } } }; diff --git a/plugins/guides/ttyg/ttyg-explain-response.js b/plugins/guides/ttyg/ttyg-explain-response.js index 002acde..3c22232 100644 --- a/plugins/guides/ttyg/ttyg-explain-response.js +++ b/plugins/guides/ttyg/ttyg-explain-response.js @@ -1,7 +1,6 @@ -import * as Utils from '../utils.js'; - const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent'; const EXPLAIN_ANSWER = 'guide.step_plugin.ask-ttyg-agent.explain-answer'; +const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer'; /** * @name ttyg-explain-response @@ -59,18 +58,30 @@ const step = { elementSelector } }, - Utils.getWaitForAnswerStep(GuideUtils, options) + { + guideBlockName: 'hold-and-wait-until-hidden', + options: { + title, + content: translate(this.translationBundle, WAIT_FOR_ANSWER), + class: 'wait-for-answer', + url: 'ttyg', + elementSelector: GuideUtils.getGuideElementSelector('chat-details'), + elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), + ...options + } + } ]; }, translationBundle: { en: { [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent', - [EXPLAIN_ANSWER]: 'Explain the answer by clicking on the \'Explain response\' button.' + [EXPLAIN_ANSWER]: 'Explain the answer by clicking on the \'Explain response\' button.', + [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.' }, - fr: { [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent', - [EXPLAIN_ANSWER]: 'Expliquez la réponse en cliquant sur le bouton \'Expliquer la réponse\'' + [EXPLAIN_ANSWER]: 'Expliquez la réponse en cliquant sur le bouton \'Expliquer la réponse\'', + [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.' } } }; diff --git a/plugins/guides/utils.js b/plugins/guides/utils.js index 429af98..5905317 100644 --- a/plugins/guides/utils.js +++ b/plugins/guides/utils.js @@ -181,20 +181,6 @@ export const enableAllVisualGraphNodes = () => () => { $('.node-wrapper').removeClass('disable-visual-graph-node'); }; -export const getWaitForAnswerStep = (GuideUtils, options) => { - return { - guideBlockName: 'hold-and-wait-until-hidden', - options: { - content: 'guide.step_plugin.ask-ttyg-agent.wait-for-answer', - class: 'wait-for-answer', - url: 'ttyg', - elementSelector: GuideUtils.getGuideElementSelector('chat-details'), - elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'), - ...options - } - }; -}; - export const getConnectorNameSelector = (options, services) => { return services.GuideUtils.getGuideElementSelector(`connector-name-${options.connectorName}`); }; diff --git a/plugins/guides/visual-graph/visual-graph-properties.js b/plugins/guides/visual-graph/visual-graph-properties.js index 9845436..1d2efd1 100644 --- a/plugins/guides/visual-graph/visual-graph-properties.js +++ b/plugins/guides/visual-graph/visual-graph-properties.js @@ -61,12 +61,12 @@ const step = { if (mouseEventTimer) { // Cancels expansion of the sidebar panel if user double-clicked. if (event.timeStamp - mouseClickTimeStamp < 400) { - services.$timeout.cancel(mouseEventTimer); + clearTimeout(mouseEventTimer); mouseEventTimer = null; } } else { mouseClickTimeStamp = event.timeStamp; - mouseEventTimer = services.$timeout(function() { + mouseEventTimer = setTimeout(function() { GuideUtils.graphVizShowNodeInfo(elementSelector); mouseEventTimer = null; guide.next(); @@ -89,11 +89,19 @@ const step = { show: (guide) => () => { // Add "click" listener to the element. Processing of click event is disabled for the visual graph when guide is started. // So we have to open side panel info manually when a selected node is clicked. - $(elementSelector).on('click.onNodeClicked', onClick(services, guide)); + const element = document.querySelector(elementSelector); + if (element) { + element._onNodeClicked = onClick(services, guide); + element.addEventListener('click', element._onNodeClicked); + } }, hide: () => () => { // Remove the "click" listener of element. It is important when step is hided. - $(elementSelector).off('click.onNodeClicked'); + const element = document.querySelector(elementSelector); + if (element && element._onNodeClicked) { + element.removeEventListener('click', element._onNodeClicked); + delete element._onNodeClicked; + } }, onNextClick: (guide, step) => { GuideUtils.graphVizShowNodeInfo(step.elementSelector); @@ -117,7 +125,7 @@ const step = { onPreviousClick: () => new Promise(function(resolve) { GuideUtils.waitFor(closeButtonSelector, 3) .then(() => { - $(closeButtonSelector).trigger('click'); + document.querySelector(closeButtonSelector).click(); resolve(); }).catch(() => resolve()); }), @@ -181,7 +189,7 @@ const step = { GuideUtils.graphVizShowNodeInfo(elementSelector); return GuideUtils.deferredShow(500)(); }, - onNextClick: () => GuideUtils.waitFor(closeButtonSelector, 3).then(() => $(closeButtonSelector).trigger('click')), + onNextClick: () => GuideUtils.waitFor(closeButtonSelector, 3).then(() => document.querySelector(closeButtonSelector).click()), ...options } });