UI update
This commit is contained in:
sairaj mote
parent
77ccad9066
commit
f26ecbd4d8
@ -828,7 +828,7 @@ ol[type="1"] {
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.series-container {
|
||||
@ -837,12 +837,6 @@ ol[type="1"] {
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row,
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row,
|
||||
.person-card {
|
||||
@ -857,12 +851,17 @@ ol[type="1"] {
|
||||
.bit-bond-series__row,
|
||||
.card {
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
align-items: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bit-bond-series__row .original-value {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.up-arrow {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
@ -1141,7 +1140,6 @@ ol[type="1"] {
|
||||
}
|
||||
|
||||
.room-tile__icon {
|
||||
margin-top: auto;
|
||||
margin-bottom: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
@ -1158,7 +1156,7 @@ ol[type="1"] {
|
||||
}
|
||||
|
||||
#performance_preview {
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
}
|
||||
#performance_preview > * {
|
||||
padding: 0;
|
||||
|
||||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -738,7 +738,7 @@ ol[type="1"]{
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.value{
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.series-container{
|
||||
@ -746,11 +746,6 @@ ol[type="1"]{
|
||||
padding-bottom: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
}
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row,
|
||||
.card{
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row,
|
||||
@ -768,12 +763,19 @@ ol[type="1"]{
|
||||
.bit-bond-series__row,
|
||||
.card{
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
align-items: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bit-bond-series__row{
|
||||
.original-value{
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.up-arrow{
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
@ -1028,7 +1030,6 @@ ol[type="1"]{
|
||||
}
|
||||
}
|
||||
.room-tile__icon{
|
||||
margin-top: auto;
|
||||
margin-bottom: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
@ -1043,7 +1044,7 @@ ol[type="1"]{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#performance_preview{
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
& > *{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -3289,595 +3289,4 @@ customElements.define('sm-menu-option', class extends HTMLElement {
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// tab-header
|
||||
|
||||
const smTabHeader = document.createElement('template')
|
||||
smTabHeader.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.tabs{
|
||||
position: relative;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-header{
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
overflow: auto hidden;
|
||||
max-width: 100%;
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
.indicator{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 0.15rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background: var(--accent-color);
|
||||
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
|
||||
transition: width 0.3s, -webkit-transform 0.3s;
|
||||
-o-transition: transform 0.3s, width 0.3s;
|
||||
transition: transform 0.3s, width 0.3s;
|
||||
transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
:host([variant="tab"]) .indicator{
|
||||
height: 100%;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
:host(.round) .indicator{
|
||||
border-radius: 3rem;
|
||||
}
|
||||
:host([variant="tab"]) .tab-header{
|
||||
border-bottom: none;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none;
|
||||
}
|
||||
:host([variant="tab"]) .tab-header{
|
||||
gap: 0.2rem;
|
||||
display: -ms-inline-grid;
|
||||
display: inline-grid;
|
||||
justify-self: flex-start;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
:host([variant="tab"]) slot::slotted(.active){
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
slot::slotted(.active){
|
||||
color: var(--accent-color);
|
||||
opacity: 1;
|
||||
}
|
||||
@media (hover: none){
|
||||
.tab-header::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.tab-header::-webkit-scrollbar {
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div part="tab-container" class="tabs">
|
||||
<div part="tab-header" class="tab-header">
|
||||
<slot></slot>
|
||||
<div part="indicator" class="indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
customElements.define('sm-tab-header', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(smTabHeader.content.cloneNode(true))
|
||||
|
||||
this.indicator = this.shadowRoot.querySelector('.indicator');
|
||||
this.tabSlot = this.shadowRoot.querySelector('slot');
|
||||
this.tabHeader = this.shadowRoot.querySelector('.tab-header');
|
||||
}
|
||||
|
||||
sendDetails(element) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("switchtab", {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
target: this.target,
|
||||
rank: parseInt(element.dataset.rank)
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
moveIndiactor(tabDimensions) {
|
||||
//if(this.isTab)
|
||||
this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
|
||||
//else
|
||||
//this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
|
||||
this.prevTab
|
||||
this.allTabs
|
||||
this.activeTab
|
||||
this.isTab = false
|
||||
this.target = this.getAttribute('target')
|
||||
|
||||
if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
|
||||
this.isTab = true
|
||||
}
|
||||
|
||||
this.tabSlot.addEventListener('slotchange', () => {
|
||||
this.tabSlot.assignedElements().forEach((tab, index) => {
|
||||
tab.dataset.rank = index
|
||||
})
|
||||
})
|
||||
this.allTabs = this.tabSlot.assignedElements();
|
||||
|
||||
this.tabSlot.addEventListener('click', e => {
|
||||
if (e.target === this.prevTab || !e.target.closest('sm-tab'))
|
||||
return
|
||||
if (this.prevTab)
|
||||
this.prevTab.classList.remove('active')
|
||||
e.target.classList.add('active')
|
||||
|
||||
e.target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'nearest',
|
||||
inline: 'center'
|
||||
})
|
||||
this.moveIndiactor(e.target.getBoundingClientRect())
|
||||
this.sendDetails(e.target)
|
||||
this.prevTab = e.target;
|
||||
this.activeTab = e.target;
|
||||
})
|
||||
let resizeObserver = new ResizeObserver(entries => {
|
||||
entries.forEach((entry) => {
|
||||
if (this.prevTab) {
|
||||
let tabDimensions = this.activeTab.getBoundingClientRect();
|
||||
this.moveIndiactor(tabDimensions)
|
||||
}
|
||||
})
|
||||
})
|
||||
resizeObserver.observe(this)
|
||||
let observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
this.indicator.style.transition = 'none'
|
||||
if (this.activeTab) {
|
||||
let tabDimensions = this.activeTab.getBoundingClientRect();
|
||||
this.moveIndiactor(tabDimensions)
|
||||
} else {
|
||||
this.allTabs[0].classList.add('active')
|
||||
let tabDimensions = this.allTabs[0].getBoundingClientRect();
|
||||
this.moveIndiactor(tabDimensions)
|
||||
this.sendDetails(this.allTabs[0])
|
||||
this.prevTab = this.tabSlot.assignedElements()[0];
|
||||
this.activeTab = this.prevTab;
|
||||
}
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 1.0
|
||||
})
|
||||
observer.observe(this)
|
||||
}
|
||||
})
|
||||
|
||||
// tab-panels
|
||||
|
||||
const smTabPanels = document.createElement('template')
|
||||
smTabPanels.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.panel-container{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
slot::slotted(.hide-completely){
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div part="panel-container" class="panel-container">
|
||||
<slot>Nothing to see here.</slot>
|
||||
</div>
|
||||
`;
|
||||
|
||||
customElements.define('sm-tab-panels', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(smTabPanels.content.cloneNode(true))
|
||||
this.panelSlot = this.shadowRoot.querySelector('slot');
|
||||
}
|
||||
connectedCallback() {
|
||||
|
||||
//animations
|
||||
let flyInLeft = [{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'none'
|
||||
}
|
||||
],
|
||||
flyInRight = [{
|
||||
opacity: 0,
|
||||
transform: 'translateX(1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'none'
|
||||
}
|
||||
],
|
||||
flyOutLeft = [{
|
||||
opacity: 1,
|
||||
transform: 'none'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1rem)'
|
||||
}
|
||||
],
|
||||
flyOutRight = [{
|
||||
opacity: 1,
|
||||
transform: 'none'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(1rem)'
|
||||
}
|
||||
],
|
||||
animationOptions = {
|
||||
duration: 300,
|
||||
fill: 'forwards',
|
||||
easing: 'ease'
|
||||
}
|
||||
this.prevPanel
|
||||
this.allPanels
|
||||
this.previousRank
|
||||
|
||||
this.panelSlot.addEventListener('slotchange', () => {
|
||||
this.panelSlot.assignedElements().forEach((panel) => {
|
||||
panel.classList.add('hide-completely')
|
||||
})
|
||||
})
|
||||
this.allPanels = this.panelSlot.assignedElements()
|
||||
this._targetBodyFlyRight = (targetBody) => {
|
||||
targetBody.classList.remove('hide-completely')
|
||||
targetBody.animate(flyInRight, animationOptions)
|
||||
}
|
||||
this._targetBodyFlyLeft = (targetBody) => {
|
||||
targetBody.classList.remove('hide-completely')
|
||||
targetBody.animate(flyInLeft, animationOptions)
|
||||
}
|
||||
document.addEventListener('switchtab', e => {
|
||||
if (e.detail.target !== this.id)
|
||||
return
|
||||
|
||||
if (this.prevPanel) {
|
||||
let targetBody = this.allPanels[e.detail.rank],
|
||||
currentBody = this.prevPanel;
|
||||
if (this.previousRank < e.detail.rank) {
|
||||
if (currentBody && !targetBody)
|
||||
currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
|
||||
currentBody.classList.add('hide-completely')
|
||||
}
|
||||
else if (targetBody && !currentBody) {
|
||||
this._targetBodyFlyRight(targetBody)
|
||||
} else if (currentBody && targetBody) {
|
||||
currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
|
||||
currentBody.classList.add('hide-completely')
|
||||
this._targetBodyFlyRight(targetBody)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (currentBody && !targetBody)
|
||||
currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
|
||||
currentBody.classList.add('hide-completely')
|
||||
}
|
||||
else if (targetBody && !currentBody) {
|
||||
this._targetBodyFlyLeft(targetBody)
|
||||
} else if (currentBody && targetBody) {
|
||||
currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
|
||||
currentBody.classList.add('hide-completely')
|
||||
this._targetBodyFlyLeft(targetBody)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.allPanels[e.detail.rank].classList.remove('hide-completely')
|
||||
}
|
||||
this.previousRank = e.detail.rank
|
||||
this.prevPanel = this.allPanels[e.detail.rank];
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const scrollTabHeader = document.createElement('template')
|
||||
scrollTabHeader.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
--gap: 0;
|
||||
--padding: 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
display: flex;
|
||||
}
|
||||
.tab-header{
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
justify-content: flex-start;
|
||||
padding: var(--padding);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--background);
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
<div part="tab-header" class="tab-header">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
customElements.define('scroll-tab-header', class extends HTMLElement{
|
||||
constructor(){
|
||||
super()
|
||||
this.shadow = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
this.shadow.append(scrollTabHeader.content.cloneNode(true))
|
||||
this.tabHeader = this.shadow.querySelector('.tab-header')
|
||||
this.tabHeaderSlot = this.shadow.querySelector('slot')
|
||||
this.targetPanelGroup
|
||||
this._assignedElements
|
||||
this.activeTab
|
||||
}
|
||||
|
||||
fireEvent = (panelIndex) => {
|
||||
this.dispatchEvent(new CustomEvent('changePanel', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
panelIndex,
|
||||
targetPanelGroup: this.targetPanelGroup
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
changeActiveTab = (tabIndex, fire = false) => {
|
||||
if (this.activeTab)
|
||||
this.activeTab.removeAttribute('active')
|
||||
this._assignedElements[tabIndex].setAttribute('active', '')
|
||||
this.tabHeader.scrollTo({
|
||||
left: (this._assignedElements[tabIndex].getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
if(fire)
|
||||
this.fireEvent(tabIndex)
|
||||
this.activeTab = this._assignedElements[tabIndex]
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
if (e.target.closest('[data-index]') && this.activeTab !== e.target.closest('[data-index]')) {
|
||||
this.changeActiveTab(e.target.closest('[data-index]').dataset.index, true)
|
||||
}
|
||||
}
|
||||
|
||||
handleTabChange = (e) => {
|
||||
if(this._assignedElements[e.detail.tabIndex] !== this.activeTab)
|
||||
this.changeActiveTab(e.detail.tabIndex)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.dataset.target) return;
|
||||
|
||||
this.targetPanelGroup = this.dataset.target
|
||||
|
||||
this.tabHeaderSlot.addEventListener('slotchange', e => {
|
||||
this._assignedElements = this.tabHeaderSlot.assignedElements()
|
||||
this._assignedElements.forEach((elem, index) => {
|
||||
elem.setAttribute('data-index', index)
|
||||
if (elem.hasAttribute('active')) {
|
||||
this.changeActiveTab(elem.dataset.index, true)
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tabHeader.addEventListener('click', this.handleClick)
|
||||
document.addEventListener('changeTab', this.handleTabChange)
|
||||
}
|
||||
disconnectedCallbakc() {
|
||||
this.tabHeader.removeEventListener('click', this.handleClick)
|
||||
}
|
||||
})
|
||||
|
||||
const scrollTabPanels = document.createElement('template')
|
||||
scrollTabPanels.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
--gap: 0;
|
||||
--height: auto;
|
||||
--border-radius: 0.3rem;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.tab-panels{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: var(--gap);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--background);
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
content-visibility: auto;
|
||||
}
|
||||
slot::slotted(*){
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
@media (any-hover: none){
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tab-panels{
|
||||
scrollbar-height: none;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb{
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
&:hover{
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
.tab-panels{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div part="tab-panels" class="tab-panels">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.shadow = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
this.shadow.append(scrollTabPanels.content.cloneNode(true))
|
||||
this.tabPanels = this.shadow.querySelector('.tab-panels')
|
||||
this.tabPanelsSlot = this.shadow.querySelector('slot')
|
||||
this._assignedElements
|
||||
this.activePanel
|
||||
this.debounceTimeout
|
||||
this.timerId;
|
||||
}
|
||||
|
||||
fireEvent = (tabIndex) => {
|
||||
this.dispatchEvent(new CustomEvent('changeTab', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
tabIndex
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
handlePanelChange = (e) => {
|
||||
if (e.detail.targetPanelGroup === this.id) {
|
||||
this.tabPanels.scrollTo({
|
||||
left: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().left - this.tabPanels.getBoundingClientRect().left + this.tabPanels.scrollLeft),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
// this._assignedElements[e.detail.panelIndex].scrollIntoView({block: "nearest", inline: 'start', behavior: 'smooth'})
|
||||
}
|
||||
}
|
||||
|
||||
scrollHorizontally = e => {
|
||||
e.preventDefault()
|
||||
const width = this.tabPanels.getBoundingClientRect().width
|
||||
const scrollBy = e.deltaY > 0 ? width : -width
|
||||
this.tabPanels.scrollBy({
|
||||
left: scrollBy,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
connectedCallback() {
|
||||
const panelObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
if (this.debounceTimeout) {
|
||||
clearTimeout(this.debounceTimeout)
|
||||
}
|
||||
this.debounceTimeout = setTimeout(() => {
|
||||
this.fireEvent(entry.target.dataset.index)
|
||||
if (this.activePanel)
|
||||
this.activePanel.removeAttribute('active')
|
||||
this._assignedElements[entry.target.dataset.index].setAttribute('active', '')
|
||||
this.activePanel = this._assignedElements[entry.target.dataset.index]
|
||||
}, 100);
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
threshold: 0.8,
|
||||
root: this.tabPanels
|
||||
})
|
||||
this.tabPanels.addEventListener('slotchange', e => {
|
||||
this._assignedElements = this.tabPanelsSlot.assignedElements()
|
||||
this._assignedElements.forEach((elem, index) => {
|
||||
elem.setAttribute('data-index', index)
|
||||
if (elem.hasAttribute('active')) {
|
||||
this.activePanel = elem
|
||||
this.fireEvent(elem.dataset.index)
|
||||
}
|
||||
panelObserver.observe(elem)
|
||||
})
|
||||
})
|
||||
// this.tabPanels.addEventListener('wheel', this.scrollHorizontally)
|
||||
document.addEventListener('changePanel', this.handlePanelChange)
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
document.removeEventListener('changePanel', this.handlePanelChange)
|
||||
}
|
||||
})
|
||||
@ -254,7 +254,7 @@ const siteMap = [
|
||||
url: "bitcoinbonds.html",
|
||||
brief: `Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher. It offers full capital protection if
|
||||
Bitcoin prices fall below acquisition price.`,
|
||||
isSold: true,
|
||||
// isSold: true,
|
||||
buyUrl: `purchase_room`,
|
||||
status: `We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.`
|
||||
},
|
||||
@ -262,7 +262,7 @@ const siteMap = [
|
||||
name: `Bob's Fund`,
|
||||
url: `bob'sfund.html`,
|
||||
brief: `Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they most hold for 20 years.`,
|
||||
isSold: true,
|
||||
// isSold: true,
|
||||
buyUrl: `purchase_room`
|
||||
},
|
||||
/* {
|
||||
@ -489,14 +489,6 @@ const render = {
|
||||
card.querySelector(".intern__project").textContent = project;
|
||||
return card;
|
||||
},
|
||||
icoPhase(obj) {
|
||||
const { phase, date, info } = obj;
|
||||
const template = getRef("ico_phase_template").content.cloneNode(true);
|
||||
template.querySelector(".phase__title").textContent = `Phase ${phase}`;
|
||||
template.querySelector(".phase__date").textContent = date;
|
||||
template.querySelector(".phase__description").textContent = info;
|
||||
return template;
|
||||
},
|
||||
floorLabel(floorNumber, offsetTop) {
|
||||
const floorLabel = getRef("floor_indicator_template").content.cloneNode(
|
||||
true
|
||||
@ -508,7 +500,7 @@ const render = {
|
||||
outletListItem(outletObj) {
|
||||
const { name, brief, url } = outletObj
|
||||
const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
|
||||
li.querySelector('a').href = `${url}.html`
|
||||
li.querySelector('a').href = `${url}`
|
||||
li.querySelector('.outlet-title').textContent = name
|
||||
// li.querySelector('.outlet-brief').textContent = brief ? brief : ''
|
||||
return li
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
|
||||
</svg> -->
|
||||
<span class="outlet-label__name">Outlet</span>
|
||||
<span class="outlet-label__no">Outlet</span>
|
||||
<span class="outlet-label__no"></span>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
|
||||
@ -95,9 +95,9 @@
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<a class="room-tile room-tile--main" href="#performance_room">
|
||||
<div class="tile-content">
|
||||
<div id="performance_preview"></div>
|
||||
<svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
|
||||
<h4 class="room-tile__title">Performance</h4>
|
||||
<div id="performance_preview"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="room-tile" href="#product_room">
|
||||
@ -306,7 +306,7 @@
|
||||
{
|
||||
series: 2513,
|
||||
startDate: 1496880000000
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
function getCurrentRates() {
|
||||
@ -386,7 +386,7 @@
|
||||
}
|
||||
|
||||
timelineItem.append(tilelineItemHeader, render.bitBondRow(obj))
|
||||
frag.prepend(timelineItem)
|
||||
frag.append(timelineItem)
|
||||
})
|
||||
getRef('bit_bond_series__container').append(frag)
|
||||
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
<button class="outlet-label">
|
||||
<!-- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg> -->
|
||||
<span class="outlet-label__name">Outlet</span>
|
||||
<span class="outlet-label__no">Outlet</span>
|
||||
<span class="outlet-label__no"></span>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
||||
</button>
|
||||
</section>
|
||||
@ -98,9 +98,9 @@
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<a class="room-tile room-tile--main" href="#performance_room">
|
||||
<div class="tile-content">
|
||||
<div id="performance_preview"></div>
|
||||
<svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
|
||||
<h4 class="room-tile__title">Performance</h4>
|
||||
<div id="performance_preview"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="room-tile" href="#product_room">
|
||||
@ -541,9 +541,9 @@
|
||||
timelineItem.append(fundCard)
|
||||
}
|
||||
timelineItem.prepend(tilelineItemHeader)
|
||||
timelineItemsFrag.prepend(timelineItem)
|
||||
timelineItemsFrag.append(timelineItem)
|
||||
|
||||
if(randIndex === index){
|
||||
if(index === 0){
|
||||
const fundCard = create('div', {
|
||||
className: 'grid card'
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user