Darkli: small and clean lightbox script
npm install darkliSmall and clean lightbox script


!LICENSE
!downloads_npm
https://akccakcctw.github.io/darkli/demo/
Directly download the files below
- CSS ( view in GitHub )
- JS ( view in GitHub )
In your html file:
``html`
...
...
`html`
`js
// deafult
const darkli = new Darkli();
// with custom config
const darkli = new Darkli({ heightAuto: true });
`
| Parameter | Type | Default | Description |
| ----------- | -------- | ---------------------- | ----------- |
| box | string | '.darkli' | |
| contents | string | '.darkli-content' | |
| btnOpens | string | '[data-darkli]' | |
| btnClose | string | '.darkli .darkli-close'| |
| heightAuto | boolean | false | Set to true and box will adopt its content height |
| closeKeys | array | [27, 8] | keyCode: 27(esc), 8(backspace) |
| beforeOpen | function | | Will be executed before open |
| afterOpen | function | | Will be executed after open |
| beforeClose | function | | Will be executed before close |
| afterClose | function | | Will be executed after close |
| Method | Description |
| ----------------------------- | ----------- |
| darkli.open(content) | open specific box |darkli.close()
| | close box |darkli.create({box, content})
| | create box |
- npm or yarn ( we assume you have installed node.js ).
Before coding, you need to install packages for development, we choose gulp as our build system.
`sh`install all building tools and dependencies
$ npm install # or yarn
`shsassBuild
, javascript, demo and minified files:npm run gulp
$ npm start # or
, javascript, and then watch file and .js filesChecking gulpfile.js for more details.
$3
Unit test
`sh
Lint and then do unit test with AVA
$ npm test$ npm run ava
$ npm run ava:watch
`End-to-End test
We use Nightwatch.js as our E2E test tool.
Before test, you should start a localhost server at
8000 port, use gulp task to start it:`sh
$ npm run gulp localhost
`Then you can start the E2E test:
`sh
$ npm run e2efirefox
$ npm run e2e:firefox
`$3
Just type follow command to view the graphical file structure in your terminal.
`sh
$ npm run tree
``