diff --git a/assets/src/bundles/browse/swhid-utils.js b/assets/src/bundles/browse/swhid-utils.js --- a/assets/src/bundles/browse/swhid-utils.js +++ b/assets/src/bundles/browse/swhid-utils.js @@ -85,9 +85,13 @@ $('#swh-identifiers').css('width', '1000px'); } + function clickScreenToCloseFilter() { + return $('.introjs-overlay').length > 0; + } + let tabSlideOptions = { tabLocation: 'right', - clickScreenToCloseFilters: ['.ui-slideouttab-panel', '.modal'], + clickScreenToCloseFilters: [clickScreenToCloseFilter, '.ui-slideouttab-panel', '.modal'], offset: function() { const width = $(window).width(); if (width < BREAKPOINT_SM) { diff --git a/assets/src/bundles/webapp/guided-tour.js b/assets/src/bundles/webapp/guided-tour.js new file mode 100644 --- /dev/null +++ b/assets/src/bundles/webapp/guided-tour.js @@ -0,0 +1,153 @@ +/** + * Copyright (C) 2021 The Software Heritage developers + * See the AUTHORS file at the top-level directory of this distribution + * License: GNU Affero General Public License version 3, or any later version + * See top-level LICENSE file for more information + */ + +import * as introJs from 'intro.js'; +import 'intro.js/introjs.css'; +import './swh-introjs.css'; + +export function initGuidedTour(page = 0) { + + let tour = null; + + const guidedTour = [ + { + url: `${Urls.browse_origin_directory()}?origin_url=https://github.com/python/cpython`, + introJsOptions: { + disableInteraction: true, + scrollToElement: false, + steps: [ + { + element: '#swh-browse-code-nav-link', + title: 'Browse source code', + intro: 'In this tab, you can browse the source code of a software origin.', + position: 'bottom' + }, + { + element: '#swh-browse-snapshot-branches-nav-link', + title: 'Browse branches', + intro: 'In this tab, you can browse the list of branches for a software origin.', + position: 'bottom' + }, + { + element: '#swh-browse-snapshot-releases-nav-link', + title: 'Browse releases', + intro: 'In this tab, you can browse the list of releases for a software origin.', + position: 'bottom' + }, + { + element: '#swhids-handle', + title: 'Get SWHIDs of browsed objects', + intro: 'When clicking on this handle, a tab will be displayed containing
' + + 'Software Heritage IDentifiers of currently browsed objects.', + position: 'left' + }, + { + element: '.swhid-ui', + title: 'Copy SWHID for a given browsed object', + intro: 'You can easily copy to clipboard a SWHID or its resolve URL
' + + 'using that dedicated interface.', + position: 'left' + } + ] + }, + onBeforeChange: function(targetElement) { + if (targetElement.className.indexOf('swhid-ui') !== -1) { + if (!$('#swh-identifiers').tabSlideOut('isOpen')) { + $('.introjs-helperLayer').hide(); + $('.introjs-tooltipReferenceLayer').hide(); + $('#swh-identifiers').tabSlideOut('open'); + setTimeout(() => { + $('.introjs-helperLayer').show(); + $('.introjs-tooltipReferenceLayer').show(); + tour.nextStep(); + }, 500); + return false; + } + } + return true; + } + }, + { + url: `${Urls.browse_origin_content()}?origin_url=https://github.com/python/cpython&path=setup.py`, + introJsOptions: { + steps: [ + { + element: '.hljs-ln-numbers[data-line-number="1"]', + title: 'Highlight a source code line', + intro: 'Click on the line number to highlight the corresponding line of code,' + + 'then click on Next', + position: 'left' + }, + { + element: '.hljs-ln-numbers[data-line-number="10"]', + title: 'Highlight a range of source code lines', + intro: 'Hold Shift and click on the line number to highlight a range of source code lines', + position: 'left' + } + ] + }, + onBeforeChange: function(targetElement) { + if (targetElement.dataset.lineNumber === '10') { + const background = $('.hljs-ln-numbers[data-line-number="1"]').css('background-color'); + return background !== 'rgba(0, 0, 0, 0)'; + } + return true; + } + } + ]; + + if (page >= guidedTour.length) { + return; + } + const pageUrl = new URL(window.location.origin + guidedTour[page].url); + const currentUrl = new URL(window.location.href); + const guidedTourNext = currentUrl.searchParams.get('guided_tour_next'); + currentUrl.searchParams.delete('guided_tour'); + currentUrl.searchParams.delete('guided_tour_next'); + const pageUrlStr = decodeURIComponent(pageUrl.toString()); + const currentUrlStr = decodeURIComponent(currentUrl.toString()); + if (currentUrlStr !== pageUrlStr) { + pageUrl.searchParams.set('guided_tour', page); + if (page === 0) { + pageUrl.searchParams.set('guided_tour_next', currentUrlStr); + } + window.location = decodeURIComponent(pageUrl.toString()); + } else { + tour = introJs().setOptions(guidedTour[page].introJsOptions); + if (page < guidedTour.length - 1) { + tour.setOption('doneLabel', 'Next page') + .oncomplete(() => { + const nextPageUrl = new URL(window.location.origin + guidedTour[page + 1].url); + nextPageUrl.searchParams.set('guided_tour', page + 1); + if (guidedTourNext) { + nextPageUrl.searchParams.set('guided_tour_next', guidedTourNext); + } + window.location.href = decodeURIComponent(nextPageUrl.toString()); + }); + } else { + tour.oncomplete(() => { + if (guidedTourNext) { + window.location.href = guidedTourNext; + } + }); + } + if (guidedTour[page].hasOwnProperty('onBeforeChange')) { + tour.onbeforechange(guidedTour[page].onBeforeChange); + } + setTimeout(() => { + tour.start(); + }, 500); + + } +}; + +$(() => { + const searchParams = new URLSearchParams(window.location.search); + if (searchParams && searchParams.has('guided_tour')) { + initGuidedTour(parseInt(searchParams.get('guided_tour'))); + } +}); diff --git a/assets/src/bundles/webapp/index.js b/assets/src/bundles/webapp/index.js --- a/assets/src/bundles/webapp/index.js +++ b/assets/src/bundles/webapp/index.js @@ -25,3 +25,4 @@ export * from './sentry'; export * from './math-typesetting'; export * from './status-widget'; +export * from './guided-tour'; diff --git a/assets/src/bundles/webapp/swh-introjs.css b/assets/src/bundles/webapp/swh-introjs.css new file mode 100644 --- /dev/null +++ b/assets/src/bundles/webapp/swh-introjs.css @@ -0,0 +1,10 @@ +/** + * Copyright (C) 2021 The Software Heritage developers + * See the AUTHORS file at the top-level directory of this distribution + * License: GNU Affero General Public License version 3, or any later version + * See top-level LICENSE file for more information + */ + +.introjs-tooltip { + min-width: 300px; +} diff --git a/package.json b/package.json --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "highlightjs-line-numbers.js": "^2.8.0", "html-encoder-decoder": "^1.3.9", "iframe-resizer": "^4.3.2", + "intro.js": "^3.4.0", "jquery": "^3.6.0", "js-cookie": "^2.2.1", "js-year-calendar": "^1.0.2", diff --git a/swh/web/templates/includes/show-swhids.html b/swh/web/templates/includes/show-swhids.html --- a/swh/web/templates/includes/show-swhids.html +++ b/swh/web/templates/includes/show-swhids.html @@ -11,9 +11,9 @@