70b8a142600a4211810d41aa258b43cb2cea9e8c
chmalee
  Thu Mar 2 11:22:03 2023 -0800
Add file that controls the tutorial, refs #30670

diff --git src/hg/js/tutorial.js src/hg/js/tutorial.js
new file mode 100644
index 0000000..9199826
--- /dev/null
+++ src/hg/js/tutorial.js
@@ -0,0 +1,69 @@
+const tour = new Shepherd.Tour({
+  defaultStepOptions: {
+    cancelIcon: {
+      enabled: true
+    },
+    classes: 'class-1 class-2',
+    scrollTo: { behavior: 'smooth', block: 'center' }
+  }
+});
+
+var tutorialButtons = {
+    'back': {
+        action() {
+            return this.back();
+        },
+        classes: 'shepherd-button-secondary',
+        text: 'Back'
+    },
+    'next': {
+        action() {
+            return this.next();
+        },
+        text: 'Next'
+    },
+    'end': {
+        action() {
+            return this.complete();
+        },
+        classes: 'shepherd-button-secondary',
+        text: 'Finish'
+    }
+};
+
+tour.addStep({
+title: 'Using the UCSC Genome Browser',
+text: 'This is the first step in the tutorial, it is at ' +
+        'the \'bottom\' of the multi-region button. Click "Next" button to continue ' +
+        'to the next step or the "X" or "Finish" to stop the tutorial',
+    attachTo: {
+        element: '#hgTracksConfigMultiRegionPage',
+        on: 'bottom'
+    },
+    buttons: [tutorialButtons['next'], tutorialButtons['end']],
+    id: 'creating'
+});
+
+tour.addStep({
+    title: 'Second step',
+    text: 'This is the second step in the tutorial, to the left of the \'go\' button ' +
+        'yes the tutorial will restart every time you refresh the page since this is a ' +
+        'proof of concept',
+    attachTo: {
+        element: '#goButton',
+        on: 'left'
+    },
+    buttons: [tutorialButtons['back'], tutorialButtons['next']],
+    id: 'second'
+});
+
+tour.addStep({
+    title: 'Third step',
+    text: 'This is the last step in the tutorial, to the right of the last refresh button',
+    attachTo: {
+        element: function() {return $("input[name='hgt\.refresh']").slice(-1)[0];},
+        on: 'right'
+    },
+    buttons: [tutorialButtons['back'], tutorialButtons['end']],
+    id: 'third'
+});