{"version":3,"sources":["webpack:///./src/components/SoloContainer/index.vue?cacb","webpack:///./src/components/SoloContainer/index.vue","webpack:///src/components/SoloContainer/index.vue","webpack:///./src/components/SoloContainer/index.vue?02a3","webpack:///./src/components/SoloContainer/index.vue?924e"],"names":["render","_vm","this","_c","_self","staticClass","style","mobile","shrinkLeftMenu","ref","on","$event","handleImgPreview","attrs","get","renderedImageUrls","_v","_s","_m","Array","fill","currentImageUrl","visible","ipad","metaInfo","likeit","handleLikeAction","staticRenderFns","name","Name_En","Painter_En","azure_blob","activeSinglePainting","title","meta","property","content","template","chunk","props","data","startPosition","paintingInfo","computed","mapGetters","collectionResult","hardwareBackActive","map","el","Object","assign","Year","Museum_En","cardsContainerEl","$refs","cardsWrapper","cardInfosContainerEl","infoWrapper","appBgContainerEl","appBg","firstPaintedDetector","_this$$refs$cardsWrap","lastChild","getAttribute","slice","url","paintingIndex","$t","description","media","hashtags","watch","newValue","oldValue","console","log","loaderEl","document","querySelector","gsap","set","duration","scaleX","backgroundColor","leftMenu","loadingWrapper","opacity","children","executeWholeBoostArt","immediate","handler","updateModalVisible","methods","mapActions","index","boxClass","target","classList","value","search","$nextTick","fetchCollectionResult","that","some","Painting_Index","yes","addLikeToCollection","removeLikeFromCollection","initCardEvents","currentCardEl","addEventListener","updateCard","e","resetCardTransforms","card","currentTarget","currentInfoEl","rotateY","box","getBoundingClientRect","centerPosition","x","left","width","y","top","height","angle","Math","atan2","pageX","PI","removeCardEvents","removeEventListener","initializeAnimatedImages","init","tl","timeline","to","delay","stagger","ease","from","amount","querySelectorAll","translateY","waitForImages","images","totalImages","length","loadedImages","forEach","image","imagesLoaded","instance","isComplete","loadProgress","pointerEvents","call","func","setTimeout","fetchSinglePainting","then","mounted","window","innerWidth","Boolean","navigator","userAgent","match","test","maxTouchPoints","component"],"mappings":"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","file":"js/chunk-d1b727da.66e9f485.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=0c554cf1&prod&lang=less&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"exhi-app\",style:(`${_vm.mobile && !_vm.shrinkLeftMenu ? 'opacity: 0' : 'opacity: 1'}`)},[_c('div',{staticClass:\"exhi-container\"},[_c('div',{staticClass:\"cardList\"},[_c('div',{ref:\"cardsWrapper\",staticClass:\"cards__wrapper\"},[_c('div',{staticClass:\"card current--card\",on:{\"click\":function($event){return _vm.handleImgPreview(0, $event)}}},[_c('div',{staticClass:\"card__image\"},[_c('img',{attrs:{\"src\":_vm.get(_vm.renderedImageUrls[0], 'azure_blob'),\"alt\":\"\"}})])])])]),_c('div',{staticClass:\"infoList\"},[_c('div',{ref:\"infoWrapper\",staticClass:\"info__wrapper\"},[_c('div',{staticClass:\"info current--info\"},[_c('h1',{staticClass:\"text name\"},[_vm._v(\" \"+_vm._s(_vm.get(_vm.renderedImageUrls[0], \"Name_En\"))+\" \")]),_c('h4',{staticClass:\"text year\"},[_vm._v(_vm._s(_vm.get(_vm.renderedImageUrls[0], \"Year\")))]),_c('p',{staticClass:\"text painter\"},[_vm._v(\" \"+_vm._s(_vm.get(_vm.renderedImageUrls[0], \"Painter_En\"))+\" \")]),_c('p',{staticClass:\"text museum\"},[_vm._v(\" \"+_vm._s(_vm.get(_vm.renderedImageUrls[0], \"Museum_En\"))+\" \")])])])]),_c('div',{ref:\"appBg\",staticClass:\"app__bg\"},[_c('div',{staticClass:\"app__bg__image current--image\"},[_c('img',{attrs:{\"src\":_vm.get(_vm.renderedImageUrls[0], 'azure_blob'),\"alt\":\"\"}})])])]),_vm._m(0),_c('image-preview',{attrs:{\"image-urls\":Array(1).fill(this.currentImageUrl),\"visible\":_vm.visible,\"isMobile\":_vm.mobile,\"isIpad\":_vm.ipad,\"metaInfo\":_vm.metaInfo,\"liked\":_vm.likeit},on:{\"update:visible\":function($event){_vm.visible=$event},\"like\":_vm.handleLikeAction}})],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"loading__wrapper\"},[_c('div',{staticClass:\"loader--text\"},[_vm._v(\"Loading...\")]),_c('div',{staticClass:\"loader\"},[_c('span')])])\n}]\n\nexport { render, staticRenderFns }","<template>\n  <div\n    class=\"exhi-app\"\n    :style=\"`${mobile && !shrinkLeftMenu ? 'opacity: 0' : 'opacity: 1'}`\"\n  >\n    <div class=\"exhi-container\">\n      <div class=\"cardList\">\n        <div class=\"cards__wrapper\" ref=\"cardsWrapper\">\n          <div class=\"card current--card\" @click=\"handleImgPreview(0, $event)\">\n            <div class=\"card__image\">\n              <img :src=\"get(renderedImageUrls[0], 'azure_blob')\" alt=\"\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"infoList\">\n        <div class=\"info__wrapper\" ref=\"infoWrapper\">\n          <div class=\"info current--info\">\n            <h1 class=\"text name\">\n              {{ get(renderedImageUrls[0], \"Name_En\") }}\n            </h1>\n            <h4 class=\"text year\">{{ get(renderedImageUrls[0], \"Year\") }}</h4>\n            <p class=\"text painter\">\n              {{ get(renderedImageUrls[0], \"Painter_En\") }}\n            </p>\n            <p class=\"text museum\">\n              {{ get(renderedImageUrls[0], \"Museum_En\") }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"app__bg\" ref=\"appBg\">\n        <div class=\"app__bg__image current--image\">\n          <img :src=\"get(renderedImageUrls[0], 'azure_blob')\" alt=\"\" />\n        </div>\n      </div>\n    </div>\n\n    <div class=\"loading__wrapper\">\n      <div class=\"loader--text\">Loading...</div>\n      <div class=\"loader\">\n        <span></span>\n      </div>\n    </div>\n\n    <image-preview\n      :image-urls=\"Array(1).fill(this.currentImageUrl)\"\n      :visible.sync=\"visible\"\n      :isMobile=\"mobile\"\n      :isIpad=\"ipad\"\n      :metaInfo=\"metaInfo\"\n      :liked=\"likeit\"\n      @like=\"handleLikeAction\"\n    ></image-preview>\n  </div>\n</template>\n\n<script>\nimport gsap from \"gsap\";\nimport { get } from \"lodash\";\nimport imagesLoaded from \"imagesloaded\";\nimport { mapActions, mapGetters } from \"vuex\";\n\nexport default {\n  name: \"SoloContainer\",\n\n  metaInfo() {\n    const { Name_En, Painter_En, azure_blob } = this.activeSinglePainting || {};\n    return {\n      // title will be injected into parent titleTemplate\n      title: `${Name_En ?? \"\"} - ${Painter_En ?? \"\"}`,\n      meta: [\n        {\n          property: \"og:title\",\n          content: `${Name_En} - ${Painter_En}`,\n          template: (chunk) => `${chunk} | Boost Art Net`,\n        },\n        {\n          property: \"og:image\",\n          content: `${azure_blob}`,\n        },\n        {\n          property: \"twitter:title\",\n          content: `${Name_En} - ${Painter_En}`,\n          template: (chunk) => `${chunk} | Boost Art Net`,\n        },\n        {\n          property: \"twitter:image\",\n          content: `${azure_blob}`,\n        },\n      ],\n    };\n  },\n\n  props: [\"paintingIndex\"],\n\n  data() {\n    return {\n      ipad: false,\n      likeit: false, // like this image or not\n      visible: false, // whether image previewer visible\n      startPosition: 0,\n      mobile: false,\n      paintingInfo: [{}],\n      currentImageUrl:\n        \"https://westartbucket101.blob.core.windows.net/2021/Modigliani053.png\",\n    };\n  },\n\n  computed: {\n    ...mapGetters({\n      activeSinglePainting: \"getActiveSinglePainting\",\n      shrinkLeftMenu: \"getShrinkLeftMenu\",\n      collectionResult: \"getCollectionResult\",\n      hardwareBackActive: \"getHardwareBackActive\",\n    }),\n\n    renderedImageUrls() {\n      return this.paintingInfo.map((el) => {\n        return Object.assign(\n          {},\n          {\n            azure_blob: el.azure_blob,\n            Painter_En: el.Painter_En,\n            Year: el.Year,\n            Name_En: el.Name_En,\n            Museum_En: el.Museum_En,\n          }\n        );\n      });\n    },\n\n    cardsContainerEl() {\n      return this.$refs.cardsWrapper;\n    },\n\n    cardInfosContainerEl() {\n      return this.$refs.infoWrapper;\n    },\n\n    appBgContainerEl() {\n      return this.$refs.appBg;\n    },\n\n    firstPaintedDetector() {\n      if (this.$refs.cardsWrapper) {\n        return (\n          this.$refs.cardsWrapper.lastChild.lastChild.lastChild\n            .getAttribute(\"src\")\n            ?.slice(0, 5) === \"https\"\n        );\n      }\n      return undefined;\n    },\n\n    metaInfo() {\n      const url = `https://www.boost-art.net/painting/${this.paintingIndex}?share`;\n      const { Name_En, Painter_En } = this.activeSinglePainting || {};\n      const title = this.$t(\"00003\");\n      const description =\n        \"Boost Art Net APP presents. Install: Admire thousands of captivating masterpieces right in your pocket; Museum: The exact destination of masterpiece to help plan your art travel well; Wander: Scroll and browse the chronicle of Western fine art along the way; Search: Handy search entry to reach out to your favorite painters and paintings.\";\n      const media = this.currentImageUrl;\n      return {\n        url,\n        title: `${Name_En} - ${Painter_En} | ${title}`,\n        description,\n        media,\n        hashtags: \"art\",\n      };\n    },\n  },\n\n  watch: {\n    paintingIndex(newValue, oldValue) {\n      // Carousel Rerender watching genre changes (triggered by leftmenu SearchItem)\n      console.log(\"New:\", newValue, \"Old:\", oldValue);\n      // reset loader bar to 0%\n      const loaderEl = document.querySelector(\".loader span\");\n      gsap.set(loaderEl, {\n        duration: 1,\n        scaleX: 0,\n        backgroundColor: `hsl(${0 * 120}, 100%, 50%)`,\n      });\n      // keep leftmenu overlay the loading layout\n      const leftMenu = document.querySelector(\".navigation-view-container\");\n      gsap.set(leftMenu, {\n        \"z-index\": \"250\",\n      });\n      // show the loading layout\n      const loadingWrapper = document.querySelector(\".loading__wrapper\");\n      gsap.set(loadingWrapper, {\n        \"pointer-events\": \"unset\",\n        opacity: \"unset\",\n      });\n      // move the previous image boxes below the screen\n      const cardsContainerEl = document.querySelector(\".cards__wrapper\");\n      gsap.set(cardsContainerEl.children, {\n        \"--card-translateY-offset\": \"100vh\",\n      });\n\n      this.executeWholeBoostArt();\n    },\n    hardwareBackActive: {\n      immediate: true,\n      handler(newValue) {\n        if (newValue) {\n          this.visible = false;\n          this.updateModalVisible(this.visible);\n        }\n      },\n    },\n    visible(newValue) {\n      this.updateModalVisible(newValue);\n    },\n  },\n\n  methods: {\n    ...mapActions([\n      \"fetchSinglePainting\",\n      \"fetchCollectionResult\",\n      \"addLikeToCollection\",\n      \"removeLikeFromCollection\",\n      \"updateModalVisible\",\n    ]),\n\n    get, // used in tempalate\n\n    handleImgPreview(index, $event) {\n      // prevent the image preview action when the left menu is shown and mobile\n      if (this.mobile && !this.shrinkLeftMenu) return;\n      const boxClass = $event.target.classList.value;\n      if (boxClass.search(\"current--card\") > -1) {\n        this.currentImageUrl = $event.target\n          .querySelector(\".card__image img\")\n          .getAttribute(\"src\");\n        this.$nextTick(async () => {\n          this.visible = true;\n          this.updateModalVisible(this.visible);\n          this.startPosition = index;\n\n          // Get like information\n          // const token = this.$cookie.get(\"boost-art-net-token\") || \"\";\n          // await this.fetchCollectionResult(token);\n          await this.fetchCollectionResult();\n          const that = this;\n          this.$nextTick(() => {\n            if (\n              that.collectionResult.some(\n                (el) => el?.Painting_Index === that.paintingIndex\n              )\n            ) {\n              that.likeit = true;\n            } else {\n              that.likeit = false;\n            }\n          });\n        });\n      }\n    },\n\n    handleLikeAction(yes) {\n      // const token = this.$cookie.get(\"boost-art-net-token\") || \"\";\n      if (yes) {\n        this.likeit = true;\n        // this.addLikeToCollection({ token: token, index: this.paintingIndex });\n        this.addLikeToCollection({ index: this.paintingIndex });\n      } else {\n        this.likeit = false;\n        // this.removeLikeFromCollection({\n        //   token: token,\n        //   index: this.paintingIndex,\n        // });\n        this.removeLikeFromCollection({\n          index: this.paintingIndex,\n        });\n      }\n    },\n\n    initCardEvents() {\n      const currentCardEl =\n        this.cardsContainerEl.querySelector(\".current--card\");\n      currentCardEl.addEventListener(\"pointermove\", this.updateCard);\n      currentCardEl.addEventListener(\"pointerout\", (e) => {\n        this.resetCardTransforms(e);\n      });\n    },\n\n    resetCardTransforms(e) {\n      const card = e.currentTarget;\n      const currentInfoEl =\n        this.cardInfosContainerEl.querySelector(\".current--info\");\n      gsap.set(card, {\n        \"--current-card-rotation-offset\": 0,\n      });\n      gsap.set(currentInfoEl, {\n        rotateY: 0,\n      });\n    },\n\n    updateCard(e) {\n      const card = e.currentTarget;\n      const box = card.getBoundingClientRect();\n      const centerPosition = {\n        x: box.left + box.width / 2,\n        y: box.top + box.height / 2,\n      };\n      let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);\n      gsap.set(card, {\n        \"--current-card-rotation-offset\": `${angle}deg`,\n      });\n      const currentInfoEl =\n        this.cardInfosContainerEl.querySelector(\".current--info\");\n      gsap.set(currentInfoEl, {\n        rotateY: `${angle}deg`,\n      });\n    },\n\n    removeCardEvents(card) {\n      card.removeEventListener(\"pointermove\", this.updateCard);\n    },\n\n    initializeAnimatedImages() {\n      const cardsContainerEl = document.querySelector(\".cards__wrapper\");\n\n      const cardInfosContainerEl = document.querySelector(\".info__wrapper\");\n      this.initCardEvents();\n\n      const init = () => {\n        let tl = gsap.timeline();\n        tl.to(cardsContainerEl.children, {\n          delay: 0.15,\n          duration: 0.5,\n          stagger: {\n            ease: \"power4.inOut\",\n            from: \"right\",\n            amount: 0.1,\n          },\n          \"--card-translateY-offset\": \"0\",\n        }).to(\n          cardInfosContainerEl\n            .querySelector(\".current--info\")\n            .querySelectorAll(\".text\"),\n          {\n            delay: 0.5,\n            duration: 0.4,\n            stagger: 0.1,\n            opacity: 1,\n            translateY: 0,\n          }\n        );\n      };\n\n      const waitForImages = () => {\n        const images = [...document.querySelectorAll(\".exhi-container img\")];\n        const totalImages = images.length;\n        let loadedImages = 0;\n        const loaderEl = document.querySelector(\".loader span\");\n\n        gsap.set(cardsContainerEl.children, {\n          \"--card-translateY-offset\": \"100vh\",\n        });\n        gsap.set(\n          cardInfosContainerEl\n            .querySelector(\".current--info\")\n            .querySelectorAll(\".text\"),\n          {\n            translateY: \"40px\",\n            opacity: 0,\n          }\n        );\n\n        images.forEach((image) => {\n          imagesLoaded(image, (instance) => {\n            if (instance.isComplete) {\n              loadedImages++;\n              let loadProgress = loadedImages / totalImages;\n\n              gsap.to(loaderEl, {\n                duration: 1,\n                scaleX: loadProgress,\n                backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%)`,\n              });\n\n              if (totalImages == loadedImages) {\n                gsap\n                  .timeline()\n                  .to(\".loading__wrapper\", {\n                    // delay 1 second to resolve cached image scenario and display\n                    // the loading bar as full\n                    delay: 1,\n                    duration: 0.8,\n                    opacity: 0,\n                    pointerEvents: \"none\",\n                  })\n                  .call(() => init());\n              }\n            }\n          });\n        });\n      };\n\n      waitForImages();\n    },\n\n    executeWholeBoostArt() {\n      const loaderEl = document.querySelector(\".loader span\");\n      gsap.to(loaderEl, {\n        duration: 1,\n        scaleX: 0,\n        backgroundColor: `hsl(${0 * 120}, 100%, 50%)`,\n      });\n\n      // animation effect\n      const func = () => {\n        this.$nextTick(() => {\n          if (this.firstPaintedDetector) {\n            this.initializeAnimatedImages();\n          } else {\n            setTimeout(() => {\n              this.initializeAnimatedImages();\n            }, 1000);\n          }\n        });\n      };\n\n      if (\n        this.paintingIndex ===\n        get(this.activeSinglePainting, \"Painting_Index\", \"\")\n      ) {\n        this.paintingInfo = [this.activeSinglePainting]; // [{}]\n        func();\n      } else {\n        this.fetchSinglePainting({ index: this.paintingIndex }).then(\n          (paintingInfo) => {\n            this.paintingInfo = [paintingInfo]; // [{}]\n            func();\n          }\n        );\n      }\n    },\n  },\n\n  mounted() {\n    this.mobile = window.innerWidth <= 450;\n    this.ipad = Boolean(\n      !!navigator.userAgent.match(/(iPad).*OS\\s([\\d_]+)/) || // browser devtools ipad\n        (/Macintosh/i.test(navigator.userAgent) && // real ipad devices\n          navigator.maxTouchPoints &&\n          navigator.maxTouchPoints > 1)\n    );\n    // In case of visible leftmenu, keep leftmenu overlay the loading layout\n    const leftMenu = document.querySelector(\".navigation-view-container\");\n    gsap.set(leftMenu, {\n      \"z-index\": \"250\",\n    });\n    // Initial Carousel Render\n    this.executeWholeBoostArt();\n  },\n};\n</script>\n\n<style lang=\"less\">\n@import \"./style.less\";\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=0c554cf1&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=0c554cf1&prod&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}