diff --git a/bitcoinbonds.html b/bitcoinbonds.html
index 065c199..ef04b1f 100644
--- a/bitcoinbonds.html
+++ b/bitcoinbonds.html
@@ -100,7 +100,7 @@
-
+
+
Performance
@@ -279,6 +297,39 @@
getRef('bit_bond_series__container').append(frag)
}
renderAllSeries()
+
+ document.addEventListener('click', e => {
+ if(e.target.closest('.room-tile')){
+ const tile = e.target.closest('.room-tile')
+ const tileParent = tile.parentNode
+ const tileDimensions = tile.getBoundingClientRect()
+ const tileParentDimensions = tileParent.getBoundingClientRect()
+ getRef('expanding_tile').classList.remove('hide-completely')
+ getRef('expanding_tile').animate([
+ {
+ height: `${tileDimensions.height}px`,
+ width: `${tileDimensions.width}px`,
+ transform: `translate(${tileDimensions.left - tileParentDimensions.left}px, ${tileDimensions.top - tileParentDimensions.top - window.pageYOffset}px)`
+ },
+ {
+ height: `${window.innerHeight}px`,
+ width: `${document.querySelector('main').getBoundingClientRect().width}px`,
+ transform: `translate(${- tileParentDimensions.left}px, ${- tileParentDimensions.top - window.pageYOffset}px)`
+ },
+ ],
+ {
+ duration: 300,
+ fill: 'forwards',
+ easing: 'ease'
+ })
+ .onfinish = () => {
+ setTimeout(() => {
+ getRef('expanding_tile').classList.add('hide-completely')
+
+ }, 500);
+ }
+ }
+ })