From e2de23fdfd945d9452c2dd02102fd6b9fb78204e Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 16 Aug 2023 12:30:49 +0700 Subject: [PATCH] TF-1961 Add script handle lazy loading image in html (cherry picked from commit b57c93f47dc7c621e24506818d44b6360a9b9239) --- .../dom/image_transformers.dart | 9 +++++ .../utils/html_transformer/html_template.dart | 2 +- .../utils/html_transformer/html_utils.dart | 33 +++++++++++++++++++ .../html_content_viewer_on_web_widget.dart | 3 +- .../html_content_viewer_widget.dart | 13 ++++---- 5 files changed, 52 insertions(+), 8 deletions(-) diff --git a/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart b/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart index c65c2e254..e5e1874be 100644 --- a/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart +++ b/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart @@ -39,6 +39,15 @@ class ImageTransformer extends DomTransformer { imageSource: src ); imageElement.attributes['src'] = imageBase64 ?? src; + } else if (src.startsWith('https://') || src.startsWith('http://')) { + final classAttribute = imageElement.attributes['class']; + if (classAttribute != null) { + imageElement.attributes['class'] = '$classAttribute lazy-loading'; + } else { + imageElement.attributes['class'] = 'lazy-loading'; + } + imageElement.attributes['data-src'] = src; + imageElement.attributes.remove('src'); } })); } diff --git a/core/lib/presentation/utils/html_transformer/html_template.dart b/core/lib/presentation/utils/html_transformer/html_template.dart index 2e8a875a8..44e303de1 100644 --- a/core/lib/presentation/utils/html_transformer/html_template.dart +++ b/core/lib/presentation/utils/html_transformer/html_template.dart @@ -54,10 +54,10 @@ String generateHtml(String content, { ''' : ''} ${styleCSS ?? ''} - ${javaScripts ?? ''}
$content
+ ${javaScripts ?? ''} '''; diff --git a/core/lib/presentation/utils/html_transformer/html_utils.dart b/core/lib/presentation/utils/html_transformer/html_utils.dart index c148b3bd2..d1c659265 100644 --- a/core/lib/presentation/utils/html_transformer/html_utils.dart +++ b/core/lib/presentation/utils/html_transformer/html_utils.dart @@ -68,6 +68,39 @@ class HtmlUtils { } '''; + static const scriptLazyLoadImage = ''' + + '''; + static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) { if (PlatformInfo.isWeb) { return ''' diff --git a/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart b/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart index 7c8202df2..1bdb229b7 100644 --- a/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart +++ b/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart @@ -4,6 +4,7 @@ import 'dart:math' as math; import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/utils/html_transformer/html_template.dart'; +import 'package:core/presentation/utils/html_transformer/html_utils.dart'; import 'package:core/presentation/views/html_viewer/html_viewer_controller_for_web.dart'; import 'package:core/utils/app_logger.dart'; import 'package:flutter/cupertino.dart'; @@ -171,7 +172,7 @@ class _HtmlContentViewerOnWebState extends State { minHeight: minHeight, minWidth: minWidth, styleCSS: tooltipLinkCss, - javaScripts: webViewActionScripts + scriptsDisableZoom, + javaScripts: webViewActionScripts + scriptsDisableZoom + HtmlUtils.scriptLazyLoadImage, direction: widget.direction); return htmlTemplate; diff --git a/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart b/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart index e2d876c4c..56e60c9fb 100644 --- a/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart +++ b/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart @@ -65,7 +65,11 @@ class _HtmlContentViewState extends State { void initState() { super.initState(); actualHeight = widget.heightContent; - _htmlData = generateHtml(widget.contentHtml, direction: widget.direction); + _htmlData = generateHtml( + widget.contentHtml, + direction: widget.direction, + javaScripts: HtmlUtils.scriptLazyLoadImage, + ); } @override @@ -76,7 +80,8 @@ class _HtmlContentViewState extends State { widget.direction != oldWidget.direction) { _htmlData = generateHtml( widget.contentHtml, - direction: widget.direction + direction: widget.direction, + javaScripts: HtmlUtils.scriptLazyLoadImage, ); } } @@ -176,8 +181,6 @@ class _HtmlContentViewState extends State { actualHeight = minHeight; } } - - return Future.value(null); } Future _setActualWidthView() async { @@ -210,8 +213,6 @@ class _HtmlContentViewState extends State { widget.onWebViewLoaded?.call(isScrollActivated); } } - - return Future.value(null); } void _hideLoadingProgress() {