eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-341 Show view flyover for links in Email Detail

Browse Source
This commit is contained in:
dab246
2022-04-12 17:19:07 +07:00
committed by Dat H. Pham
parent b4fd1ce5e5
commit 33c6d01bda
2 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/html_transformer/dom/link_transformers.dart
+16
View File
@@ -1,6 +1,7 @@
import 'package:core/data/network/dio_client.dart'; import 'package:core/data/network/dio_client.dart';
import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart'; import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
import 'package:core/utils/app_logger.dart';
import 'package:html/dom.dart'; import 'package:html/dom.dart';
class EnsureRelationNoReferrerTransformer extends DomTransformer { class EnsureRelationNoReferrerTransformer extends DomTransformer {
@@ -17,6 +18,21 @@ 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'];
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) {
return '''
${text.isNotEmpty ? text : url}
<span class="tooltiptext">$url</span>
''';
}
} }
core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart
+35 -3
View File
@@ -93,15 +93,22 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
} }
function handleOnClickLink(e) { function handleOnClickLink(e) {
var link = e.target; let link = e.target;
let textContent = e.target.textContent;
console.log("handleOnClickLink: " + link); console.log("handleOnClickLink: " + link);
if (link && isValidHttpUrl(link)) { console.log("handleOnClickLink: " + textContent);
if (link && isValidUrl(link)) {
window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: OpenLink", "url": "" + link}), "*"); window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: OpenLink", "url": "" + link}), "*");
e.preventDefault(); e.preventDefault();
} else if (textContent && isValidUrl(textContent)) {
window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: OpenLink", "url": "" + textContent}), "*");
e.preventDefault();
} else {
e.preventDefault();
} }
} }
function isValidHttpUrl(string) { function isValidUrl(string) {
let url; let url;
try { try {
@@ -115,6 +122,30 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
</script> </script>
'''; ''';
final tooltipLinkCss = '''
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
max-width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 8px 5px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
''';
final htmlTemplate = ''' final htmlTemplate = '''
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@@ -143,6 +174,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
padding: 13px; padding: 13px;
margin: 0px; margin: 0px;
} }
$tooltipLinkCss
</style> </style>
$htmlScripts $htmlScripts
</head> </head>