3.0.0 • Published 5 years ago
Share package REMIND - LIGHTBOX
Does whatever a lightbox does.
Table of contents Authors Installation Zum Einbinden des TypeScript Moduls muss folgende Abhängigkeit in den Dependencies
einer package.json eingetragen werden.
npm i @remindgmbh/typescript-lightbox
Usage Lightbox import { Lightbox } from '@remindgmbh/typescript-lightbox'
let lightbox: Lightbox = new Lightbox('<div>Ein Html string</div>');
// Attach html to dochument body
lightbox.attach();
// Change source
lightbox.setSource('<div>Ein anderer HTML string</div>');
// Detach html from dochument body
lightbox.detach();Output <div class="remind-lightbox">
<div class="remind-lightbox__header">
<div class="remind-lightbox__close-button"></div>
</div>
<div class="remind-lightbox__canvas">
<div class="remind-lightbox__content">
<!--html string-->
<div>Ein anderer Html string</div>
</div>
</div>
<div class="remind-lightbox__footer"></div>
</div>Parameters Parameter Type Default Description html string ''Ein Html String der ausgeben wird options object {classes: {...}, functions: {...}} Zum Überschreiben von CSS-Classes und Funktion für die Ausgabe
Functions Parameter Type createCanvas (className: string) => HtmlElement createFooter (className: string) => HtmlElement createHeader (className: string) => HtmlElement createCloseButton (className: string) => HtmlElement createContent (htmlString: string, className: string) => HtmlElement
CSS Classes Parameter Default lightbox remind-lightbox canvas remind-lightbox__canvas header remind-lightbox__header footer remind-lightbox__footer content remind-lightbox__content closeButton remind-lightbox__close-button
Example import { Lightbox } from '@remindgmbh/typescript-lightbox'
let lightbox: Lightbox = new Lightbox(
'<div>Ein Html string</div>',
{
classes: {
footer: 'custom-content-class'
},
functions: {
createContent: (htmlString, className) => {
let html = document.createElement('span');
html.classList.add(className);
html.innerHtml = htmlString;
return html;
}
}
}
);
// Create html
lightbox.create();
// Attach html to dochument body
lightbox.attach();
// Detach html from dochument body
lightbox.detach();Output <div class="remind-lightbox">
<div class="remind-lightbox__header">
<div class="remind-lightbox__close-button"></div>
</div>
<div class="remind-lightbox__canvas">
<span class="custom-content-class">
<!--html string-->
<div>Ein Html string</div>
</div>
</div>
<div class="remind-lightbox__footer"></div>
</div>LightboxImage Parameters Parameter Type Default Description item LightboxItem {image: '', headline: '', text: ''}Pfad zur Bild Datei, Überschrift und Text zum Bild options object {classes: {...}, functions: {...}} Zum Überschreiben von CSS-Classes und Funktion für die Ausgabe
Functions Parameter Type ... ... createImage createImage: (item: LightboxItem, classNameOuter: string, classNameImage: string, classNameHeadline: string, classNameText: string) => HTMLElement
LightboxGallery Additional Public Methods Method Description next(): void Setze das nächste Bild in den sources als aktives Bild prev(): void Setze das vorherige Bild in den sources als aktives Bild setItems(items: LightboxItem[]): void Setze neue Items setItem(item: LightboxItem): void Setze ausgwähltes Item
Parameters Parameter Type Default Description item LightboxItem {image: '', headline: '', text: ''}Pfad zur Bild Datei, Überschrift und Text zum Bild items LightboxItem[] []options object {showThumbnails: false, showPagination: false, classes: {...}, functions: {...}} Erweitert um die Optionen zur Anzeige der Thumbnails und der Pagination
Functions Parameter Type ... ... createThumbnails (className: string) => HtmlElement createThumbnail (source: string, className: string) => HTMLElement createPagination (index: number, maxIndex: number, className: string, classNameCurrent: string, classNameMax: string) => HTMLElement createNext (className: string) => HtmlElement createPrev (className: string) => HtmlElement
CSS Classes Parameter Default thumbnails remind-lightbox__thumbnails thumbnail remind-lightbox__thumbnail pagination remind-lightbox__pagination paginationCurrent remind-lightbox__current paginationMax remind-lightbox__max next remind-lightbox__next prev remind-lightbox__prev
Example <div class="remind-lightbox">
<div class="remind-lightbox__header">
<div class="remind-lightbox__counter">
<span class="remind-lightbox__current">###index###</span>
<span class="remind-lightbox__max">###maxIndex###</span>
</div>
<div class="remind-lightbox__close-button"></div>
</div>
<div class="remind-lightbox__canvas">
<div class="remind-lightbox__prev"/>
<div class="remind-lightbox__content">
<img class="remind-lightbox__image" src="###item.image###"/>
<h2 class="remind-lightbox__headline">###item.headline###</h2>
<span class="remind-lightbox__text">###item.text###</span>
</div>
<div class="remind-lightbox__prev"/>
</div>
<div class="remind-lightbox__footer">
<div class="remind-lightbox__thumbnails">
<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
...
</div>
</div>
</div>
