Merge pull request #16 from magepal/clockworkgeek-mage-init

Add individual data-mage-init attributes
magepal · Jan 14, 2021 · 4e685f3 · 4e685f3
2 parents ee77e07 + f293e60
commit 4e685f3
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 370 deletions.
diff --git a/Block/Adminhtml/System/Config/Form/Composer/Version.php b/Block/Adminhtml/System/Config/Form/Composer/Version.php
diff --git a/Block/Adminhtml/System/Config/Form/Module/Version.php b/Block/Adminhtml/System/Config/Form/Module/Version.php
diff --git a/Block/Js.php b/Block/Js.php
diff --git a/Plugin/Block/Product/ImagePlugin.php b/Plugin/Block/Product/ImagePlugin.php
@@ -11,10 +11,6 @@
 use Magento\Catalog\Block\Product\Image;
 use MagePal\CatalogLazyLoad\Helper\Data;
 
-/**
- * Class ImagePlugin
- * @package MagePal\CatalogLazyLoad\Plugin\Block\Product
- */
 class ImagePlugin
 {
     /** @var Data */
@@ -31,46 +27,43 @@ public function __construct(
 
     /**
      * @param Image $subject
-     * @param Closure $proceed
-     * @return mixed
+     * @param string $result
+     * @return string
      */
-    public function aroundToHtml(Image $subject, Closure $proceed)
+    public function afterToHtml(Image $subject, $result)
     {
         if ($this->helper->isEnabled() && $this->helper->applyLazyLoad()) {
-            $orgImageUrl = $subject->getImageUrl();
-            $subject->setImageUrl('');
-
-            //Magento 2.4.0
-            if (is_array($subject->getCustomAttributes())) {
-                $customAttributes = array_merge(
-                    $subject->getCustomAttributes(),
-                    ['magepal-data-original' => 'placeholder']
-                );
-            } else {
-                $customAttributes = trim(
-                    $subject->getCustomAttributes() . 'magepal-data-original'
-                );
-            }
 
-            $subject->setCustomAttributes($customAttributes);
+            $result = preg_replace_callback(
+                '#<img(?:\s+[-\w]+=(?:"[^"]*"|\'[^\']*\'))+\s*/>#mu',
+                function ($matches) {
+                    $img = $matches[0];
+                    $search = [' src="'];
+                    $replace = [' data-original="'];
 
-            $result = $proceed();
+                    if (strpos($img, 'class=') === false) {
+                        $search[] = '/>';
+                        $replace[] = ' class="swatch-option-loading" />';
+                    } else {
+                        $search[] = ' class="';
+                        $replace[] = ' class="swatch-option-loading ';
+                    }
 
-            $find = [
-                'img class="',
-                'magepal-data-original="placeholder"',
-                'magepal-data-original'
-            ];
+                    if (strpos($img, 'data-mage-init=') === false) {
+                        $search[] = '/>';
+                        $replace[] = ' data-mage-init=\'{"MagePalLazyLoad":{}}\' />';
+                    } else {
+                        $search[] = ' data-mage-init=\'{';
+                        $replace[] = ' data-mage-init=\'{"MagePalLazyLoad":{},';
+                    }
 
-            $replace = [
-                'img class="lazy swatch-option-loading ',
-                sprintf(' data-original="%s"', $orgImageUrl),
-                sprintf(' data-original="%s"', $orgImageUrl)
-            ];
-
-            return str_replace($find, $replace, $result);
-        } else {
-            return $proceed();
+                    return str_replace($search, $replace, $img);
+                },
+                $result
+            );
         }
+
+        return $result;
     }
 }
+
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ Unlike other Lazy Load extensions for Magento, our extension take into considera
 This is important because:
 
 1. Your site will appear to load much faster to your customer because they won't have to wait for Javascript to activate your images.
-2. Your products images will start to display immediately as your browser fetches them, instead of waiting for Javascript to activate them which will normally cause 1-5 seconds delay and largely depended on the speed of your customer's computer.
+2. Your products image will start to display immediately as your browser fetches them, instead of waiting for Javascript to activate them which will normally cause 1-5 seconds delay and largely depended on the speed of your customer's computer.
 3. On subsequences visit, your top 'x' images just appear because they are already cached, while other extensions will still delay loading. 
 
 You can quickly and easily configure the number of images to show instantly base on your site need in our configurable in system configuration.
@@ -78,4 +78,4 @@ Magento 2 Extensions
 - [Order Confirmation Page Miscellaneous Scripts](https://www.magepal.com/magento2/extensions/order-confirmation-miscellaneous-scripts-for-magento-2.html)
 - [HTML Minifier for Magento2](https://www.magepal.com/magento2/extensions/html-minifier.html)
 
-© MagePal LLC. | [www.magepal.com](https:/www.magepal.com)
+© MagePal LLC. | [www.magepal.com](https://www.magepal.com)
diff --git a/composer.json b/composer.json
@@ -19,10 +19,10 @@
         "php": "~5.6.0|7.0.2|7.0.4|~7.0.6|~7.1.0|~7.1.3|~7.2.0|~7.3.0|~7.4.0",
         "magento/module-backend": "100.0.*|100.1.*|100.2.*|101.0.*|102.0.*",
         "magento/framework": "100.0.*|100.1.*|101.0.*|102.0.*|103.0.*",
-        "magepal/magento2-core":">1.1.0"
+        "magepal/magento2-core":">=1.1.9"
     },
     "type": "magento2-module",
-    "version": "1.7.2",
+    "version": "1.8.0",
     "license": [
         "proprietary"
     ],