Add lazyLoad module

www/.eslintrc

@@ -75,7 +75,7 @@
         "XMLHttpRequest": true,
         "ActiveXObject": true,
         "FileReader": true,
-        "Element": true
-
+        "Element": true,
+        "Image" : true
     }
 }

www/application/views/templates/landings/editor.php

@@ -251,17 +251,19 @@
         <div class="editor-landing__plugins-description">
             Plugins can represent any Blocks: Quotes, Galleries, Polls, Embeds, Tables — anything you need. Also they can implement Inline Tools such as Marker, Term, Comments etc.
         </div>
-        <div class="editor-landing__plugins-filter" data-module="pluginsFilter">
+        <div class="editor-landing__plugins-filter" data-module="pluginsFilter lazyLoad">
             <textarea name="module-settings" hidden>
-                {
-                    "inlineFilterButtonClass" : ".js-inline-tools-filter",
-                    "blockFilterButtonClass" : ".js-block-tools-filter",
-                    "allToolsFilterButtonClass" : ".js-all-tools-filter",
-                    "blockToolsClass" : ".js-block-tool",
-                    "inlineToolsClass" : ".js-inline-tool"
-                }
+                [
+                    {
+                        "inlineFilterButtonClass" : ".js-inline-tools-filter",
+                        "blockFilterButtonClass" : ".js-block-tools-filter",
+                        "allToolsFilterButtonClass" : ".js-all-tools-filter",
+                        "blockToolsClass" : ".js-block-tool",
+                        "inlineToolsClass" : ".js-inline-tool"
+                    },
+                    {}
+                ]
             </textarea>
-
             <span class="editor-landing__plugins-filter-button js-block-tools-filter">
                 <? include(DOCROOT . '/public/app/landings/editor/svg/plus-icon.svg'); ?>
                 Blocks
@@ -277,13 +279,15 @@
         <? foreach ( $plugins as $plugin ): ?>
             <div class="editor-plugin clearfix <?= $plugin['type'] === 'Block' ? 'js-block-tool' : 'js-inline-tool' ?>">
                 <div class="editor-plugin__demo">
-                    <? if (strpos($plugin['demo'], 'mp4') === false): ?>
-                        <img src="<?= $plugin['demo'] ?>" alt="<?= $plugin['name'] ?>">
-                    <? else: ?>
-                        <video autoplay loop muted playsinline>
-                            <source src="<?= $plugin['demo'] ?>" type="video/mp4">
-                        </video>
-                    <? endif; ?>
+                    <div class="lazy-load js_lazy-load">
+                        <? if (strpos($plugin['demo'], 'mp4') === false): ?>
+                            <img class="lazy-load__media js_lazy-media" src="<?= $plugin['demo'] ?>" alt="<?= $plugin['name'] ?>">
+                        <? else: ?>
+                            <video class="lazy-load__media js_lazy-media" autoplay loop muted playsinline>
+                                <source src="<?= $plugin['demo'] ?>" type="video/mp4">
+                            </video>
+                        <? endif; ?>
+                    </div>
                 </div>
                 <a href="<?= $plugin['url'] ?>" target="_blank">
                     <h3 class="editor-plugin__title">

www/public/app/css/components/lazy-load.css

@@ -0,0 +1,13 @@
+.lazy-load {
+    background: #f7fafb;
+    border-radius: 3px;
+
+    &__media {
+        opacity: 0;
+        transition: opacity 0.6s ease;
+    }
+
+    &--loaded > &__media {
+        opacity: 1;
+    }
+}

www/public/app/css/main.css

@@ -34,6 +34,7 @@
 @import './components/video-overlay.css';
 @import './components/follow-telegram.css';
 @import './components/join.css';
+@import './components/lazy-load.css';
 
 /**
  * Pages

www/public/app/js/main.js

@@ -136,5 +136,8 @@ codex.editorLanding = new EditorLanding();
 import ArticleCreate from './modules/articleCreate';
 codex.articleCreate = new ArticleCreate();
 
+import LazyLoad from './modules/lazyLoad';
+codex.lazyLoad = new LazyLoad();
+
 module.exports = codex;
 

www/public/app/js/modules/lazyLoad.js

@@ -0,0 +1,103 @@
+/**
+ * Module for lazy-loading images & videos
+ */
+export default class LazyLoad {
+
+    /**
+     * Classes used in module
+     */
+    static get classes() {
+
+        return {
+            wrapper: 'js_lazy-load',
+            loaded: 'lazy-load--loaded',
+            item: 'js_lazy-media'
+        };
+
+    }
+
+    /**
+     * Initialize module
+     */
+    init() {
+
+        this.loadMedia();
+
+    }
+
+    /**
+     * Find media targets on page and apply to them various lazy-loading technique depending on type: image or video
+     */
+    loadMedia() {
+
+        const items = document.querySelectorAll(`.${LazyLoad.classes.item}`);
+
+        items.forEach((item) => {
+
+            switch (item.tagName) {
+
+                case 'IMG':
+                    this.loadImage(item);
+                    break;
+                case 'VIDEO':
+                    this.loadVideo(item);
+                    break;
+
+            }
+
+        });
+
+    }
+
+    /**
+     * Images lazy-loading technique
+     * @param {HTMLElement} element - target image
+     */
+    loadImage(element) {
+
+        /**
+         * Create temporary image with real image src.
+         * When temporary image is loaded, reveal real image
+         */
+        const tempImage = new Image();
+
+        tempImage.src = element.src;
+        tempImage.onload = () => {
+
+            this.addLoadedClass(element);
+
+        };
+
+    }
+
+    /**
+     * Videos lazy-loading technique
+     * @param {HTMLElement} element - target video
+     */
+    loadVideo(element) {
+
+        const tempVideo = document.createElement('video');
+        const tempVideoSource = document.createElement('source');
+
+        tempVideoSource.src = element.querySelector('source').src;
+        tempVideo.appendChild(tempVideoSource);
+
+        tempVideo.onloadeddata = () => {
+
+            this.addLoadedClass(element);
+
+        };
+
+    }
+
+    /**
+     * Add loaded class when element is ready
+     * @param {HTMLElement} element - media target
+     */
+    addLoadedClass(element) {
+
+        element.closest(`.${LazyLoad.classes.wrapper}`).classList.add(LazyLoad.classes.loaded);
+
+    }
+
+}