diff --git a/js/src/router/event.ts b/js/src/router/event.ts
index 8ea00b456..944580201 100644
--- a/js/src/router/event.ts
+++ b/js/src/router/event.ts
@@ -1,6 +1,7 @@
import EventList from '@/views/Event/EventList.vue';
import Location from '@/views/Location.vue';
import { RouteConfig } from 'vue-router';
+import { RouteName } from '@/router/index';
// tslint:disable:space-in-parens
const participations = () => import(/* webpackChunkName: "participations" */ '@/views/Event/Participants.vue');
@@ -19,6 +20,7 @@ export enum EventRouteName {
PARTICIPATIONS = 'Participations',
EVENT = 'Event',
LOCATION = 'Location',
+ TAG = 'Tag',
}
export const eventRoutes: RouteConfig[] = [
@@ -73,4 +75,9 @@ export const eventRoutes: RouteConfig[] = [
props: true,
meta: { requiredAuth: false },
},
+ {
+ path: '/tag/:tag',
+ name: EventRouteName.TAG,
+ redirect: '/search/:tag',
+ },
];
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index a0f4d4305..be089a1df 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -66,8 +66,14 @@ import {ParticipantRole} from "@/types/event.model";
{{ $t('Public event') }}
{{ $t('Private event') }}
- {{ tag.title }}
- ⋅
+
+ {{ tag.title }}
+
@@ -155,7 +161,7 @@ import {ParticipantRole} from "@/types/event.model";
{{ $t("The event organizer didn't add any description.") }}
@@ -242,6 +248,7 @@ import IdentityPicker from '@/views/Account/IdentityPicker.vue';
import ParticipationButton from '@/components/Event/ParticipationButton.vue';
import { GraphQLError } from 'graphql';
import { RouteName } from '@/router';
+import HTML = Mocha.reporters.HTML;
@Component({
components: {
@@ -329,6 +336,41 @@ export default class Event extends EventMixin {
mounted() {
this.identity = this.currentActor;
+
+ this.$watch('eventDescription', function (eventDescription) {
+ if (!eventDescription) return;
+ const eventDescriptionElement = this.$refs['eventDescriptionElement'] as HTMLElement;
+
+ eventDescriptionElement.addEventListener('click', ($event) => {
+ // TODO: Find the right type for target
+ let { target } : { target: any } = $event;
+ while (target && target.tagName !== 'A') target = target.parentNode;
+ // handle only links that occur inside the component and do not reference external resources
+ if (target && target.matches('.hashtag') && target.href) {
+ // some sanity checks taken from vue-router:
+ // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
+ const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = $event;
+ // don't handle with control keys
+ if (metaKey || altKey || ctrlKey || shiftKey) return;
+ // don't handle when preventDefault called
+ if (defaultPrevented) return;
+ // don't handle right clicks
+ if (button !== undefined && button !== 0) return;
+ // don't handle if `target="_blank"`
+ if (target && target.getAttribute) {
+ const linkTarget = target.getAttribute('target');
+ if (/\b_blank\b/i.test(linkTarget)) return;
+ }
+ // don't handle same page links/anchors
+ const url = new URL(target.href);
+ const to = url.pathname;
+ if (window.location.pathname !== to && $event.preventDefault) {
+ $event.preventDefault();
+ this.$router.push(to);
+ }
+ }
+ });
+ });
}
/**
@@ -821,6 +863,10 @@ export default class Event extends EventMixin {
padding: 0.3rem;
background: $secondary;
color: #111;
+
+ &:empty {
+ display: none;
+ }
}
}
}