2.0.5 • Published 3 years ago

@laimoon/callback v2.0.5

Weekly downloads
2
License
ISC
Repository
-
Last release
3 years ago

Laimoon Callback UI Package

This JS package provides an easy way to integrate callback popup inside any laimoon's project.

The back-end logic is handled by profiles.laimoon.com.

The code structure

In this project, we use pure JavaScript to minimize the loading time without any additional load with just ~8k gzip in the production

The idea behind the code is that we can inject the course callback popup anywhere in any project regardless of the technology behind it.

The code behind the actual HTML template is written inside dom.js file with help of some useful selectors and classes to fetch and modify elements easily.

The core logic of rendering the callback popup is written inside LaimoonCallback.js class. This class is exposed globally once the package is loaded to any project such as courses or careerguide.

Using the exposed object LaimoonCallback we can easily control the display and other configurations of the popup.

For example, we use the method open to display the popup with different configurations by passing the config as a parameter:

LaimoonCallback.open({
  courseId: 'Required | Number',
  title: 'Required | String',
  description: 'Required | String',
  classification: 'Required | ENUM | booking, demo, recording, video, info',
  trainigOptions: 'Optional | Array of JSON',
  trainigOptionTitle: 'Optional | String',
  trainigOptionsDefault: 'Optional | ENUM | virtaul, blended',
  feedbackTitle: 'Optional | String',
  feedbackDescription: 'Optional | String',
  callback: 'Optional | Function'
});

Additionally, we use some useful utilities inside utils.js file such as email and phone validation.

Finally, once a user submitted the form, the popup status will change to be submitted and display the feedbackTitle and feedbackDescription also will trigger the callback function if provided in the config.

Get Started

  1. Install the pacakge via npm:
npm i @laimoon/callback --save
  1. Install webpack or any bundler you want, I suggest using Laravel Mix since it wraps webpack's complixity and let you focus on work:
npm install cross-env laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
  1. Update your webpack.mix.js to the following:
const mix = require('laravel-mix');
mix.js('src/js/callback.js','webroot/js');
  1. Create a JS file under src/js/callback.js and put the following:
require('@laimoon/callback');
  1. Add the following scrips into your package.json:
{
  ...
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  ...
}
  1. Compile your JS file callback.js for production:
npm run prod
  1. Add the generated webroot/js/callback.js into your HTML and then add the following VueJs component into the first element od the body:
<body>
    <div id="app">
        <laimoon-callback></laimoon-callback>
    </div>
    ...
</body>
  1. Once done, you'll have a global object LaimoonCallback you can consume to open and close the callback popup whenever you want:

The available methods:

LaimoonCallback.open();    // will open the login UI
LaimoonCallback.close();    // will close the current open callback form popup

Development

This projects uses webpack with the help of Laravel mix, you can refer to webpack config inside webpack.mix.js for more details.

To rebuild the project during development with watcher:

npm run watch

To rebuild the project with minification for production:

npm run prod

To test your work locally while developing it, you can link the package using npm link:

This step is helpful instead of pushing your developemnt work to npm and then pull it back to any project so that you can save time.

  1. In thus repo, run:
npm link
  1. In your test projects, use:
npm link laimoon-callback
laimooncallback
es6-promise
2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.35

3 years ago

1.3.34

3 years ago

1.3.33

3 years ago

1.3.32

3 years ago

1.3.31

3 years ago

1.3.30

3 years ago

1.3.29

3 years ago

1.3.28

3 years ago

1.3.27

3 years ago

1.3.26

3 years ago

1.3.25

3 years ago

1.3.24

3 years ago

1.3.23

3 years ago

1.3.22

3 years ago

1.3.21

3 years ago

1.3.19

3 years ago

1.3.20

3 years ago

1.3.18

3 years ago

1.3.17

3 years ago

1.3.16

3 years ago

1.3.15

3 years ago

1.3.14

3 years ago

1.3.13

3 years ago

1.3.12

3 years ago

1.3.11

3 years ago

1.3.10

4 years ago

1.3.9

4 years ago

1.3.8

4 years ago

1.3.7

4 years ago

1.3.6

4 years ago

1.3.5

4 years ago

1.3.4

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.17

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.10

4 years ago

0.0.11

4 years ago

0.0.12

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago