CSR POC

csr-poc.markdown

CSR POC

A Pen by Rutul Patel on CodePen.

License.

index.html

<p id="cat-speech-bubble"></p>
 <img src="https://i.ya-webdesign.com/images/pond-vector-cute-cartoon-6.png" id="cat"></img>

<div id="UniqueID">
  <div class="activity-wrapper">
    <div class="page"><h1 class="placeholder">Page 1</h1></div>
    <div class="page"><h1 class="placeholder">Page 2</h1></div>
    <div class="page"><h1 class="placeholder">Page 3</h1></div>
  </div>
  <div class="nav-controls">
    <div class="btn-scroll up"></div>
    <div class="btn-scroll down"></div>
  </div>
</div>

script.js

const pages = [
  {
    "description": "Hey I am your host. I can see you on page 1. <br /> go down for the experiance.",
  },
    {
    "description": "That's great now I can see you on page 2. <br /> This is the second last page",
  },
    {
    "description": "This is end of your experiance We hope you liked it <br /> you may go up now",
  }
]


class Cat {
  constructor(position) {
     this.cat = document.getElementById("cat");    
     this.speechBubble = document.getElementById("cat-speech-bubble");
     this.setPosition();
  }
  
  setPosition() {
    this.cat.style.top = "200px";
    this.cat.style.right = "20px";
    
    this.speechBubble.style.top = "60px";
    this.speechBubble.style.right = "160px";
    
    this.speechBubble.style.display = "none";
    this.cat.style.display = "none";
    
  }
  
  show() {
    this.cat.style.display = "block";
  }
  
  hide() {
    this.speechBubble.style.display = "none";
    this.cat.style.display = "none";
  }
  
  showSpeechBubble(bubbleText = '') {
    this.cat.style.display = "block";
    this.speechBubble.style.display = "block";
    this.speechBubble.innerHTML = bubbleText;
    this.speechBubble.classList.remove("fade-out");
  }
  
  hideSpeechBubble() {
    this.speechBubble.classList.add("fade-out");
  }
}

const cat = new Cat();




var QuantumLab = class {
    constructor(id) {
      this.id = id; // Required Unique
      this.widget = document.getElementById(this.id);
      this.activePage = 1;
      this.pages = this.widget.querySelectorAll('.page');
      this.pageCount = this.widget.querySelectorAll('.page').length;

      this.initializeWidget();
    }

    initializeWidget() {
        this.widget.querySelectorAll('.btn-scroll').forEach((input) => {
          console.log(input)
          input.addEventListener('click', this.handleClick.bind(this));
        });
      
      cat.showSpeechBubble(pages[this.activePage - 1].description);
    }

    handleClick(event) {
      if (event.target.className.includes('up') && this.activePage !== 1) {
        this.activePage = this.activePage -1;
        this.pages[this.activePage].style.transform = `translateY(${-(this.activePage - 1)*100}%)`;
      } else if (event.target.className.includes('down') && this.activePage !== this.pageCount) {
        this.activePage++;
        this.pages[this.activePage - 1].style.transform = `translateY(${-(this.activePage - 1)*100}%)`;
      }
      
      cat.hideSpeechBubble();
      setTimeout(() => {
        cat.showSpeechBubble(pages[this.activePage - 1].description);
      }, 1000);
    }
  }
  
  const quantumLab = new QuantumLab('UniqueID');

style.css

.activity-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #222f3e;
  display: flex;
}

.page {
  transition: transform 1s ease-in-out;
}

/* TODO: Remove */
.placeholder {
  margin: 0 auto;
  margin-top: 25%;
  color: white;
}

.nav-controls {
  position: fixed;
  bottom: 10%;
  right: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.btn-scroll {
  position: absolute;
  left: 0;
  width: 1em;
  height: 1em;
  border: 0.2em solid #fff;
  border-left: none;
  border-bottom: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  transition: border-color 0.3s;
}

.btn-scroll.up {
  top: -1.6em;
  transform: rotate(-45deg);
}

.btn-scroll.down {
  bottom: -1.2em;
  transform: rotate(135deg);
}
  
.btn-scroll:hover {
  border-color: #10ac84;
}


#cat {
  position: fixed;
  height: 250px;
  width: 160px;
  z-index: 10;
}

#cat-speech-bubble {
  z-index: 10;
  position: fixed;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 500px;
  animation: fadein 2s;
}

#cat-speech-bubble::after {
  content: '';
  border: 20px solid transparent;
  border-right: 20px solid #a53d38;
  border-top: 20px solid #a53d38;
  position: absolute;
  bottom: -30px;
  left: 85%;
} 

.fade-out {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
}