feat: add sifrr-lazy-picure

.eslintignore

@@ -0,0 +1 @@
+**/dist/*.js

.eslintrc.js

@@ -0,0 +1,76 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    mocha: true
+  },
+  // for tests
+  globals: {
+    ENV: true,
+    fs: false,
+    path: false,
+    chai: false,
+    sinon: false,
+    assert: false,
+    expect: false,
+    should: false,
+    window: false,
+    delay: false,
+    puppeteer: false,
+    server: false,
+    port: false,
+    PATH: false,
+    page: false,
+    browser: false,
+    Sifrr: false,
+    SifrrStorage: false
+  },
+  extends: 'eslint:recommended',
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2017,
+    esversion: 2017
+  },
+  rules: {
+    indent: [
+      'error',
+      2
+    ],
+    'linebreak-style': [
+      'error',
+      'unix'
+    ],
+    quotes: [
+      'error',
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    semi: [
+      'warn',
+      'always'
+    ],
+    'quote-props': [
+      'error',
+      'as-needed'
+    ],
+    'no-var': [
+      'error'
+    ],
+    'max-lines': [
+      'error',
+      220 // Change to 200 after refactoring API.Model
+    ],
+    'mocha/no-exclusive-tests': 'error'
+  },
+  plugins: [
+    'html',
+    'mocha'
+  ],
+  settings: {
+    'html/indent': '+2'
+  }
+};

elements/sifrr-lazy-picture/src/sifrrlazypicture.js

@@ -0,0 +1,57 @@
+import SifrrDom from '@sifrr/dom';
+import style from './style.scss';
+
+function moveAttr(el, attr) {
+  if (!el.dataset[attr]) return;
+  el.setAttribute(attr, el.dataset[attr]);
+  el.removeAttribute(`data-${attr}`);
+}
+
+function loadPicture(pic) {
+  if (pic.sifrrLazyLoaded) return false;
+  pic.sifrrLazyLoaded = true;
+  pic.$$('source', false).forEach((s) => {
+    moveAttr(s, 'srcset');
+  });
+  const img = pic.$('img', false);
+  moveAttr(img, 'src');
+  return true;
+}
+
+//Sifrr Lazy Loading Picture
+class SifrrLazyPicture extends Sifrr.Dom.Element.extends(HTMLPictureElement) {
+  static useShadowRoot() {
+    return true;
+  }
+
+  static get observer() {
+    this._observer = this._observer || new IntersectionObserver(this.onVisible, {
+      rootMargin: this.rootMargin
+    });
+    return this._observer;
+  }
+
+  static onVisible(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        SifrrLazyPicture.observer.unobserve(entry.target);
+        loadPicture(entry.target);
+      }
+    });
+  }
+
+  onConnect() {
+    this.sifrrLazyLoaded = false;
+    this.constructor.observer.observe(this);
+  }
+
+  onDisconnect() {
+    this.constructor.observer.unobserve(this);
+  }
+}
+
+SifrrLazyPicture.rootMargin = '0px 0px 200px 0px';
+
+if (window) SifrrDom.register(SifrrLazyPicture, { extends: 'picture' });
+
+export default SifrrLazyPicture;

elements/sifrr-lazy-picture/test/browser/lazypicture.test.js

@@ -0,0 +1,27 @@
+describe('sifrr-lazy-picture', () => {
+  before(async () => {
+    await page.goto(`${PATH}/lazypicture.html`);
+  });
+
+  it('register sifrr-lazy-picture', async () => {
+    expect(await page.evaluate('!!Sifrr.Dom.elements["sifrr-lazy-picture"]')).to.be.true;
+  });
+
+  it('hasn\'t loaded pictures yet', async () => {
+    expect(await page.$eval('picture img', (el) => !!el.getAttribute('data-src'))).to.be.true;
+    expect(await page.$eval('picture img', (el) => !!el.getAttribute('src'))).to.be.false;
+
+    expect(await page.$eval('picture source', (el) => !!el.getAttribute('data-srcset'))).to.be.true;
+    expect(await page.$eval('picture source', (el) => !!el.getAttribute('srcset'))).to.be.false;
+  });
+
+  it('loads pictures on scroll', async () => {
+    await page.$eval('picture', (el) => el.scrollIntoView());
+
+    expect(await page.$eval('picture img', (el) => !!el.getAttribute('data-src'))).to.be.false;
+    expect(await page.$eval('picture img', (el) => !!el.getAttribute('src'))).to.be.true;
+
+    expect(await page.$eval('picture source', (el) => !!el.getAttribute('data-srcset'))).to.be.false;
+    expect(await page.$eval('picture source', (el) => !!el.getAttribute('srcset'))).to.be.true;
+  });
+});

elements/sifrr-lazy-picture/test/public/lazypicture.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+  </head>
+  <body>
+    <div class="" style="height: 10000px">
+
+    </div>
+    <picture is="sifrr-lazy-picture" style="height: 300px;">
+      <source media="(min-width: 800px)" data-srcset="https://pbs.twimg.com/profile_images/1057899591708753921/PSpUS-Hp_400x400.jpg">
+      <img data-src="https://static.adweek.com/adweek.com-prod/wp-content/uploads/files/blogs/google-logo-hed-2014.jpg">
+    </picture>
+    <script src="https://cdn.jsdelivr.net/npm/@sifrr/dom@0.0.4/dist/sifrr.dom.min.js" charset="utf-8"></script>
+    <script type="text/javascript">
+      Sifrr.Dom.setup();
+    </script>
+    <script src="/sifrrlazypicture.js" type="module"></script>
+  </body>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sifrr/elements",
   "description": "Sifrr elements.",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "license": "MIT",
   "repository": {
     "type": "git",

rollup.base.js

@@ -41,7 +41,7 @@ function moduleConfig(name, root, min = false, isModule = false) {
       }),
       commonjs(),
       postcss({
-        extensions: ['.css', '.sass', '.less'],
+        extensions: ['.css', '.scss', '.sass', '.less'],
         inject: false,
         plugins: []
       })

scripts/test/run.js

@@ -62,7 +62,7 @@ if (toCover) {
   const { createInstrumenter } = require('istanbul-lib-instrument');
   const instrumenter = createInstrumenter();
   const { hookRequire } = require('istanbul-lib-hook');
-  hookRequire((filePath) => filePath.match(/packages\/[a-z]+\/sifrr-[a-z]+\/src/), (code, { filename }) => instrumenter.instrumentSync(code, filename));
+  hookRequire((filePath) => filePath.match(/elements\/sifrr-[a-z\-]+\/src/), (code, { filename }) => instrumenter.instrumentSync(code, filename));
 }
 
 const nycReport = path.join(__dirname, '../../.nyc_output');