@cycjimmy/simulate-chatting v2.0.4

Simulate Chatting

• Simulate Chatting based on swiper4+. (Demo)

Install

# 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

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>