testing intro.js

3 years ago · b94b47e3b7
parent 968cb04d54
commit b94b47e3b7
5 changed files with 30 additions and 11 deletions
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@ -20,6 +20,7 @@ import { MainPanel } from './app/components/main-panel'
 import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports } from '@remix-project/core-plugin'

 import migrateFileSystem from './migrateFileSystem'
+const introJs = require('intro.js')

 const isElectron = require('is-electron')
 const csjs = require('csjs-inject')
@ -499,4 +500,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
  framingService.start(params)

  if (params.embed) framingService.embed()
+  //if (!params) {
+    if (!localStorage.getItem('hadTour_initial')) {
+      introJs().start()
+      localStorage.setItem('hadTour_initial', true)
+    }
+  //}
 }
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@ -270,16 +270,18 @@ export class VerticalIcons extends Plugin {
    this.iconKind.settings = yo`<div id='settingsIcons' data-id="verticalIconsSettingsIcons"></div>`

    this.view = yo`
-      <div class=${css.icons}>
-        ${home}
-        ${this.iconKind.fileexplorer}
-        ${this.iconKind.compiler}
-        ${this.iconKind.udapp}
-        ${this.iconKind.testing}
-        ${this.iconKind.analysis}
-        ${this.iconKind.debugging}
-        ${this.iconKind.none}
-        ${this.iconKind.settings}
+      <div class="h-100" data-title="Welcome!" data-intro="Hello World!">
+        <div class=${css.icons} data-intro="Intro.js can highlight on elements">
+          ${home}
+          ${this.iconKind.fileexplorer}
+          ${this.iconKind.compiler}
+          ${this.iconKind.udapp}
+          ${this.iconKind.testing}
+          ${this.iconKind.analysis}
+          ${this.iconKind.debugging}
+          ${this.iconKind.none}
+          ${this.iconKind.settings}
+        </div>
      </div>
    `
    return this.view
--- a/apps/remix-ide/src/index.html
+++ b/apps/remix-ide/src/index.html
@ -56,6 +56,7 @@
 			}
 		</script>
 		<!-- End Matomo Code -->
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
 	</head>
 	<body>
 		<script>
@ -112,7 +113,10 @@
 				})
 			}
 		</script>
-		<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script>
+		<script src="runtime.js" type="module"></script>
+		<script src="polyfills.js" type="module"></script>
+		<script src="vendor.js" type="module"></script>
 		<script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>
 	</body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -20124,6 +20124,11 @@
      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
    },
+    "intro.js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-4.0.0.tgz",
+      "integrity": "sha512-IS8+p4rpnWUq2Vd8YRgjR8w9lbyLvT0ptscBqA4iudO68oven39CvxHfxopfwlNUGgmgcyX17DOETof+D90AXA=="
+    },
    "invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
--- a/package.json
+++ b/package.json
@ -158,6 +158,7 @@
    "form-data": "^4.0.0",
    "fs-extra": "^3.0.1",
    "http-server": "^0.11.1",
+    "intro.js": "^4.0.0",
    "isbinaryfile": "^3.0.2",
    "isomorphic-git": "^1.8.2",
    "jquery": "^3.3.1",