✨ Builds a content embed widget

src/components/Widgets/EmbedWidget.vue

@@ -0,0 +1,86 @@
+<template>
+<div class="html-widget">
+  <div :id="elementId" />
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    html() {
+      return this.options.html || '';
+    },
+    css() {
+      return this.options.css || '';
+    },
+    script() {
+      return this.options.script || '';
+    },
+    scriptSrc() {
+      return this.options.scriptSrc || '';
+    },
+    elementId() {
+      return `elem-${Math.round(Math.random() * 10000)}`;
+    },
+  },
+  mounted() {
+    this.initiate();
+  },
+  beforeDestroy() {
+    if (this.eventListener) {
+      document.removeEventListener(this.eventListener);
+    }
+  },
+  data: () => ({
+    eventListener: null,
+  }),
+  methods: {
+    /* Injects users content */
+    injectHtml() {
+      if (this.html) {
+        const element = document.getElementById(this.elementId);
+        element.innerHTML = this.html;
+      }
+      if (this.css) {
+        const styleElem = document.createElement('style');
+        styleElem.textContent = this.css;
+        document.head.append(styleElem);
+      }
+      if (this.script) {
+        const scriptElem = document.createElement('script');
+        scriptElem.text = this.script;
+        document.head.append(scriptElem);
+      }
+      if (this.scriptSrc) {
+        const scriptElem = document.createElement('script');
+        scriptElem.src = this.scriptSrc;
+        document.head.append(scriptElem);
+      }
+    },
+    /* What for the DOM to finish loading, before proceeding */
+    initiate() {
+      if (document.readyState === 'complete' || document.readyState === 'loaded') {
+        this.injectHtml();
+      } else {
+        this.eventListener = document.addEventListener('DOMContentLoaded', () => {
+          this.injectHtml();
+        });
+      }
+    },
+    update() {
+      this.injectHtml();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.html-widget {
+  width: 100%;
+  min-height: 240px;
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -102,6 +102,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <EmbedWidget
+        v-else-if="widgetType === 'embed'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <!-- No widget type specified -->
       <div v-else>{{ handleError('No widget type was specified') }}</div>
     </div>
@@ -127,8 +134,9 @@ import XkcdComic from '@/components/Widgets/XkcdComic.vue';
 import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
 import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
 import Jokes from '@/components/Widgets/Jokes.vue';
-import IframeWidget from '@/components/Widgets/IframeWidget.vue';
 import Flights from '@/components/Widgets/Flights.vue';
+import IframeWidget from '@/components/Widgets/IframeWidget.vue';
+import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
 
 export default {
   name: 'Widget',
@@ -147,8 +155,9 @@ export default {
     ExchangeRates,
     StockPriceChart,
     Jokes,
-    IframeWidget,
     Flights,
+    IframeWidget,
+    EmbedWidget,
   },
   props: {
     widget: Object,