npm.io
0.7.2 • Published 7 years ago

darkli

Licence
MIT
Version
0.7.2
Deps
4
Size
106 kB
Vulns
0
Weekly
0
Stars
2
SummaryDependencyVersions

Darkli

Small and clean lightbox script

NPM version Dependencies LICENSE downloads_npm

Demo

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

Usage

1. CSS & JS Files

Directly download the files below

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

License

MIT

Keywords

lightboxoverlay