<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ispal/pen/VWPJRd" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400");
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: 'Roboto Condensed', sans-serif;
background: -webkit-linear-gradient(75deg, #00a9f1, #cf00f1);
background: linear-gradient(15deg, #00a9f1, #cf00f1);
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
[v-cloak] {
display: none;
}
.twitter {
position: absolute;
top: 1em;
left: 1em;
text-decoration: none;
color: rgba(82, 74, 208, 0.8);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.twitter > * {
line-height: 1;
}
.twitter__icon {
width: 32px;
height: 32px;
background: #fff;
padding: 5px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.twitter__name {
display: inline-block;
margin-left: .5em;
color: #fff;
}
.twitter svg {
fill: currentColor;
width: 1em;
height: 1em;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.app {
width: 90vw;
box-shadow: 0 0.7em 1em rgba(0, 0, 0, 0.2);
font-weight: 300;
width: 95vw;
}
@media (min-width: 768px) {
.app {
width: 770px;
}
}
.image-hotspot {
position: relative;
padding-top: 66.6%;
overflow: hidden;
}
.image-hotspot.is-selected > img {
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transition: all .5s 1s;
transition: all .5s 1s;
}
.image-hotspot > img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: auto;
-webkit-transition: all .5s;
transition: all .5s;
}
.hotspot-point {
z-index: 2;
position: absolute;
display: block;
}
.hotspot-point span {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 1.8em;
height: 1.8em;
background: #cf00f1;
border-radius: 50%;
-webkit-animation: pulse 3s ease infinite;
animation: pulse 3s ease infinite;
-webkit-transition: background .3s;
transition: background .3s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.hotspot-point span:after {
content: attr(data-price);
position: absolute;
bottom: 130%;
left: 50%;
color: white;
text-shadow: 0 1px black;
font-weight: 600;
font-size: 1.2em;
opacity: 0;
-webkit-transform: translate(-50%, 10%) scale(0.5);
transform: translate(-50%, 10%) scale(0.5);
-webkit-transition: all .25s;
transition: all .25s;
}
.hotspot-point svg {
opacity: 0;
color: #cf00f1;
font-size: 1.4em;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.hotspot-point:before, .hotspot-point:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
}
.hotspot-point:before {
z-index: -1;
border: 0.15em solid rgba(255, 255, 255, 0.9);
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
-webkit-transition: opacity .2s, -webkit-transform .25s;
transition: opacity .2s, -webkit-transform .25s;
transition: transform .25s, opacity .2s;
transition: transform .25s, opacity .2s, -webkit-transform .25s;
}
.hotspot-point:after {
z-index: -2;
background: #fff;
-webkit-animation: wave 3s linear infinite;
animation: wave 3s linear infinite;
}
.hotspot-point:hover span {
-webkit-animation: none;
animation: none;
background: #fff;
}
.hotspot-point:hover span:after {
opacity: 1;
-webkit-transform: translate(-50%, 0) scale(1);
transform: translate(-50%, 0) scale(1);
}
.hotspot-point:hover svg {
opacity: 1;
}
.hotspot-point:hover:before {
opacity: 1;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-animation: borderColor 2s linear infinite;
animation: borderColor 2s linear infinite;
}
.hotspot-point:hover:after {
-webkit-animation: none;
animation: none;
opacity: 0;
}
.hotspots-enter-active {
-webkit-transition: all .5s 1s;
transition: all .5s 1s;
}
.hotspots-leave-active {
-webkit-transition: all .5s;
transition: all .5s;
}
.hotspots-enter, .hotspots-leave-to {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
@-webkit-keyframes pulse {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes pulse {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@-webkit-keyframes borderColor {
0% {
border-color: #fff;
}
50% {
border-color: #cf00f1;
}
100% {
border-color: #fff;
}
}
@keyframes borderColor {
0% {
border-color: #fff;
}
50% {
border-color: #cf00f1;
}
100% {
border-color: #fff;
}
}
@-webkit-keyframes wave {
0% {
opacity: 1;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
}
@keyframes wave {
0% {
opacity: 1;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
}
.hotspot-details {
--top: 0;
--left: 0;
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: clip-path;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.hotspot-details.is-loaded .hotspot-details__content {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, transform .3s;
transition: opacity .3s, transform .3s, -webkit-transform .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hotspot-details.is-loaded .hotspot-details__nav-item {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hotspot-details.is-loaded .hotspot-details__nav-item:nth-child(2) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.hotspot-details.is-loaded .hotspot-details__nav-item:nth-child(3) {
-webkit-transition-delay: 225ms;
transition-delay: 225ms;
}
.hotspot-details__left, .hotspot-details__right {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 169, 241, 0.8);
will-change: background;
}
.hotspot-details__left {
-webkit-clip-path: polygon(0 0, 52.1% 0, 47.1% 100%, 0% 100%);
clip-path: polygon(0 0, 52.1% 0, 47.1% 100%, 0% 100%);
}
.hotspot-details__left .hotspot-details__content {
padding: 0;
}
.hotspot-details__right {
background: rgba(255, 255, 255, 0.8);
-webkit-clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%);
clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%);
}
.hotspot-details__right .hotspot-details__content {
position: relative;
left: 50%;
padding-left: 2.5em;
}
.hotspot-details__content {
opacity: 0;
width: 50%;
height: 100%;
padding: 4em 2em 2em 2em;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s;
transition: opacity .3s .3s, -webkit-transform .3s .3s;
transition: opacity .3s .3s, transform .3s .3s;
transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s;
}
.hotspot-details__content img {
width: 80%;
}
.hotspot-details__title {
margin-top: 0;
font-weight: 300;
font-size: 24px;
}
@media (min-width: 768px) {
.hotspot-details__title {
font-size: 38px;
}
}
.hotspot-details__description {
margin-bottom: 32px;
font-size: 14px;
}
@media (min-width: 768px) {
.hotspot-details__description {
font-size: 16px;
}
}
.hotspot-details__price {
font-size: 38px;
font-weight: 400;
color: #00a9f1;
text-shadow: 1px 1px white;
}
.hotspot-details__nav {
position: absolute;
bottom: 1em;
left: 0;
width: 47%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.hotspot-details__nav-item {
width: 33%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1em;
-webkit-transform: translate(0, 120%);
transform: translate(0, 120%);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.hotspot-details__nav-item:nth-child(2) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.hotspot-details__nav-item:nth-child(3) {
-webkit-transition-delay: 225ms;
transition-delay: 225ms;
}
.hotspot-details__nav-item:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
.hotspot-details__nav-item img {
width: 35px;
opacity: .8;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, -webkit-transform .2s;
transition: transform .2s, opacity .2s;
transition: transform .2s, opacity .2s, -webkit-transform .2s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hotspot-details__close {
display: block;
z-index: 2;
position: absolute;
top: 10px;
right: 10px;
color: black;
font-size: 2em;
line-height: 1;
text-decoration: none;
}
.hotspot-details__close:hover, .hotspot-details__close:active {
color: #000;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.hotspot-details__close:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.detail-enter-active {
-webkit-animation: detailsReveal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
animation: detailsReveal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.detail-enter-active .hotspot-details__left {
background: rgba(207, 0, 241, 0.8);
}
.detail-enter-active .hotspot-details__right {
background: rgba(207, 0, 241, 0.8);
}
.detail-enter-to .hotspot-details__left {
background: rgba(0, 169, 241, 0.8);
-webkit-transition: background .3s .2s;
transition: background .3s .2s;
}
.detail-enter-to .hotspot-details__right {
background: rgba(255, 255, 255, 0.8);
-webkit-transition: background .3s .2s;
transition: background .3s .2s;
}
.detail-leave-active {
-webkit-animation: detailsReveal 0.8s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) reverse;
animation: detailsReveal 0.8s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) reverse;
}
.detail-leave-active .hotspot-details__left {
background: rgba(207, 0, 241, 0.8);
-webkit-transition: background .3s .7s;
transition: background .3s .7s;
}
.detail-leave-active .hotspot-details__right {
background: rgba(207, 0, 241, 0.8);
-webkit-transition: background .3s .7s;
transition: background .3s .7s;
}
.product-fade-enter-active {
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.product-fade-enter-active.animated:nth-child(2) {
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
}
.product-fade-enter-active.animated:nth-child(3) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.product-fade-leave-active {
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.product-fade-leave-active.animated:nth-child(2) {
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
}
.product-fade-leave-active.animated:nth-child(3) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.product-fade-enter, .product-fade-leave-to {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
opacity: 0;
}
@-webkit-keyframes detailsReveal {
0% {
-webkit-clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em));
clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em));
}
30% {
-webkit-clip-path: circle(5vw at 50% 50%);
clip-path: circle(5vw at 50% 50%);
}
100% {
-webkit-clip-path: circle(130% at 50% 50%);
clip-path: circle(130% at 50% 50%);
}
}
@keyframes detailsReveal {
0% {
-webkit-clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em));
clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em));
}
30% {
-webkit-clip-path: circle(5vw at 50% 50%);
clip-path: circle(5vw at 50% 50%);
}
100% {
-webkit-clip-path: circle(130% at 50% 50%);
clip-path: circle(130% at 50% 50%);
}
}
/*! Flickity v2.0.8
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: none;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.carousel {
height: 100%;
}
.carousel-cell {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, -webkit-transform .3s;
transition: transform .3s, opacity .3s;
transition: transform .3s, opacity .3s, -webkit-transform .3s;
will-change: transform, opacity;
}
.carousel-cell.is-selected {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity .3s .1s, -webkit-transform .3s .2s;
transition: opacity .3s .1s, -webkit-transform .3s .2s;
transition: transform .3s .2s, opacity .3s .1s;
transition: transform .3s .2s, opacity .3s .1s, -webkit-transform .3s .2s;
}
</style></head><body>
<a href="https://twitter.com/irkopal" class="twitter" target="_blank">
<span class="twitter__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 640 640">
<path d="M554.112 199.872c0.256 5.184 0.352 10.432 0.352 15.616 0 159.68-121.504 343.744-343.68 343.744-68.256 0-131.712-20-185.184-54.304 9.472 1.12 19.072 1.696 28.8 1.696 56.64 0 108.704-19.328 150.016-51.68-52.832-0.992-97.472-35.872-112.832-83.872 7.36 1.376 14.944 2.112 22.72 2.112 11.040 0 21.728-1.44 31.84-4.192-55.264-11.136-96.896-59.936-96.896-118.496 0-0.512 0-0.992 0-1.504 16.288 9.056 34.944 14.496 54.72 15.136-32.416-21.696-53.76-58.624-53.76-100.576 0-22.112 5.952-42.88 16.384-60.736 59.552 73.12 148.608 121.184 248.992 126.24-2.048-8.864-3.104-18.048-3.104-27.552 0-66.688 54.048-120.736 120.768-120.736 34.752 0 66.144 14.624 88.192 38.112 27.488-5.44 53.344-15.488 76.704-29.312-9.024 28.192-28.192 51.872-53.12 66.816 24.448-2.944 47.68-9.376 69.376-19.008-16.192 24.256-36.672 45.504-60.288 62.496z"></path>
</svg>
</span>
<span class="twitter__name">
@irkopal
</span>
</a>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'></script><script src='https://unpkg.com/vue'></script>
<script >'use strict';
var hotspots = [{
title: 'iMac 27"',
description: 'Accuracy. Brightness. Clarity. Regardless of how you measure the quality of a display, Retina is in a class by itself. The pixel density is so high that you won’t detect a single one while using iMac. Text is so sharp, you’ll feel like you’re reading email and documents on a printed page.',
price: '$1,299.00',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/imac.png',
position: { top: '20%', left: '38%' }
}, {
title: 'Magic Mouse 2',
description: 'Featuring a new design, Magic Mouse 2 is completely rechargeable, so you’ll eliminate the use of traditional batteries. It’s lighter, has fewer moving parts thanks to its built-in battery and continuous bottom shell, and has an optimized foot design.',
price: '$99.00',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/magic-mouse.png',
position: { top: '85%', left: '75%' }
}, {
title: 'Magic Keyboard',
description: 'The Magic Keyboard combines a sleek new design with a built-in rechargeable battery and enhanced key features. With an improved scissor mechanism beneath each key for increased stability, as well as optimized key travel and a lower profile, the Magic Keyboard provides a remarkably comfortable and precise typing experience.',
price: '$79.00',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/magic-keyboard.png',
position: { top: '85%', left: '48%' }
}];
var HotspotDetails = {
name: 'HotspotDetails',
template: '\n <transition\n name="detail"\n @before-enter="beforeEnter"\n @after-enter="afterEnter"\n @before-leave="beforeLeave"\n >\n <div class="hotspot-details">\n <a href="#" @click.prevent="close" class="hotspot-details__close">\n <svg class="icon icon-close" viewBox="0 0 24 24">\n <path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>\n </svg>\n </a>\n <div class="hotspot-details__left">\n <div class="hotspot-details__content">\n <div class="carousel" ref="carousel">\n <div class="carousel-cell" v-for="item in allItems">\n <img :src="item.image" width="80%" />\n </div>\n </div>\n </div>\n </div>\n <div class="hotspot-details__right">\n <div class="hotspot-details__content">\n <transition name="product-fade" mode="out-in">\n <h3 class="hotspot-details__title animated" :key="selectedItem">{{ selectedItem.title }}</h3>\n </transition>\n <transition name="product-fade" mode="out-in">\n <div class="hotspot-details__description animated" :key="selectedItem">{{ selectedItem.description }}</div>\n </transition>\n <transition name="product-fade" mode="out-in">\n <div class="hotspot-details__price animated" :key="selectedItem">{{ selectedItem.price }}</div>\n </transition>\n </div>\n </div>\n <div class="hotspot-details__nav">\n <a href="#" @click.prevent="selectProduct(index)" class="hotspot-details__nav-item" v-for="(item, index) in allItems">\n <img :src="item.image" width="80%" />\n </a>\n </div>\n </div>\n </transition>\n ',
props: {
item: { type: Object },
selectedIndex: { type: Number },
allItems: { type: Array }
},
data: function data() {
return {
selectedItem: this.item
};
},
mounted: function mounted() {
this.carousel = new Flickity(this.$refs.carousel, {
cellAlign: 'left',
contain: true,
draggable: false,
initialIndex: this.selectedIndex,
imagesLoaded: true,
prevNextButtons: false,
pageDots: false
});
this.carousel.on('select', this.onProductSelected);
},
beforeDestroy: function beforeDestroy() {
var _this = this;
setTimeout(function () {
_this.carousel.off('select', _this.onProductSelected);
_this.carousel.destroy();
}, 600);
},
methods: {
close: function close() {
this.$emit('close');
},
selectProduct: function selectProduct(index) {
this.carousel.select(index);
},
onProductSelected: function onProductSelected() {
this.selectedItem = this.allItems[this.carousel.selectedIndex];
},
beforeEnter: function beforeEnter(el) {
el.style.setProperty('--top', this.item.position.top);
el.style.setProperty('--left', this.item.position.left);
},
afterEnter: function afterEnter(el) {
el.classList.add('is-loaded');
},
beforeLeave: function beforeLeave(el) {
el.classList.remove('is-loaded');
}
}
};
var App = {
name: 'app',
components: {
HotspotDetails: HotspotDetails
},
template: '\n <div class="app">\n <div class="image-hotspot" :class="{\'is-selected\': open }">\n <hotspot-details \n :item="selectedHotspot"\n :selected-index="selectedIndex"\n :all-items="hotspots"\n @close="closeDetails"\n v-if="open"\n ></hotspot-details>\n <transition-group name="hotspots">\n <a \n href="#" \n class="hotspot-point" \n v-for="(hotspot, index) in hotspotItems"\n :style="{ top: hotspot.position.top, left: hotspot.position.left }"\n @click.prevent="hotspotClicked(hotspot, index)"\n :key="index"\n >\n <span :data-price="hotspot.price">\n <svg class="icon icon-close" viewBox="0 0 24 24">\n <path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"></path>\n </svg>\n </span>\n </a>\n </transition-group> \n <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/hotspot-image.jpg" alt="" @click="closeDetails">\n </div>\n </div>\n ',
data: function data() {
return {
hotspots: hotspots,
open: false,
hotspotPosition: null,
selectedHotspot: null
};
},
computed: {
hotspotItems: function hotspotItems() {
return this.open ? [] : this.hotspots;
}
},
methods: {
closeDetails: function closeDetails() {
this.open = false;
},
hotspotClicked: function hotspotClicked(hotspot, index) {
this.selectedHotspot = hotspot;
this.selectedIndex = index;
this.open = true;
}
}
};
new Vue({
el: '#app',
components: {
App: App
},
render: function render(h) {
return h(App);
}
});
//# sourceURL=pen.js
</script>
</body></html>
