Nomenclature Predictably Misunderstood

    @sifrr/elements

    0.0.5 • Public • Published

    sifrr-elements

    GitHub license CircleCI Coverage Status Greenkeeper badge

    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 Minified + Gzipped [WIP]
    sifrr-tabs Android like tabs in browser Minified + Gzipped [WIP]
    sifrr-lazy-picture Lazy loading pictures only when in view Minified + Gzipped OK
    sifrr-lazy-img Lazy loading images only when in view Minified + Gzipped OK
    sifrr-progress-round Circular progress circle Minified + Gzipped OK
    sifrr-code-editor Code editor with syntax highlighting using highlight.js Minified + Gzipped [WIP]
    sifrr-showcase Showcase sifrr-dom elements Minified + Gzipped [WIP]
    sifrr-include Async include html/js/css with url elements Minified + Gzipped 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.

    FOSSA Status

    (c) @aadityataparia

    Install

    npm i @sifrr/elements

    DownloadsWeekly Downloads

    2

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    1.22 MB

    Total Files

    139

    Last publish

    Collaborators

    • aadityataparia