weltn24-doge

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