chore: use div instead of link and add copyToClipboard button

Signed-off-by: TamaraBogantseva <[email protected]>

flottform/demo/src/routes/multiple-input-form/+page.svelte

@@ -112,7 +112,7 @@
 
 <style lang="postcss">
 	.flottform-anchor {
-		--flottform-border-radius: 0px 0px 10px 10px;
+		--flottform-root-border-radius: 0px 0px 10px 10px;
 	}
 	.flottform {
 		@apply absolute top-0 right-0;

flottform/forms/src/theme/defaultTheme.ts

@@ -37,16 +37,44 @@ const createLinkAndQrCode = (qrCode: string, link: string) => {
 	createChannelQrCode.setAttribute('class', 'flottform-qr-code');
 	createChannelQrCode.setAttribute('src', qrCode);
 
-	const createChannelLinkWithOffer = document.createElement('a');
+	const createChannelLinkWithOffer = document.createElement('div');
 	createChannelLinkWithOffer.setAttribute('class', 'flottform-link-offer');
-	createChannelLinkWithOffer.setAttribute('href', link);
-	createChannelLinkWithOffer.setAttribute('target', '_blank');
-	createChannelLinkWithOffer.innerHTML = link;
+	// createChannelLinkWithOffer.setAttribute('rows', '5');
+	// createChannelLinkWithOffer.setAttribute('value', link);
+	createChannelLinkWithOffer.innerText = link;
+	// createChannelLinkWithOffer.setAttribute('readonly', 'true');
 	return {
 		createChannelQrCode,
 		createChannelLinkWithOffer
 	};
 };
+const createCopyToClipboardButton = () => {
+	const copyToClipboardButton = document.createElement('button');
+	copyToClipboardButton.setAttribute('class', 'flottform-copy-to-clipboard');
+	copyToClipboardButton.setAttribute('type', 'button');
+	copyToClipboardButton.setAttribute('title', 'Copy Flottform link to clipboard');
+	copyToClipboardButton.setAttribute('aria-label', 'Copy Flottform link to clipboard');
+	copyToClipboardButton.innerText = '📋';
+	copyToClipboardButton.addEventListener('click', async () => {
+		let flottformLink = (document.querySelector('.flottform-link-offer') as HTMLDivElement)
+			.innerText;
+		navigator.clipboard
+			.writeText(flottformLink)
+			.then(() => {
+				copyToClipboardButton.innerText = '✅';
+				setTimeout(() => {
+					copyToClipboardButton.innerText = '📋';
+				}, 1000);
+			})
+			.catch((error) => {
+				copyToClipboardButton.innerText = `❌ Failed to copy: ${error}`;
+				setTimeout(() => {
+					copyToClipboardButton.innerText = '📋';
+				}, 1000);
+			});
+	});
+	return copyToClipboardButton;
+};
 const defaultThemeForAnyInput =
 	(flottformAnchorElement: HTMLElement, options: FlottformThemeOptions = {}) =>
 	(flottformBaseInputHost: FlottformFileInputHost, inputField: HTMLInputElement) => {
@@ -71,8 +99,13 @@ const defaultThemeForAnyInput =
 		// listen to events -> change elements depending on them
 		flottformBaseInputHost.on('endpoint-created', ({ link, qrCode }) => {
 			const { createChannelQrCode, createChannelLinkWithOffer } = createLinkAndQrCode(qrCode, link);
+			const copyToClipboardButton = createCopyToClipboardButton();
 			flottformStateItemsContainer.replaceChildren(createChannelQrCode);
-			flottformStateItemsContainer.appendChild(createChannelLinkWithOffer);
+			const linkAndCopyButtonWrapper = document.createElement('div');
+			linkAndCopyButtonWrapper.setAttribute('class', 'flottform-copy-button-link-wrapper');
+			linkAndCopyButtonWrapper.appendChild(copyToClipboardButton);
+			linkAndCopyButtonWrapper.appendChild(createChannelLinkWithOffer);
+			flottformStateItemsContainer.appendChild(linkAndCopyButtonWrapper);
 		});
 		flottformBaseInputHost.on('connected', () => {
 			statusInformation.innerHTML = 'Connected';
@@ -98,7 +131,6 @@ const defaultThemeForAnyInput =
 		flottformElementsContainerWrapper.appendChild(flottformElementsContainer);
 		flottformRoot.appendChild(flottformElementsContainerWrapper);
 		flottformAnchorElement.appendChild(flottformRoot);
-		// document.body.append(flottformRoot);
 		return {
 			flottformRoot,
 			flottformItem,

flottform/forms/src/theme/style.css

@@ -1,8 +1,11 @@
 :root {
 	--flottform-main-color: #1a3066;
 	--flottform-root-background: #ffffff;
+	--flottform-root-border-radius: 10px;
 	--flottform-webrtc-button-background: #343AF0;
 	--flottform-webrtc-button-color: #ffffff;
+	--flottform-clipboard-button-background: #e5e7eb;
+	--flottform-clipboard-button-border: #e5e7eb;
 	--flottform-border-color: #808080;
 	--flottform-details-background: #fafafe;
 	--flottform-open-details-background: #fafafe;
@@ -11,7 +14,7 @@
 	--flottform-status-bar-gradient-from: #6a11cb;
 	--flottform-status-bar-gradient-to: #2575fc;
 	--flottform-border-width: 1px;
-	--flottform-border-radius: 10px;
+	--flottform-buttons-border-radius: 10px;
 	--flottform-qrcode-width: 150px;
 	--flottform-details-max-height: 12rem;
 	--flottform-items-padding: 1rem;
@@ -23,7 +26,7 @@
 	color: var(--flottform-main-color);
 	font-family: var(--flottform-font-style);
 	border: var(--flottform-border-width) solid var(--flottform-border-color);
-	border-radius: var(--flottform-border-radius);
+	border-radius: var(--flottform-root-border-radius);
 	display: grid;
 	background: var(--flottform-root-background);
 	width: 100%;
@@ -94,10 +97,34 @@
 .flottform-qr-code {
 	width: var(--flottform-qrcode-width);
 }
+.flottform-copy-button-link-wrapper {
+	display: flex;
+	flex-direction: row-reverse;
+	gap: 1rem;
+	align-items: center;
+}
 .flottform-link-offer {
+	flex-grow: 1;
+	align-content: center;
 	display: inline-block;
 	white-space: break-spaces;
 	word-break: break-all;
+	font: inherit;
+	font-size: 1rem;
+	border: none;
+	overflow: auto;
+	outline: none;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+	resize: none;
+}
+.flottform-copy-to-clipboard {
+	border: 1px solid var(--flottform-clipboard-button-border);
+	border-radius: var(--flottform-buttons-border-radius);
+	background-color: var(--flottform-clipboard-button-background);
+	padding: 0.25rem .5rem;
+	font-size: 0.75rem;
 }
 .flottform-status-information {
 	display: flex;