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