Fix show view flyover for links in Email Detail

This commit is contained in:
dab246
2022-04-13 11:06:19 +07:00
committed by Dat H. Pham
parent 33c6d01bda
commit ec1e3fb075
4 changed files with 24 additions and 20 deletions
@@ -4,9 +4,9 @@ import 'package:core/presentation/utils/html_transformer/base/dom_transformer.da
import 'package:core/utils/app_logger.dart'; import 'package:core/utils/app_logger.dart';
import 'package:html/dom.dart'; import 'package:html/dom.dart';
class EnsureRelationNoReferrerTransformer extends DomTransformer { class LinkTransformer extends DomTransformer {
const EnsureRelationNoReferrerTransformer(); const LinkTransformer();
@override @override
Future<void> process( Future<void> process(
@@ -18,20 +18,28 @@ class EnsureRelationNoReferrerTransformer extends DomTransformer {
final linkElements = document.getElementsByTagName('a'); final linkElements = document.getElementsByTagName('a');
await Future.wait(linkElements.map((linkElement) async { await Future.wait(linkElements.map((linkElement) async {
linkElement.attributes['rel'] = 'noopener noreferrer'; linkElement.attributes['rel'] = 'noopener noreferrer';
final tagClass = linkElement.attributes['class']; _addToolTipWhenHoverLink(linkElement);
linkElement.attributes['class'] = '$tagClass tooltip';
final url = linkElement.attributes['href'];
final text = linkElement.text;
if (url != null && url.isNotEmpty) {
linkElement.innerHtml = textHasToolTip(text, url);
}
log('EnsureRelationNoReferrerTransformer::process(): ${linkElement.outerHtml}');
})); }));
} }
String textHasToolTip(String text, String? url) { void _addToolTipWhenHoverLink(Element element) {
log('LinkTransformer::_addToolTipWhenHoverLink(): Before: ${element.outerHtml}');
final url = element.attributes['href'];
final text = element.text;
final children = element.children;
if (children.isEmpty && text.isNotEmpty && url?.isNotEmpty == true) {
final innerHtml = element.innerHtml;
final tagClass = element.attributes['class'];
element.attributes['class'] = '$tagClass tooltip';
if (text.isNotEmpty && url != null && url.isNotEmpty) {
element.innerHtml = innerHtml + textHasToolTip(url);
}
log('LinkTransformer::_addToolTipWhenHoverLink(): After: ${element.outerHtml}');
}
}
String textHasToolTip(String url) {
return ''' return '''
${text.isNotEmpty ? text : url}
<span class="tooltiptext">$url</span> <span class="tooltiptext">$url</span>
'''; ''';
} }
@@ -3,14 +3,14 @@ import 'package:core/data/network/dio_client.dart';
import 'package:html/dom.dart'; import 'package:html/dom.dart';
import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart'; import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
class ViewPortTransformer extends DomTransformer { class MetaTransformer extends DomTransformer {
static final Element _viewPortMetaElement = Element.html( static final Element _viewPortMetaElement = Element.html(
'<meta name="viewport" content="width=device-width, initial-scale=1.0">'); '<meta name="viewport" content="width=device-width, initial-scale=1.0">');
static final Element _contentTypeMetaElement = Element.html( static final Element _contentTypeMetaElement = Element.html(
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'); '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">');
const ViewPortTransformer(); const MetaTransformer();
@override @override
Future<void> process( Future<void> process(
@@ -58,10 +58,10 @@ class TransformConfiguration {
static const int? standardMaxImageWidth = null; static const int? standardMaxImageWidth = null;
static const List<DomTransformer> standardDomTransformers = [ static const List<DomTransformer> standardDomTransformers = [
ViewPortTransformer(), MetaTransformer(),
RemoveScriptTransformer(), RemoveScriptTransformer(),
ImageTransformer(), ImageTransformer(),
EnsureRelationNoReferrerTransformer(), LinkTransformer(),
BlockQuotedTransformer(), BlockQuotedTransformer(),
]; ];
@@ -123,10 +123,6 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
'''; ''';
final tooltipLinkCss = ''' final tooltipLinkCss = '''
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
max-width: 400px; max-width: 400px;