e46da004a1ed5fdf64eb24662bf94e0eee2f3bf3 chmalee Tue Aug 22 10:15:31 2023 -0700 Make hgTracks tutorial start automatically with special url variable startTutorial=true, refs #32004 diff --git src/hg/js/tutorial.js src/hg/js/tutorial.js index 597fb2d..b85c88d 100644 --- src/hg/js/tutorial.js +++ src/hg/js/tutorial.js @@ -35,43 +35,42 @@ }, text: 'Next' }, 'end': { action() { // log when the tutorial is finished writeToApacheLog("tutorial finish " + getHgsid()); localStorage.setItem("hgTracks_hideTutorial", "1"); return this.complete(); }, classes: 'shepherd-button-secondary', text: 'Finish' } }; -/* Wrapping the tutorial steps and fuctions to only execute after the page loads*/ -window.onload = function() { - function selectMiddleButton() { +// wrap setup in a function to be called only after document is ready +function setupSteps() +{ + selectMiddleButton = (function () { var hgTracksTable = document.getElementById('imgTbl'); var rowCount = hgTracksTable.rows.length; var middleIndex = Math.floor(rowCount / 2); - var middleRow = hgTracksTable.rows[middleIndex]; var firstId = middleRow.querySelector('td'); var middleTrackId = firstId.id; - return '#' + middleTrackId; - } + })(); tour.addStep({ title: 'Welcome to the UCSC Genome Browser Tutorial', text: 'The navigation bar at the top of the page will allow you to access the ' + 'tools, downloads, and help pages. There are four main drop-downs that are useful ' + 'for most users: ' + '<ul>' + '<li><b>Genomes</b> - switch between the many genomes available</li> ' + '<li><b>Genome Browser</b> - configure, search for tracks, and reset the ' + 'Genome Browser back to the default settings.</li>' + '<li><b>Tools</b> - access to features such as <a target="_blank" ' + 'href="/cgi-bin/hgBlat">BLAT</a>, <a target="_blank" href="/cgi-bin/hgPcr">isPCR</a>, '+ 'and <a target="_blank" href="/cgi-bin/hgLiftOver">LiftOver</a>. The <a target="_blank" '+ 'href="/cgi-bin/hgTables">Table Browser</a> can also be used to export track data in ' + 'various file formats.</li>' + @@ -144,31 +143,31 @@ id: 'highlight' }); tour.addStep({ title: 'Quick Link to Change Track Settings', text: 'Clicking on the rectangle box next to a track is an easy way to quickly ' + 'go to the track settings page for that track.' + '<br><br>' + '<a href="/goldenPath/help/hgTracksHelp.html#RIGHT_CLICK_NAV" ' + 'target="_blank">Right-clicking</a> on the track will also bring up a menu ' + 'to change the display mode, configure a track, or view a PNG image of the current ' + 'window.' + '<img src="/images/right_click_example.png" width="350">' + '', attachTo: { - element: selectMiddleButton(), + element: selectMiddleButton, on: 'right', }, buttons: [tutorialButtons['back'], tutorialButtons['next']], id: 'hgTrackUiLink' }); tour.addStep({ title: 'Changing the Display Mode of a Track', text: 'Annotation tracks can be entirely hidden or shown in four different ways that take ' + 'an increasing amount of vertical space: ' + '<a href="/goldenPath/help/hgTracksHelp.html#TRACK_CONT" target="_blank">dense, squish, '+ 'pack, and full</a>.'+ '<br><br>' + 'After changing the display mode of a track, the change will not be applied ' + 'until after you refresh the page. You could either refresh the page manually ' +