6542_copy_to_clipboard_with_css_class

Author: Nethan

interface/web/mail/templates/mail_forward_list.htm

@@ -50,7 +50,7 @@ <h1><tmpl_var name="list_head_txt"></h1>
                     <tmpl_loop name="records">
                         <tr>
                             <td><a href="#" data-load-content="mail/mail_forward_edit.php?id={tmpl_var name='id'}">{tmpl_var name="active"}</a></td>
-                            <td><a href="#" data-load-content="mail/mail_forward_edit.php?id={tmpl_var name='id'}">{tmpl_var name="source"}</a></td>
+                            <td class="copy-to-clipboard"><a class="copy-to-clipboard-icon-helper" href="#" data-load-content="mail/mail_forward_edit.php?id={tmpl_var name='id'}">{tmpl_var name="source"}</a></td>
                             <td><a href="#" data-load-content="mail/mail_forward_edit.php?id={tmpl_var name='id'}">{tmpl_var name="destination"}</a></td>
                             <td class="text-right">
                                 <a class="btn btn-default formbutton-danger formbutton-narrow" href="javascript: ISPConfig.confirm_action('mail/mail_forward_del.php?id={tmpl_var name='id'}&_csrf_id={tmpl_var name='csrf_id'}&_csrf_key={tmpl_var name='csrf_key'}&phpsessid={tmpl_var name='phpsessid'}','{tmpl_var name='delete_confirmation'}');"><span class="icon icon-delete"></span></a>

interface/web/mail/templates/mail_user_list.htm

@@ -61,7 +61,7 @@ <h1><tmpl_var name="list_head_txt"></h1>
                 <tbody>
                 <tmpl_loop name="records">
                     <tr>
-                        <td><a href="#" data-load-content="mail/mail_user_edit.php?id={tmpl_var name='id'}" data-toggle="tooltip" data-placement="bottom" title="{tmpl_var name='email'}">{tmpl_var name="email"}</a></td>
+                        <td class="copy-to-clipboard"><a class="copy-to-clipboard-icon-helper" href="#" data-load-content="mail/mail_user_edit.php?id={tmpl_var name='id'}" data-toggle="tooltip" data-placement="bottom" title="{tmpl_var name='email'}">{tmpl_var name="email"}</a></td>
                         <tmpl_if name="enable_custom_login"><td><a href="#" data-load-content="mail/mail_user_edit.php?id={tmpl_var name='id'}">{tmpl_var name="login"}</a></td></tmpl_if>
                         <td><a href="#" data-load-content="mail/mail_user_edit.php?id={tmpl_var name='id'}">{tmpl_var name="name"}</a></td>
                         <td><a href="#" data-load-content="mail/mail_user_edit.php?id={tmpl_var name='id'}">{tmpl_var name="autoresponder"}</a></td>

interface/web/themes/default/assets/javascripts/ispconfig.js

@@ -813,4 +813,31 @@ $(document).ready(function() {
 		}
 		return iCaretPos;
 	};
+
+	//copy to clipboard
+	$(document).on('click', '.copy-to-clipboard', function() {
+		var $copyElement = $(this).children();
+		var temp = $("<input>");
+		$("body").append(temp);
+		temp.val($copyElement.text()).select();
+		//execCommand is Deprecated - but there is no alternative (2023)
+		document.execCommand("copy");
+		temp.remove();
+	} );
+
+	//display copy-to-clipboard icon
+	let lastCopyToClipboardIcon;
+	$(document).on("mouseenter", '.copy-to-clipboard', function() {
+		$(lastCopyToClipboardIcon).removeClass("copy-to-clipboard-icon"); //Clean up old icons - sometimes mouse is too fast to trigger mouseleave
+		$(this).addClass("copy-to-clipboard-icon");
+		lastCopyToClipboardIcon = $(this);
+		//console.log("Mouseenter e-tooltip");
+	});
+
+	//hide copy-to-clipboard icon
+	$(document).on("mouseleave", '.copy-to-clipboard', function() {
+		$(this).removeClass("copy-to-clipboard-icon");
+		//console.log("Mouseleave e-tooltip");
+	});
+
 });

interface/web/themes/default/assets/stylesheets/ispconfig.css

@@ -838,3 +838,20 @@ max-width: 1260px; }
 	#apache_directives, #nginx_directives, #proxy_directives {
 		font-family: Consolas, "Courier New", Courier, monospace;
 	}
+	.copy-to-clipboard-icon::after {
+		content: "\f0ea";
+		font-family: FontAwesome;
+		font-size:0.6em;
+		color:#6396b5;
+		vertical-align:top;
+		float:right;
+		cursor: copy;
+		position: absolute;
+		margin-left: 5px;
+	}
+	.copy-to-clipboard-icon-helper {
+		display: inline-block;
+		max-width: 90%;
+		text-overflow: ellipsis ;
+		overflow-x: hidden;
+	}