weltn24-doge v3.0.1

doge

This is the Content-Slider of welt.de

Primary used for Images and responsive Picture-Elements - but not limited to it.

TOC

• Install
• Dependency
• Usage
  • Options (required):
  • CSS Classes (optional):
  • Swiper Options:
• Development
  • Devstack
  • Intellij
  • Dev-Mode
  • Lint
  • Test
  • Bundle
  • Release

Install

yarn

yarn add weltn24-doge

npm

npm install --save weltn24-doge

Dependency

• Swiper v6: https://swiperjs.com/
• Swiper API: https://swiperjs.com/swiper-api
• EventEmitter3: https://github.com/primus/eventemitter3

Usage

// initialize
const contentSlider = new ContentSlider(<options>, <css-classes>, <swiper-options>);

Options (required):

CSS Classes (optional):

With this parameter you can overwrite the css classes. They are automatic generated with the options-value bemBlockName.

Swiper Options:

See Swiper API Docs.

Development

Devstack

• Flowtype (with tcomb + babel-plugin-transform-flow-strip-types)
• webpack (for webpack-dev-server & bundling)
• yarn + npm ( for dependency management and application lifecycle)
• Jest (test-runner)

IntelliJ

To active IDE support for webflow: Language & Frameworks -> Javascript -> Javascript Language Support: Flow

Dev-Mode

To start the webpack-dev-server:

npm start

The server will be listen to localhost:8080.

To access the server from network:

npm start -- --host 0.0.0.0

URLs

• http://localhost:8080/index.html – Choose page
• http://localhost:8080/index-article-images.html – Article images
• http://localhost:8080/index-stage-slider.html – Stage Slider

Lint

npm run lint

Test

To run the tests:

npm test

To start the test with file-watcher:

npm run test-dev

Coverage

npm run coverage

To create the HTML Report:

npm run coverage-html-report
open coverage/index.html

Bundle

To bundle the library:

npm run build

Release

To automatically build, tag version, push to GitHub and publish to npm:

npm release