darkli
v0.7.2
Published
Darkli: small and clean lightbox script
Downloads
59
Readme
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:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/darkli.min.css">
</head>
<body>
...
<script src="path/to/darkli.min.js"></script>
</body>
</html>3. Add Darkli HTML Layout
<div class="darkli">
<button class="darkli-close"></button>
<div class="darkli-content" data-darkli-content="c1">
<!-- contents... -->
</div>
<div class="darkli-content" data-darkli-content="c2">
<!-- contents... -->
</div>
</div>4. Initialize
// 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
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 yarnUsage
# 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-minChecking gulpfile.js for more details.
Testing
Unit test
# Lint and then do unit test with AVA
$ npm test
$ npm run ava
$ npm run ava:watchEnd-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 localhostThen you can start the E2E test:
$ npm run e2e
# firefox
$ npm run e2e:firefoxShow File Structure
Just type follow command to view the graphical file structure in your terminal.
$ npm run tree