Smart OUR-Making Web Navigation Easier

July 3, 2019 Front end, javascript, User experience

When there is a big adjustment in the content of the webpage, a navigation function is often needed to tell the user that the so-and-so function has been adjusted to another position. The more conventional method is to add a cover layer, highlight the adjusted area, and then complete the guidance through text introduction. We call this function “navigation” andSmartourThe function of this tour guide is separated, providing a solution out of the box.

Project address:https://github.com/jrainlau/s …

Official examples:https://jrainlau.github.io/sm …

Installation

SmartourWas built intoumdModule, allowing users to introduce through different ways.

npm install smartour

/* ES Modules */
import Smartour from 'smartour'
/* CommandJS */
const Smartour = require('smartour')
/* <script> */
<script src="smartour/dist/index.js"></script>

const tour = new Smartour().queue([{
  el: '#id',
  slot: `
    <p>Something you want to guide to the visitors</p>
  `
}])

tour.next()

Configuration item

Smartour()Is a constructor that accepts aoptionsObject as its configuration item.

{
  // `maskStyle` 为导览蒙层的样式
  // 默认值将会和配置的值叠加，配置的内容可覆盖默认值
  markStyle: `
    position: fixed;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
    z-index: 9998;
  `, // 默认值

  // `slotStyle` 是导览介绍内容的样式
  // 默认值将会和配置的值叠加，配置的内容可覆盖默认值
  slotStyle: `
    position: fixed;
    z-index: 9999;
  }` // 默认值

  // `maskPadding` 设置高亮区域的内边距
  maskPadding: { vertical: 5, horizontal: 5 }, // 默认值（垂直、水平）

  // `slotPosition` 设置导览介绍内容的位置
  // 可选项为：'top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left'
  slotPosition: 'bottom', // 默认值

  // `maskEventType` 导览蒙层事件触发的方式
  // 可选项为：'click', 'mouseon', 'mouseover', 'mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend'
  maskEventType: 'click', // 默认值

  // `maskEvent` 导览蒙层事件
  maskEvent: () => {} // 默认值

API

queue(TourList)

.queue()Accept oneTourListParameter, this parameter contains some columnsTourListItemAn array of.

[{
//`el`is the CSS selector for the element to be highlighted
el: '#id-1',

//`slot` is an html string for navigation content
slot: `
<p>This is a demo...<p>
<button class="key-1">Cancel</button>
<button class="key-2">OK</button>
`,

//`keynodes` define the html node of the navigation content and the events to which it is bound
keyNodes: [{
el: '.key-1',
eventType: 'click',
event: (e) => {
alert('Click "Cancel" button')
}
}, {
el: '.key-2',
eventType: 'mouseover',
event: (e) => {
alert('Hover "OK" button')
}
}]
}]

next()

.next()The method is used to show the next tour. It returns a file that containsSmartourPromise of the instance.

const tour = new Smartour().queue(TourList)

Next ()//Show the first tour
Await sleep(2000) // delay 2 seconds
Next ()//Show the second tour

prev()

.prev()The method is used to show the previous tour. It returns a file that containsSmartourPromise of the instance.

const tour = new Smartour().queue(TourList)

Next ()//Show the first tour
Await sleep(2000) // delay 2 seconds
Next ()//Show the second tour
Await sleep(2000) // delay 2 seconds
Await tour.prev() // re-show the first tour.

over()

.over()Used to remove all navigation.

const tour = new Smartour().queue(TourList)

Next ()//Show the first tour
Await sleep(2000) // delay 2 seconds

Over ()//remove all navigation

reset(options)

ForSmartourInstance to reset the configuration item.

const tour = new Smartour().queue(TourList)

Next ()//Show the first tour
Await sleep(2000) // delay 2 seconds

tour.reset({
maskStyle: `
border-radius: 5px;  //Set fillet for highlight area
`
})
Next ()//shows the next tour

Use example

Jul-02-2019 14-00-10

Such asOfficial example, whichSmartourThe usage of is as follows:

<body>
  <main>
    <h1 class="title">Smartour</h1>
    <h3 class="desc">Makes website guiding easier</h3>
    <a class="link" href="https://github.com/jrainlau/smartour/blob/master/README.md#smartour">Document</a>
  </main>
</body>

const tour = new Smartour({
  slotPosition: 'top',
  maskStyle: `border-radius: 4px;`
}).queue([{
  el: '.title',
  slot: `
    <div class="guide guide-1">
      <p>This is my name!</p>
      <button class="btn btn-1">OK.</button>
    </div>
  `,
  keyNodes: [{
    el: '.btn-1',
    event () {
      tour.reset({
        slotPosition: 'bottom-right',
        maskStyle: `border-radius: 4px;`
      })
      tour.next()
    }
  }]
}, {
  el: '.desc',
  slot: `
    <div class="guide guide-2">
      <p>This is what my job is!</p>
      <button class="btn btn-2">Yeah.</button>
    </div>
  `,
  keyNodes: [{
    el: '.btn-2',
    event () {
      tour.reset({
        slotPosition: 'bottom',
        maskStyle: `border-radius: 4px;`
      })
      tour.next()
    }
  }]
}, {
  el: '.link',
  slot: `
    <div class="guide guide-3">
      <p>This is the document!</p>
      <button class="btn btn-3">Got it.</button>
    </div>
  `,
  keyNodes: [{
    el: '.btn-3',
    event () {
      tour.over(tour)
    }
  }]
}])

tour.next()

Certificate

MIT