tabbit

Mon Nov 20 2017
Copied to clipboard! Copy reply
var rto_route = {
    price: 149,
    rsi: 'testadi'
}






function runClockRTO(){

  // Shortcut for document.querySelector
  var qs = document.querySelector.bind(document)

  // Must match css media query - shrinking circle radius & pos
  if (window.innerWidth < 650)
  {
    qs('#progress').setAttribute('r', 100)
    qs('#progressbg').setAttribute('r', 100)

    qs('#progress').setAttribute('cx', 120)
    qs('#progressbg').setAttribute('cx', 120)
    
  }



  // Progress variables
  var $hours = qs('#hours .digit')
  var $minutes = qs('#minutes .digit')
  var $seconds = qs('#seconds .digit')


  /* Clock
  **********************************/
  // if you change this, also change
  // #progress animation-duration to the
  // equivalent number of seconds
  var timeInMinutes = 10; 
  var deadline = new Date(Date.parse(new Date()) + timeInMinutes*60*1000);

  qs('#progress').style.animationDuration = timeInMinutes * 60

  // UPDATED
  var fullTime = getTimeRemaining(deadline).total;

  function getTimeRemaining(endtime)
  {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor( (t/1000) % 60 );
    var minutes = Math.floor( (t/1000/60) % 60 );
    var hours = Math.floor( (t/(1000*60*60)) % 24 );
    var days = Math.floor( t/(1000*60*60*24) );
    
    
    if (minutes == 1 && !qs('#progress').style.animationName)
    {
      qs('#progress').style.animationName = 'colorfade'
    }
    return {
      'total': t,
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  }

  function initializeClock(endtime)
  { 
    var timeinterval = setInterval(function() {
      var t = getTimeRemaining(endtime);
      var seconds = ('0' + t.seconds).slice(-2);
      
      // progress bar remaining UPDATED
      var pbr =  (t.total / fullTime) * 100;
      
      
      updateSliderValue(t.hours, t.minutes, seconds, false, pbr);

      if(t.total<=0)
      {      
        clearInterval(timeinterval);
        document.querySelector('.rto-container').style.display = 'none'
        document.querySelector('.rto-gradient').style.display = 'none'
        document.querySelector('.rto-wrap').style.display = 'none'
      }
    },1000);
  }




  /* Progress bar
  **************************************/

  /*
  * Updates progress bar and value
  * @param {str} hours - hours left
  * @param {str} minutes - minutes left
  * @param {str} seconds - seconds left
  * @param {bool} showHours - show/hide hours left
  * @param {int} barValue - number of total seconds left. 
  */
  function updateSliderValue(hours, mins, secs, showHours, barValue) 
  { 
    
    if (showHours)
    {
      qs('#hours').style.display = 'table-cell'
      qs('.colon').style.display = 'table-cell'    
    }
    
    $hours.innerHTML = hours
    $minutes.innerHTML = mins
    $seconds.innerHTML = secs
    var radius = qs('#progress').getAttribute('r');
    var circumference = 2 * Math.PI * radius;
    
    // Controls the loading circle %
    
    var progress_in_pixels = -(circumference * (100-barValue) / 100).toFixed(5); 
	if('requestAnimationFrame' in window){
		requestAnimationFrame(function(){ qs('#progress').style.strokeDashoffset = progress_in_pixels+'px'; })
	}
	else {
		 qs('#progress').style.strokeDashoffset = progress_in_pixels+'px';
	}
    
    
    
    
  /*
    if(qs('#slider').value < 25){
      qs('#progress').style.stroke = 'red';
      qs('#slidervalue').style.color = 'red';
    }
    else if(yb.id('slider').value >= 75){
      qs('#progress').style.stroke = '#7df';
      qs('#slidervalue').style.color = '#7df';
    }
    else{
      qs('#progress').style.stroke = 'gold';
      qs('#slidervalue').style.color = 'gold';
    }
    */
    
  }



  /* Initialize everything
  **************************************/
  initializeClock(deadline);


}


function addClockContentToPage(content){

    var clockMarkup = `
    <div class="rto-wrap" id="__containClock">

      <div class="rto-container">

          <div class="rto-header">
            IF YOU ORDER IN THE NEXT TEN MINUTES:
          </div>

          <div class="rto-body">

            <div class="offer-price">
              <h3>save up to</h3>
              <div class='rto-offer-price'>${"$"+content.dollarsoff}</div>
              <h3>on your order</h3>
            </div> <!-- /offer-price -->

            <div class="progress-bar">
              <div id="svgcontainer">
                <svg height="300" width="300" id="svg">
                  <circle id="progressbg" cx="150" cy="150" r="120" stroke-width="10" fill="transparent" stroke-dasharray="753.9822368615503" transform="rotate(.1)" />
                  <circle id="progress" cx="150" cy="150" r="120" stroke-width="10" fill="transparent" stroke-dasharray="753.9822368615503" transform="rotate(.1)" />
                </svg>

                <div class="countdown-clock">

                  <div class='timeleft'>

                    <div id='hours'>
                      <div class="digits">
                        <span class="digit"></span>
                        <span class="word-mobile">m</span>
                      </div>
                      <div class="word">Hours</div>
                    </div>

                    <div class='colon'>:</div>

                    <div id='minutes'>
                      <div class="digits">
                        <span class="digit">09</span>
                        <span class="word-mobile">m</span>
                      </div>        
                      <div class="word">Minutes</div>
                    </div>

                    <div class='colon'>:</div>

                    <div id='seconds'>
                      <div class="digits">
                        <span class="digit">09</span>
                        <span class="word-mobile">s</span>
                      </div>
                      <div class="word">Seconds</div>
                    </div>      

                  </div>       
                </div>
              </div>
            </div> <!--/ progress-bar -->
          </div> <!-- /rto-body -->

          <div class="rto-footer">
            <a href="${content.destination}">SHOP NOW</a>
          </div>

          <div class="rto-gradient"></div>

      </div>
    </div>
    `;

    var clockCSS = `
    <style>


      /* White blurry backgorund */
      .rto-gradient {
          display: none;
          background: pink;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          position: absolute;
          background: rgba(255,255,255,0.8);
          z-index: 1;   
      }

      /*  used to center rto container */
      .rto-wrap {    
          position: absolute;
          top: 0; 
          left: 0;
          height: 100%;
          width: 100%;
          text-align: center;
          z-index: 100;
          background: rgba(255,255,255,0.8);
      }





      .rto-container {
        z-index: 150009999999;
        text-align:center;
        max-width: 650px;
        background: #363635;  
        margin: 10vh auto;
      }

      .rto-header {
        background: #EAB726;
        padding: 2.2em 1em;
      }

      .rto-body {  
        display: flex;
        color: #fff;
        padding: 2em 3em;
      }

      .rto-body > * {
        width: 50%;
      }

      .rto-body .offer-price {
        text-transform: uppercase;
        order: 1;
        margin-top: 2em;
      }

      .rto-body h3 {
        font-weight: lighter;
      }

      .rto-offer-price {
        font-weight: 100;
        font-size: 102px;
      }

      .rto-footer {
        padding: 0 0 2em 0;
      }

      .rto-footer a {
        background: #34A4D9;
        display: inline-block;
        color: #fff;
        padding: 1em 6em;
        text-decoration: none;
        font-weight: 500;
        border-radius: 4px;
      }




      .timeleft {
        display: table;
        width: 100%;
        align-items: center;
        font-size: 28px;

      }

      .timeleft > div {
        display: table-cell;
        font-size: 52px;

      }

      #hours, #hours + .colon {
        display: none;
      }

      .digits {
        display: table;
      }

      .digits > span {
        display: table-cell;
        text-align: center;
        font-weight: 700;
        width: 100px;
      }

      .digits > span:last-of-type {
        font-size: 70%;
        margin: 0 auto;
        width: 1px;
        overflow: hidden;
        display: block;
        font-weight: 100;

      }
      .word {
        font-size: 10px;
        text-transform: uppercase;
      }

      .word-mobile {
        display: none;
      }


      .countdown-clock {
        width: 60%;
        text-align: center;
        position: absolute;
        top: 97px;
        left: 20%;
        font-size: 42px;
        font-weight: 100;
        color: #fff;
        transition: all 1s linear;
        /*transform: rotate(90deg);*/
      }

      #svgcontainer{
        position: relative;
        display: inline-block;
        width: 300px;	
      }

      #svg{
        position:relative;
        transform: rotate(90deg);
      }

      #progressbg {
        z-index:0;
        position:absolute;
        top:0px;
        box-shadow: 5px 5px 5px 5px #333;
        stroke: #2B2B2A;
      }

      #progress {
        stroke-dashoffset: 0;
        stroke: #2769BF;
        transition: all 1s linear;
        z-index:1;
        position:absolute;
        top:0px;  


      }




      @media (max-width: 650px) {

        .rto-container {
          max-width: 355px;
          margin: 1em auto;
          border-radius: 5px;
        }


        .rto-header {
          padding: 2em 0;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
        .rto-body {
          flex-direction: column;
          padding: 0;
        }

        .rto-body > * {
          width: 100%;
        }
        .rto-body .offer-price {
          order: 1; 
          margin-top: 1em;
          line-height: 59px;
        }

        .rto-body h3 {
          margin: 0;
        }

        .rto-body .progress-bar {
          order: 2;
          height: 267px;
          overflow: hidden;
        }

        .countdown-clock {
          top: 91px;
          left: 26%;
          width: 57%;
        }

        .word {
          display: none;
        }

        .digits > span:last-of-type {
          display: inline-block;
          width: auto;
          position: relative;
          bottom: -10px;
        }
        .digit {
          width: 50%!important;
        }

        #seconds .digits > .digit {
          width: 75%!important;
        }
        .colon {
          display: none!important;
        }
        .timeleft > div {
          font-size: 42px;
        }

        .rto-footer a {
          padding: 0.5em 6em;
        }

        #svg {
          transform: rotate(90deg) scale(.9) translateX(-10px);
        }
      }


      @supports(position: fixed){
          .rto-container {
            width: 650px;
            position: fixed;
            top: 1em;
            left: 50%;
            transform: translateX(-50%);
         }

         @media (max-width: 650px){
            .rto-container{
                width: 650px;
                position: fixed;
                left: 0.6em;
                transform: none;
            }
         }
      }



      @keyframes colorfade {
        0% {
          stroke: #2769BF
        }

        25% {
          stroke: #EAB726;

        }


        40% {
          stroke: #d45322f2

        }

        75% {

        }
        100% {
          stroke: #d41818
        }
      }

    </style>
    `;

    //For idempotence: can be added more than 1 time safely
    !document.getElementById('__containClock') && document.body.insertAdjacentHTML('beforeend', clockCSS + clockMarkup);
}

function showClockRTO(){
    var destination = '//www.rosettastone.com/lp/sbsr/' + rto_route.rsi + '/';
    var dollarsoff = parseFloat(RSI({lvl: '24'})[0].price, 10) - rto_route.price;
    addClockContentToPage({destination: destination, dollarsoff: dollarsoff});
    runClockRTO();
}