Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/icheer/web-assistant

A simple web component built with svelte, providing version introduction & guideline instruction UI.
https://github.com/icheer/web-assistant

feedback guideline introduction svelte walkthrough webcomponents

Last synced: 11 days ago
JSON representation

A simple web component built with svelte, providing version introduction & guideline instruction UI.

Host: GitHub
URL: https://github.com/icheer/web-assistant
Owner: icheer
License: mit
Created: 2022-01-06T10:36:27.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-12-20T12:55:00.000Z (11 months ago)
Last Synced: 2024-10-10T20:43:56.683Z (28 days ago)
Topics: feedback, guideline, introduction, svelte, walkthrough, webcomponents
Language: JavaScript
Homepage: https://guidebook.topurl.cn
Size: 844 KB
Stars: 5
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # web-assistant

A simple web component built with [svelte](https://github.com/sveltejs/svelte), providing version introduction & guideline instruction UI.

- dependency free

- compatible with any javascript framework/UI library

- light-weighted (gzipped: 76KB)

- non-invasive design, drive the UI simply by javascript & json

- auto switch languages(CN or EN) depends on your \

## Live demo

https://guidebook.topurl.cn



  



## How to use

Install with npm:

```bash

npm install web-assistant --save

```

and import it in your code:

```js

import 'web-assistant';

```

You can **also** load the package from a CDN such as jsdelivr (or unpkg):

```html

```

Then you can call `window.webAssistant.guideline(...)` or `window.webAssistant.intro(...)` directly in your js code.

The guideline parameters example:

```js

window.webAssistant.guideline({

  list: [

    {

      selector: 'h1',

      position: 'bottom-end',

      text: 'Line1\nLine2\nLine3\nThis is a title',

      width: '220px',

      onNext: () => console.log('next tips')

      // You can use async function here, and guideline won't go on until the async function finished

    },

    {

      selector: 'p.desc:nth-child(2)',

      position: 'top-end',

      text: 'This a testing paragraph...',

      maxWidth: '380px',

      onPrev: () => console.log('prev')

    },

    {

      selector: '.btn',

      position: 'right',

      text: 'This is the submit button, and the guideline ends here.'

    }

  ],

  canClose: false,

  showSteps: true,

  confirmText: 'I know',

  onConfirm: () => console.log('confirmed')

});

```

The introduction parameters example:

```js

window.webAssistant.intro({

  title: 'v1.20 - New Feature',

  list: [

    {

      text: 'Surprise steepest recurred landlord mr wandered amounted of.\nContinuing devonshire but considered its.\nRose past oh shew roof is song neat.\nDo depend better praise do friend garden an wonder to.\nIntention age nay otherwise but breakfast.\nAround garden beyond to extent by.'

    },

    {

      text: 'Kindness to he horrible reserved ye. Effect twenty indeed beyond for not had county. The use him without greatly can private. Increasing it unpleasant no of contrasted no continuing. Nothing colonel my no removed in weather. It dissimilar in up devonshire inhabiting.'

    },

    {

      text: 'This is an example of rich text'

    }

  ],

  dangerouslyUseHTMLString: true,

  showSteps: true,

  canClose: true,

  onClose: () => console.log('closed'),

  confirmText: 'I know',

  onConfirm: () => console.log('confirmed'),

  style: {

    width: '50vw',

    height: '40vh'

  }

});

```

The feedback parameters example:

```js

window.webAssistant.feedback({

  title: 'Suggestion & Feedback',

  bottom: '12px',

  fullNameVisible: true,

  emailVisible: true,

  emailRequired: true,

  problemVisible: true,

  problemList: [

    {

      label: 'System features',

      value: 'system'

    },

    {

      label: 'User experience',

      value: 'uex'

    },

    {

      label: 'Others',

      value: 'other'

    }

  ],

  screenshotNeeded: true,

  callback: fd => {

    fetch('/some-api/feedback/submit', {

      method: 'POST',

      body: fd

    });

  }

});

```

## Parameters

### guideline params:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| list | [Required] guideline list | Array | (See guideline list item ↓) |

| showSteps | Decide whether shows steps in the "Next" button or not | Boolean | false |

| dangerouslyUseHTMLString | Decide the guideline content renders HTML tag or not | Boolean | false |

| canClose | Decide the guideline can be closed before it is finished | Boolean | false |

| closeText | The close button's text | String | Close/关闭 |

| onClose | Function called after closed | Function | noop |

| canPrev | Decide the guideline can go previous step or not | Boolean | true |

| prevText | The prev button's text | String | Previous/上一条 |

| nextText | The next button's text | String | Next/下一条 |

| confirmText | The confirm button's text | String | Confirm/确定 |

| onConfirm | Function called after confirmed | Function | noop |

| popperStyle | Inline style string that attached to the popper element | String | - |

#### *guideline list item*:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| selector | [Required] CSS selector to find the DOM | String | - |

| position | The popper's position: 
top-start/top/top-end/bottom-start/bottom/bottom-end/left-start/left/left-end/right-start/right/right-end | String | bottom |

| text | The popper's content text | String | - |

| width | The popper's width | String | - |

| maxWidth | The popper's max-width | String | - |

| onPrev | Function called when going previous step | Function | noop |

| onNext | Function called when going next step | Function | noop |

### intro params:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| title | Intro's title | String | Intro |

| list | [Required] intro list | Array | (See intro list item ↓) |

| showSteps | Decide whether shows steps in the "Next" button or not | Boolean | false |

| dangerouslyUseHTMLString | Decide the intro content renders HTML tag or not | Boolean | false |

| canClose |  Decide the intro can be closed before it is finished | Boolean | false |

| onClose | Function called after closed | Function | noop |

| prevText | The prev button's text | String | Previous/上一条 |

| nextText | The next button's text | String | Next/下一条 |

| confirmText | The confirm button's text | String | Confirm/确定 |

| onConfirm | Function called after confirmed | Function | noop |

| style | Style object that affects intro element | Object | {} |

#### *intro list item*:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| text | The intro content | String | - |

### feedback params:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| title | The title of feedback for display | String | (i18n) |

| bottom | The distance to the bottom of viewport | String | 15px |

| folded | If the feedback panel is folded at the begining | Boolean | true |

| emailVisible | If the email input is shown | Boolean | true |

| emailRequired | If the email is required | Boolean | false |

| nameVisible | If the fullName input is shown | Boolean | false |

| nameRequired | If the fullName is required | Boolean | false |

| problemVisible | If the problem select is shown | Boolean | false |

| problemRequired | If the problem is required | Boolean | true |

| problemList | The problem list | Array | (See feedback problem list item ↓) |

| screenshotVisible | If the email input is shown | Boolean | true |

| screenshotNeeded | If the email is required | Boolean | false |

| placeholder | The placeholder text of the suggestion textarea | String | - |

| callback | Function called when submitting | Function | noop |

#### *feedback problem list item*:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| label | The problem description | String | - |

| value | The problem code | String | - |

### cursor params:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| type | Cursor appearance: default/reverse/pointer/move/grab | String | default |

| from | Position where cursor moves from (can be x,y or css selector. i.e. `100,300` or `button.submit` or `document.body`) | String or HTMLElement | - |

| to | [Required] Position where cursor moves to (same as 'from') | String or HTMLElement | - |

| scale | Cursor's scale | Number | 1 |

| duration | Cursor's moving duration | Number | 1500 |

| stay | Cursor will stay at the end position for specified ms | Number | 150 |

| clickAfterMove | Cursor will automatically click the `to` element after moving | Boolean | false |

| clickEffect | Cursor will show a red circle animation when clicking | Boolean | false |

| overlay | A overlay will show when the cursor is displayed (prevent the other user's actions) | Boolean | false |

### mask params:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| duration | milliseconds.
empty or 0 means mask never dismiss,
then you should call window.webAssistant.clear() to dismiss it manually. | Number | - |

### toast params:

| Key | Description | Type | Default value |

| ---- | ---- | ---- | ---- |

| text | The toast text | String | - |

| duration | milliseconds | Number | 3000 |

| position | The toast position: bottom/top/center | String | bottom |

## TODO

- [ ] mobile compatible

- [ ] ....