@sifrr/elements

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-tabs	Android like tabs in browser		[WIP]
sifrr-lazy-picture	Lazy loading pictures only when in view		OK
sifrr-lazy-img	Lazy loading images only 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 elements		OK

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://unpkg.com/@sifrr/sifrr@{version}/packages/browser/sifrr-dom/dist/sifrr.dom.min.js"></script>
// load element you want to add
<script src="https://unpkg.com/@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@{version}/packages/browser/sifrr-dom/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

License

sifrr-elements is MIT Licensed.

(c) @aadityataparia