[feat] embed events

locales/it.js

@@ -57,7 +57,10 @@ export default {
     set_password: 'Imposta password',
     copy_link: 'Copia link',
     send_via_mail: 'Invia mail',
-    add_to_calendar: 'Aggiungi al tuo calendario'
+    add_to_calendar: 'Aggiungi al tuo calendario',
+    instances: 'Istanze',
+    copied: 'Copiato',
+    embed: 'Incorpora'
   },
 
   login: {
@@ -159,7 +162,9 @@ export default {
     enable_federation: 'Abilita la federazione!',
     select_instance_timezone: 'Seleziona la timezone',
     enable_comments: 'Abilita commenti',
-    disable_gamification: 'Disabilita gamification'
+    disable_gamification: 'Disabilita gamification',
+    block_instance: 'Blocca',
+    unblock_instance: 'Sblocca'
   },
 
   auth: {

pages/event/_id.vue

@@ -27,16 +27,22 @@
           size='mini' :key='tag') {{tag}}
 
       //- info & actions for desktop
+      el-dialog.embedDialog(:visible.sync='showEmbed' :title='`Embed ${event.title}`')
+        EmbedEvent(:event='event')
       el-col.d-none.d-lg-block(:md='6')
         el-menu.menu.mt-2
           p <b>{{event|when}}</b> - {{event|to}}
           p <b>{{event.place.name}}</b> - {{event.place.address}}
           el-divider {{$t('common.actions')}}
-          el-menu-item(v-clipboard:success='copyLink'
+          el-menu-item(
+            v-clipboard:success='copyLink'
             v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') <i class='el-icon-paperclip'></i> {{$t('common.copy_link')}}
+
+          el-menu-item(@click='showEmbed=true') <i class='el-icon-embed'></i> {{$t('common.embed')}}
+
           //- TODO (ics of recurrent events)
           el-menu-item(v-if='!event.recurrent')
-            a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`') {{$t('common.add_to_calendar')}}
+            a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`') <i class='el-icon-cal'></i> {{$t('common.add_to_calendar')}}
           EventAdmin(v-if='is_mine' :event='event')
     hr
 
@@ -63,14 +69,18 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import EventAdmin from './eventAdmin'
+import EmbedEvent from './embedEvent'
+import { Message } from 'element-ui'
+
 import moment from 'dayjs'
 
 export default {
   name: 'Event',
   transition: null,
-  components: { EventAdmin },
+  components: { EventAdmin, EmbedEvent },
   data () {
     return {
+      showEmbed: false,
       copied: false
     }
   },
@@ -170,8 +180,7 @@ export default {
   },
   methods: {
     copyLink () {
-      this.copied = true
+      Message({ message: this.$t('common.copied'), type: 'success' })
-      setTimeout(() => { this.copied = false }, 3000)
     },
     comment_filter (value) {
       return value.replace(/<a.*href="([^">]+).*>(?:.(?!<\/a>))*.<\/a>/, (orig, url) => {
@@ -194,6 +203,14 @@ export default {
   margin-bottom: 30px;
   padding-top: 0px;
 
+  .embedDialog {
+    .el-dialog {
+      min-height: 500px;
+      max-width: 1000px;
+      width: 100%;
+    }
+  }
+
   .head {
     z-index: 1;
     position: sticky;

pages/event/embedEvent.vue

@@ -0,0 +1,23 @@
+<template lang='pug'>
+el-row
+  el-col(:span='12')
+    el-input(v-model='code')
+  el-col(:span='12' v-html='code')
+</template>
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'embedEvent',
+  props: ['event'],
+  computed: {
+    ...mapState(['settings']),
+    code () {
+      const style = "style='border: 0; width: 100%; height: 215px;'"
+      const src = `${this.settings.baseurl}/embed/${this.event.id}`
+      const code = `<iframe ${style} src="${src}"></iframe>`
+      return code
+    }
+  }
+}
+</script>