4.0.0-beta.5 release

framework7io · Dec 24, 2018 · b550820 · b550820
1 parent 5ef303a
commit b550820
Show file tree

Hide file tree

Showing 124 changed files with 3,041 additions and 950 deletions.
diff --git a/packages/core/components/app/app.less b/packages/core/components/app/app.less
@@ -1,12 +1,19 @@
 @import url('./app-vars.less');
 // Core Icons
 @font-face {
-  @fontBase64: framework7_iconFont();
+  @fontBase64: framework7_coreIconsFont();
   font-family: 'framework7-core-icons';
   src: url("data:application/font-woff;charset=utf-8;base64, @{fontBase64}") format("woff");
   font-weight: 400;
   font-style: normal;
 }
+@font-face {
+  @fontBase64: framework7_skeletonFont();
+  font-family: 'framework7-skeleton';
+  src: url("data:application/font-woff;charset=utf-8;base64, @{fontBase64}") format("woff");
+  font-weight: 300, 400, 500, 600, 700;
+  font-style: normal, italic;
+}
 .rtl({
   html {
     direction: rtl;

diff --git a/packages/core/components/lazy.js b/packages/core/components/lazy.js
diff --git a/packages/core/components/lazy/lazy.d.ts b/packages/core/components/lazy/lazy.d.ts
@@ -19,6 +19,7 @@ export namespace Lazy {
       loadImage(
         /** lazy image or element (element with lazy class). Required. */
         pageEl : HTMLElement | CSSSelector,
+        /** Callback when image is loaded or error loading image happend */
         callback : () => void
       ) : void;
     }
@@ -31,6 +32,8 @@ export namespace Lazy {
       threshold?: number
       /** If enabled, then lazy images will be loaded one by one when they appear in viewport. (default true) */
       sequential?: boolean
+      /** When enabled, it uses IntersectionObserver API (if supported by browser) to detect when image is in viewport. Potentially provides better performance and more accurate intersection detection, but "threshold" parameter will be ignored. (default true) */
+      observer?: boolean
     } | undefined
   }
   interface AppEvents {

diff --git a/packages/core/components/lazy/lazy.js b/packages/core/components/lazy/lazy.js
@@ -1,6 +1,7 @@
 import $ from 'dom7';
 import { window } from 'ssr-window';
 import Utils from '../../utils/utils';
+import Support from '../../utils/support';
 
 const Lazy = {
   destroy(pageEl) {
@@ -15,14 +16,14 @@ const Lazy = {
     const $pageEl = $(pageEl).closest('.page').eq(0);
 
     // Lazy images
-    const lazyLoadImages = $pageEl.find('.lazy');
-    if (lazyLoadImages.length === 0 && !$pageEl.hasClass('lazy')) return;
+    const $lazyLoadImages = $pageEl.find('.lazy');
+    if ($lazyLoadImages.length === 0 && !$pageEl.hasClass('lazy')) return;
 
     // Placeholder
     const placeholderSrc = app.params.lazy.placeholder;
 
     if (placeholderSrc !== false) {
-      lazyLoadImages.each((index, lazyEl) => {
+      $lazyLoadImages.each((index, lazyEl) => {
         if ($(lazyEl).attr('data-src') && !$(lazyEl).attr('src')) $(lazyEl).attr('src', placeholderSrc);
       });
     }
@@ -42,6 +43,43 @@ const Lazy = {
       }
     }
 
+    function observerCallback(entries, observer) {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (app.params.lazy.sequential && imageIsLoading) {
+            if (imagesSequence.indexOf(entry.target) < 0) imagesSequence.push(entry.target);
+            return;
+          }
+          // Load image
+          imageIsLoading = true;
+          app.lazy.loadImage(entry.target, onImageComplete);
+          // Detach
+          observer.unobserve(entry.target);
+        }
+      });
+    }
+    if (app.params.lazy.observer && Support.intersectionObserver) {
+      let observer = $pageEl[0].f7LazyObserver;
+      if (!observer) {
+        observer = new window.IntersectionObserver(observerCallback, {
+          root: $pageEl[0],
+        });
+      }
+      $lazyLoadImages.each((index, el) => {
+        if (el.f7LazyObserverAdded) return;
+        el.f7LazyObserverAdded = true;
+        observer.observe(el);
+      });
+      if (!$pageEl[0].f7LazyDestroy) {
+        $pageEl[0].f7LazyDestroy = () => {
+          observer.disconnect();
+          delete $pageEl[0].f7LazyDestroy;
+          delete $pageEl[0].f7LazyObserver;
+        };
+      }
+      return;
+    }
+
     function lazyHandler() {
       app.lazy.load($pageEl, (lazyEl) => {
         if (app.params.lazy.sequential && imageIsLoading) {
@@ -162,6 +200,7 @@ export default {
       placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXCwsK592mkAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==',
       threshold: 0,
       sequential: true,
+      observer: true,
     },
   },
   create() {
@@ -185,6 +224,7 @@ export default {
     },
     pageAfterIn(page) {
       const app = this;
+      if (app.params.lazy.observer && Support.intersectionObserver) return;
       if (page.$el.find('.lazy').length > 0 || page.$el.hasClass('lazy')) {
         app.lazy.create(page.$el);
       }
@@ -204,6 +244,7 @@ export default {
     },
     tabBeforeRemove(tabEl) {
       const app = this;
+      if (app.params.lazy.observer && Support.intersectionObserver) return;
       const $tabEl = $(tabEl);
       if ($tabEl.find('.lazy').length > 0 || $tabEl.hasClass('lazy')) {
         app.lazy.destroy($tabEl);