Changeset View
Changeset View
Standalone View
Standalone View
assets/src/bundles/guided_tour/index.js
| Show All 12 Lines | |||||
| let guidedTour = []; | let guidedTour = []; | ||||
| let tour = null; | let tour = null; | ||||
| let previousElement = null; | let previousElement = null; | ||||
| // we use a origin available both in production and swh-web tests | // we use a origin available both in production and swh-web tests | ||||
| // environment to ease tour testing | // environment to ease tour testing | ||||
| const originUrl = 'https://github.com/memononen/libtess2'; | const originUrl = 'https://github.com/memononen/libtess2'; | ||||
| function openSWHIDsTabBeforeNextStep() { | |||||
| window.scrollTo(0, 0); | |||||
| if (!$('#swh-identifiers').tabSlideOut('isOpen')) { | |||||
| $('.introjs-helperLayer, .introjs-tooltipReferenceLayer').hide(); | |||||
| $('#swh-identifiers').tabSlideOut('open'); | |||||
| setTimeout(() => { | |||||
| $('.introjs-helperLayer, .introjs-tooltipReferenceLayer').show(); | |||||
| tour.nextStep(); | |||||
| }, 500); | |||||
| return false; | |||||
| } | |||||
| return true; | |||||
| } | |||||
| // init guided tour configuration when page loads in order | // init guided tour configuration when page loads in order | ||||
| // to hack on it in cypress tests | // to hack on it in cypress tests | ||||
| $(() => { | $(() => { | ||||
| // tour is defined by an array of objects containing: | // tour is defined by an array of objects containing: | ||||
| // - URL of page to run a tour | // - URL of page to run a tour | ||||
| // - intro.js configuration with tour steps | // - intro.js configuration with tour steps | ||||
| // - optional intro.js callback function for tour interactivity | // - optional intro.js callback function for tour interactivity | ||||
| guidedTour = [ | guidedTour = [ | ||||
| Show All 10 Lines | guidedTour = [ | ||||
| introJsOptions: { | introJsOptions: { | ||||
| disableInteraction: true, | disableInteraction: true, | ||||
| scrollToElement: false, | scrollToElement: false, | ||||
| steps: guidedTourSteps.browseOrigin | steps: guidedTourSteps.browseOrigin | ||||
| }, | }, | ||||
| onBeforeChange: function(targetElement) { | onBeforeChange: function(targetElement) { | ||||
| // open SWHIDs tab before its tour step | // open SWHIDs tab before its tour step | ||||
| if (targetElement && targetElement.id === 'swh-identifiers') { | if (targetElement && targetElement.id === 'swh-identifiers') { | ||||
| if (!$('#swh-identifiers').tabSlideOut('isOpen')) { | return openSWHIDsTabBeforeNextStep(); | ||||
| $('.introjs-helperLayer, .introjs-tooltipReferenceLayer').hide(); | |||||
| $('#swh-identifiers').tabSlideOut('open'); | |||||
| setTimeout(() => { | |||||
| $('.introjs-helperLayer, .introjs-tooltipReferenceLayer').show(); | |||||
| tour.nextStep(); | |||||
| }, 500); | |||||
| return false; | |||||
| } | |||||
| } | } | ||||
| return true; | return true; | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| url: `${Urls.browse_origin_content()}?origin_url=${originUrl}&path=Example/example.c`, | url: `${Urls.browse_origin_content()}?origin_url=${originUrl}&path=Example/example.c`, | ||||
| introJsOptions: { | introJsOptions: { | ||||
| steps: guidedTourSteps.browseContent | steps: guidedTourSteps.browseContent | ||||
| }, | }, | ||||
| onBeforeChange: function(targetElement) { | onBeforeChange: function(targetElement) { | ||||
| const lineNumberStart = 11; | const lineNumberStart = 11; | ||||
| const lineNumberEnd = 17; | const lineNumberEnd = 17; | ||||
| if (targetElement && $(targetElement).hasClass('swhid')) { | |||||
| return openSWHIDsTabBeforeNextStep(); | |||||
| // forbid move to next step until user clicks on line numbers | // forbid move to next step until user clicks on line numbers | ||||
| if (targetElement && targetElement.dataset.lineNumber === `${lineNumberEnd}`) { | } else if (targetElement && targetElement.dataset.lineNumber === `${lineNumberEnd}`) { | ||||
| const background = $(`.hljs-ln-numbers[data-line-number="${lineNumberStart}"]`).css('background-color'); | const background = $(`.hljs-ln-numbers[data-line-number="${lineNumberStart}"]`).css('background-color'); | ||||
| const canGoNext = background !== 'rgba(0, 0, 0, 0)'; | const canGoNext = background !== 'rgba(0, 0, 0, 0)'; | ||||
| if (!canGoNext && $('#swh-next-step-disabled').length === 0) { | if (!canGoNext && $('#swh-next-step-disabled').length === 0) { | ||||
| $('.introjs-tooltiptext').append( | $('.introjs-tooltiptext').append( | ||||
| `<p id="swh-next-step-disabled" style="color: red; font-weight: bold"> | `<p id="swh-next-step-disabled" style="color: red; font-weight: bold"> | ||||
| You need to select the line number before proceeding to<br/>next step. | You need to select the line number before proceeding to<br/>next step. | ||||
| </p>`); | </p>`); | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines | if (page < guidedTour.length - 1) { | ||||
| // re-enable page scrolling when exiting tour | // re-enable page scrolling when exiting tour | ||||
| enableScrolling(); | enableScrolling(); | ||||
| }) | }) | ||||
| .oncomplete(() => { | .oncomplete(() => { | ||||
| const nextPageUrl = new URL(window.location.origin + guidedTour[page + 1].url); | const nextPageUrl = new URL(window.location.origin + guidedTour[page + 1].url); | ||||
| nextPageUrl.searchParams.set('guided_tour', page + 1); | nextPageUrl.searchParams.set('guided_tour', page + 1); | ||||
| if (guidedTourNext) { | if (guidedTourNext) { | ||||
| nextPageUrl.searchParams.set('guided_tour_next', guidedTourNext); | nextPageUrl.searchParams.set('guided_tour_next', guidedTourNext); | ||||
| } else if (page === 0) { | |||||
| nextPageUrl.searchParams.set('guided_tour_next', currentUrlStr); | |||||
| } | } | ||||
| window.location.href = decodeURIComponent(nextPageUrl.toString()); | window.location.href = decodeURIComponent(nextPageUrl.toString()); | ||||
| }); | }); | ||||
| } else { | } else { | ||||
| tour.oncomplete(() => { | tour.oncomplete(() => { | ||||
| enableScrolling(); // re-enable page scrolling when tour is complete | enableScrolling(); // re-enable page scrolling when tour is complete | ||||
| if (guidedTourNext) { | if (guidedTourNext) { | ||||
| window.location.href = guidedTourNext; | window.location.href = guidedTourNext; | ||||
| Show All 15 Lines | |||||