@cycjimmy/simulate-chatting

2.0.2 • Public • Published

Simulate Chatting

libraries dependency status libraries sourcerank Release date rollup semantic-release jest npm license

  • Simulate Chatting based on swiper4+. (Demo)

Install

NPM version NPM bundle size npm download

# via npm
$ npm install @cycjimmy/simulate-chatting --save

# or via yarn
$ yarn add @cycjimmy/simulate-chatting

Use

Simulate chatting based on Swiper 4+. Add Script of swiper in your project first

import SimulateChat from '@cycjimmy/simulate-chatting';

# OR
const SimulateChat = require('@cycjimmy/simulate-chatting');
const simulateChat = new SimulateChat(wrapper, options);
  • wrapper: [Element|String] Context Wrapper Element. [Required]

  • options: looks like: { sound: 'source', chartList: [] }

    • footer: [Object]. Default null.
      • height: [Number|String] Height of footer input. If you want to add the unit, can use the string form. E.g: '20vw'.
      • img: [String] Image source.
    • sound: [String] Audio source. Default ''.
    • chartList: [Array] Array of chartList patterns. Default [].
      • A pattern looks like: { pos: 'left', w: 100, h: 30, img: '', delay: 2000 [, ...] }
        • pos: [String] Position of the pattern. Use one of the three options:
          • 'left'
          • 'center'
          • 'right'
        • w: [Number|String] Width of pattern. If you want to add the unit, can use the string form. E.g: '20vw'.
        • h: [Number|String] Height of pattern. If you want to add the unit, can use the string form. E.g: '20vw'.
        • top: [Number|String] Custom set the margin from the previous. If you want to add the unit, can use the string form. E.g: '20vw'.
        • img: [String] Image source.
        • delay: [Number] Delay from the previous pattern display. Default 1500.
        • custom: [Boolean] Whether to enable custom mode.
        • html: [String] Custom html structure of pattern when custom is true.
        • pause: [Boolean] Whether to pause the running of patterns after this pattern display.
        • muted: [Boolean] Whether not to play the sound when this pattern show.
        • callback: [Function] if set, run callback function after this pattern show.
    • SwiperModule: [Object] Can use custom Swiper. Note the version to 4+. Default null.
  • Functions:

    • start(): Start to display patterns.
    • pause(): Pause the running of patterns.
    • reset(): Reset patterns.

Use in browser

<div id="wrapper"></div>

<script src="swiper.min.js"></script>
<script src="simulate-chatting.umd.min.js"></script>
<script>
  const simulateChat = new SimulateChat('#wrapper', {
    sound: 'msg.mp3',
    footer: {
      height: 40,
      img: 'footerInput.jpg'
    },
    chartList: [...]
  });

  simulateChat.start();
</script>

CDN

jsdelivr

To use via a CDN include this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/simulate-chatting@2/dist/simulate-chatting.umd.min.js"></script>

Readme

Keywords

Package Sidebar

Install

npm i @cycjimmy/simulate-chatting

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

58.5 kB

Total Files

7

Last publish

Collaborators

  • cycdpo