{"version":3,"file":"portal-HomeHeader.js","sources":["../../../frontend/src/components/Carousel.vue","../../../frontend/src/components/Carousel.vue","../../../frontend/src/views/HomeHeader.vue","../../../frontend/src/views/HomeHeader.vue"],"sourcesContent":["<template>\n  <figure v-if=\"pictures.length\">\n    <figure>\n      <transition name=\"fade\" appear>\n        <img :src=\"picture_url\" :key=\"index\" />\n      </transition>\n      <figcaption>\n        <a v-if=\"info.author_url\" :href=\"info.author_url\">Photo by {{info.author}}</a>\n        <span v-else-if=\"info.author\">Photo by {{info.author}}</span>\n      </figcaption>\n    </figure>\n  </figure>\n</template>\n\n<script lang=\"ts\">\nimport { Component, Vue } from 'vue-facing-decorator';\n\nimport { useDataStore } from '@/stores';\nimport { get_img_url } from '@/utils';\n\n@Component({\n  name: 'Carousel',\n  components: {},\n})\nexport default class Carousel extends Vue {\n\n  public index: number = 0;\n\n  public showing = false;\n\n  get pictures() {\n    return useDataStore().pictures;\n  }\n\n  get info() {\n    return this.pictures[this.index % this.pictures.length] || {};\n  }\n\n  get picture_url(): string {\n    return get_img_url(this.info.image);\n  }\n\n  public mounted() {\n    window.setInterval(() => {\n      if (this.pictures.length > 1) {\n        this.index++;\n      }\n    }, 5000);\n  }\n\n}\n</script>\n\n<style lang=\"css\" scoped>\n  figure {\n    margin-bottom: 0;\n    display:grid;\n    place-items: center;\n    place-content: center stretch;\n    place-self: center stretch;\n    display: grid;\n    grid-template: \"slideshow\";\n  }\n\n  figure > * {\n    grid-area: slideshow;\n  }\n\n  figure > img {\n    width:100%;\n    min-height: 400px;\n    height: 80vh;\n    aspect-ratio: 16/9;\n    object-fit: cover;\n  }\n\n  figure > figcaption {\n    place-self: center;\n    place-self: end right;\n    margin: 1em;\n  }\n\n  figure > figcaption > :first-child {\n    --bg-opacity: .75;\n    background: rgb(255,255,255,var(--bg-opacity));\n    padding: .5em;\n    border-radius: 1.5px;\n    font-size: 80%;\n    transition: background .5s !important;\n  }\n\n  figure > figcaption > :first-child:hover {\n    --bg-opacity: 1;\n  }\n\n  .fade-enter-active,\n  .fade-leave-active {\n    transition: opacity 1s !important;\n  }\n\n  .fade-enter-from,\n  .fade-leave-to {\n    opacity: 0;\n  }\n</style>","<template>\n  <figure v-if=\"pictures.length\">\n    <figure>\n      <transition name=\"fade\" appear>\n        <img :src=\"picture_url\" :key=\"index\" />\n      </transition>\n      <figcaption>\n        <a v-if=\"info.author_url\" :href=\"info.author_url\">Photo by {{info.author}}</a>\n        <span v-else-if=\"info.author\">Photo by {{info.author}}</span>\n      </figcaption>\n    </figure>\n  </figure>\n</template>\n\n<script lang=\"ts\">\nimport { Component, Vue } from 'vue-facing-decorator';\n\nimport { useDataStore } from '@/stores';\nimport { get_img_url } from '@/utils';\n\n@Component({\n  name: 'Carousel',\n  components: {},\n})\nexport default class Carousel extends Vue {\n\n  public index: number = 0;\n\n  public showing = false;\n\n  get pictures() {\n    return useDataStore().pictures;\n  }\n\n  get info() {\n    return this.pictures[this.index % this.pictures.length] || {};\n  }\n\n  get picture_url(): string {\n    return get_img_url(this.info.image);\n  }\n\n  public mounted() {\n    window.setInterval(() => {\n      if (this.pictures.length > 1) {\n        this.index++;\n      }\n    }, 5000);\n  }\n\n}\n</script>\n\n<style lang=\"css\" scoped>\n  figure {\n    margin-bottom: 0;\n    display:grid;\n    place-items: center;\n    place-content: center stretch;\n    place-self: center stretch;\n    display: grid;\n    grid-template: \"slideshow\";\n  }\n\n  figure > * {\n    grid-area: slideshow;\n  }\n\n  figure > img {\n    width:100%;\n    min-height: 400px;\n    height: 80vh;\n    aspect-ratio: 16/9;\n    object-fit: cover;\n  }\n\n  figure > figcaption {\n    place-self: center;\n    place-self: end right;\n    margin: 1em;\n  }\n\n  figure > figcaption > :first-child {\n    --bg-opacity: .75;\n    background: rgb(255,255,255,var(--bg-opacity));\n    padding: .5em;\n    border-radius: 1.5px;\n    font-size: 80%;\n    transition: background .5s !important;\n  }\n\n  figure > figcaption > :first-child:hover {\n    --bg-opacity: 1;\n  }\n\n  .fade-enter-active,\n  .fade-leave-active {\n    transition: opacity 1s !important;\n  }\n\n  .fade-enter-from,\n  .fade-leave-to {\n    opacity: 0;\n  }\n</style>","<template>\n  <Carousel />\n  \n  <div\n    v-if=\"info.home_description\"\n    class=\"container\"\n    data-theme=\"dark\"\n    v-html=\"info.home_description\"\n  ></div>\n  <!-- <form v-else class=\"container\" @keyup.enter=\"onSearchSubmit\">\n    <input\n      type=\"search\"\n      id=\"search\"\n      name=\"search\"\n      v-model=\"search\"\n      :placeholder=\"$t('menu.search_placeholder')\"\n      :aria-label=\"$t('menu.search_placeholder')\"\n    />\n  </form> -->\n</template>\n\n<script lang=\"ts\">\nimport { Component, Vue } from 'vue-facing-decorator';\n\nimport Carousel from '@/components/Carousel.vue';\nimport { Info } from '@/types/TInfo';\n\nimport { useDataStore } from '@/stores';\n\n@Component({\n  components: { Carousel },\n})\nexport default class HomeHeader extends Vue {\n\n  get info(): Info {\n    return useDataStore().info;\n  }\n\n  // @Prop public search!: string;\n\n  // get search() {\n  //   return useDataStore().search;\n  // }\n\n  // set search(val: string) {\n  //   useDataStore().setSearchFilter(val);\n  // }\n\n  // public onSearchSubmit(e: Event) {\n  //   this.$router.push( { path: '/search', query: { key: 'q', value: this.search }});\n  //   console.log(e);\n  // }\n\n}\n</script>\n\n<style lang=\"css\" scoped>\n  body > header {\n    padding: 0;\n  }\n  body > header {\n    display: grid;\n    grid-template-areas: \"box\";\n  }\n\n  header > *,\n  header::before {\n    grid-area: box;\n  }\n\n  header > .container {\n    place-self: center;\n  }\n\n  /**\n   * input[type=\"search\"] {\n   *   background-color: #fff;\n   * }\n   */\n\n  header > div.container {\n    background-color: rgb(0,0,0,.75);\n    padding: 1em;\n    border-radius: 1.5px;\n    width: fit-content;\n    text-align: center;\n    z-index: 0;\n  }\n</style>\n\n<style lang=\"css\">\n  header > div.container h1 {\n    --typography-spacing-vertical: 1rem;\n  }\n</style>","<template>\n  <Carousel />\n  \n  <div\n    v-if=\"info.home_description\"\n    class=\"container\"\n    data-theme=\"dark\"\n    v-html=\"info.home_description\"\n  ></div>\n  <!-- <form v-else class=\"container\" @keyup.enter=\"onSearchSubmit\">\n    <input\n      type=\"search\"\n      id=\"search\"\n      name=\"search\"\n      v-model=\"search\"\n      :placeholder=\"$t('menu.search_placeholder')\"\n      :aria-label=\"$t('menu.search_placeholder')\"\n    />\n  </form> -->\n</template>\n\n<script lang=\"ts\">\nimport { Component, Vue } from 'vue-facing-decorator';\n\nimport Carousel from '@/components/Carousel.vue';\nimport { Info } from '@/types/TInfo';\n\nimport { useDataStore } from '@/stores';\n\n@Component({\n  components: { Carousel },\n})\nexport default class HomeHeader extends Vue {\n\n  get info(): Info {\n    return useDataStore().info;\n  }\n\n  // @Prop public search!: string;\n\n  // get search() {\n  //   return useDataStore().search;\n  // }\n\n  // set search(val: string) {\n  //   useDataStore().setSearchFilter(val);\n  // }\n\n  // public onSearchSubmit(e: Event) {\n  //   this.$router.push( { path: '/search', query: { key: 'q', value: this.search }});\n  //   console.log(e);\n  // }\n\n}\n</script>\n\n<style lang=\"css\" scoped>\n  body > header {\n    padding: 0;\n  }\n  body > header {\n    display: grid;\n    grid-template-areas: \"box\";\n  }\n\n  header > *,\n  header::before {\n    grid-area: box;\n  }\n\n  header > .container {\n    place-self: center;\n  }\n\n  /**\n   * input[type=\"search\"] {\n   *   background-color: #fff;\n   * }\n   */\n\n  header > div.container {\n    background-color: rgb(0,0,0,.75);\n    padding: 1em;\n    border-radius: 1.5px;\n    width: fit-content;\n    text-align: center;\n    z-index: 0;\n  }\n</style>\n\n<style lang=\"css\">\n  header > div.container h1 {\n    --typography-spacing-vertical: 1rem;\n  }\n</style>"],"names":["Carousel","Vue","__publicField","useDataStore","get_img_url","__decorateClass","Component","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_createVNode","_Transition","_withCtx","_toDisplayString","_hoisted_3","_hoisted_4","_createCommentVNode","HomeHeader","_Fragment","_component_Carousel"],"mappings":"8kBAwBA,IAAqBA,EAArB,cAAsCC,CAAI,CAA1C,kCAESC,EAAA,aAAgB,GAEhBA,EAAA,eAAU,IAEjB,IAAI,UAAW,CACb,OAAOC,EAAe,EAAA,QACxB,CAEA,IAAI,MAAO,CACF,OAAA,KAAK,SAAS,KAAK,MAAQ,KAAK,SAAS,MAAM,GAAK,EAC7D,CAEA,IAAI,aAAsB,CACjB,OAAAC,EAAY,KAAK,KAAK,KAAK,CACpC,CAEO,SAAU,CACf,OAAO,YAAY,IAAM,CACnB,KAAK,SAAS,OAAS,GACpB,KAAA,SAEN,GAAI,CACT,CAEF,EA1BqBJ,EAArBK,EAAA,CAJCC,EAAU,CACT,KAAM,WACN,WAAY,CAAC,CAAA,CACd,CAAA,EACoBN,CAAA,4DCvBnBO,EAUSC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CATP,OAAAL,EAAA,SAAA,QAAAM,EAAA,EAGeC,EAAA,SAAAC,EAAA,CAFUC,EAAA,SAAA,KAAA,CAAOC,EAAAC,EAAA,CAAA,KAAA,mBACjB,QAAAC,EAAA,IAAA,EAAAN,EAAwB,EAAAC,EAAA,MAAA,CAAA,IAAAP,EAAA,sCAErC,EAAA,CAAA,CAAA,EACES,EAAA,aAAA,KAAA,CAAAT,EAAA,KAAA,YAAAM,EAAA,EAAgDC,EAAA,IAAA,CAAE,IAAA,EACjC,OAAK,KAAM,UAAA,EAAA,YAA5BM,IAA6D,KAA/B,MAAA,EAAA,EAAAC,CAAA,GAAAd,EAAA,KAAA,QAAAM,EAAA,EAAAC,EAAA,OAAAQ,EAAA,YAAAF,EAAAb,EAAA,KAAA,MAAA,EAAA,CAAA,GAAAgB,EAAA,GAAA,EAAA,8QCwBtC,IAAqBC,EAArB,cAAwCvB,CAAI,CAE1C,IAAI,MAAa,CACf,OAAOE,EAAe,EAAA,IACxB,CAiBF,EArBqBqB,EAArBnB,EAAA,CAHCC,EAAU,CACT,WAAY,CAAE,SAAAN,CAAS,CAAA,CACxB,CAAA,EACoBwB,CAAA,sEC5BX,OAAAX,EAAqB,EAAAC,EAAAW,EAAA,KAAA,CAD7BR,EAAAS,CAAA,EAAAnB,EAAA,KAAA,kBAAAM,EAAA,EAEmBC,EAAA,MAAA,CACjB,IAAA,EACA,MAAA,YAAA,aAAA"}