Darkli

Small and clean lightbox script

!LICENSE
!downloads_npm

Demo

https://akccakcctw.github.io/darkli/demo/

Usage

$3

Directly download the files below
- CSS ( view in GitHub )
- JS ( view in GitHub )

Or using from CDN
- CSS
- JS

$3

In your html file:

``html



...



...



`

$3

`html



`

$3

`js
// deafult
const darkli = new Darkli();

// with custom config
const darkli = new Darkli({ heightAuto: true });
`

Parameters

| 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 |

Methods

| Method | Description |
| ----------------------------- | ----------- |
| darkli.open(content) | open specific box |
| darkli.close() | close box |
| darkli.create({box, content}) | create box |

Development

$3

- npm or yarn ( we assume you have installed node.js ).

$3

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
`

$3

`sh


Build sass, javascript, demo and minified files:


$ npm start # or npm run gulp

Build sass, javascript, and then watch file

$ npm run gulp watch

Uglify and minify .css and .js files

$ npm run gulp min

You can also use these commands below

$ npm run gulp js
$ npm run gulp css
$ npm run gulp js-min
$ npm run gulp css-min
`

Checking 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 e2e

firefox


$ npm run e2e:firefox
`

$3

Just type follow command to view the graphical file structure in your terminal.

`sh
$ npm run tree
``

License

MIT