v0.20.36
New design for bitbonds series
This commit is contained in:
sairaj mote
parent
dd871e62dd
commit
c2dda3f056
@ -13,6 +13,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
|
||||
<section id="elevator_popup" class="grid hide-completely">
|
||||
<header class="elevator__header">
|
||||
<button class="close-button justify-self-start" onclick="hideSiteMap()">
|
||||
@ -116,40 +118,7 @@
|
||||
</scroll-tab-header>
|
||||
</div>
|
||||
<scroll-tab-panels id="bit_bond_page_group">
|
||||
<div class="flex w-100" style="overflow-x: auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="tr">
|
||||
<td class="td weight-700 uppercase">Series</td>
|
||||
<td class="td weight-700 uppercase">Series date</td>
|
||||
<td class="td weight-700 uppercase">Time Elapsed</td>
|
||||
<td class="td weight-700 uppercase">Current value</td>
|
||||
<td class="td weight-700 uppercase">Rate of return</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$975</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1057</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1064</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1205</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1285</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$2513</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="bit_bond_series__container" class="grid series-container"></div>
|
||||
<p id="bit_bond_info">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt,
|
||||
doloremque pariatur expedita distinctio itaque.
|
||||
@ -159,5 +128,16 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
<script>
|
||||
function renderAllSeries(){
|
||||
const frag = document.createDocumentFragment()
|
||||
getRef('bit_bond_series__container').innerHTML = ''
|
||||
bitBondSerieses.forEach((series, index) => {
|
||||
frag.append(render.bitBondRow(series))
|
||||
})
|
||||
getRef('bit_bond_series__container').append(frag)
|
||||
}
|
||||
renderAllSeries()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -13,6 +13,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
|
||||
<section id="elevator_popup" class="grid hide-completely">
|
||||
<header class="elevator__header">
|
||||
<button class="close-button justify-self-start" onclick="hideSiteMap()">
|
||||
|
||||
94
css/main.css
94
css/main.css
@ -6,6 +6,10 @@
|
||||
font-family: "Roboto Slab", serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #e72c45;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
@ -14,9 +18,9 @@ body {
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--green: #1DC838;
|
||||
color: rgba(var(--text-color), 1);
|
||||
height: calc(100%);
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
@ -176,6 +180,10 @@ ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@ -678,7 +686,7 @@ ul {
|
||||
}
|
||||
|
||||
.outlets-container {
|
||||
margin: 1.5rem 0;
|
||||
margin: 1rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -753,21 +761,26 @@ ul {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
#bit_bond_series__container {
|
||||
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
.series-container {
|
||||
gap: 2rem 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
.series-container .bit-bond-series__row {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#bob_fund_investors__container {
|
||||
background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
/* #bit_bond_series__container{
|
||||
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
#ico_investors__container {
|
||||
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
#bob_fund_investors__container{
|
||||
background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
#ico_investors__container{
|
||||
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
} */
|
||||
sm-carousel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@ -790,6 +803,27 @@ sm-carousel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.bit-bond-series__row {
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.up-arrow {
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
fill: var(--green);
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
|
||||
.percent-gain {
|
||||
color: var(--green);
|
||||
font-weight: 500;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.investor-card {
|
||||
align-items: flex-start;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -877,7 +911,9 @@ scroll-tab-header {
|
||||
}
|
||||
|
||||
scroll-tab-panels {
|
||||
--gap: 1.5rem;
|
||||
--background: transparent;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
scroll-tab-panels > * {
|
||||
opacity: 0.4;
|
||||
@ -952,23 +988,6 @@ scroll-tab-panels > [active] {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.tr {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.tr:nth-of-type(even) {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 0.6rem 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#ico_page__carousel {
|
||||
width: min(36rem, 100%);
|
||||
height: max-content;
|
||||
@ -1084,6 +1103,10 @@ table {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bit-bond-series__row {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.carousel-holder {
|
||||
align-self: flex-start;
|
||||
transform: translateY(-2rem);
|
||||
@ -1137,17 +1160,6 @@ table {
|
||||
|
||||
.grid-3 {
|
||||
justify-content: center;
|
||||
/* & > .grid:not(:last-of-type){
|
||||
position: relative;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 4rem;
|
||||
width: 1px;
|
||||
right: 0.5rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
} */
|
||||
}
|
||||
.grid-3 > .grid {
|
||||
width: 100%;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -5,6 +5,9 @@
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto Slab', serif;
|
||||
}
|
||||
:root{
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
}
|
||||
body {
|
||||
--accent-color: #e72c45;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
@ -13,9 +16,9 @@ body {
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--green: #1DC838;
|
||||
color: rgba(var(--text-color), 1);
|
||||
height: calc(100%);
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
background: var(--background-color);
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
@ -151,6 +154,9 @@ ul{
|
||||
.pos-relative{
|
||||
position: relative;
|
||||
}
|
||||
.text-align-right{
|
||||
text-align: right;
|
||||
}
|
||||
.align-start{
|
||||
align-items: flex-start;
|
||||
}
|
||||
@ -601,7 +607,7 @@ ul{
|
||||
}
|
||||
|
||||
.outlets-container{
|
||||
margin: 1.5rem 0;
|
||||
margin: 1rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -670,7 +676,14 @@ ul{
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
#bit_bond_series__container{
|
||||
.series-container{
|
||||
gap: 2rem 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
.bit-bond-series__row{
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
/* #bit_bond_series__container{
|
||||
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
}
|
||||
@ -681,7 +694,7 @@ ul{
|
||||
#ico_investors__container{
|
||||
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
|
||||
background-size: 60%;
|
||||
}
|
||||
} */
|
||||
|
||||
sm-carousel{
|
||||
position: relative;
|
||||
@ -704,6 +717,26 @@ sm-carousel{
|
||||
.investor-card{
|
||||
min-width: 100%;
|
||||
}
|
||||
.bit-bond-series__row{
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.up-arrow{
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
fill: var(--green);
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
.percent-gain{
|
||||
color: var(--green);
|
||||
font-weight: 500;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.investor-card{
|
||||
align-items: flex-start;
|
||||
@ -784,7 +817,9 @@ scroll-tab-header{
|
||||
--grid-auto-flow: column;
|
||||
}
|
||||
scroll-tab-panels{
|
||||
--gap: 1.5rem;
|
||||
--background: transparent;
|
||||
margin-bottom: 6rem;
|
||||
& > *{
|
||||
opacity: 0.4;
|
||||
flex-shrink: 0;
|
||||
@ -856,21 +891,6 @@ scroll-tab-panels{
|
||||
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
width: max-content;
|
||||
}
|
||||
.tr{
|
||||
margin: 0.5rem;
|
||||
&:nth-of-type(even){
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
.td{
|
||||
padding: 0.6rem 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#ico_page__carousel{
|
||||
width: min(36rem ,100%);
|
||||
height: max-content;
|
||||
@ -978,6 +998,9 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
.bit-bond-series__row{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.carousel-holder{
|
||||
align-self: flex-start;
|
||||
transform: translateY(-2rem);
|
||||
@ -1026,17 +1049,6 @@ table{
|
||||
& > .grid{
|
||||
width: 100%;
|
||||
}
|
||||
/* & > .grid:not(:last-of-type){
|
||||
position: relative;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 4rem;
|
||||
width: 1px;
|
||||
right: 0.5rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
} */
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
|
||||
1
ico.html
1
ico.html
@ -13,6 +13,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
|
||||
<template id="ico_phase_template">
|
||||
<li class="phase grid">
|
||||
|
||||
53
index.html
53
index.html
@ -15,23 +15,6 @@
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
<!-- Component templates -->
|
||||
|
||||
<template id="bit_bond_row">
|
||||
<div class="bit-bond-series__row grid grid-3 gap-1">
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Series</h5>
|
||||
<h3 class="value original-value"></h3>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Current value</h5>
|
||||
<h3 class="value current-value"></h3>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Time Elapsed</h5>
|
||||
<h3 class="value time-elapsed"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="bob_fund_row">
|
||||
<div class="bob-fund__row grid gap-2">
|
||||
<div class="grid">
|
||||
@ -424,40 +407,6 @@
|
||||
|
||||
<script>
|
||||
|
||||
const bitBondSerieses = [
|
||||
{
|
||||
series: '$975',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
series: '$1057',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
series: '$1064',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
series: '$1205',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
series: '$1285',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
series: '$2513',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const bobFund = [
|
||||
{
|
||||
investorName: 'John Doe',
|
||||
@ -575,7 +524,7 @@
|
||||
function renderAllSeries(){
|
||||
const frag = document.createDocumentFragment()
|
||||
getRef('bit_bond_series__container').innerHTML = ''
|
||||
bitBondSerieses.forEach(series => {
|
||||
bitBondSerieses.forEach((series, index) => {
|
||||
frag.append(render.bitBondRow(series))
|
||||
})
|
||||
getRef('bit_bond_series__container').append(frag)
|
||||
|
||||
@ -3744,11 +3744,11 @@ scrollTabPanels.innerHTML = `
|
||||
.tab-panels{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
grid-auto-columns: calc(100% - 3rem);
|
||||
gap: var(--gap);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--background);
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
slot::slotted(*){
|
||||
@ -3827,31 +3827,14 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
|
||||
scrollHorizontally = e => {
|
||||
e.preventDefault()
|
||||
this.throttle(() => {
|
||||
const width = this.tabPanels.getBoundingClientRect().width
|
||||
const scrollBy = e.deltaY > 0 ? width : -width
|
||||
this.tabPanels.scrollBy({
|
||||
left: scrollBy,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}, 100)
|
||||
const width = this.tabPanels.getBoundingClientRect().width
|
||||
const scrollBy = e.deltaY > 0 ? width : -width
|
||||
this.tabPanels.scrollBy({
|
||||
left: scrollBy,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
throttle = (func, delay) => {
|
||||
// If setTimeout is already scheduled, no need to do anything
|
||||
if (timerId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Schedule a setTimeout after delay seconds
|
||||
timerId = setTimeout(function () {
|
||||
func();
|
||||
|
||||
// Once setTimeout function execution is finished, timerId = undefined so that in
|
||||
// the next scroll event function execution can be scheduled by the setTimeout
|
||||
timerId = undefined;
|
||||
}, delay);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const panelObserver = new IntersectionObserver(entries => {
|
||||
|
||||
75
js/index.js
75
js/index.js
@ -335,8 +335,61 @@ const siteMap = [
|
||||
},
|
||||
];
|
||||
|
||||
const bitBondSerieses = [
|
||||
{
|
||||
series: '$975',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2 years'
|
||||
},
|
||||
{
|
||||
series: '$1057',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2 years'
|
||||
},
|
||||
{
|
||||
series: '$1064',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2 years'
|
||||
},
|
||||
{
|
||||
series: '$1205',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2 years'
|
||||
},
|
||||
{
|
||||
series: '$1285',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2 years'
|
||||
},
|
||||
{
|
||||
series: '$2513',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2 years'
|
||||
},
|
||||
]
|
||||
|
||||
// templates
|
||||
|
||||
const bitBondRowTemplate = document.createElement('template')
|
||||
bitBondRowTemplate.innerHTML = `
|
||||
<div class="bit-bond-series__row grid">
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Series</h5>
|
||||
<h3 class="value original-value"></h3>
|
||||
</div>
|
||||
<div class="grid justify-right text-align-right">
|
||||
<h5 class="label color-0-8 weight-500">Current value</h5>
|
||||
<h3 class="value current-value"></h3>
|
||||
<div class="flex align-center">
|
||||
<svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
|
||||
<span class="percent-gain">2000%</span>
|
||||
<span class="time-elapsed"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
|
||||
const floorListitemTemplate = document.createElement('template')
|
||||
floorListitemTemplate.innerHTML = `
|
||||
<li class="floor_list__item">
|
||||
@ -364,10 +417,10 @@ outletListitemTemplate.innerHTML = `
|
||||
const render = {
|
||||
bitBondRow(obj) {
|
||||
const { series, currentValue, timeElapsed } = obj;
|
||||
const row = getRef("bit_bond_row").content.cloneNode(true);
|
||||
const row = bitBondRowTemplate.content.cloneNode(true);
|
||||
row.querySelector(".original-value").textContent = series;
|
||||
row.querySelector(".current-value").textContent = currentValue;
|
||||
row.querySelector(".time-elapsed").textContent = timeElapsed;
|
||||
row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed}`;
|
||||
return row;
|
||||
},
|
||||
bobFundRow(obj) {
|
||||
@ -414,15 +467,15 @@ const render = {
|
||||
return floorLabel;
|
||||
},
|
||||
outletListItem(outletObj) {
|
||||
const { name, brief, url} = outletObj
|
||||
const { name, brief, url } = outletObj
|
||||
const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
|
||||
li.querySelector('a').href = `${url}.html`
|
||||
li.querySelector('.outlet-title').textContent = name
|
||||
li.querySelector('.outlet-brief').textContent = brief ? brief: ''
|
||||
li.querySelector('.outlet-brief').textContent = brief ? brief : ''
|
||||
return li
|
||||
},
|
||||
floorListitem(floorObj, index) {
|
||||
const { floor, outlets} = floorObj
|
||||
const { floor, outlets } = floorObj
|
||||
const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
|
||||
li.firstElementChild.dataset.target = `floor_${index + 1}`;
|
||||
li.querySelector('.h3').textContent = floor
|
||||
@ -435,7 +488,7 @@ const render = {
|
||||
return li
|
||||
},
|
||||
outletSwitcherButton(outletObj, activeOutlet) {
|
||||
const { name, url} = outletObj
|
||||
const { name, url } = outletObj
|
||||
const button = document.createElement('a')
|
||||
button.classList.add('outlet_switcher__button')
|
||||
if (activeOutlet === url) {
|
||||
@ -553,12 +606,12 @@ const easeOutOvershoot = `cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
|
||||
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
if(e.target.closest('.floor-label, .floor__button')){
|
||||
if (e.target.closest('.floor-label, .floor__button')) {
|
||||
const label = e.target.closest('.floor-label, .floor__button')
|
||||
const target = label.dataset.target
|
||||
window.open(`index.html#${target}`, '_self')
|
||||
if(isSiteMapOpen){
|
||||
hideSiteMap()
|
||||
if (isSiteMapOpen) {
|
||||
hideSiteMap()
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -638,7 +691,7 @@ function hideOutletSwitcher() {
|
||||
};
|
||||
}
|
||||
|
||||
let currentPage
|
||||
let currentPage
|
||||
function renderSiteMap() {
|
||||
const frag = document.createDocumentFragment()
|
||||
siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index)))
|
||||
@ -682,7 +735,7 @@ siteMapTimeline
|
||||
.from(".floor_list__item", { opacity: 0, y: 16, stagger: 0.1 });
|
||||
|
||||
|
||||
|
||||
|
||||
function showSiteMap() {
|
||||
document.querySelectorAll(".page").forEach((page) => {
|
||||
page.setAttribute("aria-hidden", "true");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user