Add clipboard action to Personal Settings Fed Cloud Id

Author: rullzer

apps/federatedfilesharing/css/settings-personal.css

@@ -7,6 +7,11 @@
 	white-space: pre-wrap;
 }
 
+#fileSharingSettings .icon {
+	background-size: 16px 16px;
+	display: inline-block;
+}
+
 [class^="social-"], [class*=" social-"] {
 	background-repeat: no-repeat;
 	background-position: 2px;

apps/federatedfilesharing/js/settings-personal.js

@@ -16,4 +16,35 @@ $(document).ready(function() {
 		$('#oca-files-sharing-add-to-your-website-expanded').slideDown();
 	});
 
+	// Clipboard!
+	var clipboard = new Clipboard('.clipboardButton');
+	clipboard.on('success', function(e) {
+		$input = $(e.trigger);
+		$input.tooltip({placement: 'bottom', trigger: 'manual', title: t('core', 'Copied!')});
+		$input.tooltip('show');
+		_.delay(function() {
+			$input.tooltip('hide');
+		}, 3000);
+	});
+	clipboard.on('error', function (e) {
+		$input = $(e.trigger);
+		var actionMsg = '';
+		if (/iPhone|iPad/i.test(navigator.userAgent)) {
+			actionMsg = t('core', 'Not supported!');
+		} else if (/Mac/i.test(navigator.userAgent)) {
+			actionMsg = t('core', 'Press ⌘-C to copy.');
+		} else {
+			actionMsg = t('core', 'Press Ctrl-C to copy.');
+		}
+
+		$input.tooltip({
+			placement: 'bottom',
+			trigger: 'manual',
+			title: actionMsg
+		});
+		$input.tooltip('show');
+		_.delay(function () {
+			$input.tooltip('hide');
+		}, 3000);
+	});
 });

apps/federatedfilesharing/templates/settings-personal.php

@@ -15,7 +15,8 @@
 
 		<p>
 			<?php p($l->t('Your Federated Cloud ID:')); ?>
-			<strong><?php p($_['cloudId']); ?></strong>
+			<strong id="cloudid"><?php p($_['cloudId']); ?></strong>
+			<a class="clipboardButton icon icon-clippy" data-clipboard-target="#cloudid"></a>
 		</p>
 
 		<br>