# Shap · [![build status](https://git.elenet.me/chengkai.wu/shap/badges/master/build.svg)](https://board.faas.ele.me/#/apps/shap/ci/alpha)

A document evaluation tool, which also provides page access to the PV recording function, facilitates developers to control the quality of documents, and to build a better document. Checkout [online demo](https://codesandbox.io/s/1yyy2545xl).

## Install

Installation via CDN

```html
<script src="https://unpkg.com/shap"></script>
```

Installation via NPM
```js
$ npm i shap -S
```

## Examples
```html
<div class="shap-container"></div>
```

```js
new Shap({
  key: '980aeb0e-27b4-4922-a2dd-7e3452eb0f50',
  el: '.shap-container',
  hash: true,
  absence: /^\/#\/about/,
  dev: true
})
```

## Options

### key
Type: `string`

The key for your own project, generated by [shap admin]() background.

### el
Type: `string | HTMLElement`

DOM container for Shap, query by `document.querySelector` when el is string.

### mode
Type: `string`
Default: `inline`
Options: `inline|suspension`

Determine the presentation of the tool, suspended or embedded.

### hash
Type: `boolean`
Default: `false`

Whether to use the `hash` mode, eg: `mode: 'hash'` in VueRouter. `hash: true` will match `location.href.pathname` and `hash: false` will match `location.href.hash` as the document patch in the absence of `formatter` function.

### dev
Type: `boolean`
Default: `false`

Api testing, data will not be stored on the server.

### formatter
Type: `function`

Custom formatter document path function, will take `formatter` function return value as document path whether `hash` are supplied or not.

### absence
Type: `RegExp | function`

No display on particular page, will not record PV on this page either.
Will macth the string which replace origin in url when `absence` is `RegExp`. eg: `location.href.replace(location.origin, '')`
Nothing will be shown when `absence` return value is `false`

### leadin
Type: `string`
Default: `'这个页面有帮助吗？'`

Custom leadin text, such as `以上内容是否对您有帮助？` the default value is `这个页面有帮助吗？`.

### feedback
Type: `string`
Default: `'感谢您的反馈！'`

custom feedback text, the default value is `这个页面有帮助吗？`.

## API

### How Work With SPA

```js
const shap = new Shap({ key: <Your Own Key>, el: '.shap-container' })
const router = new VueRouter({ /* options */ })

router.afterEach((to, from) => {
  shap.spa()
  // Your Code...
})
```

### Change The Dom Status Dynamic

```js
// change the shap mode
shap._vm.mode = 'suspension'
// change the leadin text
shap._vm.leadin = 'Shap\'s leadin'
// change the leadin feedback
shap._vm.feedback = 'Shap\'s feedback'
// toggle expansion state
shap._vm.spreading = false
```

## Authors

* **Army-U** - [Army-U](https://github.com/Army-U)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details