v0.10.5
Added outlet room indicator mechanism - improved floor indicator UX on mobile devices
This commit is contained in:
sairaj mote
parent
a38dd6a031
commit
552d927cc5
@ -2451,6 +2451,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
this.isAutoPlaying = false
|
||||
this.autoPlayInterval = 5000
|
||||
this.autoPlayTimeout
|
||||
this.initialTimeout
|
||||
this.activeSlideNum = 0
|
||||
this.carouselItems
|
||||
this.indicators
|
||||
@ -2496,20 +2497,26 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
nextSlide = () => {
|
||||
if (!this.carouselItems) return
|
||||
let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
|
||||
this.showSlide(showSlideNo)
|
||||
}
|
||||
|
||||
startAutoPlay = () => {
|
||||
if(!this.carouselItems) return
|
||||
if((this.activeSlideNum + 1) < this.carouselItems.length)
|
||||
this.showSlide(this.activeSlideNum + 1)
|
||||
else
|
||||
this.showSlide(0)
|
||||
autoPlay = () => {
|
||||
this.nextSlide()
|
||||
if (this.isAutoPlaying) {
|
||||
this.autoPlayTimeout = setTimeout(() => {
|
||||
this.startAutoPlay()
|
||||
this.autoPlay()
|
||||
}, this.autoPlayInterval);
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay = () => {
|
||||
this.setAttribute('autoplay', '')
|
||||
}
|
||||
|
||||
stopAutoPlay = () => {
|
||||
this.removeAttribute('autoplay')
|
||||
}
|
||||
@ -2586,7 +2593,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
this.indicators = this.indicatorsContainer.children
|
||||
}
|
||||
if (this.hasAttribute('autoplay')) {
|
||||
this.startAutoPlay()
|
||||
this.autoPlay()
|
||||
}
|
||||
})
|
||||
|
||||
@ -2612,13 +2619,16 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
}
|
||||
if (name === 'autoplay') {
|
||||
if (this.hasAttribute('autoplay')) {
|
||||
this.isAutoPlaying = true
|
||||
if(this.carouselSlot.assignedElements().length > 1)
|
||||
this.startAutoPlay()
|
||||
this.initialTimeout = setTimeout(() => {
|
||||
this.isAutoPlaying = true
|
||||
this.autoPlay()
|
||||
}, this.autoPlayInterval);
|
||||
}
|
||||
else {
|
||||
this.isAutoPlaying = false
|
||||
clearTimeout(this.autoPlayTimeout)
|
||||
clearTimeout(this.initialTimeout)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
46
css/main.css
46
css/main.css
@ -471,7 +471,7 @@ ul {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 5rem);
|
||||
padding: 0;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
}
|
||||
|
||||
#floor_line_map {
|
||||
@ -488,19 +488,57 @@ ul {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.line-map__circle {
|
||||
.line-map__track {
|
||||
height: 1rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line-map__circle,
|
||||
.line-map__disc {
|
||||
position: absolute;
|
||||
border-radius: 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line-map__disc {
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
background: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.line-map__line {
|
||||
height: 0.1rem;
|
||||
width: 100%;
|
||||
background: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.room-button {
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
opacity: 0.6;
|
||||
-webkit-transition: opacity 0.3s;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.room-button--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.line-map__circle {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem rgba(var(--text-color), 1);
|
||||
-webkit-transition: -webkit-transform 0.1s linear;
|
||||
transition: -webkit-transform 0.1s linear;
|
||||
transition: transform 0.1s linear;
|
||||
transition: transform 0.1s linear, -webkit-transform 0.1s linear;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line-map__bar {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -375,7 +375,7 @@ ul{
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 5rem);
|
||||
padding: 0;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
}
|
||||
|
||||
#floor_line_map{
|
||||
@ -389,16 +389,43 @@ ul{
|
||||
.line-map{
|
||||
height: 100%;
|
||||
}
|
||||
.line-map__circle{
|
||||
.line-map__track{
|
||||
height: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.line-map__circle,
|
||||
.line-map__disc{
|
||||
position: absolute;
|
||||
border-radius: 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.line-map__disc{
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
background: rgba(var(--text-color), 1);
|
||||
}
|
||||
.line-map__line{
|
||||
height: 0.1rem;
|
||||
width: 100%;
|
||||
background: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.room-button{
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s;
|
||||
&--active{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.line-map__circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem rgba(var(--text-color), 1);
|
||||
transition: transform 0.1s linear;
|
||||
z-index: 1;
|
||||
}
|
||||
.line-map__bar{
|
||||
width: 0.1rem;
|
||||
|
||||
196
index.html
196
index.html
@ -192,7 +192,7 @@
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<sm-carousel id="bit_bond_series__container" indicator autoplay></sm-carousel>
|
||||
<sm-carousel id="bit_bond_series__container" indicator></sm-carousel>
|
||||
</div>
|
||||
<div id="bob_fund_outlet" class="flex direction-column card outlet-preview carousel-container">
|
||||
<div class="flex direction-column margin-bottom-1-5r common-padding">
|
||||
@ -246,49 +246,54 @@
|
||||
<h2 class="h2 weight-900 margin-bottom-1r">BitCoin Bonds</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<sm-tab-header target="bit_bonds__rooms" variant="tab" class="margin-bottom-1-5r">
|
||||
<sm-tab>Returns</sm-tab>
|
||||
<sm-tab>More</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="bit_bonds__rooms" class="grid">
|
||||
<sm-panel class="grid 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>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
|
||||
</sm-panel>
|
||||
</sm-tab-panels>
|
||||
<h4 class="label">Rooms</h4>
|
||||
<div class="tab-header flex direction-column" data-target-group="bit_bond_page_group">
|
||||
<ul class="grid gap-1 flow-column">
|
||||
<li>
|
||||
<button class="room-button room-button--active" data-button-group="bit_bond_page_group" data-target="bit_bond_returns_table">Returns</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="room-button" data-button-group="bit_bond_page_group" data-target="bit_bond_info">More</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="line-map__track flex w-100">
|
||||
<div class="line-map__disc"></div>
|
||||
<div class="line-map__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table id="bit_bond_returns_table" data-panel-group="bit_bond_page_group">
|
||||
<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>
|
||||
<p id="bit_bond_info" class="hide-completely" data-panel-group="bit_bond_page_group"></p>
|
||||
</article>
|
||||
|
||||
<article id="bob'sfund" class="page flex direction-column hide-completely">
|
||||
@ -297,19 +302,23 @@
|
||||
<h2 class="h2 weight-900 margin-bottom-1r">Bob's Fund</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<sm-tab-header target="bob_fund_rooms" variant="tab">
|
||||
<sm-tab>
|
||||
Investors
|
||||
</sm-tab>
|
||||
<sm-tab>
|
||||
more
|
||||
</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="bob_fund_rooms">
|
||||
<sm-panel></sm-panel>
|
||||
<sm-panel></sm-panel>
|
||||
<sm-panel></sm-panel>
|
||||
</sm-tab-panels>
|
||||
<h4 class="label">Rooms</h4>
|
||||
<div class="tab-header flex direction-column" data-target-group="bob_fund_page_group">
|
||||
<ul class="grid gap-1 flow-column">
|
||||
<li>
|
||||
<button class="room-button room-button--active" data-button-group="bob_fund_page_group" data-target="bob_fund_page__carousel">Investors</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="room-button" data-button-group="bob_fund_page_group" data-target="bob_fund_info">More</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="line-map__track flex w-100">
|
||||
<div class="line-map__disc"></div>
|
||||
<div class="line-map__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<sm-carousel id="bob_fund_page__carousel" data-panel-group="bob_fund_page_group" indicator autoplay></sm-carousel>
|
||||
<p id="bob_fund_info" class="hide-completely" data-panel-group="bob_fund_page_group"></p>
|
||||
</article>
|
||||
|
||||
<article id="ico" class="page flex direction-column hide-completely">
|
||||
@ -318,26 +327,23 @@
|
||||
<h2 class="h2 weight-900 margin-bottom-1r">ICO</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<sm-tab-header target="ico_rooms" variant="tab" class="margin-bottom-1-5r">
|
||||
<sm-tab>
|
||||
Investors
|
||||
</sm-tab>
|
||||
<sm-tab>
|
||||
Phases
|
||||
</sm-tab>
|
||||
<sm-tab>
|
||||
more
|
||||
</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="ico_rooms" class="flex w-100">
|
||||
<sm-panel class="flex carousel-container">
|
||||
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<ul id="ico_phase_list"></ul>
|
||||
</sm-panel>
|
||||
<sm-panel></sm-panel>
|
||||
</sm-tab-panels>
|
||||
<h4 class="label">Rooms</h4>
|
||||
<div class="tab-header flex direction-column" data-target-group="ico_page_group">
|
||||
<ul class="grid gap-1 flow-column">
|
||||
<li>
|
||||
<button class="room-button room-button--active" data-button-group="ico_page_group" data-target="ico_page__carousel">Investors</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="room-button" data-button-group="ico_page_group" data-target="ico_phase_list">Phases</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="line-map__track flex w-100">
|
||||
<div class="line-map__disc"></div>
|
||||
<div class="line-map__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<sm-carousel id="ico_page__carousel" data-panel-group="ico_page_group" indicator autoplay></sm-carousel>
|
||||
<ul id="ico_phase_list" class="hide-completely" data-panel-group="ico_page_group"></ul>
|
||||
</article>
|
||||
|
||||
<!-- -->
|
||||
@ -1131,7 +1137,7 @@
|
||||
entries.forEach(entry => {
|
||||
if(window.innerWidth < 640){
|
||||
if(entry.isIntersecting){
|
||||
entry.target.querySelector('sm-carousel').setAttribute('autoplay', '')
|
||||
entry.target.querySelector('sm-carousel').startAutoPlay()
|
||||
}
|
||||
else{
|
||||
entry.target.querySelector('sm-carousel').stopAutoPlay()
|
||||
@ -1160,22 +1166,48 @@
|
||||
const target = label.dataset.target
|
||||
getRef(target).scrollIntoView({behavior: 'smooth'})
|
||||
}
|
||||
else if(e.target.closest('.room-button')){
|
||||
const button = e.target.closest('.room-button')
|
||||
const buttonDimensions = button.getBoundingClientRect()
|
||||
const target = button.dataset.target
|
||||
const tabHeader = button.closest('.tab-header')
|
||||
const targetGroup = tabHeader.dataset.targetGroup
|
||||
const indicator = tabHeader.querySelector('.line-map__disc')
|
||||
const options = {
|
||||
duration: 300,
|
||||
easing: 'ease',
|
||||
fill: 'forwards'
|
||||
}
|
||||
|
||||
const activePanel = document.querySelector(`:not(.hide-completely)[data-panel-group="${targetGroup}"]`)
|
||||
activePanel.animate(fadeOut, options).onfinish = () => {
|
||||
activePanel.classList.add('hide-completely')
|
||||
getRef(target).classList.remove('hide-completely')
|
||||
getRef(target).animate(fadeIn, options)
|
||||
}
|
||||
|
||||
document.querySelector(`.room-button--active[data-button-group="${targetGroup}"]`).classList.remove('room-button--active')
|
||||
button.classList.add('room-button--active')
|
||||
|
||||
indicator.setAttribute('style', `transform: translateX(${buttonDimensions.left + (buttonDimensions.width / 2) - tabHeader.getBoundingClientRect().left + tabHeader.scrollLeft}px)`)
|
||||
}
|
||||
})
|
||||
|
||||
let activeOutletIndex = 0
|
||||
const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
|
||||
function changeOutletFocus(){
|
||||
allOutletCarousels[activeOutletIndex].stopAutoPlay()
|
||||
allOutletCarousels[activeOutletIndex].nextSlide()
|
||||
activeOutletIndex = activeOutletIndex + 1 < allOutletCarousels.length ? activeOutletIndex + 1 : 0
|
||||
allOutletCarousels[activeOutletIndex].setAttribute('autoplay', '')
|
||||
|
||||
if(window.innerWidth > 640){
|
||||
setTimeout(() => {
|
||||
changeOutletFocus()
|
||||
}, 4000);
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
changeOutletFocus()
|
||||
setTimeout(() => {
|
||||
changeOutletFocus()
|
||||
}, 5000);
|
||||
|
||||
let currentPage = ''
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user