Darkli
Small and clean lightbox script
Demo
https://akccakcctw.github.io/darkli/demo/
Usage
1. CSS & JS Files
Directly download the files below
- CSS ( view in GitHub )
- JS ( view in GitHub )
Or using from CDN
2. Include Files To Website/App
In your html file:
... ...
3. Add Darkli HTML Layout
<!-- contents... --> <!-- contents... -->
4. Initialize
// deafultconst darkli = ; // with custom configconst 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
Prerequisites
Getting Started
Before coding, you need to install packages for development, we choose gulp as our build system.
# install all building tools and dependencies $ npm install # or yarn
Usage
# 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.
Testing
Unit test
# 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:
$ npm run gulp localhost
Then you can start the E2E test:
$ npm run e2e # firefox $ npm run e2e:firefox
Show File Structure
Just type follow command to view the graphical file structure in your terminal.
$ npm run tree