Copy to clipboard for shots

attract/static/js/tasks.js

@@ -303,3 +303,11 @@ $(function() {
         task_open(task_id);
     });
 });
+
+/* Copy to clipboard when clicking on an input with 'copy-to-clipboard' class */
+$('body').on('click', '.copy-to-clipboard', function(e){
+    e.preventDefault();
+
+    $(this).select();
+    document.execCommand('copy');
+});

src/styles/_shots.sass

@@ -71,7 +71,6 @@
 
 				a
 					display: inline-block /* Each task in a new line */
-					opacity: 0
 					border-radius: 50%
 					width: 16px
 					height: 16px
@@ -84,12 +83,14 @@
 					&.active
 						opacity: 1
 						border-radius: 3px
+						display: inline-block
 
 					&.task-add
 						width: auto
 						border-radius: initial
+						opacity: 0
 
-				a[class^="status-"]
+				&:hover a.task-add
 					opacity: 1
 
 			&:hover
@@ -98,3 +99,34 @@
 
 .attract-form span.shot_id
 	float: right
+
+.attract-form
+	.item-id
+		padding: 8px
+		margin-left: 10px
+		width: 40px
+		border: thin solid transparent
+
+		&:hover
+			border-color: $color-text-dark-hint
+
+		&:active
+			background-color: $color-background
+
+	.btn.copy-to-clipboard.item-id
+		color: transparent
+		position: relative
+		&::selection
+			color: transparent
+			background-color: transparent
+
+	.btn.copy-to-clipboard+.copy-to-clipboard-icon
+		position: relative
+		height: 40px
+		pointer-events: none
+		color: $color-text-dark-primary
+		i
+			position: absolute
+			top: 8px
+			left: -32px
+			font-size: 1.2em

src/templates/attract/shots/view_shot_embed.jade

@@ -8,6 +8,13 @@
 				type="text",
 				placeholder='Name',
 				value="{{ shot.name | hide_none }}")
+			input.copy-to-clipboard.btn.item-id(
+				name="Copy to Clipboard",
+				type="text",
+				title="{{ shot._id }}",
+				value="{{ shot._id }}")
+			.copy-to-clipboard-icon
+				i.pi-clipboard-copy
 
 		.input-transparent-group
 			textarea.input-transparent(