other components... (2)

src/components/CFacebookFrame/CFacebookFrame.ts

@@ -0,0 +1,58 @@
+import { defineComponent, PropType, onBeforeUpdate, reactive } from 'vue'
+import { useI18n } from '@/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useQuasar } from 'quasar'
+
+import MixinBase from '../../mixins/mixin-base'
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CFacebookFrame',
+  props: {
+    urlfbpage: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    fbimage: {
+      type: String,
+      required: true,
+    },
+    myclass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+
+    function geturlfbpageEncoded() {
+      return encodeURIComponent(props.urlfbpage)
+    }
+
+    function mywidth() {
+      let myw = 340
+      if (tools.getwidth($q) < 410)
+        return myw
+      if ((tools.getwidth($q) > 410) && (tools.getwidth($q) < 1100))
+        return Math.round((tools.getwidth($q) / 3) - 30)
+      else
+        return myw
+    }
+
+    return {
+      geturlfbpageEncoded,
+      mywidth,
+      tools,
+    }
+  }
+})
+

src/components/CFacebookFrame/CFacebookFrame.vue

@@ -0,0 +1,29 @@
+<template>
+    <div v-if="urlfbpage && fbimage" :class="myclass">
+        <!--<div class="fb-page" :data-href="urlfbpage" data-tabs="timeline"-->
+        <!--data-width="" data-height="" data-small-header="false" data-adapt-container-width="true"-->
+        <!--data-hide-cover="false" data-show-facepile="true">-->
+        <!--<blockquote :cite="urlfbpage" class="fb-xfbml-parse-ignore"><a-->
+        <!--:href="urlfbpage">{{title}}</a>-->
+        <!--</blockquote>-->
+        <!--</div>-->
+
+        <a :href="urlfbpage" target="_blank">
+            <q-img :src="`statics/` + fbimage" class="imgautosize" alt="facebook page">
+            </q-img>
+        </a>
+
+        <!--
+        <iframe :src="`https://www.facebook.com/plugins/page.php?href=`+geturlfbpageEncoded()+`&tabs=timeline&width=`+mywidth+`&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=164292303671962`"
+                width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
+                allowTransparency="true" allow="encrypted-media"></iframe>
+                -->
+    </div>
+</template>
+
+<script lang="ts" src="./CFacebookFrame.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CFacebookFrame.scss';
+</style>

src/components/CFacebookFrame/index.ts

@@ -0,0 +1 @@
+export {default as CFacebookFrame} from './CFacebookFrame.vue'