technical implementation of the startup tour

package.json

@@ -59,6 +59,7 @@
     "fast.js": "^0.1.1",
     "gl": "^2.1.5",
     "glView-helpers": "usco/glView-helpers",
+    "hopscotch": "^0.2.6",
     "jsondiffpatch": "^0.1.41",
     "log-minim": "usco/log-minim",
     "loglevel": "^1.2.0",

src/components/main/app.css

@@ -257,6 +257,12 @@ button[disabled=disabled]:hover, button:disabled:hover{
   opacity: 1!important;
 }
 
+#overlayContainer{
+  position: absolute;
+  top: 20%;
+  left: 50%;
+}
+
 .innerWrapper{
     opacity: 0;
     transition: opacity 1.0s ease-in-out;

src/components/main/index.js

@@ -5,6 +5,7 @@ const {just} = Rx.Observable
 import Settings from '../../components/Settings'
 import FullScreenToggler from '../../components/widgets/FullScreenToggler/index'
 import Help from '../../components/widgets/Help'
+import FeatureTour from '../../components/widgets/FeatureTour/index'
 
 import { EntityInfosWrapper, BOMWrapper, GLWrapper, CommentsWrapper, progressBarWrapper } from '../../components/main/wrappers'
 
@@ -31,10 +32,11 @@ export default function main (sources) {
   const settingsC = Settings({DOM, props$: state$})
   const fsToggler = FullScreenToggler({DOM})
   const help = Help({DOM, props$: state$})
+  const featureTour = FeatureTour({DOM, props$: state$})
 
   // outputs
   const vtree$ = view(state$, settingsC.DOM, fsToggler.DOM, bom.DOM, gl.DOM
-    , entityInfos.DOM, comments.DOM, help.DOM)
+    , entityInfos.DOM, comments.DOM, help.DOM, featureTour.DOM)
   const events$ = just({
     gl: gl.events,
     entityInfos: entityInfos.events,
@@ -50,7 +52,6 @@ export default function main (sources) {
   // save file to user hdd
   const fileStorage$ = formatDataForFileStorage({sources, state$}, bom)
 
-
   // return anything you want to output to sources
   return {
     DOM: vtree$,

src/components/main/view.js

@@ -131,11 +131,11 @@ function renderRightToolbar (state, {bom}) {
 
 function renderTopToolbar (state) {
   const progressBar = renderProgressBar({progress: state.operationsInProgress * 100})
-  return h('section#topToolBar', [ h('section.notifications', [state.notifications]), progressBar ])
+  return h('section#topToolBar', [h('section.notifications', [state.notifications]), progressBar ])
 }
 
 function renderUiElements (uiElements) {
-  const {state, settings, fsToggler, bom, gl, entityInfos, help} = uiElements
+  const {state, settings, fsToggler, bom, gl, entityInfos, help, featureTour} = uiElements
 
   const widgetsMapping = {
     //'comments': comments,
@@ -152,14 +152,16 @@ function renderUiElements (uiElements) {
   const rightToolbar = renderRightToolbar(state, uiElements)
   const bottomToolBar = h('section#bottomToolBar', [settings, help, fsToggler])
   const topToolbar = renderTopToolbar(state)
+  const overlayContainer = h('div#overlayContainer')
 
   return h('div.jam', flatten([
     gl,
 
     leftToolbar,
     rightToolbar,
     topToolbar,
-    bottomToolBar
+    bottomToolBar,
+    overlayContainer
   ]))
 }
 
@@ -174,8 +176,9 @@ function widgetNamesByToolSet (toolset) {
 }
 
 export default function view(state$, settings$, fsToggler$, bom$
-  , gl$, entityInfos$, comment$, help$) {
+  , gl$, entityInfos$, comment$, help$, featureTour$) {
 
-  return combineLatestObj({state$, settings$, fsToggler$, bom$, gl$, entityInfos$, comment$, help$})
+  return combineLatestObj({state$, settings$, fsToggler$, bom$
+    , gl$, entityInfos$, comment$, help$, featureTour$})
     .map(renderUiElements)
 }

src/components/widgets/FeatureTour/featureTour.css

@@ -0,0 +1,136 @@
+.hopscotch-bubble-container{
+  display: inline-block;
+  font-family: 'Open Sans', sans-serif;
+  z-index: 1000;
+  background-color: white;
+  /*width: 700px !important;*/
+  border: 1px solid #dddddd;
+  font-size: 0.7em;
+}
+
+.hopscotch-bubble-number{
+  display: none;
+}
+
+.hopscotch-title{
+  margin-top: 5px;
+}
+
+.hopscotch-content{
+  display: inline-block;
+  width: 100%
+}
+
+.featureTourImage{
+  display: block;
+}
+.imageLeft{
+  float: left;
+  margin-right: 15px;
+}
+.imageRight{
+  float: right;
+  margin-left: 15px;
+}
+
+.hopscotch-actions{
+  display: block;
+  margin-top: 10px;
+  float: right;
+}
+
+.hopscotch-nav-button{
+  display: inline-block;
+  background: #5fc5fb;
+  color: #ffffff;
+}
+
+.hopscotch-bubble-close, .hopscotch-bubble-close:hover{
+  position: absolute;
+  top: 15;
+  right: 15;
+  width: 20px; height: 20px;
+  background: #F5F5F5 url("data:image/svg+xml;utf8,<svg fill='%23000000' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
+  text-indent: -9999px;
+}
+
+.hidden{
+  display: none;
+}
+
+.hopscotch-bubble-arrow-container {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+}
+.hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,
+.hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border {
+  width: 0;
+  height: 0;
+}
+.hopscotch-bubble-arrow-container.up {
+  top: -15px;
+  left: 7px;
+}
+.hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
+  border-bottom: 15px solid #fff;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  position: relative;
+  top: -14px;
+}
+.hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
+  border-bottom: 15px solid #dddddd;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+}
+.hopscotch-bubble-arrow-container.down {
+  bottom: -15px;
+  left: 7px;
+}
+.hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
+  border-top: 15px solid #fff;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  position: relative;
+  bottom: 16px;
+}
+.hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
+  border-top: 15px solid #dddddd;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+}
+.hopscotch-bubble-arrow-container.left {
+  top: 10px;
+  left: -15px;
+}
+.hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
+  border-bottom: 15px solid transparent;
+  border-right: 15px solid #fff;
+  border-top: 15px solid transparent;
+  position: relative;
+  left: 1px;
+  top: -30px;
+}
+.hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
+  border-right: 15px solid #dddddd;
+  border-bottom: 15px solid transparent;
+  border-top: 15px solid transparent;
+}
+.hopscotch-bubble-arrow-container.right {
+  top: 10px;
+  right: -15px;
+}
+.hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
+  border-bottom: 15px solid transparent;
+  border-left: 15px solid #fff;
+  border-top: 15px solid transparent;
+  position: relative;
+  right: 1px;
+  top: -30px;
+}
+.hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
+  border-left: 15px solid #dddddd;
+  border-bottom: 15px solid transparent;
+  border-top: 15px solid transparent;
+}

src/components/widgets/FeatureTour/index.js

@@ -0,0 +1,54 @@
+import { combineLatestObj } from '../../../utils/obsUtils'
+import { h } from '@cycle/dom'
+import startUpTour from './startUpTour.js'
+import hopscotch from 'hopscotch'
+require('./featureTour.css')
+import rx from 'Rx'
+
+function intent (DOM) {
+  const closeSelection = new rx.ReplaySubject()
+  hopscotch.registerHelper('clearState', function () {
+    closeSelection.onNext(false)
+  })
+
+  let selected$ = DOM.select('.startUpTourLink').events('click')
+      .map(true)
+      .startWith(false)
+      .merge(closeSelection)
+  return {selected$}
+}
+
+function model (props$, actions) {
+  const selected$ = actions.selected$.startWith(false)
+  const firstRun$ = props$.map(e => false) // needs to change later
+  return combineLatestObj({selected$, firstRun$})
+}
+
+function view (state$) {
+  return state$.map(function (state) {
+    let active = state.selected || state.firstRun
+    // you can also use this to load other feature tours then just the startup tour
+    let tour = startUpTour()
+
+    hopscotch.registerHelper('hideArrow', function () {
+      document.querySelector('.hopscotch-bubble-arrow-container').className += ' hidden'
+    })
+    if (active) {
+      hopscotch.startTour(tour)
+
+      // this is nescessary to fix an initial calculation bug in hopscotch
+      if (parseInt(document.querySelector('.hopscotch-bubble').style.left) < 0) {
+        document.querySelector('.hopscotch-bubble').style.left = '25%'
+      }
+    }
+  })
+}
+
+export default function FeatureTour ({DOM, props$}) {
+  let actions = intent(DOM)
+  let state$ = model(props$, actions)
+  let vtree$ = view(state$)
+  return {
+    DOM: vtree$
+  }
+}