Feature update

-- Added direct link to rooms

bitcoinbonds.html

@@ -103,21 +103,21 @@
         </div>
         <section class="rooms-layout">
             <div id="expanding_tile" class="hide-completely"></div>
-            <div class="room-tile room-tile--main">
+            <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
                     <h4 class="room-tile__title">Performance</h4>
                 </div>
-            </div>
-            <div class="room-tile">
+            </a>
+            <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <h4 class="room-tile__title">Product</h4>
                 </div>
-            </div>
-            <div class="room-tile">
+            </a>
+            <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <h4 class="room-tile__title">Purchase</h4>
                 </div>
-            </div>
+            </a>
         </section>
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
@@ -126,10 +126,10 @@
                     <h3 class="room-title"></h3>
                 </button>
             </header>
-            <section class="grid room">
+            <section id="performance_room" class="grid room">
                 <div id="bit_bond_series__container" class="grid series-container"></div>
             </section>
-            <section class="grid room">
+            <section id="product_room" class="grid room">
                 <h4 class="h4 margin-bottom-1r">Description of different bonds</h4>
                 <ol type="1" class="margin-bottom-3r">
                     <li>
@@ -233,7 +233,7 @@
                     </li>
                 </ol>
             </section>
-            <section class="grid room">
+            <section id="purchase_room" class="grid room">
                 <p>
                     The purchase of this product is open only during specified time when we are confident we can
                     give guarantees. It was last open from February 2017 to June 2017.Currently we are doing blockchain
@@ -270,14 +270,24 @@
             easing: 'ease'
         }
 
-        document.addEventListener('click', e => {
-            if(e.target.closest('.room-tile')){
-                pauseScrolling()
-                tile = e.target.closest('.room-tile')
-                tileParent = tile.parentNode
-                tileDimensions = tile.getBoundingClientRect()
-                tileParentDimensions = tileParent.getBoundingClientRect()
-                getRef('expanding_tile').classList.remove('hide-completely')
+        window.addEventListener('load', e => {
+            if(window.location.hash !== '')
+                showRoom(window.location.hash, false)
+        })
+
+        window.addEventListener('hashchange', e => {
+            showRoom(window.location.hash)
+        })
+        
+        function showRoom(roomId, animate = true){
+            if(roomId === '') return
+            pauseScrolling()
+            tile = document.querySelector(`[href="${roomId}"]`)
+            tileParent = tile.parentNode
+            tileDimensions = tile.getBoundingClientRect()
+            tileParentDimensions = tileParent.getBoundingClientRect()
+            getRef('expanding_tile').classList.remove('hide-completely')
+            if(animate){
                 getRef('expanding_tile').animate([
                     {
                         height: `${tileDimensions.height}px`,
@@ -290,23 +300,29 @@
                         transform: `translate(${- tileParentDimensions.left}px, ${- tileParentDimensions.top - window.pageYOffset}px)`
                     },
                 ],
-                animeInOptions)
+                animeInOptions) 
                 .onfinish = () => {
-                    const index = [...tileParent.querySelectorAll('.room-tile')].findIndex(elem => elem === tile)
-                    const roomContainer = document.querySelector('.room-container')
-                    roomContainer.querySelectorAll('.room').forEach(child => child.classList.add('hide-completely'))
-                    roomContainer.children[index + 1].classList.remove('hide-completely')
-                    document.querySelector('.room-title').textContent = tile.querySelector('.room-tile__title').textContent
-                    roomContainer.classList.remove('hide-completely')
-                    roomContainer.animate(slideInDown, animeInOptions)
-                    .onfinish = () => {
-                        getRef('expanding_tile').classList.add('hide-completely')
-                    }
+                    revealRoom()
                 }
             }
-        })
+            else{
+                revealRoom()
+            }
+            function revealRoom(){
+                const roomContainer = document.querySelector('.room-container')
+                roomContainer.querySelectorAll('.room').forEach(child => child.classList.add('hide-completely'))
+                document.querySelector(roomId).classList.remove('hide-completely')
+                document.querySelector('.room-title').textContent = tile.querySelector('.room-tile__title').textContent
+                roomContainer.classList.remove('hide-completely')
+                roomContainer.animate(slideInDown, animeInOptions)
+                .onfinish = () => {
+                    getRef('expanding_tile').classList.add('hide-completely')
+                }
+            }
+        }
 
         function hideRoom(){
+            history.replaceState(null, null, ' ');
             const roomContainer = document.querySelector('.room-container')
             roomContainer.animate(fadeOut, animeOutOption)
             .onfinish = () => {

css/main.css

@@ -1198,7 +1198,7 @@ scroll-tab-panels > [active] {
   border-radius: 0.5rem;
   transition: transform 0.3s;
   background-color: rgba(var(--foreground-color), 1);
-  box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
 }
 .room-tile--main {
   padding-top: 100%;
@@ -1214,6 +1214,9 @@ scroll-tab-panels > [active] {
 .room-tile:active {
   transform: scale(0.95);
 }
+.room-tile:focus-visible {
+  outline: auto;
+}
 
 #expanding_tile {
   position: fixed;

css/main.scss

@@ -1093,7 +1093,7 @@ scroll-tab-panels{
     border-radius: 0.5rem;
     transition: transform 0.3s;
     background-color: rgba(var(--foreground-color), 1);
-    box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
     &--main{
         padding-top: 100%;
         grid-row: span 2;
@@ -1108,6 +1108,9 @@ scroll-tab-panels{
     &:active{
         transform: scale(0.95);
     }
+    &:focus-visible{
+        outline: auto;
+    }
 }
 #expanding_tile{
     position: fixed;

index.html

@@ -305,7 +305,7 @@
         renderAllFloors()
 
         function renderOutletPreview(obj){
-            const {outletNo, name, brief, url, isSold} = obj
+            const {outletNo, name, brief, url, buyUrl, isSold} = obj
             const preview = document.createElement('section')
             preview.classList.add('outlet-preview', 'carousel-container')
             let composed = `
@@ -316,7 +316,7 @@
             `
             if(isSold){
                 composed += `
-                    <a href="${url}" class="button outlet-preview__button">
+                    <a href="${url}#${buyUrl}" class="button outlet-preview__button">
                         <span class="button__label">Buy</span>
                     </a>
                 `

js/index.js

@@ -238,19 +238,22 @@ const siteMap = [
         url: "bitcoinbonds",
         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`
       },
       {
         name: `Bob's Fund`,
         url: `bob'sfund`,
         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`
       },
       {
         name: "Initial Coin Offering",
         url: "ico",
         brief: `The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million tokens over 14 phases over 3 years.`,
-        isSold: true
+        isSold: true,
+        buyUrl: `purchase_room`
       },
     ],
   },