Merge pull request #43 from shinsenter/develop

Added option for splash screen, improved helper script

Author: shinsenter

README.md

@@ -97,6 +97,9 @@ $defer = new \shinsenter\Defer();
 $defer->append_defer_js     = false;
 $defer->default_defer_time  = 10;
 
+// Add custom splash screen
+$defer->custom_splash_screen = '<div id="splash">Loading</div>';
+
 // Page optimizations
 $defer->enable_preloading   = true;
 $defer->enable_dns_prefetch = true;

assets/helpers.js

@@ -38,10 +38,14 @@
     var PROJECT_NAME    = 'defer.js';
     var CLASS_PREFIX    = 'defer-';
     var CLASS_SUFFIX    = 'deferjs';
-    var DATA_PREFIX     = 'data-';
+
+    var COPY_COMMON     = 'font-size:14px;color:#fff;'+'padding:2px;border-radius:';
+    var COPY_TEXT       = '%c ' + PROJECT_NAME + ' ';
+    var COPY_STYLE      = COPY_COMMON + '4px;background:#2a313c';
 
     var JQUERY          = 'jQuery';
     var NOOP            = Function();
+    var DATA_PREFIX     = 'data-';
     var GET_ATTRIBUTE   = 'getAttribute';
     var IS_CHROME       = typeof window.chrome == 'object' && window.navigator.userAgent.indexOf('Trident/') == -1;
 
@@ -73,30 +77,22 @@
         t: 10
     };
 
-    var log = (console.log || NOOP)
-        .bind(console);
-    var defer = window.defer || NOOP;
-    var deferimg = window.deferimg || NOOP;
+    var log         = (console.log || NOOP).bind(console);
+    var defer       = window.defer || NOOP;
+    var deferimg    = window.deferimg || NOOP;
     var deferiframe = window.deferiframe || NOOP;
     var old_ready;
 
     function copyright() {
-        var text    = '%c shinsenter %c ' + PROJECT_NAME + ' ';
-        var common  = 'font-size:16px;color:#fff;padding:4px;border-radius:';
-        var style1  = common + '4px 0 0 4px;background:#2a313c';
-        var style2  = common + '0 4px 4px 0;background:#e61e25';
-
         if (IS_CHROME) {
-            log(text, style1, style2);
+            log(COPY_TEXT, COPY_STYLE);
         }
 
         log([
-            'This page was optimized with ' + PROJECT_NAME,
+            'Optimized by ' + PROJECT_NAME,
             '(c) 2019 Mai Nhut Tan <[email protected]>',
-            '',
             'Github:    ' + PROJECT_URL + PROJECT_NAME,
-            'PHP lib:   ' + PROJECT_URL + 'defer.php',
-            'WordPress: https://wordpress.org/plugins/shins-pageload-magic/'
+            'PHP lib:   ' + PROJECT_URL + 'defer.php'
         ].join('\n'));
     }
 

composer.lock

@@ -58,6 +58,18 @@
     ]));
 
     define('DEFER_MINIFY_HTML_IGNORE', 'not(parent::*[self::textarea or self::code or self::pre or self::script])');
+
+    // Splash screen
+
+    define('DEFER_SLASH_TEMPLATE', implode('', [
+        '<style>#deferjs-splash{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}</style>',
+        '<div id="deferjs-splash">%s</div>',
+    ]));
+
+    define('DEFER_SLASH_HIDE_SCRIPT', implode('', [
+        '<noscript><style>#deferjs-splash{display:none}</style></noscript>',
+        '<script>defer(function(){document.getElementById("deferjs-splash").style.display="none"},1)</script>',
+    ]));
 }
 
 abstract class DeferInterface
@@ -68,6 +80,10 @@ abstract class DeferInterface
     const HELPERS_URL    = DEFER_JS_ROOT . '/public/helpers.min.js';
     const INLINE_CSS_URL = DEFER_JS_ROOT . '/public/styles.min.css';
 
+    // For splash screen
+    const SLASH_TEMPLATE       = DEFER_SLASH_TEMPLATE;
+    const SLASH_HIDE_SCRIPT    = DEFER_SLASH_HIDE_SCRIPT;
+
     // Polyfill & library's fingerprint
     const POLYFILL_URL    = 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver';
     const FINGERPRINT_URL = 'https://raw.githubusercontent.com/shinsenter/defer.php/footprint/copyright.txt';

public/helpers.min.js

@@ -51,6 +51,9 @@ protected function optimize()
         $this->addMissingMeta();
         $this->addFingerprint();
 
+        // Add custom splash screen
+        $this->addCustomSplashScreen();
+
         // Minify
         $this->minifyOutputHTML();
     }
@@ -612,6 +615,23 @@ protected function optimizeBackgroundTags()
         }
     }
 
+    /**
+     * Added splash screen
+     *
+     * @since  1.0.15
+     */
+    protected function addCustomSplashScreen()
+    {
+        $splash = $this->custom_splash_screen;
+
+        if (empty($splash)) {
+            return;
+        }
+
+        $this->prependHtml($this->body, sprintf(static::SLASH_TEMPLATE, $splash));
+        $this->appendHtml($this->body, static::SLASH_HIDE_SCRIPT);
+    }
+
     /*
     |--------------------------------------------------------------------------
     | Other helper functions
@@ -755,9 +775,15 @@ protected function getPreloadType($node)
         if (is_a($node, DOMElement::class)) {
             switch ($node->nodeName) {
                 case static::LINK_TAG:
+                    if ($node->hasAttribute(static::ATTR_AS)) {
+                        $as = $node->getAttribute(static::ATTR_AS);
+                        break;
+                    }
+
                     if (in_array($node->getAttribute(static::ATTR_REL), [static::REL_DNSPREFETCH, static::REL_PRECONNECT])) {
                         break;
                     }
+
                     $as = static::PRELOAD_STYLE;
                     break;
                 case static::STYLE_TAG:

src/DeferInterface.php

@@ -30,6 +30,9 @@ trait DeferOptions
         'append_defer_js'         => false,
         'default_defer_time'      => 10,
 
+        // Splash screen
+        'custom_splash_screen'    => '',
+
         // Page optimizations
         'enable_preloading'       => true,
         'enable_dns_prefetch'     => true,