Fix: Refactor Collabora iframe setup for improved readability and maintainability
This commit is contained in:
@@ -406,10 +406,11 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
|
||||
// Build Collabora Online viewer URL with WOPISrc
|
||||
// The WOPISrc must be URL-encoded and kept encoded
|
||||
// We use a double-encoding approach: encodeComponent keeps it encoded through iframe.src
|
||||
final baseUrl = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html';
|
||||
final collaboraUrl = Uri.parse(baseUrl)
|
||||
.replace(queryParameters: {'WOPISrc': wopiSession.wopisrc})
|
||||
.toString();
|
||||
final baseUrl =
|
||||
'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html';
|
||||
final collaboraUrl = Uri.parse(
|
||||
baseUrl,
|
||||
).replace(queryParameters: {'WOPISrc': wopiSession.wopisrc}).toString();
|
||||
|
||||
// Use WebView to display Collabora Online
|
||||
return _buildWebView(collaboraUrl);
|
||||
@@ -460,65 +461,62 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
|
||||
// For Collabora Online, we need to POST the WOPISrc, not GET it
|
||||
// Create an iframe and submit a form to load the document
|
||||
const String viewType = 'collabora-form';
|
||||
|
||||
ui.platformViewRegistry.registerViewFactory(
|
||||
viewType,
|
||||
(int viewId) {
|
||||
// Extract the WOPISrc from the URL
|
||||
final uri = Uri.parse(collaboraUrl);
|
||||
final wopisrc = uri.queryParameters['WOPISrc'] ?? '';
|
||||
|
||||
// Create a container for the form and iframe
|
||||
final container = html.DivElement()
|
||||
..style.width = '100%'
|
||||
..style.height = '100%'
|
||||
..style.margin = '0'
|
||||
..style.padding = '0'
|
||||
..style.overflow = 'hidden';
|
||||
|
||||
// Create the iframe first
|
||||
final iframe = html.IFrameElement()
|
||||
..name = 'collabora-iframe'
|
||||
..style.border = 'none'
|
||||
..style.width = '100%'
|
||||
..style.height = '100%'
|
||||
..style.margin = '0'
|
||||
..style.padding = '0'
|
||||
..setAttribute(
|
||||
'allow',
|
||||
'microphone; camera; usb; autoplay; clipboard-read; clipboard-write',
|
||||
)
|
||||
..setAttribute(
|
||||
'sandbox',
|
||||
'allow-scripts allow-popups allow-forms allow-pointer-lock allow-presentation allow-modals allow-downloads allow-popups-to-escape-sandbox',
|
||||
);
|
||||
|
||||
container.append(iframe);
|
||||
|
||||
// Create a hidden form that will POST to Collabora
|
||||
final form = html.FormElement()
|
||||
..method = 'POST'
|
||||
..action = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html'
|
||||
..target = 'collabora-iframe'
|
||||
..style.display = 'none';
|
||||
|
||||
// Add WOPISrc as a hidden input
|
||||
final wopisrcInput = html.InputElement()
|
||||
..type = 'hidden'
|
||||
..name = 'WOPISrc'
|
||||
..value = wopisrc;
|
||||
|
||||
form.append(wopisrcInput);
|
||||
container.append(form);
|
||||
|
||||
// Use a timer to submit the form after the iframe is fully loaded
|
||||
Future.delayed(const Duration(milliseconds: 100), () {
|
||||
form.submit();
|
||||
});
|
||||
|
||||
return container;
|
||||
},
|
||||
);
|
||||
|
||||
ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
|
||||
// Extract the WOPISrc from the URL
|
||||
final uri = Uri.parse(collaboraUrl);
|
||||
final wopisrc = uri.queryParameters['WOPISrc'] ?? '';
|
||||
|
||||
// Create a container for the form and iframe
|
||||
final container = html.DivElement()
|
||||
..style.width = '100%'
|
||||
..style.height = '100%'
|
||||
..style.margin = '0'
|
||||
..style.padding = '0'
|
||||
..style.overflow = 'hidden';
|
||||
|
||||
// Create the iframe first
|
||||
final iframe = html.IFrameElement()
|
||||
..name = 'collabora-iframe'
|
||||
..style.border = 'none'
|
||||
..style.width = '100%'
|
||||
..style.height = '100%'
|
||||
..style.margin = '0'
|
||||
..style.padding = '0'
|
||||
..setAttribute(
|
||||
'allow',
|
||||
'microphone; camera; usb; autoplay; clipboard-read; clipboard-write',
|
||||
)
|
||||
..setAttribute(
|
||||
'sandbox',
|
||||
'allow-scripts allow-popups allow-forms allow-pointer-lock allow-presentation allow-modals allow-downloads allow-popups-to-escape-sandbox',
|
||||
);
|
||||
|
||||
container.append(iframe);
|
||||
|
||||
// Create a hidden form that will POST to Collabora
|
||||
final form = html.FormElement()
|
||||
..method = 'POST'
|
||||
..action = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html'
|
||||
..target = 'collabora-iframe'
|
||||
..style.display = 'none';
|
||||
|
||||
// Add WOPISrc as a hidden input
|
||||
final wopisrcInput = html.InputElement()
|
||||
..type = 'hidden'
|
||||
..name = 'WOPISrc'
|
||||
..value = wopisrc;
|
||||
|
||||
form.append(wopisrcInput);
|
||||
container.append(form);
|
||||
|
||||
// Use a timer to submit the form after the iframe is fully loaded
|
||||
Future.delayed(const Duration(milliseconds: 100), () {
|
||||
form.submit();
|
||||
});
|
||||
|
||||
return container;
|
||||
});
|
||||
|
||||
return HtmlElementView(viewType: viewType);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user