...
 
Commits (2)
......@@ -31,5 +31,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
### TODO
* Add a deeplinking for sharing
* ~~Add a deeplinking for sharing~~
* Add support for Gitlab repositories
......@@ -8,6 +8,11 @@
<p>
Use the relative url, omitting `https://github.com/`...
</p>
<a v-bind:href="shareLink"
class="share-link"
target="_blank">
Share this comparison!
</a>
</header>
<form @submit.prevent="compare">
......@@ -52,6 +57,27 @@ import Chart from 'chart.js';
import { mapState, mapActions, mapGetters } from 'vuex';
import common from './app.scss'; // eslint-disable-line no-unused-vars
function getQueryStringParams(queryString) {
let params = {}, queries, temp, i, l;
queries = queryString.split('&');
for (i = 0, l = queries.length; i < l; i++ ) {
temp = queries[i].split('=');
params[temp[0]] = temp[1];
}
return params;
}
function getReposFromQueryString() {
const qs = getQueryStringParams(window.location.search.substring(1));
if (qs.hasOwnProperty('r')) {
let repoNames = qs.r.split('+');
if (repoNames.length === 2)
return repoNames.map(x => x.replace('|', '/'));
}
return null;
}
function chartFactory(
id,
chartType,
......@@ -86,6 +112,7 @@ export default {
'errors',
'errorsPresent',
'someStatLoaded',
'shareLink',
]),
ctaLabel() {
return this.loading ? '...' : 'compare';
......@@ -129,6 +156,12 @@ export default {
},
},
mounted() {
const qsRepos = getReposFromQueryString();
if (qsRepos !== null) {
this.repos[0].name = qsRepos[0];
this.repos[1].name = qsRepos[1];
this.compare();
}
this.activityChart = chartFactory(
'activity',
'line',
......
......@@ -12,6 +12,7 @@
$main-font: "Source Code Pro", monospace;
$aria: 20px;
$p1: #18154F;
$p1-l: lighten(#18154F, 5);
$p1-d: #090930;
$p2: #FFF;
$p3: #FFD18C;
......@@ -68,6 +69,7 @@ a {
header {
padding: $aria;
position: relative;
text-align: center;
}
......@@ -230,3 +232,19 @@ input {
line-height: 1.2;
}
}
.share-link {
position: absolute;
top: 0;
right: -$aria;
font-size: 12px;
text-decoration: none;
padding: $aria / 2 $aria;
background-color: $p1-d;
border-radius: 0 0 10px 10px;
&:hover {
background-color: $p1-l;
color: $p3;
}
}
......@@ -41,6 +41,12 @@ export default new Vuex.Store({
activities(state) {
return state.repos.map(x => x.getStatByName('activity').value);
},
shareLink(state) {
let loc = window.location;
let baseUrl = `${loc.protocol}//${loc.host}`;
let r = state.repos.map(x => x.name.replace('/', '|')).join('+');
return `${baseUrl}?r=${r}`;
},
},
mutations: {
INCREMENT_COUNT(state) {
......