blinguidance

guidance

config

interface Config {
  flow: Flow[];
  btns: Btns;
}

interface Btns {
  next: Next;
  end: Next;
}

interface Next {
  height: string;
  width: string;
  border: string;
  bottom: string;
  left: string;
  transform: string;
}

interface Flow {
  target: string;
  height: string;
  width: string;
  border: string;
  backgroundImage: string;
  placement?: 'left'|'right'|'top'|'bottom'|'topLeft'|'topRight'|'bottomLeft'|'bottomRight';
}

  const guidance = Guidance.create({
        flow: [
          {
            target: '.step1',
            height: '166px',
            width: '324px',
            border: '1px solid #eee',
            backgroundImage: 'url("./img/step1.png")',
          },
          {
            target: '.step2',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step2.png")',
            border: '1px solid #eee',
          },
          {
            target: '.step3',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step3.png")',
            border: '1px solid #eee',
          },
          {
            target: '.step4',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step4.png")',
            border: '1px solid #eee',
          },
          {
            target: '.step5',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step5.png")',
            border: '1px solid #eee',
          },
        ],
        btns: {
          next: {
            height: '36px',
            width: '100px',
            border: '1px solid #eee',
            bottom: '36px',
            left: '50%',
            transform: 'translate(-50%)',
          },
          end: {
            height: '36px',
            width: '100px',
            border: '1px solid #eee',
            bottom: '0',
            left: '50%',
            transform: 'translate(-50%)',
          },
        },
      })

      const gen = guidance(
        e => gen.next(),
        e => gen.end()
      )

      gen.next()