# **driver.js**
### 安裝方式
套件管理工具

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>

### 基本使用
driver會註冊至window物件底下(use cdn)

const driver = window.driver.js.driver;

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.el1', popover: { title: 'Title', description: 'Description' } },
    { element: '.el2', popover: { title: 'Title', description: 'Description' } }
  ]
});

driverObj.drive();

屬性說明

const sample = driver({
    steps: [{/*DOM1*/}, {/*DOM2*/}], //聚焦DOM物件的順序
    animate: true, //預設是開啟的，不主動設定為false，轉場的動畫會一直存在
    allowKeyboardControl: true, //預設是開啟的，不主動設定為false，可以一直使用鍵盤控制
    popoverClass: '', //popup視窗class name
    showProgress: false, //預設是關閉的，設定為true的話會顯示步驟，類似頁碼的效果，可以查看截圖中popup視窗的左下角
    allowClose: false, //防止導覽被關閉

    //文案
    progressText: '', //頁碼位置可自定義內容，填入資料型別為string，若想要串值可以使用es6的字串模板
    nextBtnText: '', //下一步按鈕文字內容
    prevBtnText: '', //上一部按鈕文字內容
    doneBtnText: '', //完成引導按鈕文字內容

    //事件
    onNextClick, //下一步按鈕被點擊時會觸發，請注意設定該事件原本下一頁的動作會被覆寫，若不主動寫換頁動作，便不會自動換到下一頁
    onPrevClick, //上一步按鈕被點擊時會觸發，請注意設定該事件原本上一頁的動作會被覆寫，若不主動寫換頁動作，便不會自動換到下一頁
    onCloseClick, //popup叉叉按鈕被點擊時會觸發
    onDestroyed //導覽關閉後會觸發
})

// API參考

//可以自行決定從第幾步開始
driverObj.drive();  // Starts at step 0
driverObj.drive(4); // Starts at step 4

driverObj.moveNext() //可以到下一個聚焦的區塊
driverObj.movePrevious() //可以到上一個聚焦的區塊

成果
範例程式 : https://codepen.io/idldvnfe-the-lessful/pen/rNgBvjV

#### 優點:
* 輕量化，經過gzip壓縮，檔案大小僅5kb
* 想的到需要的事件、屬性、樣式等等設定很全面
* 兼容所有瀏覽器
* MIT License
* 使用起來比黑暗執行序提供的更容易上手
* 可以透過鍵盤控制

#### 缺點:
* 想要調整source code可能會受限，但以專案的使用情境應該很夠用了，不太需要客製化。