other components... (2)

src/components/CPhotosGallery/CPhotosGallery.scss

@@ -0,0 +1,168 @@
+$grayshadow: #555;
+$textcol: #eeefe1;
+$textcol_scuro: darkblue;
+
+p {
+  margin: 0 0 1.25rem;
+  //text-shadow: .125rem .125rem .25rem $grayshadow;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+.landing > section {
+  /*
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  //padding: 0 16px
+  */
+}
+
+.subtitle {
+
+  text-align: center;
+  font-size: 0.85rem;
+}
+
+.landing > section.padding {
+  padding: 5.62rem 1rem;
+}
+
+.landing > section > div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.landing__footer .doc-link {
+  color: $textcol;
+}
+
+.landing__footer .doc-link:hover {
+  opacity: .8
+}
+
+.gallery:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(../../statics/images/cover.jpg) 50%;
+
+  background-size: cover
+}
+
+.carousel_slide {
+
+}
+
+.gallery {
+  background-size: cover;
+  background-position: center center;
+
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  max-width: 800px;
+}
+
+.gallery2{
+  margin: auto;
+  max-width: 800px;
+}
+
+.btn-start {
+  margin: 3.125rem;
+}
+
+.shadow {
+  //color: white;
+  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
+}
+
+.shadow-max {
+  //color: white;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+@media (max-width: 2000px) {
+  .q-carousel {
+    height: 800px !important;
+  }
+}
+
+@media (max-width: 1000px) {
+  .q-carousel {
+    height: 800px !important;
+  }
+}
+
+@media (max-width: 800px) {
+  .q-carousel {
+    height: 600px !important;
+  }
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .gallery2 {
+    max-height: 80vh;
+  }
+
+  .text-h1 {
+    font-size: 3rem;
+    line-height: 3.05rem;
+    margin-bottom: 1.5rem
+  }
+
+  .text-subtitle1 {
+    font-size: 1.25rem;
+  }
+  .text-vers {
+    font-size: 0.6rem;
+  }
+
+}
+
+@media (max-width: 600px) {
+  .q-carousel {
+    height: 450px !important;
+  }
+}
+
+@media (max-width: 400px) {
+  .q-carousel {
+    height: 300px !important;
+  }
+}
+
+.allunga0 {
+  height: 300px !important;
+}
+.allunga1 {
+  height: 400px !important;
+}
+.allunga2 {
+  height: 500px !important;
+}
+.allunga3 {
+  height: 600px !important;
+}
+
+
+.custom-caption {
+  text-align: center;
+  padding: .75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .3);
+}

src/components/CPhotosGallery/CPhotosGallery.ts

