{"version":3,"file":"static/js/4278.512968a9.js","mappings":"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","sources":["webpack://finnish-art/./src/components/Base/HyperlinkMixin.js","webpack://finnish-art/./src/components/Base/IntersectionObserverMixin.js","webpack://finnish-art/./src/components/Home/HeroMixin.js","webpack://finnish-art/./src/static/static/coverimages/background-1.jpg","webpack://finnish-art/./src/assets/images/taide-art-white.svg","webpack://finnish-art/./src/components/Home/FrontPages.vue","webpack://finnish-art/./src/components/Home/HeroPage.vue","webpack://finnish-art/./src/components/Home/HeroPage.vue?4103","webpack://finnish-art/src/components/Home/HeroPage.vue","webpack://finnish-art/./src/components/Home/HeroPage.vue?606b","webpack://finnish-art/src/components/Home/FrontPages.vue","webpack://finnish-art/./src/components/Home/FrontPages.vue?a6e7","webpack://finnish-art/./src/components/Home/FrontPages.vue?2f95"],"sourcesContent":["/**\n * Methods for linking between views.\n */\nexport default {\n    methods: {\n        /**\n        * Item name as slug for url.\n        */\n        getSlugUrlName: function (item) {\n            let urlName = '-';\n            if (item && item.Name) {\n                urlName = item.Name\n                    // convert all whitespaces to \"-\"\n                    .replace(/\\s/g, '-')\n                    .replace('&', '_')\n                    .replace(/[^\\w-åäöÅÄÖ]+/g, '')\n                    // remove all non-wordchars and some exceptions\n                    .replace(/\\u00BF-\\u1FFF\\u2C00-\\uD7FF\\w/gi, ''); // this one is from stackoverflow\n            }\n            return urlName;\n        },\n\n        /**\n        * Get route to an item.\n        * The complex way.\n        */\n        getRoute: function (item, params, itemType) {\n            let pathName = this.$store.getters['ux/getLocale'];\n            const useProfile = this.$store.getters['ux/getUseProfile'];\n            switch (itemType) {\n            case 'Actor':\n                pathName += '.ActorPage';\n                break;\n            case 'Actors':\n                pathName += '.Actors';\n                break;\n            case 'FeatureArticle':\n                pathName += '.ArticlePage';\n                break;\n            case 'FeatureArticles':\n                pathName += '.Articles';\n                break;\n            case 'Artwork':\n                pathName += '.ArtworkPage';\n                break;\n            case 'Artworks':\n                pathName += '.Artworks';\n                break;\n            case 'Audio':\n                pathName += '.AudioPage';\n                // audio resource wrappers may not always carry Id, in which case route is impossible to format\n                if (!item || !item.Id) {\n                    return {};\n                }\n                break;\n            case 'Audios':\n                pathName += '.Audios';\n                break;\n            case 'Collection':\n                pathName += '.CollectionPage';\n                break;\n            case 'Collections':\n                pathName += '.Collections';\n                break;\n            case 'Event':\n                pathName += '.EventPage';\n                break;\n            case 'Events':\n                pathName += '.Events';\n                break;\n            case 'Gallery':\n                pathName += '.GalleryPage';\n                break;\n            case 'Galleries':\n                pathName += '.Galleries';\n                break;\n            case 'Museum':\n                pathName += '.MuseumPage';\n                break;\n            case 'Museums':\n                pathName += '.Museums';\n                break;\n            case 'Organization':\n                pathName += '.OrganizationPage';\n                break;\n            case 'Organizations':\n                pathName += '.Organizations';\n                break;\n            case 'Video':\n                pathName += '.VideoPage';\n                // video resource wrappers may not always carry Id, in which case route is impossible to format\n                if (!item || !item.Id) {\n                    return {};\n                }\n                break;\n            case 'Videos':\n                pathName += '.Videos';\n                break;\n            case 'Community':\n                pathName += '.CommunityHome';\n                break;\n            default:\n                // TODO: use the parameter as path name itself\n                pathName = itemType;\n            }\n\n            let route;\n            if (item) {\n                const urlName = this.getSlugUrlName(item);\n\n                // - displayed section can be a combination of different subpages\n                // - given params override these defaults\n                route = {\n                    name: pathName,\n                    params: _.extend({}, { // path params\n                        id: (item.Id || item.ActorId),\n                        urlName: urlName\n                    }, params),\n                    query: { // other url params (?...&...)\n                        UseProfile: useProfile\n                    }\n                };\n            }\n            else {\n                route = { name: pathName };\n            }\n            return route;\n        },\n\n\n        /**\n        * Get route to an item.\n        * The simple way.\n        */\n        getLocalizedRoute: function (view, locale, query = {}, params = {}) {\n            let route = {};\n            if (view && locale) {\n                route = { name: `${locale}.${view}`, params, query };\n            }\n            return route;\n        }\n    }\n};\n","export default {\n\n    props: {\n        disableIntersectionObserver: {    type: Boolean }\n    },\n\n    data: function () {\n        const intersectionOptions = {\n            rootMargin: '400px 200px',\n            threshold: 0\n        };\n        return {\n            observeVisibilityOptions: {\n                callback: this.visibilityChanged,\n                throttle: 300,\n                throttleOptions: {leading: 'visible'},\n                intersection: intersectionOptions\n            },\n            isIntersectionVisible: false,\n            intersectionRemainsVisible: false,\n            intersectionHideTimeout: 5000,\n            intersectionOptions, // for customized components using the defaults\n            debouncedHide: null\n        };\n    },\n\n    created: function () {\n        if (this.disableIntersectionObserver\n            || this.isTestEnv) {\n\n            this.isIntersectionVisible = true;\n        }\n    },\n\n    mounted: function () {\n        this.debouncedHide = _.debounce(this.onIntersectHide, this.intersectionHideTimeout, {trailing: true});\n    },\n\n    beforeDestroy: function () {\n        this.debouncedHide.cancel();\n        this.debouncedHide = null;\n    },\n\n    methods: {\n        visibilityChanged: function (isVisible, entry) {\n            if (this.disableIntersectionObserver) {\n                return;\n            }\n\n            /**\n             * was hidden, now shown\n             */\n            if (!this.isIntersectionVisible && isVisible && this.intersectionOptions) {\n                this.debouncedHide.cancel();\n\n                this.isIntersectionVisible = isVisible; // set before onIntersectShow\n                this.onIntersectShow(entry);\n\n                // if intersection should remain visible, v-observe-visibility options can be set to false\n                if (this.intersectionRemainsVisible) {\n                    this.intersectionOptions = false; // basically should halt the v-observe-visibility\n                }\n            }\n            /**\n             * was shown, now hidden\n             */\n            else if (this.isIntersectionVisible && !isVisible && !this.intersectionRemainsVisible) {\n                this.isIntersectionVisible = isVisible;\n                this.debouncedHide(entry);\n            }\n            else {\n                this.isIntersectionVisible = isVisible;\n            }\n        },\n\n        onIntersectShow: function (entry) {\n            // console.log(`${this.$vnode && this.$vnode.tag} returning visible`);\n        },\n\n        onIntersectHide: function (entry) {\n            // console.log(`${this.$vnode && this.$vnode.tag} turning invisible`);\n        }\n    }\n};\n","import IntersectionObserverMixin from '@/components/Base/IntersectionObserverMixin';\nimport HyperlinkMixin from '@/components/Base/HyperlinkMixin';\n\nexport default {\n\n    props: {\n        items: { type: Array[Object] }\n    },\n\n    mixins: [ IntersectionObserverMixin, HyperlinkMixin ],\n\n    data: function () {\n        return {\n            ready: true,\n            error: null\n        };\n    },\n\n    mounted: function () {\n        this.initSection();\n    },\n\n    watch: {\n        items: function () {\n            this.initSection();\n        }\n    },\n\n    methods: {\n        initSection: function () {\n            this.ready = (this.items && this.items.length);\n        },\n\n        getLocalizedSearchRoute: function (view, query = {}) {\n            return this.getLocalizedRoute(view, this.$i18n.locale, query);\n        }\n    }\n};\n","module.exports = __webpack_public_path__ + \"static/img/background-1.c634492.jpg\";","module.exports = __webpack_public_path__ + \"static/img/taide-art-white.d89e428.svg\";","var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    {\n      directives: [\n        {\n          name: \"observe-visibility\",\n          rawName: \"v-observe-visibility\",\n          value: _vm.observeVisibilityOptions,\n          expression: \"observeVisibilityOptions\",\n        },\n        {\n          name: \"touch\",\n          rawName: \"v-touch:swipe.left\",\n          value: _vm.debouncedNext,\n          expression: \"debouncedNext\",\n          arg: \"swipe\",\n          modifiers: { left: true },\n        },\n        {\n          name: \"touch\",\n          rawName: \"v-touch:swipe.right\",\n          value: _vm.debouncedPrevious,\n          expression: \"debouncedPrevious\",\n          arg: \"swipe\",\n          modifiers: { right: true },\n        },\n        {\n          name: \"touch-options\",\n          rawName: \"v-touch-options\",\n          value: { swipeTolerance: 30 },\n          expression: \"{swipeTolerance: 30}\",\n        },\n      ],\n      staticClass: \"home-front-pages\",\n      style: _vm.backgroundStyle,\n    },\n    [\n      (_vm.currentHero &&\n        _vm.currentHero.Name === \"intro\" &&\n        _vm.isIntersectionVisible) ||\n      _vm.heros.length <= 1\n        ? _c(\"home-hero-page\", {\n            ref: \"heroPage\",\n            staticClass: \"taide-art\",\n            class:\n              (_vm.showInfobox ? \"infobox-visible\" : \"infobox-hidden\") +\n              (_vm.coverImageIndex < 1 ? \" initial\" : \"\"),\n            attrs: { spotlight: _vm.introHero, \"next-item\": _vm.nextItem },\n            scopedSlots: _vm._u(\n              [\n                {\n                  key: \"infobox\",\n                  fn: function () {\n                    return [\n                      _c(\n                        \"div\",\n                        { staticClass: \"logo\" },\n                        [\n                          _c(\"image-box\", {\n                            attrs: {\n                              src: require(\"assets/images/taide-art-white.svg\"),\n                              \"image-alt-text\": \"taide.art\",\n                            },\n                            scopedSlots: _vm._u(\n                              [\n                                {\n                                  key: \"not-available\",\n                                  fn: function () {\n                                    return [\n                                      _c(\"div\", { staticClass: \"is-hidden\" }),\n                                    ]\n                                  },\n                                  proxy: true,\n                                },\n                              ],\n                              null,\n                              false,\n                              2309297513\n                            ),\n                          }),\n                        ],\n                        1\n                      ),\n                      _vm.loginPhase === _vm.phaseBusy\n                        ? _c(\n                            \"div\",\n                            { staticClass: \"logging-in\" },\n                            [_c(\"loading-spinner\")],\n                            1\n                          )\n                        : _c(\"div\", { staticClass: \"call-to-action\" }, [\n                            _c(\"h3\", {\n                              domProps: {\n                                innerHTML: _vm._s(_vm.$t(\"home.callToAction\")),\n                              },\n                            }),\n                          ]),\n                    ]\n                  },\n                  proxy: true,\n                },\n              ],\n              null,\n              false,\n              2418546234\n            ),\n          })\n        : _vm.isIntersectionVisible\n        ? _c(\"home-hero-page\", {\n            ref: \"heroPage\",\n            class: _vm.showInfobox ? \"infobox-visible\" : \"infobox-hidden\",\n            attrs: {\n              spotlight: _vm.currentItem,\n              \"resource-type\": _vm.currentResourceType,\n              \"next-item\": _vm.nextItem,\n            },\n            scopedSlots: _vm._u([\n              {\n                key: \"infobox\",\n                fn: function () {\n                  return [\n                    _vm.currentResourceType === \"Artwork\"\n                      ? _c(\"artwork-card\", {\n                          attrs: {\n                            item: _vm.currentItem,\n                            \"link-to-artwork\": true,\n                            social: false,\n                            media: false,\n                          },\n                        })\n                      : _vm.currentResourceType === \"FeatureArticle\"\n                      ? _c(\"feature-article-card\", {\n                          class: _vm.coverImageIndex % 2 === 0 ? \"odd\" : \"even\",\n                          attrs: {\n                            item: _vm.currentItem,\n                            hero: true,\n                            header: false,\n                          },\n                        })\n                      : _vm.currentResourceType === \"Collection\"\n                      ? _c(\n                          \"collection-card\",\n                          { attrs: { item: _vm.currentItem, social: false } },\n                          [\n                            _vm.currentItem.TagLine\n                              ? _c(\"div\", { staticClass: \"tagline\" }, [\n                                  _vm._v(_vm._s(_vm.currentItem.TagLine)),\n                                ])\n                              : _vm._e(),\n                            _vm.currentItem.IngressText\n                              ? _c(\"div\", {\n                                  staticClass: \"ingress-text\",\n                                  domProps: {\n                                    innerHTML: _vm._s(\n                                      _vm.currentItem.IngressText\n                                    ),\n                                  },\n                                })\n                              : _vm._e(),\n                            _vm.currentItem.BodyHtml\n                              ? _c(\"div\", {\n                                  staticClass: \"body-html\",\n                                  domProps: {\n                                    innerHTML: _vm._s(_vm.currentItem.BodyHtml),\n                                  },\n                                })\n                              : _vm._e(),\n                          ]\n                        )\n                      : _vm.currentResourceType === \"Event\"\n                      ? _c(\n                          \"event-card\",\n                          {\n                            attrs: {\n                              item: _vm.currentItem,\n                              resolution: { x: \"100vw\", y: \"100vh\" },\n                              social: false,\n                            },\n                          },\n                          [\n                            _vm.currentItem.TagLine\n                              ? _c(\"div\", { staticClass: \"tagline\" }, [\n                                  _vm._v(_vm._s(_vm.currentItem.TagLine)),\n                                ])\n                              : _vm._e(),\n                            _vm.currentItem.IngressText\n                              ? _c(\"div\", {\n                                  staticClass: \"ingress-text\",\n                                  domProps: {\n                                    innerHTML: _vm._s(\n                                      _vm.currentItem.IngressText\n                                    ),\n                                  },\n                                })\n                              : _vm._e(),\n                          ]\n                        )\n                      : _vm.currentResourceType === \"Actor\"\n                      ? _c(\"actor-highlights\", {\n                          ref: \"actorHighlights\",\n                          attrs: {\n                            items: [_vm.currentItem],\n                            \"slick-options\": _vm.unSlickOptions,\n                            \"show-body\": false,\n                            \"show-artworks\": false,\n                          },\n                        })\n                      : _vm._e(),\n                  ]\n                },\n                proxy: true,\n              },\n            ]),\n          })\n        : _vm._e(),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { staticClass: \"hero-page\", class: _vm.className, style: _vm.style },\n    [\n      _vm.$slots[\"infobox\"] && !_vm.infoBoxHoldout\n        ? _c(\n            \"div\",\n            { ref: \"infoBox\", staticClass: \"infobox\", style: _vm.infoBoxStyle },\n            [_vm._t(\"infobox\", null, { item: _vm.spotlight })],\n            2\n          )\n        : _vm.spotlight && !_vm.infoBoxHoldout\n        ? _c(\n            \"div\",\n            { ref: \"infoBox\", staticClass: \"infobox\", style: _vm.infoBoxStyle },\n            [\n              _c(\"h2\", { staticClass: \"title\" }, [\n                _vm._v(_vm._s(_vm.spotlight.Name)),\n              ]),\n              _vm.spotlight.IngressText\n                ? _c(\"div\", {\n                    staticClass: \"ingress-text\",\n                    domProps: { innerHTML: _vm._s(_vm.spotlight.IngressText) },\n                  })\n                : _vm._e(),\n            ]\n          )\n        : _vm._e(),\n      _vm.nextImageSrc\n        ? _c(\"img\", {\n            staticClass: \"preload-image\",\n            attrs: { src: _vm.nextImageSrc },\n          })\n        : _vm._e(),\n    ]\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import mod from \"-!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeroPage.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeroPage.vue?vue&type=script&lang=js&\"","<template lang=\"pug\">\ndiv.hero-page(\n    v-bind:class=\"className\"\n    v-bind:style=\"style\")\n\n    div.infobox(\n        ref=\"infoBox\"\n        v-if=\"$slots['infobox'] && !infoBoxHoldout\"\n        v-bind:style=\"infoBoxStyle\")\n        slot(name=\"infobox\" v-bind:item=\"spotlight\")\n\n    div.infobox(\n        ref=\"infoBox\"\n        v-else-if=\"spotlight && !infoBoxHoldout\"\n        v-bind:style=\"infoBoxStyle\")\n\n        h2.title {{ spotlight.Name }}\n        div.ingress-text(v-if=\"spotlight.IngressText\" v-html=\"spotlight.IngressText\")\n\n    //- preload next background image to stop flickering\n    img.preload-image(\n        v-if=\"nextImageSrc\"\n        v-bind:src=\"nextImageSrc\")\n\n</template>\n\n<script>\n/**\n * Fullsize hero image & infobox for Home front-pages loop.\n */\nexport default {\n    name: 'home-hero-page',\n\n    props: {\n        spotlight: {    type: Object },\n        resourceType: { type: String }, // used to set css classname\n        nextItem: {     type: Object } // to preload\n    },\n\n    data: function () {\n        return {\n            imageInfo: null,\n            imageSrc: null,\n            nextImageSrc: null,\n            style: '',\n            className: '',\n            infoBoxStyle: 'display: none;',\n            infoBoxHoldout: true,\n            infoboxHoldoutTimeout: 500,\n            infoBoxHoldoutTimeoutRef: null,\n            debouncedUpdate: _.debounce(this.update, 100, {trailing: true})\n        };\n    },\n\n    created: function () {\n        this.update();\n    },\n\n    watch: {\n        spotlight: function () {\n            this.infoBoxHoldout = true;\n            if (this.infoBoxHoldoutTimeoutRef) {\n                clearTimeout(this.infoBoxHoldoutTimeoutRef);\n            }\n            this.update(); // update page asap\n        }\n    },\n\n    methods: {\n\n        /**\n         * Hero item should always have CoverImageInfo, IngressImageInfo, or ImageInfo.\n         */\n        update: function () {\n            if (!this.spotlight) {\n                return;\n            }\n\n            let imageSrc;\n            const imageAttrs = {resolution: {x: '100vw', y: '100vh'}, missingImage: 'Redirect'};\n            const imageInfo = this.getItemImageInfo(this.spotlight);\n\n            // get background image src\n            if (imageInfo && imageInfo.Url) {\n                imageSrc = this.$helpers.constructImageSrc2(imageInfo.Url, imageAttrs);\n            }\n\n            // get next item image source for preload\n            const nextImageInfo = this.getItemImageInfo(this.nextItem);\n\n            // get background image src\n            if (nextImageInfo && nextImageInfo.Url) {\n                setTimeout(() => {\n                    this.nextImageSrc = this.$helpers.constructImageSrc2(nextImageInfo.Url, imageAttrs);\n                }, 3000);\n            }\n            else {\n                this.nextImageSrc = null;\n            }\n\n            // emit signal to front-page to update background gradient\n            // (disabled for performance reasons)\n            // this.$emit('palette-change', imageInfo);\n\n            this.infoBoxStyle = this.getInfoBoxStyle(imageInfo);\n\n            // infobox needs to be re-positioned after rendering and waiting for transition-duration\n            setTimeout(() => {\n                this.fixInfoBoxStyle();\n            }, 510); // transition-duration 500ms\n\n            // format style with background-image url\n            this.className = this.getClassName();\n\n            if (this.heroIndex === 0) {\n                // the first page should show infobox quickly\n                this.updatePageStyle(imageSrc, imageInfo);\n            }\n            else {\n                // other pages set style and variables after small timeout\n                this.infoBoxHoldoutTimeoutRef = setTimeout(() => { this.updatePageStyle(imageSrc, imageInfo); }, this.infoboxHoldoutTimeout);\n            }\n        },\n\n        /**\n         * Get preferred image info for the background.\n         */\n        getItemImageInfo: function (item) {\n            if (item && item.CoverImageInfo) {\n                return item.CoverImageInfo;\n            }\n            else if (item && item.IngressImageInfo) {\n                return item.IngressImageInfo;\n            }\n            else if (item && item.ImageInfo) {\n                return item.ImageInfo;\n            }\n        },\n\n        updatePageStyle: function (imageSrc, imageInfo) {\n            const style = this.getStyle(imageSrc, imageInfo);\n\n            // set image width & height\n            // NOTE: returning from auth0 login screen with back (instead of logging in)\n            //       will distort the image, because window.innerHeight gives a wrong value.\n            // style += `width: ${window.innerWidth}px;`;\n            // style += `height: ${window.innerHeight}px;`;\n\n            this.style = style;\n            this.imageSrc = imageSrc;\n            this.imageInfo = imageInfo;\n            this.updateInfoboxStyle(imageInfo);\n        },\n\n        /**\n         * In order to prevent infobox flicker during transition (to appear on correct background),\n         * maintain a small time window when infobox is not visible.\n         */\n        updateInfoboxStyle: function (imageInfo) {\n            this.infoBoxHoldout = false;\n            this.infoBoxStyle = this.getInfoBoxStyle(imageInfo);\n            this.$nextTick(this.fixInfoBoxStyle);\n        },\n\n        getClassName: function () {\n            return this.spotlight && `hero-${this.resourceType || 'intro'}`;\n        },\n\n        /**\n         * Spotlight should contain all the information to construct the page\n         * with background, infobox and perhaps suggestion cards.\n         */\n        getStyle: function (imageSrc, imageInfo) {\n            return this.$helpers.getBackgroundImageStyle(imageSrc, null, imageInfo);\n        },\n\n        /**\n         * Render infobox in slightly different positions.\n         */\n        getInfoBoxStyle: function (imageInfo) {\n            const { x, y } = this.getInfoBoxCoordinates(imageInfo);\n\n            let style = '';\n            style += `transform: translateX(${x}vw) translateY(${y}vh);`;\n            // add duration here, so initially it snaps to the correct position\n            style += 'transition-duration: 500ms;';\n\n            return style;\n        },\n\n        /**\n         * After infobox has been rendered, it may be partially out of view.\n         * Its size and position are compared to client screen and moved with marginLeft\n         * to adjust the original positioning done with transform.\n         */\n        fixInfoBoxStyle: function (imageInfo) {\n            const infoBox = this.$refs.infoBox;\n            const infoBoxRect = infoBox && infoBox.getBoundingClientRect();\n\n            if (!infoBoxRect) {\n                return;\n            }\n\n            // get position and size\n            const { left, right, top } = infoBoxRect;\n            // get infobox card height (infobox height is not reliable)\n            const card = infoBox.querySelector('.card');\n            const cardRect = card && card.getBoundingClientRect();\n            const cardHeight = cardRect && cardRect.height;\n\n            const transformStyle = infoBox.style.transform;\n            let match = transformStyle.match(/translateX\\(([-\\d]+)vw/);\n            let translateX = match && parseInt(match[1], 10);\n            match = transformStyle.match(/translateY\\(([-\\d]+)vh/);\n            let translateY = match && parseInt(match[1], 10);\n\n            // hero container, user might have scrolled down\n            const heroRect = this.$el.getBoundingClientRect();\n            const heroBottom = heroRect.bottom;\n\n            const maxRight = window.innerWidth - 45;\n            const maxBottom = heroBottom - 45;\n\n            // infobox overflow in known in pixel amount.\n            // calculate how many pixels 1 vw and vh are, and find how much the translate needs to be adjusted\n            const vwDepth = 100 / window.innerWidth;\n            const vhDepth = 100 / window.innerHeight;\n            if (right > maxRight) {\n                const xOverflow = right - maxRight;\n                translateX -= Math.round(xOverflow * vwDepth);\n                // console.log(\"infobox overflows to the RIGHT by\", xOverflow, right);\n            }\n            // to be sure, check also left and top\n            else if (left < 0) {\n                const xOverflow = (left - 10);\n                translateX -= Math.round(xOverflow * vwDepth);\n                // console.log(\"infobox overflows to the LEFT by\", xOverflow, left);\n            }\n\n            if (heroBottom > maxBottom) {\n                const yOverflow = heroBottom - maxBottom;\n                translateY -= Math.round(yOverflow * vhDepth);\n                // console.log(\"infobox overflows to the BOTTOM by\", yOverflow, top + cardHeight);\n            }\n            else if (cardHeight && (top + cardHeight) > maxBottom) {\n                const yOverflow = top + cardHeight - maxBottom;\n                translateY -= Math.round(yOverflow * vhDepth);\n                // console.log(\"infobox overflows to the BOTTOM by\", yOverflow, top + cardHeight);\n            }\n            else if (top < 110) {\n                const yOverflow = (top - 240);\n                translateY -= Math.round(yOverflow * vwDepth);\n                // console.log(\"infobox overflows to the TOP by\", yOverflow, top);\n            }\n\n            // update infobox transform\n            let transform = '';\n            if (translateX) {\n                const x = _.clamp(translateX, 4, 90);\n                transform += `translateX(${x}vw) `;\n            }\n            if (translateY) {\n                const y = _.clamp(translateY, 5, 90);\n                transform += `translateY(${y}vh)`;\n            }\n            if (transform) {\n                infoBox.style.transform = transform;\n            }\n        },\n\n        /**\n         * Get { x, y } coordinates, value between 0 - 100 of percentage of viewport width / height.\n         * If the given `ImageInfo` has `FocusPoint`, it will be accounted for.\n         * The screen is thought of as four quadrants into which the focus will fall.\n         * FocusPoint 0, 0 is the center, -50 left/top and +50 right/bottom.\n         *\n         * The box might sometimes be partially out of view. To fix this, the box first is rendered\n         * and then its position is adjusted by checking its actual bounding box.\n         *\n         */\n        getInfoBoxCoordinates: function (imageInfo) {\n            let xRange = [0, 25];\n            let yRange = [0, 50];\n            const isMobile = process.client && window.innerWidth < 600;\n\n            // smaller screens!\n            if (isMobile) {\n                xRange = [1];\n                yRange = [8, 20];\n            }\n            if (imageInfo && imageInfo.FocusPoint) {\n                const focusX = imageInfo.FocusPoint[0];\n                const focusY = imageInfo.FocusPoint[1];\n\n                // upper left\n                if (focusX < 0 && focusY < 0) {\n                    // console.log(\"Focus UPPER LEFT\");\n                    if (!isMobile) {\n                        xRange = [20, 25];\n                        yRange = [50, 55];\n                    }\n                    else {\n                        yRange = [14, 20];\n                    }\n                }\n\n                // upper right\n                else if (focusX > 0 && focusY < 0) {\n                    // console.log(\"Focus UPPER RIGHT\");\n                    if (!isMobile) {\n                        xRange = [0, 5];\n                        yRange = [45, 50];\n                    }\n                    else {\n                        yRange = [14, 20];\n                    }\n                }\n\n                // lower left\n                else if (focusX < 0 && focusY > 0) {\n                    // console.log(\"Focus LOWER LEFT\");\n                    if (!isMobile) {\n                        xRange = [5, 25];\n                        yRange = [5, 15];\n                    }\n                }\n\n                // lower right\n                else if (focusX > 0 && focusY > 0) {\n                    // console.log(\"Focus LOWER RIGHT\");\n                    if (!isMobile) {\n                        xRange = [0, 0];\n                        yRange = [5, 15];\n                    }\n                }\n            }\n\n            const x = _.sample(xRange);\n            const y = _.sample(yRange);\n\n            return { x, y };\n        }\n    }\n};\n</script>\n\n<style lang=\"scss\">\n// @import '~assets/styles/variables';\n\n.hero-page {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9999;\n    display: flex;\n    flex-direction: row;\n    align-items: left;\n    width: 100vw;\n    // height: calc(100vh - 108px); // navbar height ~108px\n    height: 100vh; // with transparent navbar position: absolute\n    margin: 0;\n    padding: 110px $main-content-margin 0;\n    text-align: center;\n    vertical-align: middle;\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: 50%;\n    // background image transition effect\n    transition-property: background-image, background-position;\n    transition-duration: 1s;\n    transition-timing-function: ease-in-out;\n    &.is-fullheight {\n        position: absolute;\n        background-attachment: fixed;\n        background-size: cover;\n        background-position: center center;\n    }\n    .contents {\n        justify-content: space-between;\n        width: 100%;\n    }\n    .segment {\n        max-width: $main-content-max-width;\n    }\n    .card {\n        .card-image {\n            // hide card image\n            display: none;\n        }\n        .card-header {\n            background: rgba(239, 239, 239, 0.75);\n        }\n    }\n    .btn {\n        display: inline-flex;\n        align-content: center;\n        text-align: middle;\n        span {\n            align-self: center;\n        }\n    }\n    .infobox {\n        position: static;\n        top: 0;\n        left: 0;\n        width: auto;\n        min-width: 460px;\n        max-width: 75vw;\n        margin-right: auto;\n        margin-left: auto;\n        transform: translateX(120vw) translateY(50vh); // initially position outside the screen\n        transition-property: transform, opacity;\n        transition-duration: 240ms; // will be reset in script, this is for initial infobox\n        transition-timing-function: ease-in-out;\n        h4 {\n            margin: 1.5rem auto 2rem;\n            font-size: 1.5rem;\n        }\n        em {\n            font-size: 1.5rem;\n        }\n        .buttons {\n            display: inline-flex;\n            align-items: center;\n            justify-items: center;\n        }\n        button.btn {\n            margin: 2rem 0.5rem 0.5rem !important;\n            padding: 10px 0.8rem !important;\n            font-family: $helvetica-bold;\n            color: $dark-gray-2;\n            text-transform: uppercase;\n            background: $light-gray;\n        }\n    }\n    .preload-image {\n        z-index: -1;\n        display: none;\n    }\n\n    @media screen and (max-width: $breakpoint-mobile - 1) {\n        padding-right: 0;\n        padding-left: 0;\n        .segment {\n            max-width: $mobile-content-max-width;\n            margin-top: 0;\n        }\n        .infobox {\n            min-width: unset;\n            max-width: 98vw;\n        }\n    }\n}\n</style>\n","import { render, staticRenderFns } from \"./HeroPage.vue?vue&type=template&id=32612185&lang=pug&\"\nimport script from \"./HeroPage.vue?vue&type=script&lang=js&\"\nexport * from \"./HeroPage.vue?vue&type=script&lang=js&\"\nimport style0 from \"./HeroPage.vue?vue&type=style&index=0&id=32612185&prod&lang=scss&\"\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","<template lang=\"pug\">\ndiv.home-front-pages(\n    v-observe-visibility=\"observeVisibilityOptions\"\n    v-touch:swipe.left=\"debouncedNext\"\n    v-touch:swipe.right=\"debouncedPrevious\"\n    v-touch-options=\"{swipeTolerance: 30}\"\n    v-bind:style=\"backgroundStyle\")\n\n    //- taide.art intro logo page\n    home-hero-page.taide-art(\n        v-if=\"(currentHero && currentHero.Name === 'intro' && isIntersectionVisible) || heros.length <= 1\"\n        ref=\"heroPage\"\n        v-bind:spotlight=\"introHero\"\n        v-bind:next-item=\"nextItem\"\n        v-bind:class=\"(showInfobox ? 'infobox-visible' : 'infobox-hidden') + (coverImageIndex < 1 ? ' initial' : '')\")\n\n        template(#infobox=\"\")\n\n            div.logo\n                image-box(v-bind:src=\"require('assets/images/taide-art-white.svg')\" image-alt-text=\"taide.art\")\n                    template(#not-available=\"\")\n                        div.is-hidden\n\n            //- is user waiting for login confirmation?\n            div.logging-in(v-if=\"loginPhase === phaseBusy\")\n                loading-spinner\n\n            div.call-to-action(v-else)\n                h3(v-html=\"$t('home.callToAction')\")\n\n\n    //- PageItem \"hero-page\"\n    //- This sets the big background image! Only one is rendered in html at one time!\n    home-hero-page(\n        v-else-if=\"isIntersectionVisible\"\n        ref=\"heroPage\"\n        v-bind:spotlight=\"currentItem\"\n        v-bind:resource-type=\"currentResourceType\"\n        v-bind:next-item=\"nextItem\"\n        v-bind:class=\"showInfobox ? 'infobox-visible' : 'infobox-hidden'\")\n\n        template(#infobox=\"\")\n\n            artwork-card(\n                v-if=\"currentResourceType === 'Artwork'\"\n                v-bind:item=\"currentItem\"\n                v-bind:link-to-artwork=\"true\"\n                v-bind:social=\"false\"\n                v-bind:media=\"false\")\n\n            feature-article-card(\n                v-else-if=\"currentResourceType === 'FeatureArticle'\"\n                v-bind:item=\"currentItem\"\n                v-bind:hero=\"true\"\n                v-bind:header=\"false\"\n                v-bind:class=\"coverImageIndex % 2 === 0 ? 'odd' : 'even'\")\n\n            collection-card(\n                v-else-if=\"currentResourceType === 'Collection'\"\n                v-bind:item=\"currentItem\"\n                v-bind:social=\"false\")\n                div.tagline(\n                    v-if=\"currentItem.TagLine\") {{ currentItem.TagLine }}\n                div.ingress-text(\n                    v-if=\"currentItem.IngressText\" v-html=\"currentItem.IngressText\")\n                div.body-html(\n                    v-if=\"currentItem.BodyHtml\" v-html=\"currentItem.BodyHtml\")\n\n            event-card(\n                v-else-if=\"currentResourceType === 'Event'\"\n                v-bind:item=\"currentItem\"\n                v-bind:resolution=\"{x: '100vw', y: '100vh'}\"\n                v-bind:social=\"false\")\n                div.tagline(\n                    v-if=\"currentItem.TagLine\") {{ currentItem.TagLine }}\n                div.ingress-text(\n                    v-if=\"currentItem.IngressText\" v-html=\"currentItem.IngressText\")\n\n            actor-highlights(\n                ref=\"actorHighlights\"\n                v-else-if=\"currentResourceType === 'Actor'\"\n                v-bind:items=\"[currentItem]\"\n                v-bind:slick-options=\"unSlickOptions\"\n                v-bind:show-body=\"false\"\n                v-bind:show-artworks=\"false\")\n\n\n    //- screen overlay actions (prev and next icons) - disabled\n    //- div.hero-navigation\n    //-     icon-chevron-left.previous-icon(\n    //-         v-on:click=\"debouncedPrevious\"\n    //-         title=\"\")\n    //-     icon-chevron-right.next-icon(\n    //-         v-on:click=\"debouncedNext\"\n    //-         title=\"\")\n\n\n</template>\n\n<script>\nimport { createNamespacedHelpers } from 'vuex';\n\nimport HomeHeroPage from '@/components/Home/HeroPage.vue';\nimport HeroMixin from '@/components/Home/HeroMixin.js';\nimport IntersectionObserverMixin from '@/components/Base/IntersectionObserverMixin.js';\nimport { phaseBusy, phaseAuthenticated } from '@/store/ux.js';\n\nconst mapStateUx = createNamespacedHelpers('ux').mapState;\n\nconst PAGE_UPDATE_INTERVAL = 12000;\nconst INFOBOX_FADEIN_TIME = 1250;\nconst INFOBOX_FADEOUT_TIME = 1500;\n\nexport default {\n    name: 'home-front-pages',\n\n    props: {\n        svcPages: {          type: Array[Object] }\n    },\n\n    mixins: [ HeroMixin, IntersectionObserverMixin ],\n\n    components: {\n        HomeHeroPage,\n        ActorHighlights: () => import(/* webpackPrefetch: true */'@/components/Actor/Highlights')\n    },\n\n    computed: {\n        ...mapStateUx({\n            loginPhase: state => state.loginPhase,\n            frontPageHeroIndex: state => state.frontPageHeroIndex,\n            frontPageHeroIndexTime: state => state.frontPageHeroIndexTime,\n            frontPageCoverIndex: state => state.frontPageCoverIndex\n        })\n    },\n\n    data: function () {\n        return {\n            // heros will be appended with PageItems\n            heros: [],\n            // heroIndex is the main loop index, 0 being intro logo page\n            heroIndex: 0,\n            // intro hero\n            introHero: {\n                Name: 'intro',\n                ClassName: 'hero-intro',\n                CoverImageInfo: {\n                    Url: require('static/static/coverimages/background-1.jpg')\n                },\n                ResourceType: 'intro',\n                anchor: {\n                    fi: 'etusivu',\n                    en: 'intro',\n                    sv: 'intro'\n                }\n            },\n            // currentHero is intro page (object or null) or PageItem\n            currentHero: null,\n            // currentItem is the resource unwrapped from PageItem\n            currentItem: null,\n            currentResourceType: null,\n            // next item to preload\n            nextItem: null,\n            // coverImages are for intro logo page background cover\n            coverImages: [],\n            coverImageIndex: 0,\n            showInfobox: true,\n            infoboxTimeoutRef: null,\n            animationFrameRef: null,\n            animationFrameInterval: 2000,\n            animationFrameTimeoutRef: null,\n            heroFrameReset: false,\n            heroFrameTimestamp: 0,\n            playing: false,\n            backgroundStyle: '',\n            phaseBusy,\n            // init is called when authentication state and svc pages change\n            debouncedInit: _.debounce(this.init, 200, {trailing: true}),\n            // debouncing prevents user action flood, called by swipe gestures and chevron icons.\n            // action starts at leading edge, but another one won't be accepted within the given timeframe\n            debouncedNext: _.debounce(this.next, 1500, {leading: true}),\n            debouncedPrevious: _.debounce(this.previous, 1500, {leading: true}),\n            observeVisibilityOptions: {\n                callback: this.visibilityChanged,\n                throttle: 300,\n                throttleOptions: {leading: 'visible'},\n                intersection: {\n                    rootMargin: '1200px 0px',\n                    threshold: 0\n                }\n            },\n            unSlickOptions: {\n                slidesToShow: 1,\n                rows: 1,\n                arrows: false\n            }\n        };\n    },\n\n    created: function () {\n        this.heros = this.getHeros();\n        this.currentHero = this.introHero;\n\n        this.coverImages = this.getPagesCoverImages();\n        // show static cover image until pages have loaded\n        if (!this.coverImages || !this.coverImages.length) {\n            this.coverImages = [this.introHero.CoverImageInfo];\n        }\n        // restore stored cover index\n        this.coverImageIndex = this.frontPageCoverIndex;\n\n        // background css is heavy to load\n        // this.backgroundStyle = this.setLoadingBackgroundStyle();\n\n        // set the max-height of the element --\n        // NOTE: there is an issue where coming back from auth0 login screen will cause the front-page image\n        //       height to increase to 4096px distorting the image. In this case window.innerHeight will give\n        //       a wrong value. Setting this container height so that the image would not grow too large.\n        this.backgroundStyle = `max-height: ${window.screen.availHeight}px;`; // eslint-disable-line\n    },\n\n    mounted: function () {\n        // global API method to change to given page and stop the loop\n        window.TAIDEART.showFrontPage = this.changeToPage;\n        window.TAIDEART.stopFrontPageLoop = this.stop;\n    },\n\n    beforeDestroy: function () {\n        this.stop();\n    },\n\n    watch: {\n        /**\n         * When svc/pages (passed as props) are fetched and in store, the loop may begin.\n         */\n        svcPages: function () {\n            this.heros = this.getHeros();\n            this.coverImages = this.getPagesCoverImages();\n            this.debouncedInit();\n        },\n\n        /**\n         * Change in authentication state\n         */\n        loginPhase: function () {\n            this.debouncedInit();\n        },\n\n        /**\n         * Flag used to keep track of current page timeout reset\n         */\n        currentHero: function () {\n            this.heroFrameReset = true;\n        }\n    },\n\n    methods: {\n        /**\n         * Prepare and update initial page.\n         * If the user is authenticated, start directly from PageItems.\n         */\n        init: function () {\n            // frontPageHeroIndexTime will hard reset the page loop every 2 days\n            const millisec_diff = new Date().getTime() - this.frontPageHeroIndexTime;\n            const days = Math.floor(millisec_diff / 1000 / 60 / (60 * 24));\n\n            if (days > 2) {\n                // hero index time can be updated once all pages loop\n                // (this is used to reset the cycle after a certain amount of dats)\n                this.$store.commit('ux/setFrontPageHeroIndexTime', new Date().getTime());\n\n                // increase counter (used for logo page CoverImage and minor visual variations on other pages)\n                this.coverImageIndex += 1;\n                this.$store.commit('ux/setFrontPageCoverIndex', this.coverImageIndex);\n\n                this.reset();\n            }\n            else {\n                this.heroIndex = this.frontPageHeroIndex; // stored value\n            }\n\n            // authenticated users start the hero index loop from the first PageItem\n            if (this.loginPhase >= phaseAuthenticated && this.heroIndex === 0) {\n                this.heroIndex = 1;\n            }\n\n            this.currentHero = this.heros[this.heroIndex];\n            this.currentResourceType = this.getHeroResourceType(this.currentHero);\n            this.currentItem = this.currentResourceType && this.currentHero[this.currentResourceType];\n\n            // get next hero to preload the bg image\n            this.nextItem = this.getNextItem();\n\n            // with more heros than the static front page, start the loop\n            if (this.heros.length > 1 && !this.playing) {\n                this.play();\n            }\n        },\n\n        /**\n         * Heros combine main site intro landing page and svc/pages PageItems.\n         */\n        getHeros: function () {\n            return _.compact([this.introHero].concat(this.svcPages.PageItems));\n        },\n\n        /**\n         * Intro logo page background images.\n         */\n        getPagesCoverImages: function () {\n            return this.svcPages.CoverImages;\n        },\n\n        /**\n         * Update to the next hero, in a loop,\n         * returning to the first \"intro\" hero with logo and dynamic background from CoverImages.\n         */\n        update: function () {\n            if (!this.heros || !this.heros.length) {\n                return;\n            }\n\n            // loop heros with modulo\n            this.heroIndex = this.heroIndex % this.heros.length;\n\n            // change current page contents\n            this.currentHero = this.heros[this.heroIndex] || {};\n            this.currentResourceType = this.getHeroResourceType(this.currentHero);\n\n            if (this.heroIndex === 0) {\n                // change intro logo page background\n                const coverImageCount = this.coverImages && this.coverImages.length;\n                if (coverImageCount) {\n                    this.currentHero.CoverImageInfo = this.coverImages[this.coverImageIndex % coverImageCount];\n                }\n                this.currentItem = this.introHero;\n            }\n            else {\n                // get item by its resource key (from PageItems)\n                this.currentItem = this.currentHero[this.currentResourceType];\n            }\n\n            // get next hero to preload the bg image\n            this.nextItem = this.getNextItem();\n\n            // empty item that is not intro page, skip to next\n            if (!this.currentItem && this.currentResourceType !== 'intro') {\n                this.heroIndex += 1;\n                this.update();\n            }\n        },\n\n        /**\n         * Get the (unwrapped) item from next hero.\n         */\n        getNextItem: function () {\n            const nextItem = this.heros[((this.heroIndex + 1) % this.heros.length)] || null;\n            if (nextItem) {\n                // next intro cover image\n                if (nextItem.Name === 'intro') {\n                    const coverImageCount = this.coverImages && this.coverImages.length;\n                    if (coverImageCount) {\n                        return {CoverImageInfo: this.coverImages[this.coverImageIndex % coverImageCount]};\n                    }\n                    else {\n                        return null;\n                    }\n                }\n\n                // unwrap next hero item\n                const type = this.getHeroResourceType(nextItem);\n                return type && nextItem[type];\n            }\n        },\n\n        /**\n         * Page update interval, depends on network connection speed (`navigator.connection.downlink`)\n         * Pages are given more time with slow connections on the first loop\n         */\n        getPageInterval: function () {\n            let interval = PAGE_UPDATE_INTERVAL;\n\n            // initial front page changes faster\n            if (this.heroIndex === 0) {\n                interval = interval / 3;\n            }\n\n            // increase the first hero loop for slow downlink speeds\n            if ((this.frontPageCoverIndex < 1) &&\n                (navigator && navigator.connection && navigator.connection.downlink)) {\n\n                // increase interval on slow connections\n                if (navigator.connection.downlink < 0.5) {\n                    interval *= 1.25;\n                }\n                else if (navigator.connection.downlink < 1.5) {\n                    interval *= 1.15;\n                }\n                else if (navigator.connection.downlink < 2.5) {\n                    interval *= 1.05;\n                }\n            }\n            return interval;\n        },\n\n        /**\n         * Get Resource key from PageItem.\n         */\n        getHeroResourceType: function (hero) {\n            let key;\n            if (this.heroIndex > 0 && hero) {\n                key = Object.keys(hero)[0];\n            }\n            return key || (hero && hero.ResourceType);\n        },\n\n        showInfoboxWithTimeout: function (fadeinTime) {\n            if (this.infoboxTimeoutRef) {\n                clearTimeout(this.infoboxTimeoutRef);\n            }\n            this.infoboxTimeoutRef = setTimeout(this.showInfoboxNow, fadeinTime || INFOBOX_FADEIN_TIME);\n        },\n\n        showInfoboxNow: function () {\n            if (this.infoboxTimeoutRef) {\n                clearTimeout(this.infoboxTimeoutRef);\n            }\n            this.showInfobox = true;\n\n            // reslick actors\n            this.$refs.actorHighlights && this.$refs.actorHighlights.$refs.SlickSlides &&\n                this.$refs.actorHighlights.$refs.SlickSlides.reSlick();\n        },\n\n        hideInfoboxNow: function () {\n            if (this.infoboxTimeoutRef) {\n                clearTimeout(this.infoboxTimeoutRef);\n            }\n            this.showInfobox = false;\n\n            return new Promise((resolve) => {\n                // wait for transform-duration to resolve Promise\n                this.infoboxTimeoutRef = setTimeout(resolve, 510);\n            });\n        },\n\n        /**\n         * Callback for `requestAnimationFrame`\n         */\n        animate: function (timestamp) {\n            // dynamic interval between hero page change (ms)\n            const heroFrameT1 = this.getPageInterval();\n\n            if (this.heroFrameReset) {\n                this.heroFrameTimestamp = timestamp;\n                this.heroFrameReset = false;\n            }\n            // time delta in this frame\n            const heroFrameTDelta = timestamp - this.heroFrameTimestamp;\n\n            // update page if time delta exceeds interval\n            if (this.playing) {\n                if (heroFrameTDelta > heroFrameT1) {\n                    // if playing the loop, update page\n                    if (this.playing) {\n                        this.debouncedNext();\n                        // set timestamp to when page will change\n                        this.heroFrameTimestamp = timestamp + 500; // + transition duration\n                    }\n                    // skip next frame request, if loop is stopped then animation will also be stopped\n                    return;\n                }\n                // page background still visible, hide infobox a few seconds before change\n                else if (this.showInfobox && heroFrameTDelta > (heroFrameT1 - INFOBOX_FADEOUT_TIME)) {\n                    this.hideInfoboxNow();\n                }\n                // infobox is hidden during page change, and appears soon after\n                else if (!this.showInfobox && heroFrameTDelta > INFOBOX_FADEIN_TIME) {\n                    this.showInfoboxNow();\n                }\n            }\n            else if (!this.showInfobox) {\n                this.showInfoboxNow();\n            }\n\n            // delay next hero frame\n            this.animationFrameTimeoutRef = setTimeout(() => {\n                this.animationFrameRef = requestAnimationFrame(this.animate);\n            }, this.animationFrameInterval);\n        },\n\n        /**\n         * Loop with recursive `requestAnimationFrame`\n         */\n        play: function () {\n            this.playing = true;\n            this.animationFrameRef = requestAnimationFrame(this.animate);\n        },\n\n        stop: function () {\n            this.playing = false;\n            // prevent next animation frame\n            if (this.animationFrameRef) {\n                cancelAnimationFrame(this.animationFrameRef);\n                this.animationFrameRef = null;\n            }\n            // prevent next frame request\n            if (this.animationFrameTimeoutRef) {\n                clearTimeout(this.animationFrameTimeoutRef);\n                this.animationFrameTimeoutRef = null;\n            }\n            if (this.infoboxTimeoutRef) {\n                clearTimeout(this.infoboxTimeoutRef);\n                this.infoboxTimeoutRef = null;\n            }\n        },\n\n        next: function () {\n            // can exceed `heros` length\n            this.changeToPage(this.heroIndex + 1);\n        },\n\n        previous: function () {\n            // a negative index will not go to the last page from previous() of the first page\n            let heroIndex = this.heroIndex - 1;\n            if (heroIndex < 0) {\n                heroIndex += this.heros.length;\n            }\n            this.changeToPage(heroIndex);\n        },\n\n        reset: function () {\n            this.stop();\n            this.heroIndex = 0;\n            this.currentHero = this.heros[this.heroIndex];\n            this.showInfoboxNow();\n            // this.coverImageIndex = 0; // coverImageIndex intentionally not reset\n        },\n\n        /**\n         * Change to given page in `heros`\n         */\n        changeToPage: function (heroIndex) {\n            // stop animation, prevent next update\n            this.stop();\n\n            // update store value (computed property has no setter)\n            this.$store.commit('ux/setFrontPageHeroIndex', heroIndex);\n            this.heroIndex = heroIndex;\n\n            this.hideInfoboxNow()\n                .then(() => {\n                    // user may have navigated out of the page, observer stopped the loop, but this occurs\n                    this.update();\n                    if (!this.playing) {\n                        this.play();\n                    }\n                });\n        },\n\n        /**\n         * Get loading background gradient from palette colors. Defaults to scss gradient.\n         */\n        // setLoadingBackgroundStyle: function (imageInfo) {\n        //     if (!imageInfo) {\n        //         this.loadingBackgroundStyle = ''; // css default\n        //         return;\n        //     }\n        //     this.loadingBackgroundStyle = this.$helpers.getPaletteColorsBackgroundStyle(imageInfo);\n        // },\n\n        /**\n         * Reset to intro when hidden (scrolled down)\n         */\n        onIntersectHide: function () {\n            this.stop();\n        },\n\n        /**\n         * Loop starts when intersect is shown, if ../pages are ready.\n         * The loop might be started in the svcPages watcher, as well.\n         */\n        onIntersectShow: function () {\n            this.debouncedInit();\n        }\n    }\n};\n</script>\n\n<style lang=\"scss\">\n// @import '~assets/styles/mixins';\n\n.home-front-pages {\n    position: relative;\n    width: 100vw;\n    height: 100vh;\n\n    // common background gradient to show until the image loads\n    background-image:\n        linear-gradient(\n            180deg,\n            rgba(2, 0, 36, 1) 0%,\n            rgba(23, 30, 47, 1) 33%,\n            rgba(45, 63, 105, 1) 57%,\n            rgba(171, 160, 146, 1) 100%\n        );\n\n    // taide.art front page\n    .taide-art {\n        .infobox {\n            position: relative;\n            top: 0 !important;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            // justify-content: flex-end; // with flex-direction: column-reverse\n            height: auto;\n            user-select: none;\n            transform: translateX(0) translateY(0) !important;\n            transition-property: transform;\n            transition-duration: 500ms;\n            transition-timing-function: ease-in-out;\n            h4 {\n                font-family: \"Sabon LT W01 Bold\", serif;\n                font-size: 2em;\n            }\n            em {\n                font-family: \"Sabon LT W01 Bold\", serif;\n                font-size: 1.5em;\n            }\n            h2 { // join\n                margin: 0.75rem auto 1.5rem;\n                font-family: \"Sabon LT W01 Regular\", serif;\n                font-size: 32px;\n                letter-spacing: -1px;\n                text-transform: uppercase;\n            }\n            .call-to-action {\n                display: inline-block;\n                padding: 1.25em 1.5em;\n                background-color: rgba(5, 5, 0, 0.50);\n                box-shadow: 2px 2px 8px rgba(5, 5, 0, 0.95);\n            }\n            .call-to-action h3 {\n                width: 100%;\n                margin: auto;\n                padding: 0;\n                font-size: 1.5rem;\n                color: white;\n                text-align: center;\n            }\n            .logo {\n                width: auto;\n                height: auto;\n                margin-top: 7vh;\n                margin-bottom: 4rem;\n                background:\n                    radial-gradient(\n                        farthest-side at 50% 51%,\n                        rgba(5, 5, 0, 0.70),\n                        rgba(5, 5, 0, 0.40) 30%,\n                        rgba(25, 25, 25, 0.50) 35%,\n                        rgba(5, 5, 0, 0.40) 40%,\n                        rgba(5, 5, 0, 0.40) 50%,\n                        rgba(25, 25, 25, 0.50) 55%,\n                        rgba(5, 5, 0, 0.40) 60%,\n                        rgba(5, 5, 0, 0.20) 80%,\n                        rgba(5, 5, 0, 0) 97%\n                    );\n                figure .image {\n                    height: 220px !important; // taide.art svg logo\n                    margin-right: auto;\n                    margin-left: auto;\n                }\n            }\n            .buttons {\n                align-content: center;\n                justify-content: center;\n                margin-top: 1rem;\n                button.btn {\n                    align-self: center;\n                    &.login {\n                        padding: 8px 0.8rem !important;\n                        font-family: $helvetica-medium !important;\n                        color: white !important;\n                        background: transparent !important;\n                        border: 2px solid white !important;\n                    }\n                }\n            }\n            @media screen and (min-width: $breakpoint-widescreen) {\n                width: 100%;\n            }\n            @media screen and (max-width: $breakpoint-tablet - 1) {\n                width: 100% !important;\n                min-width: unset;\n                max-width: 90vw;\n                margin: auto;\n                margin-top: 7vh;\n                padding-right: 0;\n                padding-left: 0;\n                .logo {\n                    width: 100%;\n                }\n                .call-to-action {\n                    max-width: 375px;\n                    margin: auto;\n                    font-size: smaller;\n                }\n            }\n        }\n        @media screen and (max-width: $breakpoint-mobile - 1) {\n            padding-top: 11vh;\n            .infobox {\n                .logo {\n                    margin-top: 4vh;\n                    figure .image {\n                        width: 50vw !important;\n                        height: auto !important;\n                    }\n                }\n                .call-to-action {\n                    max-width: unset;\n                }\n                .buttons {\n                    flex-direction: column-reverse;\n                }\n            }\n            .card {\n                max-width: unset;\n            }\n        }\n        @media screen and (min-width: $breakpoint-desktop) {\n            padding-top: 15vh;\n        }\n    }\n\n    // initial infobox style\n    .initial.taide-art .infobox {\n        .call-to-action {\n            background-color: unset;\n            box-shadow: none;\n        }\n        .logo {\n            background: none;\n        }\n    }\n\n    .hero-page {\n\n        &.infobox-visible .infobox {\n            opacity: 1;\n        }\n        &.infobox-hidden .infobox {\n            opacity: 0;\n        }\n\n        .card {\n            width: auto !important;\n            max-width: 80vw;\n            padding: 1.25rem;\n            color: $dark-gray !important;\n            user-select: none;\n            background: rgba(255, 251, 251, 0.5) !important;\n            backdrop-filter: blur(5px);\n            .card-link {\n                text-decoration: none;\n                .title {\n                    text-decoration: none;\n                }\n            }\n            .tagline {\n                margin: 0 auto 1rem 2rem;\n                font-family: 'Sabon MT W01 Italic', serif;\n                font-weight: 600;\n                font-size: 1rem;\n            }\n            .ingress-text {\n                margin-bottom: 1rem;\n            }\n            .card-header-title {\n                cursor: pointer;\n                @include dowrap;\n                h2 {\n                    @include dowrap;\n                }\n            }\n            .body-html {\n                @include fade-read-more(350px);\n                &::after {\n                    background-image: none;\n                }\n            }\n        }\n\n        .artwork-card {\n            padding-bottom: 0.5rem;\n            background:\n                linear-gradient(\n                    to top,\n                    rgba(255, 244, 241, 0.70),\n                    rgba(255, 255, 255, 0.80) 5%,\n                    rgba(255, 251, 251, 0.90) 95%,\n                    rgba(255, 244, 241, 0.80)\n                ) !important;\n            backdrop-filter: blur(5px);\n            border: 0;\n            // box-shadow: -2px 1px 14px rgba(255, 251, 251, 0.45);\n            .actor-card {\n                margin-top: 1.25rem;\n                padding: 0;\n                background: unset;\n                backdrop-filter: none;\n            }\n            .card-header {\n                background: unset;\n                a.card-link {\n                    background: unset;\n                }\n                // hide certain artwork details\n                .artworks-counted,\n                .lifetime {\n                    display: none;\n                }\n                .title {\n                    text-decoration: none;\n                }\n                .card-header-title {\n                    color: $dark-gray-2 !important;\n                }\n            }\n            .card-contents {\n                margin: 1.5rem 0 1rem !important;\n                .owner {\n                    color: $dark-gray-4 !important;\n                }\n            }\n            &.card .card-header-title .makers {\n                font-size: 1.5rem;\n                color: $dark-gray-2 !important;\n            }\n            &.card .card-header-title .title {\n                font-size: 1.5rem;\n                color: $dark-gray-2 !important;\n            }\n            .details {\n                display: none;\n            }\n            .details.production-timespan,\n            .details.keeper {\n                display: block;\n            }\n        }\n\n        .collection-card {\n            color: $light-gray !important;\n            background: rgba(5, 5, 0, 0.75) !important;\n            .card-header {\n                margin-bottom: 1rem;\n                background: transparent !important;\n                .card-header-title {\n                    color: $medium-gray-3 !important;\n                }\n                // stylelint-disable-next-line no-descending-specificity\n                .title {\n                    font-family: $main-sans-serif;\n                    font-size: 1.5rem;\n                    letter-spacing: 1px;\n                    color: $medium-gray-3 !important;\n                    text-shadow: 1px 1px 1px $dark-gray-2;\n                }\n                .curator {\n                    margin-top: 1rem;\n                    font-size: 1.25rem;\n                }\n            }\n        }\n\n        .feature-article-card {\n            padding: 1.5rem 0 2.5rem;\n            background:\n                linear-gradient(\n                    to top,\n                    rgba(255, 244, 241, 0.05),\n                    rgba(255, 255, 255, 0.50) 10%,\n                    rgba(255, 251, 251, 0.85) 95%,\n                    rgba(255, 244, 241, 0.64)\n                ) !important;\n            backdrop-filter: blur(5px);\n            border-color: rgba(124, 124, 124, 0.04);\n            &.even {\n                border-color: rgba(251, 204, 241, 0.04);\n            }\n            border-style: groove;\n            border-width: 0 1rem;\n            .card-header {\n                background: unset;\n                // stylelint-disable-next-line no-descending-specificity\n                .title {\n                    font-size: 2rem;\n                }\n            }\n            .card-contents {\n                width: 100%;\n                margin-left: 0 !important;\n                color: $dark-gray-2 !important;\n                background: unset !important;\n            }\n            .article-ingress {\n                max-width: unset;\n                h2 {\n                    font-size: 1.75rem;\n                    color: $dark-gray-2 !important;\n                }\n            }\n            .publish-date {\n                display: none !important;\n            }\n        }\n\n        .event-card {\n            color: $light-gray !important;\n            background:\n                linear-gradient(\n                    to right top,\n                    rgba(5, 5, 0, 0.95),\n                    rgba(5, 5, 0, 0.90) 30%,\n                    rgba(9, 9, 5, 0.85) 77%,\n                    rgba(5, 5, 0, 0.94)\n                ) !important;\n            box-shadow: 2px 2px 8px rgba(5, 5, 0, 0.95);\n            .card-header {\n                margin-bottom: 1rem;\n                background: transparent !important;\n                h2 {\n                    color: $light-gray !important;\n                }\n                // stylelint-disable-next-line no-descending-specificity\n                .title {\n                    font-family: $main-sans-serif;\n                    font-size: 1.5rem;\n                    line-height: 2.75rem;\n                    letter-spacing: 1px;\n                    text-shadow: 1px 1px 1px $medium-gray;\n                }\n                .organizer-name {\n                    color: $light-gray !important;\n                }\n                .event-period {\n                    margin-top: 0.5rem;\n                    color: $light-gray !important;\n                }\n                .card-link:hover {\n                    .event-period {\n                        text-decoration: none;\n                    }\n                }\n            }\n            .ingress-text {\n                font-size: 1.2rem;\n            }\n        }\n\n        &.hero-Actor {\n            .slick-slider {\n                width: 100%;\n                max-width: 98vw;\n            }\n            .actor-slides {\n                width: 100%;\n                min-height: 300px;\n            }\n            .infobox {\n                width: 100%;\n                max-width: 98vw;\n                transform: unset !important;\n                .columns {\n                    display: inline-flex;\n                    flex-direction: column;\n                }\n                .column {\n                    width: auto;\n                }\n                .actor-card {\n                    display: inline-flex !important;\n                    flex-direction: column;\n                    width: clamp(300px, 400px, 95vw) !important;\n                    margin-right: auto;\n                    background: unset !important;\n                    transform: unset !important;\n                    &.is-right {\n                        margin-left: auto;\n                    }\n                    &.is-left {\n                        margin-right: auto;\n                    }\n                }\n                .actor-card,\n                .card-header {\n                    backdrop-filter: unset;\n                }\n                .card-header {\n                    align-self: center;\n                    margin: 0.5rem auto;\n                    padding: 3rem 4rem !important;\n                    background:\n                        radial-gradient(\n                            farthest-side at 50% 50%,\n                            rgba(255, 251, 251, 0.85) 15%,\n                            rgba(255, 251, 251, 0.5) 65%,\n                            rgba(255, 251, 251, 0) 100%\n                        ) !important;\n                    .title {\n                        color: $dark-gray-2 !important;\n                        text-shadow: 1px 1px 1px $medium-gray-2 !important;\n                    }\n                    @media screen and (max-width: $breakpoint-mobile - 1) {\n                        padding: 1rem;\n                        figure {\n                            margin: auto;\n                        }\n                    }\n                }\n                .card-social {\n                    display: none;\n                }\n                .card-image {\n                    display: inline-flex;\n                    flex-grow: 2;\n                    align-self: center;\n                    margin: 0 auto !important;\n                }\n                .actor-body {\n                    width: clamp(20rem, 30rem, 80vw);\n                    padding: 1rem;\n                    background:\n                        linear-gradient(\n                            to top,\n                            rgba(255, 251, 251, 0.46),\n                            rgba(255, 251, 251, 0.64) 10%,\n                            rgba(255, 251, 251, 0.86) 95%,\n                            rgba(255, 251, 251, 0.46)\n                        ) !important;\n                    backdrop-filter: blur(5px);\n                    article {\n                        // revert CSS fade\n                        max-height: 70vh;\n                        font-size: 1rem;\n                        &::after {\n                            content: unset;\n                        }\n                    }\n                    .btn {\n                        background: unset;\n                        &:hover {\n                            box-shadow: unset;\n                        }\n                    }\n                }\n                .do-follow {\n                    background: rgba(255, 255, 255, 0.85);\n                }\n            }\n        }\n\n        @media screen and (max-width: $breakpoint-tablet - 1) {\n            .card-header .title,\n            .article-ingress h2 {\n                font-size: 1.35rem !important;\n            }\n            .ingress-text {\n                font-size: 1rem !important;\n            }\n        }\n        @media screen and (max-width: $breakpoint-mobile - 1) {\n            .card-contents {\n                padding-right: 0.5rem;\n                padding-left: 0.5rem;\n            }\n            .card-header .title,\n            .article-ingress h2 {\n                font-size: 1.25rem !important;\n            }\n            .ingress-text {\n                font-size: 1rem !important;\n            }\n        }\n    }\n\n    .hero-navigation {\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 10000; // more than .hero-page, less than main .navbar\n        display: flex;\n        justify-items: space-between;\n        width: 99vw; // adjust for browser scrollbar\n        height: 100vh;\n        .next-icon, .previous-icon {\n            display: inline-flex;\n            align-self: center;\n            width: 64px;\n            height: 64px;\n            color: rgba(239, 239, 239, 0.92);\n            cursor: pointer;\n            transform: scaleY(1.5);\n        }\n        .next-icon {\n            justify-self: right;\n            margin-left: auto;\n        }\n        .previous-icon {\n            justify-self: left;\n        }\n    }\n}\n</style>\n","import mod from \"-!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FrontPages.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FrontPages.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FrontPages.vue?vue&type=template&id=648d1562&lang=pug&\"\nimport script from \"./FrontPages.vue?vue&type=script&lang=js&\"\nexport * from \"./FrontPages.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FrontPages.vue?vue&type=style&index=0&id=648d1562&prod&lang=scss&\"\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"],"names":["methods","getSlugUrlName","item","urlName","Name","replace","getRoute","params","itemType","route","pathName","this","$store","getters","useProfile","Id","name","_","extend","id","ActorId","query","UseProfile","getLocalizedRoute","view","locale","props","disableIntersectionObserver","type","Boolean","data","intersectionOptions","rootMargin","threshold","observeVisibilityOptions","callback","visibilityChanged","throttle","throttleOptions","leading","intersection","isIntersectionVisible","intersectionRemainsVisible","intersectionHideTimeout","debouncedHide","created","isTestEnv","mounted","debounce","onIntersectHide","trailing","beforeDestroy","cancel","isVisible","entry","onIntersectShow","items","Array","Object","mixins","IntersectionObserverMixin","HyperlinkMixin","ready","error","initSection","watch","length","getLocalizedSearchRoute","$i18n","module","exports","render","_vm","_c","_self","directives","rawName","value","expression","debouncedNext","arg","modifiers","left","debouncedPrevious","right","swipeTolerance","staticClass","style","backgroundStyle","currentHero","heros","ref","class","showInfobox","coverImageIndex","attrs","spotlight","introHero","nextItem","scopedSlots","_u","key","fn","src","require","proxy","loginPhase","phaseBusy","domProps","innerHTML","_s","$t","currentItem","currentResourceType","social","media","hero","header","TagLine","_v","_e","IngressText","BodyHtml","resolution","x","y","unSlickOptions","_withStripped","className","$slots","infoBoxHoldout","infoBoxStyle","_t","nextImageSrc","resourceType","imageInfo","imageSrc","infoboxHoldoutTimeout","infoBoxHoldoutTimeoutRef","debouncedUpdate","clearTimeout","update","missingImage","setTimeout","getItemImageInfo","updatePageStyle","updateInfoboxStyle","getClassName","getStyle","getInfoBoxStyle","fixInfoBoxStyle","top","match","translateX","translateY","transform","infoBox","getInfoBoxCoordinates","xRange","yRange","svcPages","components","HomeHeroPage","ActorHighlights","computed","mapStateUx","frontPageHeroIndex","frontPageHeroIndexTime","frontPageCoverIndex","heroIndex","ClassName","CoverImageInfo","Url","ResourceType","anchor","fi","en","sv","coverImages","infoboxTimeoutRef","animationFrameRef","animationFrameInterval","animationFrameTimeoutRef","heroFrameReset","heroFrameTimestamp","playing","debouncedInit","slidesToShow","rows","arrows","window","init","getHeros","getPagesCoverImages","getNextItem","getPageInterval","interval","navigator","getHeroResourceType","showInfoboxWithTimeout","showInfoboxNow","hideInfoboxNow","animate","play","stop","cancelAnimationFrame","next","previous","reset","changeToPage","then"],"sourceRoot":""}