Allow cmd+click on skins

src/App.css

@@ -20,6 +20,10 @@ body {
   background-color: rgba(59, 83, 90, 0.9);
 }
 
+a {
+  text-decoration: none;
+}
+
 #search {
   width: 100%;
   position: fixed;

src/Skin.js

@@ -1,4 +1,9 @@
 import React from "react";
+import * as Utils from "./utils";
+
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
 
 export default class Skin extends React.Component {
   constructor(props) {
@@ -25,7 +30,7 @@ export default class Skin extends React.Component {
 
   render() {
     return (
-      <div
+      <a
         className={"skin"}
         ref={node => (this._ref = node)}
         style={{
@@ -39,17 +44,25 @@ export default class Skin extends React.Component {
           left: this.props.left,
           cursor: "pointer"
         }}
+        onClick={e => {
+          if (
+            !e.defaultPrevented && // onClick prevented default
+            e.button === 0 && // ignore everything but left clicks
+            !isModifiedEvent(e) // ignore clicks with modifier keys
+          ) {
+            e.preventDefault();
+            const { top, left } = this._ref.getBoundingClientRect();
+            this.props.selectSkin(this.props.hash, { top, left });
+          }
+        }}
+        href={Utils.getPermalinkUrlFromHash(this.props.hash)}
       >
         <img
           src={this.props.src}
           className={`screenshot ${this.state.loaded ? "loaded" : ""}`}
           onLoad={this._handleLoad}
-          onClick={() => {
-            const { top, left } = this._ref.getBoundingClientRect();
-            this.props.selectSkin(this.props.hash, { top, left });
-          }}
         />
-      </div>
+      </a>
     );
   }
 }

src/redux/selectors.js

@@ -33,7 +33,7 @@ export function getUrl(state) {
   const query = getSearchQuery(state);
   if (hash) {
     // TODO: Add a human readable version
-    return `/skin/${hash}/${Utils.filenameFromHash(hash)}`;
+    return Utils.getPermalinkUrlFromHash(hash);
   } else if (query) {
     return `/?query=${encodeURIComponent(query)}`;
   }

src/utils.js

@@ -11,6 +11,11 @@ export function filenameFromHash(hash) {
 export function skinUrlFromHash(hash) {
   return `https://s3.amazonaws.com/webamp-uploaded-skins/skins/${hash}.wsz`;
 }
+
+export function getPermalinkUrlFromHash(hash) {
+  return `/skin/${hash}/${filenameFromHash(hash)}/`;
+}
+
 export function getWindowSize() {
   var w = window,
     d = document,