@@ -0,0 +1,259 @@
+import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { Logo } from '../../components/logo'
+
+import { Footer } from '../../components/Footer'
+
+import { toolsext } from '@src/store/Modules/toolsext'
+import { CImgTitle } from '../../components/CImgTitle/index'
+import { useQuasar } from 'quasar'
+import { static_data } from '@src/db/static_data'
+import { useI18n } from '@/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useRouter } from 'vue-router'
+import { IColl } from 'model'
+
+
+export default defineComponent({
+  name: 'PhotosGallery',
+  components: { Logo, Footer, CImgTitle },
+  props: {
+    mygallery: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const userStore = useUserStore()
+    const $router = useRouter()
+
+    const text = ''
+    let visibile = ref(false)
+    const cardvisible = ref('hidden')
+    const displaycard = ref('block')
+
+    const firstClassSection = ref('fade homep-cover-img animate-fade homep-cover-img-1')
+
+    const polling = ref()
+
+    const slide2 = ref(1)
+    const animare = ref(0)
+    const activePanelImg = ref(0)
+    const withThumbnails = ref(true)
+    const withCaptions = ref(true)
+    const allunga = ref(false)
+    const fullscreen = ref(false)
+    const myclass = ref('')
+    const dimensione = ref('')
+    const dimensioneImg: any = [
+      {
+        id: 0,
+        label: 'Piccola',
+        value: 0
+      },
+      {
+        id: 1,
+        label: 'Media',
+        value: 1
+      },
+      {
+        id: 2,
+        label: 'Grande',
+        value: 2
+      },
+      {
+        id: 3,
+        label: 'Molto Grande',
+        value: 3
+      }
+    ]
+
+    function changeAllunga(value: any, evt: any) {
+      if (value)
+        myclass.value = 'allunga'
+      else
+        myclass.value = ''
+    }
+
+    function getappname() {
+      return t('msg.myAppName')
+    }
+
+    function mounted() {
+      initprompt()
+
+      let primo = true
+      const mytime = 10000
+      polling.value = setInterval(() => {
+
+        firstClassSection.value = 'landing_background fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1')
+        primo = !primo
+
+        // console.log('firstClassSection', firstClassSection)
+
+      }, mytime)
+    }
+
+    function appname() {
+      return process.env.APP_NAME
+    }
+
+    function beforeDestroy() {
+      console.log('beforeDestroy')
+      clearInterval(polling.value)
+    }
+
+    function created() {
+      animare.value = process.env.DEV ? 0 : 8000
+    }
+
+    function isLogged() {
+      return userStore.isLogged
+    }
+
+    function meta() {
+      return {
+        keywords: { name: 'keywords', content: 'Quasar website' },
+        // meta tags
+        meta: {
+          mykey: { name: 'mykey', content: 'Key 1' },
+          description: { name: 'description', content: 'Page 1' },
+          keywords: { name: 'keywords', content: 'Quasar website' },
+          equiv: { 'http-equiv': 'Content-Type', 'content': 'text/html; charset=UTF-8' }
+        }
+      }
+    }
+
+    function mystilecard() {
+      return {
+        visibility: cardvisible,
+        display: displaycard
+      }
+    }
+
+    function getenv(myvar: any) {
+      return process.env[myvar]
+    }
+
+    function initprompt() {
+      window.addEventListener('beforeinstallprompt', function (event) {
+        // console.log('********************************   beforeinstallprompt fired')
+        event.preventDefault()
+        // console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
+        // #Todo++ IMPOSTA DEFERRED PROMPT
+        return false
+      })
+
+    }
+
+    function isInCostruction() {
+      return process.env.IN_CONSTRUCTION === '1'
+    }
+
+    function getPermission() {
+      return Notification.permission
+    }
+
+    function NotServiceWorker() {
+      return (!('serviceWorker' in navigator))
+    }
+
+    function PagLogin() {
+      $router.replace('/signin')
+    }
+
+    function PagReg() {
+      $router.replace('/signup')
+    }
+
+    function openCreatePostModal() {
+      console.log('APERTO ! openCreatePostModal')
+
+      visibile.value = !visibile.value
+
+      if (visibile.value) {
+        displaycard.value = 'block'
+        cardvisible.value = 'visible'
+      } else {
+        displaycard.value = 'block'
+        cardvisible.value = 'hidden'
+      }
+
+    }
+
+    function getmywidth(rec: IColl) {
+      return rec.width
+    }
+
+    function getmyheight(rec: IColl) {
+      return rec.height
+    }
+
+    function setTransition(newVal: any, oldVal: any) {
+      // console.log('setTransition', newVal, oldVal)
+      activePanelImg.value = newVal
+    }
+
+    function getsubtitle(data: IColl) {
+      if (data.subtitle[toolsext.getLocale()])
+        return data.subtitle[toolsext.getLocale()]
+      else {
+        return data.subtitle[static_data.arrLangUsed[0]]
+      }
+    }
+
+    function getTitle(data: IColl) {
+      if (data.title[toolsext.getLocale()])
+        return data.title[toolsext.getLocale()]
+      else {
+        return data.title[static_data.arrLangUsed[0]]
+      }
+    }
+
+    function changedim(value: any) {
+      myclass.value = 'allunga' + value
+      // console.log('myclass', myclass, value)
+    }
+
+    onMounted(mounted)
+
+    onBeforeUnmount(beforeDestroy)
+
+    created()
+
+    return {
+      slide2,
+      animare,
+      activePanelImg,
+      withThumbnails,
+      withCaptions,
+      allunga,
+      fullscreen,
+      myclass,
+      dimensione,
+      dimensioneImg,
+      changeAllunga,
+      getappname,
+      appname,
+      isLogged,
+      mystilecard,
+      getenv,
+      isInCostruction,
+      getPermission,
+      NotServiceWorker,
+      PagLogin,
+      PagReg,
+      openCreatePostModal,
+      getmywidth,
+      getmyheight,
+      setTransition,
+      getsubtitle,
+      getTitle,
+      changedim,
+    }
+  }
+})

src/components/CPhotosGallery/CPhotosGallery.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="text-black">
+      <q-checkbox v-model="withThumbnails" label="Miniature">
+      </q-checkbox>
+      <q-checkbox v-model="withCaptions" label="Didascalie">
+      </q-checkbox>
+      <q-select
+        v-model="dimensione" :options="dimensioneImg"
+        style="max-width: 150px"
+        rounded
+        outlined
+        dense
+        label="Altezza"
+        emit-value map-options
+        @input="changedim"
+      ></q-select>
+    </div>
+
+    <q-carousel
+      animated
+      infinite
+      arrows
+      control-color="primary"
+      control-text-color="white"
+      swipeable
+      :thumbnails="withThumbnails"
+      transition-next="slide-left"
+      transition-prev="slide-right"
+      v-model="slide2"
+      :class="`bg-grey-1 shadow-2 rounded-borders ` + myclass + ' gallery2 ' "
+      @transition="setTransition"
+
+    >
+      <q-carousel-slide
+        v-for="(rec, index) in mygallery" :key="index" name="slide">
+        <div
+          v-if="rec.ingallery"
+          :key="index" :name="index" :img-src="rec.img">
+
+          <div
+            v-if="rec.ingallery && withCaptions" class="absolute-bottom custom-caption"
+            style="margin-bottom: 70px">
+            <div v-if="!!rec.title" class="text-h5"><span style="font-size: 1.25rem;">{{ getTitle(rec) }}</span></div>
+            <div class="subtitle" v-html="getsubtitle(rec)"></div>
+          </div>
+        </div>
+      </q-carousel-slide>
+
+      <!--<template v-slot:control>
+        <q-carousel-control
+          position="bottom-right"
+          :offset="[18, 18]"
+        >
+          <q-btn
+            push round dense color="white" text-color="primary"
+            :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
+            @click="fullscreen = !fullscreen"
+          />
+        </q-carousel-control>
+      </template>-->
+    </q-carousel>
+
+    <br>
+  </div>
+</template>
+
+<script lang="ts" src="./CPhotosGallery.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CPhotosGallery.scss';
+</style>

src/components/CPhotosGallery/index.ts

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