From ceaf5923a226199be1396976f0dad32c8f884cf2 Mon Sep 17 00:00:00 2001
From: Jan Tojnar <jtojnar@gmail.com>
Date: Sun, 21 Jun 2020 03:34:05 +0200
Subject: [PATCH] helpers\ImageLazifier: use data attribute

Use `data-selfoss-src` attribute instead of the invalid `ref` attribute.
---
 assets/js/lazy-image-loader.js      | 2 +-
 src/helpers/ViewHelper.php          | 4 ++--
 tests/Helpers/ImageLazifierTest.php | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/assets/js/lazy-image-loader.js b/assets/js/lazy-image-loader.js
index c6b66ee84f..9c559ce69b 100644
--- a/assets/js/lazy-image-loader.js
+++ b/assets/js/lazy-image-loader.js
@@ -6,7 +6,7 @@ import jQuery from 'jquery';
 (function($) {
     $.fn.lazyLoadImages = function() {
         $(this).find('img').each(function(i, self) {
-            $(self).attr('src', $(self).attr('ref'));
+            $(self).attr('src', $(self).attr('data-selfoss-src'));
         });
     };
 })(jQuery);
diff --git a/src/helpers/ViewHelper.php b/src/helpers/ViewHelper.php
index fe0c4b2069..9c42c4f6e1 100644
--- a/src/helpers/ViewHelper.php
+++ b/src/helpers/ViewHelper.php
@@ -36,7 +36,7 @@ public static function highlight($content, $searchWords) {
     }
 
     /**
-     * removes img src attribute and saves the value in ref for
+     * removes img src attribute and saves the value in data attribute for
      * loading it later
      *
      * @param string $content which contains img tags
@@ -68,7 +68,7 @@ public static function lazyimg($content) {
 
             $placeholder = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='$width' height='$height'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>";
 
-            return "<img src=\"$placeholder\"{$matches['pre']}ref=\"{$matches['src']}\"{$matches['post']}>";
+            return "<img src=\"$placeholder\"{$matches['pre']}data-selfoss-src=\"{$matches['src']}\"{$matches['post']}>";
         }, $content);
     }
 
diff --git a/tests/Helpers/ImageLazifierTest.php b/tests/Helpers/ImageLazifierTest.php
index f3416c37bd..9005b6d67f 100644
--- a/tests/Helpers/ImageLazifierTest.php
+++ b/tests/Helpers/ImageLazifierTest.php
@@ -14,7 +14,7 @@ public function testBasic() {
 <img foo bar src="https://example.org/example.jpg" alt="" width="900" height="400">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='400'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" foo bar ref="https://example.org/example.jpg" alt="" width="900" height="400">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='400'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" foo bar data-selfoss-src="https://example.org/example.jpg" alt="" width="900" height="400">
 EOD;
 
         $this->assertEquals(
@@ -31,7 +31,7 @@ public function testWidthMissing() {
 <img src="https://example.org/example.jpg" height="300">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" ref="https://example.org/example.jpg" height="300">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" data-selfoss-src="https://example.org/example.jpg" height="300">
 EOD;
 
         $this->assertEquals(
@@ -48,7 +48,7 @@ public function testHeightMissing() {
 <img src="https://example.org/example.jpg" width="400">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" ref="https://example.org/example.jpg" width="400">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" data-selfoss-src="https://example.org/example.jpg" width="400">
 EOD;
 
         $this->assertEquals(
@@ -65,7 +65,7 @@ public function testDimensionsMissing() {
 <img src="https://example.org/example.jpg">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" ref="https://example.org/example.jpg">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" data-selfoss-src="https://example.org/example.jpg">
 EOD;
 
         $this->assertEquals(