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

| Option | Type | Description | | ---------------------- | ---------------------- | ----------------------------------------------------------- | | content | QuerySelector (string) | the selector of the swipeable content elements | | overlay | QuerySelector (string) | the selector of the overlay | | bemBlockName | string | set the block-part of the bem-style css-class name | | swiperBemBlockName | string | set the block-part of the css-class name for swiper-options | | extractSliderElement | function | function which returns element to slide | | extractCaption | function | function which returns the description of the slide | | extractHashnavToken | function | function which returns the hashnav token |

CSS Classes (optional):

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

| Option | Type | Description | | ------------------- | ------------------ | ------------------------------------------------------------------- | | overlay | ClassName (string) | the overlay element (initial hidden) | | overlayModVisible | ClassName (string) | modifier which indicates if the overlay is visible | | nav | ClassName (string) | the navigaten bar element | | navPosition | ClassName (string) | the position indicator | | caption | ClassName (string) | the caption of the current content element | | captionModVisible | ClassName (string) | modifier which indicates if the caption is visible | | elementContainer | ClassName (string) | the container for the swipeable content elements | | wrapper | ClassName (string) | wrapper around the elements, which will be x/y transformed on swipe | | element | ClassName (string) | the content element | | icon | ClassName (string) | icon element | | toggleCaptionIcon | ClassName (string) | icon to toggle visibility of the caption | | prevIcon | ClassName (string) | icon to swipe to previous element | | nextIcon | ClassName (string) | icon to swipe to next element | | closeIcon | ClassName (string) | icon to close the overlay |

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