/darkli

small and clean lightbox script

Primary LanguageJavaScriptMIT LicenseMIT

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: false });

Parameters

Parameter Type Default Description
box string '.darkli'
contents string '.darkli-content'
btnOpens string '[data-darkli]'
btnClose string '.darkli .darkli-close'
bodyNoScroll boolean true controll whether body should fixed when modal open
heightAuto boolean true 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 for development (watch file change)
$ npm run dev

# Build for production
$ npm run prod

Checking gulpfile.babel.js for more details.

Testing

Unit test

# Run unit test with AVA
$ npm run test:unit

$ npm run ava:watch

End-to-End test

We use Nightwatch.js as our E2E test tool.

# Run e2e test
$ npm run test:e2e

Show File Structure

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

$ npm run tree

License

MIT