Added "Copy yaw" button to HDRIs

The button is only shown to people with the right to edit the current
node. I've also simplified some CSS, with the help of @venomgfx.

pillar/web/nodes/routes.py

@@ -215,6 +215,8 @@ def view(node_id):
     if request.args.get('format') == 'amp':
         template_path = 'nodes/view_amp.html'
 
+    write_access = 'PUT' in (node.allowed_methods or set())
+
     try:
         return render_template(template_path,
                                node_id=node._id,
@@ -222,6 +224,7 @@ def view(node_id):
                                parent=node.parent,
                                children=children,
                                config=current_app.config,
+                               write_access=write_access,
                                api=api)
     except TemplateNotFound:
         log.error('Template %s does not exist for node type %s', template_path, node_type_name)
@@ -231,6 +234,7 @@ def view(node_id):
                                parent=node.parent,
                                children=children,
                                config=current_app.config,
+                               write_access=write_access,
                                api=api)
 
 

src/styles/_project.sass

@@ -1264,6 +1264,12 @@ section.node-preview.group
 				max-width: 100%
 				padding-top: 15px
 
+			ul.node-details-meta-list
+				> li:first-child
+					margin-left: auto
+				> li:not(:last-child)
+					margin-right: 10px
+
 		&.license
 			+clearfix
 			padding-bottom: 5px
@@ -1282,12 +1288,16 @@ section.node-preview.group
 				width: 100%
 				max-width: 100%
 
-			li.node-details-meta-list-item
+			> li
 				margin: 0
-				padding: 0 10px 0 0
+				padding: 0
 				line-height: 1em
 				float: left
 
+				& a.btn
+					padding: 4px 12px 5px 12px
+					margin: 0
+
 				&.date
 					color: $color-text-dark-secondary
 					padding-left: 5px
@@ -1321,7 +1331,6 @@ section.node-preview.group
 					cursor: default
 
 				&.access
-					margin: 0 0 0 auto
 					color: $color-text-dark-primary
 					cursor: default
 					opacity: .5
@@ -1344,7 +1353,6 @@ section.node-preview.group
 
 
 				&.type
-					margin-left: auto
 					text-transform: uppercase
 					padding: 0 5px 0 15px
 					cursor: default
@@ -1361,10 +1369,6 @@ section.node-preview.group
 						font-size: 1.2em
 						color: $color-text-dark-secondary
 
-				&.access+li.node-details-meta-list-item.type,
-				&.access+.tooltip+li.node-details-meta-list-item.type
-					margin-left: 0
-
 				&.access+li.node-details-meta-list-item.video.download,
 				&.access+.tooltip+li.node-details-meta-list-item.video.download
 					margin-left: 10px
@@ -1377,7 +1381,6 @@ section.node-preview.group
 					white-space: nowrap
 
 				&.license
-					margin-left: 15px
 					color: $color-text-dark-secondary
 
 					i
@@ -1387,13 +1390,6 @@ section.node-preview.group
 						bottom: -2px
 						left: -5px
 
-				&.video.license
-					margin-left: auto
-
-				&.video.license+li.node-details-meta-list-item.video.download,
-				&.video.license+.popover+li.node-details-meta-list-item.video.download
-					margin-left: 0
-
 				/* Download button */
 				&.download
 					align-self: flex-end
@@ -1424,8 +1420,6 @@ section.node-preview.group
 
 					/* Videos have dropdown caret, so paddit 5px less */
 					&.video.download
-						margin-left: auto
-
 						button
 							padding-right: 10px
 

src/templates/nodes/custom/hdri/view_embed.jade

@@ -48,11 +48,18 @@
 				data-toggle="tooltip",
 				data-placement="bottom",
 				title="{{ node.properties.license_type }}")
-
 					i(class="pi-license-{{ node.properties.license_type }}")
 				| {% endif %}
 				| {% endif %}
 
+				| {% if write_access %}
+				li.node-details-meta-list-item
+					a.btn#copy_yaw(
+						href='javascript:void(0);'
+						title='Copies current yaw of panorama to the clipboard, so you can set it as default yaw.'
+						) Copy yaw
+				| {% endif %}
+
 				| {% if node.properties.files %}
 				li.btn-group.node-details-meta-list-item.video.download(
 				title="Download HDRI")
@@ -114,6 +121,8 @@ include ../_scripts
 | {% endblock %}
 
 | {% block footer_scripts %}
+script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
+
 script.
 	$('#asset-license').popover();
 	// Generate GA pageview
@@ -130,4 +139,19 @@ script.
 		$(this).removeClass('active').hide().html();
 	});
 
+	$().ready(function () {
+		new Clipboard('#copy_yaw', {
+			text: function(trigger) {
+				var frame = document.getElementById('vrview_window').contentWindow;
+				var yaw = frame.yaw();
+				if (console)
+					console.log('Current yaw is: ', yaw, ", which was copied to your clipboard.");
+				return yaw;
+			}
+		})
+		.on('success', function(e) {
+		    $(e.trigger).flashOnce();
+		});
+	});
+
 | {% endblock %}

src/templates/vrview.jade

@@ -18,8 +18,6 @@ html(lang='en')
     script.
         /** Returns the current yaw in degrees. */
         function yaw() {
-            console.log('default yaw:', worldRenderer.sceneInfo.defaultYaw * 180 / Math.PI);
-            console.log('camera rotation: ', worldRenderer.camera.rotation.y * 180 / Math.PI);
             var the_yaw = worldRenderer.sceneInfo.defaultYaw + worldRenderer.camera.rotation.y;
             return the_yaw * 180 / Math.PI;
         }