This package has been deprecated

Author message:

This package has been migrated to @cycjimmy/simulate-chatting for scoped NPM package. Please switch to @cycjimmy/simulate-chatting to stay up to date.

simulate-chatting

0.5.3 • Public • Published

Simulate Chatting

NPM version David deps devDependencies Status npm license

(Releases | Demo)

This package has been migrated to @cycjimmy/simulate-chatting for scoped NPM package. Please switch to @cycjimmy/simulate-chatting to stay up to date.

Install

# via npm 
$ npm install simulate-chatting --save
 
# or via yarn 
$ yarn add simulate-chatting

Use

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

import SimulateChat from 'simulate-chatting';
 
OR
const SimulateChat = require('simulate-chatting');
let 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="simulateChatting.min.js"></script>
<script>
  var 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/simulate-chatting@0/build/simulateChatting.min.js"></script>

Readme

Keywords

Package Sidebar

Install

npm i simulate-chatting

Weekly Downloads

1

Version

0.5.3

License

MIT

Unpacked Size

68.4 kB

Total Files

9

Last publish

Collaborators

  • cycdpo