Update to @nextcloud/dialogs v5.3.5 and @nextcloud/vue v8.15.0 and on…

…e page usage init

Signed-off-by: Thatoo <thatoo@leprette.fr>

.eslintrc.js

@@ -12,6 +12,8 @@ module.exports = {
 		'jsdoc/require-jsdoc': 'off',
 		'jsdoc/tag-lines': 'off',
 		'vue/first-attribute-linebreak': 'off',
+		'no-console': 'off',
+		"import/no-unresolved": ["error", { "ignore": ["\\?raw"] }],
 		'import/extensions': 'off'
 	}
 }

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Changed
+- Single page dialog picker
 
 ## 1.0.10 - 2024-08-21
 ### Fixed

README.md

@@ -57,3 +57,40 @@ If the file file you selected is supported by Nextcloud Text, Nextcloud Office o
 you will be able to collaborate on this file with all the call participants.
 
 You can then press "Close for all" if you want to hide the app for all participants.
+
+## Copy link to Clipboard and close the window/iframe
+
+It is possible to launch a specific picker interface with a button that would close automatically after copying to the clipboard the desired link. To do so, you can either launch it in a new window with the following code : 
+
+```javascript
+newButton.onclick = () => {
+  pickerWindow = window.open('https://example.com/index.php/apps/picker/single-link?option=Clipboard', 'pickerWindow', 'popup');
+};
+```
+or launch it in an iframe with the following code : 
+```javascript
+newButton.onclick = () => {
+  // Create the iframe element
+  var pickerFrame = document.createElement('iframe');
+  pickerFrame.id = 'pickerFrame';
+  pickerFrame.src = 'https://example.com/index.php/apps/picker/single-link?option=Clipboard'; // Set the source URL
+  pickerFrame.style.height = '800px'; // set the height
+  pickerFrame.style.width = '800px'; // set the width
+  pickerFrame.style.maxHeight = '80vh'; // set max height to display on mobile
+  pickerFrame.style.maxWidth = '100%'; // set max width to display on mobile
+  pickerFrame.style.border = 'none'; // Remove the default border
+  // Set the iframe styles to position it in the middle and on top
+  pickerFrame.style.position = 'fixed';
+  pickerFrame.style.top = '50%';
+  pickerFrame.style.left = '50%';
+  pickerFrame.style.transform = 'translate(-50%, -50%)';
+  pickerFrame.style.zIndex = 9999; // Adjust this value as needed
+  // Append the iframe to the document body
+  document.body.appendChild(pickerFrame);
+};
+// This method needs to be top-level to be accessible by the iframe via the parent window accessor.
+function closePickerIframe() {
+  const pickerFrame = document.getElementById('pickerFrame');
+  document.body.removeChild(pickerFrame); // Remove the iframe
+}
+```

css/main.scss

@@ -2,55 +2,16 @@ header#header {
 	display: none !important;
 }
 
-.oc-dialog {
-	height: 100% !important;
-	width: 100% !important;
-	border-radius: unset !important;
-	box-shadow: unset !important;
-	max-height: unset !important;
-	max-width: unset !important;
-
-	.actions.creatable {
-		display: none !important;
-	}
-
-	#oc-dialog-filepicker-content {
-		max-width: unset !important;
-
-		#picker-filestable.filelist td {
-			border-bottom: 0 !important;
-		}
-	}
+.modal-container__close {
+	display: none !important;
+}
 
-	.oc-dialog-close {
+.file-picker__main {
+	.breadcrumb__actions {
 		display: none !important;
 	}
-
-	tr {
-		td {
-			&:first-child {
-				border-top-left-radius: var(--border-radius-large);
-				border-bottom-left-radius: var(--border-radius-large);
-			}
-			&:last-child {
-				border-top-right-radius: var(--border-radius-large);
-				border-bottom-right-radius: var(--border-radius-large);
-			}
-		}
-
-		&:hover {
-			background: none;
-			td {
-				background: var(--color-background-dark);
-			}
-		}
-
-		&.filepicker_element_selected {
-			background: none !important;
-			background-color: unset !important;
-			td {
-				background: var(--color-background-darker);
-			}
-		}
-	}
 }
+
+.dialog__actions {
+	justify-content: center !important;
+}