tabbit

Mon Oct 22 2018
Copied to clipboard! Copy reply
<!-- RTO CSS -->
<style>
  .remaining {
    display: none;
  }
  #rto-q4 {
    position: absolute;
    background: #262626;
    left: 0;
    width: 100%;
    position: fixed;
    color: #fff;
    z-index: 5000;
    /* margin-top: 12px; */
    /* border: 1px solid red; */
    top: 0;
    visibility: hidden;
  }

  .rto-top {
    position: relative;
    background: #EAB726;
    color: #333;
    padding: 7px 0 10px 20px;
    box-sizing: border-box;
  }
  .rto-body {
    padding: 10px 50px;
    text-align: center;
    box-sizing: border-box;
  }
  
  .rto-top .toggleCollapse {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 100%;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMzAgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjIgKDY3MTQ1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5leHBhbmQtYnV0dG9uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Im1pbmltYWwtZXh0cmEtbW9udGhzLWV4cGFuZGVkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzMyLjAwMDAwMCwgLTQ3Ni4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iT2ZmZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCA0NTIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZXhwYW5kLWJ1dHRvbiI+CiAgICAgICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMyLjg1NzE0MywgMjQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIyNC45ODU3MTQzIDAgMTQuMTQyODU3MSAxMS4xODkxODkyIDMuMyAwIDAgMy40MDU0MDU0MSAxNC4xNDI4NTcxIDE4IDI4LjI4NTcxNDMgMy40MDU0MDU0MSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') #0097D9 no-repeat;
    background-position: center;
  }

  .toggleCollapse.collapsed {
    transform: rotateX(180deg);
  }

  .rto-cta {
    background:#0097D9;
    color: #fff;
    text-decoration: none;
    padding: 13px 35px;
    border-radius: 30px;
    font-weight: bold;
    margin-top: -3px;
    display: inline-block;
    margin-bottom: 10px;
  }

  .countdowns {
    margin-top: 10px;
  }
</style>
<!-- END RTO CSS -->

    <script>
      var rtostring = ''
