TF-335 Open links in another tab in email detail view on browser

This commit is contained in:
dab246
2022-03-28 16:19:03 +07:00
committed by Dat H. Pham
parent 00f9102408
commit 5a009f13e7
3 changed files with 87 additions and 49 deletions
@@ -1,14 +1,13 @@
import 'dart:async';
import 'dart:convert';
import 'dart:math';
import 'dart:math' as math;
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/html_viewer/html_viewer_controller_for_web.dart';
import 'package:core/utils/app_logger.dart';
import 'package:flutter/material.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:universal_html/html.dart' as html;
import 'package:core/presentation/utils/shims/dart_ui.dart' as ui;
import 'package:core/utils/app_logger.dart' as logger;
class HtmlContentViewerOnWeb extends StatefulWidget {
@@ -55,7 +54,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
}
String _getRandString(int len) {
var random = Random.secure();
var random = math.Random.secure();
var values = List<int>.generate(len, (i) => random.nextInt(255));
return base64UrlEncode(values);
}
@@ -64,6 +63,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
final htmlScripts = '''
<script type="text/javascript">
window.parent.addEventListener('message', handleMessage, false);
window.addEventListener('click', handleOnClickLink, true);
function handleMessage(e) {
if (e && e.data && e.data.includes("toIframe:")) {
@@ -87,6 +87,27 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
}
}
}
function handleOnClickLink(e) {
var link = e.target;
console.log("handleOnClickLink: " + link);
if (link && isValidHttpUrl(link)) {
window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: OpenLink", "url": "" + link}), "*");
e.preventDefault();
}
}
function isValidHttpUrl(string) {
let url;
try {
url = new URL(string);
} catch (_) {
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
</script>
''';
@@ -102,7 +123,9 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
min-height: ${minHeight}px;
min-width: ${minWidth}px;
color: #000000;
font-family: verdana;
font-family: Inter;
font-size: 16px;
font-style: normal;
}
table {
width: 100%;
@@ -137,6 +160,8 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
..srcdoc = _htmlData ?? ''
..style.border = 'none'
..style.overflow = 'hidden'
..style.width = '100%'
..style.height = '100%'
..onLoad.listen((event) async {
final dataGetHeight = <String, Object>{'type': 'toIframe: getHeight', 'view' : createdViewId};
final dataGetWidth = <String, Object>{'type': 'toIframe: getWidth', 'view' : createdViewId};
@@ -145,9 +170,6 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
final jsonGetHeight = jsonEncoder.convert(dataGetHeight);
final jsonGetWidth = jsonEncoder.convert(dataGetWidth);
logger.log('HtmlContentViewerOnWeb() | onLoad | jsonGetHeight: $jsonGetHeight');
logger.log('HtmlContentViewerOnWeb() | onLoad | jsonGetWidth: $jsonGetWidth');
html.window.postMessage(jsonGetHeight, '*');
html.window.postMessage(jsonGetWidth, '*');
@@ -155,7 +177,6 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
var data = json.decode(event.data);
if (data['type'] != null && data['type'].contains('toDart: htmlHeight') && data['view'] == createdViewId) {
final docHeight = data['height'] ?? actualHeight;
logger.log('HtmlContentViewerOnWeb() | onMessage | docHeight: $docHeight');
if (docHeight != null && mounted) {
final scrollHeightWithBuffer = docHeight + 30.0;
if (scrollHeightWithBuffer > minHeight) {
@@ -174,7 +195,6 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
if (data['type'] != null && data['type'].contains('toDart: htmlWidth') && data['view'] == createdViewId) {
final docWidth = data['width'] ?? actualWidth;
logger.log('HtmlContentViewerOnWeb() | onMessage | docWidth: $docWidth');
if (docWidth != null && mounted) {
if (docWidth > minWidth) {
setState(() {
@@ -192,6 +212,14 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
curve: Curves.easeIn);
}
}
if (data['type'] != null && data['type'].contains('toDart: OpenLink') && data['view'] == createdViewId) {
final link = data['url'];
if (link != null && mounted) {
log('_HtmlContentViewerOnWebState::_setUpWeb(): OpenLink: $link');
html.window.open('$link', '_blank');
}
}
});
});
@@ -214,10 +242,6 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
width: actualWidth,
child: _buildWebView(),
),
PointerInterceptor(child: SizedBox(
height: actualHeight,
width: actualWidth,
)),
if (_isLoading) _buildLoadingView()
],
);
+47 -28
View File
@@ -15,7 +15,6 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_fil
import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_item_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/user_setting_popup_menu_mixin.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -156,19 +155,27 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
color: Colors.white,
margin: EdgeInsets.zero,
alignment: Alignment.topCenter,
child: Obx(() => emailController.currentEmail != null
? SingleChildScrollView(
physics : ClampingScrollPhysics(),
child: Container(
margin: EdgeInsets.zero,
width: double.infinity,
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
child: _buildEmailMessage(context)
))
: Center(child: _buildEmailEmpty(context))
)
child: Obx(() {
if (emailController.currentEmail != null) {
if (kIsWeb) {
return _buildEmailMessage(context);
} else {
return SingleChildScrollView(
physics : ClampingScrollPhysics(),
child: Container(
margin: EdgeInsets.zero,
width: double.infinity,
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
child: _buildEmailMessage(context)
)
);
}
} else {
return Center(child: _buildEmailEmpty(context));
}
})
);
}
@@ -184,6 +191,9 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
padding: EdgeInsets.only(right: 16),
child: SelectableText(
'${emailController.mailboxDashBoardController.selectedEmail.value?.getEmailTitle()}',
maxLines: 3,
minLines: 1,
cursorColor: AppColor.colorTextButton,
style: TextStyle(
fontSize: 20,
color: AppColor.colorNameEmail,
@@ -193,15 +203,12 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
Widget _buildEmailMessage(BuildContext context) {
return Container(
padding: EdgeInsets.only(bottom: 16, left: 16, right: 16, top: 10),
padding: EdgeInsets.only(left: 16, right: 16, top: 10),
alignment: Alignment.center,
color: Colors.white,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
@@ -220,7 +227,10 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
: SizedBox.shrink()),
_buildDivider(edgeInsets: EdgeInsets.only(top: 8)),
_buildAttachments(context),
_buildListEmailContent(context, constraints),
if (kIsWeb)
Expanded(child: _buildEmailContent(context, constraints))
else
_buildEmailContent(context, constraints),
],
);
})
@@ -502,7 +512,7 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
);
}
Widget _buildListEmailContent(BuildContext context, BoxConstraints constraints) {
Widget _buildEmailContent(BuildContext context, BoxConstraints constraints) {
return Obx(() => emailController.viewState.value.fold(
(failure) => SizedBox.shrink(),
(success) {
@@ -510,14 +520,23 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
return EmailContentPlaceHolderLoading(responsiveUtils: responsiveUtils);
} else {
if (emailController.emailContents.isNotEmpty) {
return Column(children: [
...emailController.emailContents.map((content) => EmailContentItemBuilder(
context,
content,
constraints,
loadingWidget: EmailContentPlaceHolderLoading(responsiveUtils: responsiveUtils)
).build()).toList(),
]);
final allEmailContents = emailController.emailContents
.map((emailContent) => emailContent.asHtml)
.toList()
.join('<br>');
if (kIsWeb) {
return HtmlContentViewerOnWeb(
widthContent: constraints.maxWidth,
heightContent: MediaQuery.of(context).size.height,
contentHtml: allEmailContents,
controller: HtmlViewerControllerForWeb());
} else {
return HtmlContentViewer(
widthContent: MediaQuery.of(context).size.width,
contentHtml: allEmailContents,
loadingWidget: EmailContentPlaceHolderLoading(responsiveUtils: responsiveUtils));
}
} else {
return SizedBox.shrink();
}
@@ -33,19 +33,14 @@ class EmailContentItemBuilder {
}
Widget _buildItem() {
log('EmailContentItemBuilder() | maxWidth: ${_constraints.maxWidth}');
log('EmailContentItemBuilder() | heightScreen: ${MediaQuery.of(_context).size.height}');
switch(_emailContent.type) {
case EmailContentType.textHtml:
if (kIsWeb) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: HtmlContentViewerOnWeb(
return HtmlContentViewerOnWeb(
widthContent: _constraints.maxWidth,
heightContent: MediaQuery.of(_context).size.height,
contentHtml: _emailContent.content,
controller: HtmlViewerControllerForWeb()),
);
controller: HtmlViewerControllerForWeb());
} else {
return HtmlContentViewer(
widthContent: MediaQuery.of(_context).size.width,