diff --git a/src/App.css b/src/App.css index b8e6411b..56b9453d 100644 --- a/src/App.css +++ b/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; diff --git a/src/Skin.js b/src/Skin.js index 060c9517..c02085e2 100644 --- a/src/Skin.js +++ b/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 ( -
(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)} > { - const { top, left } = this._ref.getBoundingClientRect(); - this.props.selectSkin(this.props.hash, { top, left }); - }} /> -
+ ); } } diff --git a/src/redux/selectors.js b/src/redux/selectors.js index 72f5af8b..f6dedb59 100644 --- a/src/redux/selectors.js +++ b/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)}`; } diff --git a/src/utils.js b/src/utils.js index b96448f6..eff39915 100644 --- a/src/utils.js +++ b/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,