+ '  <div id="rto-q4">'
+ '      <div class="rto-top">          '
+ '        <div class="copy"><b>Mystery Deal</b><span style=\'position: relative;right: -4px;\'></span></div>'
+ '        <div class="copy">You\'ve got 10 minutes</b></div>'
+ '        <div class="remaining">'
+ '          <span>Time remaining: </span>'
+ '            <span class=\'clock_block\' data-time_units="minutes" style=\'margin-right:0\'>'
+ '              <span class="clock_time_unit" style="position: initial">'
+ '                <span class="clock_time_number" style="font-size:100%;font-weight:bold">9</span>'
+ '              </span>  '
+ '            </span>:<span class=\'clock_block\' data-time_units="seconds" style="margin:0">'
+ '                <span class="clock_time_unit" style="position: initial">'
+ '                  <span class="clock_time_number" style="font-weight: bold;font-size:100%">9</span>'
+ '                </span>  '
+ '              </span> '
+ '            '
+ '        </div>'
+ '        <div class="toggleCollapse"></div>'
+ '      </div>'
+ '      <div class="rto-body">'
+ '        <div class="copy">Reveal this offer and <b>save BIG</b> when you buy now</div>'
+ '        <div class="countdowns">'
+ '          <div class="clock_container">'
+ ''
+ '          </div>'
+ '          <div class="rto_message"></div>'
+ '        </div>'
+ '        <a href="" class="rto-cta">REVEAL THE DEAL</a>'
+ '      </div>'
+ '    </div>'
;
      console.log('---')
      $('body').append(rtostring)
      // BEGIN RTO CODE
    
      // Places RTO on bottom of viewport
      var rtoHeight = document.getElementById('rto-q4').offsetHeight;
      
     
      
      var diff = window.innerHeight - rtoHeight - 94
      
      // Initially position RTO on bottom
      $('#rto-q4').css({top: diff + 'px'})
    
      var isCollapsed = false
      $('.toggleCollapse').click(function() {
        if (!isCollapsed)
        {
          // Collapse it.
          console.log('Not collapsed. collapse')
          var bodyHeight = document.querySelector('#rto-q4 .rto-body').offsetHeight;
          var diff2 = diff + bodyHeight
          $('#rto-q4').css({top: diff2 + 'px'})
          $(this).addClass('collapsed')
          isCollapsed = true
        }
        else
        {
          // Collapsed. Expand it
          $('#rto-q4').css({top: diff + 'px'})
          $(this).removeClass('collapsed')
          isCollapsed = false
        }      
      })
    
      var total_time_on_clock_in_ms = 10 * (60*1000); // 10 minutes
    
      $('#rto-q4').css({visibility: 'visible'})
    
    // ****************************
    // Set clock styles here
    // ****************************
    
    function add_clock_styles(){
    
    var style_tag = document.createElement('style');
    style_tag.innerHTML = ''
      + '.clock_arc_svg {'
        + 'width: 80px;'
        + 'height: 80px;'
      + '}'
      + '.clock_arc {'
        + 'stroke-width: 0.6;'
        + 'stroke-linecap: round;'
        + 'fill: transparent;'
      + '}'
      + '.clock_arc_track {'
        + 'stroke: #1E1E1E;'
      + '}'
      + '.clock_arc_fill {'
        + 'stroke: url(#clock_arc_gradient) #458FCF;'
      + '}'
    
      + '.clock_block {'
        + 'position: relative;'
        + 'display: inline-block;'
        + 'margin: 0px 3px;'
        + 'line-height: 1;'
      + '}'
    
      + '.clock_time_unit {'
        + 'text-align: center;'
        + 'position: absolute;'
        + 'left: 0px;'
        + 'top: 20%;'
        + 'width: 100%;'
      + '}'
      + '.clock_time_number {'
        + 'font-size: 22px;'
      + '}'
      + '.clock_time_units {'
        + 'font-size: 14px;'
      + '}';
    document.head.appendChild(style_tag);
    }
    add_clock_styles();
    
    
    
    
    
    
    
    
    // ********************************
    // From here on, no need to edit
    // ********************************
    
    
    function _$(selector){
    var elems = Array.prototype.slice.call(document.querySelectorAll(selector));
    return {
      elems: elems,
      attr: function(attr, value){
        elems.forEach(function(elem){
          var original_attr = elem.getAttribute(attr);
          var final_value = typeof value === 'function' ? value(original_attr) : value;
          elem.setAttribute(attr, final_value);
        });
        return this;
      },
      show: function(display_property){
        elems.forEach(function(elem){
          elem.style.display = display_property || 'block';
        });
        return this;
      },
      hide: function(){
        elems.forEach(function(elem){
          elem.style.display = 'none';
        });
        return this;
      },
      html: function(inner_html){
        elems.forEach(function(elem){
          elem.innerHTML = inner_html;
        });
        return this;
      },
      on: function(event, fn){
        elems.forEach(function(elem){
          elem.addEventListener(event, fn);
        });
        return this;
      }
    };
    }
    
    
    
    
    function Timer(container_selector, time_remaining_ms){
    
    this.svg_gradient = ''
      + '<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">'
        + '<linearGradient id="clock_arc_gradient" x2="1" y2="1">'
          + '<stop offset="0%" stop-color="#80E4F9" />'
          + '<stop offset="50%" stop-color="#458FCF" />'
          + '<stop offset="100%" stop-color="#0E3FA5" />'
        + '</linearGradient>'
      + '</svg>';
    
    this.generate_arc_svg = function(time_units){
      return ''
        + '<svg class="clock_arc_svg" data-time_units="'+time_units+'" viewBox="0 0 10 10" xmlns="https://www.w3.org/2000/svg">'
          + '<path class="clock_arc clock_arc_track"></path>'
          + '<path class="clock_arc clock_arc_fill"></path>'
        + '</svg>';
    }
    
    this.generate_time_holder = function(time_units){
      return ''
        +'<div class="clock_block" data-time_units="'+time_units+'">'
          + this.generate_arc_svg(time_units)
          + '<div class="clock_time_unit">'
            + '<div class="clock_time_number">'+
              + this.getTime(time_units)
            +'</div>'
            + '<div class="clock_time_units">'
              + time_units.charAt(0).toUpperCase() + time_units.slice(1)
            + '</div>'
          + '</div>'
        +'</div>';
    }
    
    this.r = 4.55;
    this.arc_degrees_half = 130;
    this.arc_degrees_full = this.arc_degrees_half * 2;
    
    this.tick_length_ms = 500;
    this.latest_tick_ms;
    
    
    this.time_remaining_ms = time_remaining_ms;
    
    this.getTime = function(time_units){
      var time_in = {
        seconds: (this.time_remaining_ms/1000) % 60,
        minutes: (this.time_remaining_ms/1000/60) % 60,
        hours: this.time_remaining_ms/(1000*60*60)
      };
      return time_in[time_units];
    }
    
    this.hasHours = Math.floor(this.getTime('hours')) > 0;
    
    
    this.init = function(){
      var self = this;
      _$(container_selector).html(
        (self.hasHours ? self.generate_time_holder('hours') : '')
        + self.generate_time_holder('minutes')
        + self.generate_time_holder('seconds')
      );
      document.querySelector(container_selector).innerHTML += this.svg_gradient;
    
      _$('.clock_arc_track').attr(
        'd', describeArc(5, 5, self.r, -self.arc_degrees_half, self.arc_degrees_half)
      );
    };
    
    this.set_arc_length = function(time_units, percent_full){
      var self = this;
      var start_angle = this.arc_degrees_half - (this.arc_degrees_full * (percent_full/100));
    
      _$(container_selector + ' .clock_arc_svg[data-time_units='+time_units+'] .clock_arc_fill').attr(
        'd', describeArc(5, 5, self.r, start_angle, self.arc_degrees_half)
      );
    };
    
    
    this.time_now_ms = window.performance.now();
    this.total_seconds = this.getTime('seconds') || 60;
    this.total_minutes = this.hasHours ? 60 : this.getTime('minutes');
    this.total_hours = this.getTime('hours');
    
    this.t = 60;
    
    this.raf;
    
    this.update_clock = (function(timestamp){
      this.raf = window.requestAnimationFrame(this.update_clock);
      this.time_remaining_ms -= (timestamp - this.time_now_ms);
      this.time_now_ms = timestamp;
    
      // make sure time doesn't go negative (it creates weird rendering)
      if(this.time_remaining_ms <= 0){
        this.time_remaining_ms = 0;
      }
    
      if( (this.time_now_ms - this.latest_tick_ms) >= this.tick_length_ms ){
        this.latest_tick_ms = this.time_now_ms;
    
        if(this.hasHours){
          this.update_timer_number('hours', Math.floor(this.getTime('hours')) );
        }
        this.update_timer_number('minutes', Math.floor(this.getTime('minutes')) );
        this.update_timer_number('seconds', Math.floor(this.getTime('seconds')) );
      }
    
      if(this.hasHours){
        this.set_arc_length('hours', (this.getTime('hours') / this.total_hours) * 100);
      }
      this.set_arc_length('minutes', (this.getTime('minutes') / this.total_minutes) * 100);
      this.set_arc_length('seconds', (this.getTime('seconds') / this.total_seconds) * 100);
    
      if(this.time_remaining_ms <= 0){
        this.stop();
      }
    }).bind(this);
    
    this.update_timer_number = function(time_units, number){
      _$('.clock_block[data-time_units='+time_units+'] .clock_time_number').html(number);
    }
    
    this.start = function(){
      this.time_now_ms = window.performance.now();
      this.latest_tick_ms = this.time_now_ms;
      this.update_clock(this.time_now_ms);
    };
    
    this.stop = function(){
      window.cancelAnimationFrame(this.raf);
    };
    }
    
    var timer = new Timer('.clock_container', total_time_on_clock_in_ms);
    timer.init();
    timer.start();
    
    
    
    // credit for polarToCartesian and describeArc functions:
    // https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
    
    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    };
    }
    function describeArc(x, y, radius, startAngle, endAngle){
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    
    var arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
    
    var d = [
        'M', start.x, start.y, 
        'A', radius, radius, 0, arcSweep, 0, end.x, end.y
    ].join(' ');
    
    return d;
    }
    
    
    
    
    // END RTO CODE
    </script>