sifrr-elements

sifrr-dom elements

List of Elements:

Elements	Description	Size	Test
sifrr-stater	State manager for sifrr elements, save them to storage, replay state changes, travel to past state		[WIP]
sifrr-tab-container	Scrollable tabs container		OK
sifrr-tab-header	Scrollable tabs header that can be used with container		OK
sifrr-carousel	Simple carousel with preview using tabs		WIP
sifrr-lazy-picture	Lazy loading pictures when in view		OK
sifrr-lazy-img	Lazy loading images when in view		OK
sifrr-progress-round	Circular progress circle		OK
sifrr-code-editor	Code editor with syntax highlighting using highlight.js		[WIP]
sifrr-showcase	Showcase sifrr-dom elements		[WIP]
sifrr-include	Async include html/js/css with url		OK
sifrr-shimmer	Facebook like Shimmer used as loading screen		WIP

View examples

Examples as showcase: https://sifrr.github.io/sifrr-elements/showcase/ (only desktop friendly)

Packages that have tests have a working example of that package in test/public folder

Usage

Using direct distribution file

Script tag

// load sifrr-dom
<script src="https://cdn.jsdelivr.net/npm/@sifrr/dom@{version}/dist/sifrr.dom.js"></script>
// load element you want to add
<script src="https://cdn.jsdelivr.net/npm/@sifrr/elements@{version}/elements/element-name/dist/elementname.min.js"></script>
// for v0.0.3, version = 0.0.3

Script Module tag

// load sifrr-dom
<script
  src="https://unpkg.com/@sifrr/sifrr-dom@{version}/dist/sifrr.dom.module.js"
  type="module"
></script>
// load element you want to add
<script
  src="https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.module.js"
  type="module"
></script>
// for v0.0.3, version = 0.0.3

Sifrr.Dom.load

Sifrr.Dom.load('element-name', {
  url: 'https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.min.js'
});

NPM module

add @sifrr/elements package, yarn add @sifrr/elements

require/import needed elements

const SifrrDom = require('@sifrr/dom');
const { SifrrLazyPicture } = require('@sifrr/elements');
//or
import SifrrDom from '@sifrr/dom';
import { SifrrLazyPicture } from '@sifrr/elements';

// Register
SifrrDom.register(SifrrLazyPicture);

Helpers

LazyLoader

Since lazy-image and lazy-picture doesn't work with safari, you can simply use LazyLoader helper to lazy load native images and pictures.

Lazy loads a image when it is near viewport, using data-src and data-srcset.

usage:

// In HTML <img data-src="url" class="lazy">
// // supports picture tag also

import { LazyLoader } from '@sifrr/elements';

const lazyLoader = new LazyLoader(
  rootMargin /* same as mutation observer's rootMargin, default: '0px 0px 0px 0px' */
);

lazyLoader.observe(document.querySelector('.lazy'));

// or multiple images
document.querySelectorAll('.lazy').forEach(lazyLoader.observe);

// observed images' data-src will be changed to src when rootmargin condition is satisfied

MakeFullScreen

Makes any element fullscreen and back.

export { makeFullScreen, exitFullScreen } from '@sifrr/elements';
// make element full screen
makeFullScreen(document.getElementById('#someElement'));
// exit full screen
exitFullScreen(document.getElementById('#someElement'));

License

sifrr-elements is MIT Licensed.

(c) @aadityataparia