matt-barker
9/22/2017 - 2:08 PM

chris-barber

chris-barber

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<style>
.form-submission-text {
  height:100px;
  }
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-inner-wrapper form {
  margin-top:10px;
}

.form-wrapper .form-button-wrapper--align-center {
  padding:20px;
  border-top:1px solid;
}

.form-title {
  padding:20px 20px
}

.sqs-modal-lightbox {
 //display:block!important;
}

.lightbox-content {
  padding:0px!important;
}

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding: 40px;
  	background: #fff;
}


.form-wrapper {
   background-color: #f1efec;
  
}

.form-wrapper .title {
  display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  	font-size: 16px;
    text-transform: uppercase;
}

.form-wrapper .select{
  font-size: 18px;
  padding: 0 5px 5px;
  margin-left: -2px;
  line-height: 28px;
}

.form-wrapper option{
  font-size: 16px;
  color: #877874;
  padding: 0 5px 5px;
  margin-left: -2px;
  line-height: 28px;
}

.form-wrapper .option {
  font-size:18px!important;
  font-weight:bold;
}

.select-span {
  background:url('https://static1.squarespace.com/static/58c0a35ce6f2e14660bd8506/t/59983716e6f2e14f9ada814c/1503147798706/form.png') no-repeat right -54px;
  height: 35px;
  width: 120px;
  display: inline-block;
  position: relative;
  
}

.select-span select {
    opacity: 1;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    position: absolute;
    left: 0;
    top: -5px;
    height: 35px;
    width: 100%;
    cursor:pointer;
}

.prescription-type {
  border-top:1px solid #d8d1ca;
  padding:20px!important;
  margin:0!important
}

.prescription-type .select-span {
      width: 305px;
}

.prescription-type label {
  display:inline-block!important;
  
  margin-right:30px!important;
  float:left;
}

.filler-label {
  top:10px;
     background: url('https://static1.squarespace.com/static/58c0a35ce6f2e14660bd8506/t/59983716e6f2e14f9ada814c/1503147798706/form.png') no-repeat left -126px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    width: 100%;
    margin-left: -2px;
    padding-left: 8px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
}

.radio-span {
  background: url('https://static1.squarespace.com/static/58c0a35ce6f2e14660bd8506/t/59983716e6f2e14f9ada814c/1503147798706/form.png') no-repeat 0 0;
}

.radio-span.checked {
  background: url('https://static1.squarespace.com/static/58c0a35ce6f2e14660bd8506/t/59983716e6f2e14f9ada814c/1503147798706/form.png') no-repeat -36px 0;
}


.radio-span input {
  opacity:0;
    width:20px;
  height:22px;
  margin-right:0!important;
  padding-top:2px;
  cursor:pointer;
}

.left-shape-wrapper, .right-shape-wrapper {
  display:flex;
  justify-content:left;
  //flex-basis:25%;
  flex-wrap:wrap;
}

.left-shape-wrapper > div, .right-shape-wrapper > div {
  flex-grow:1;
}

.right-shape-title, .left-shape-title {
  width:100px
}

.prism-values, .pv-no-display-right, .pv-no-display-left, .pupilary-distance {
  display:flex;
  justify-content:left;
  //flex-wrap:wrap
 
}

.prism-values .title {
  width:151px;
  
}

.pv-no-display-right > div, .pv-no-display-left > div {
  flex-shrink:0;
}

.pv-left-ph .title, .pv-left-bd .title, .pv-left-pv .title, .pv-left-vbd .title {
  display:none!important;
}

.pv-no-display-wrapper .title,.pv-no-display-wrapper .select-span  {
  width:100px;
}

.pv-right-title, .pv-left-title {
  width:140px!important;
}

.prism-values .option {
 margin-right:10px!important;
}

.field-list.clear > div {
  padding-left:20px;
  border-top:1px solid #d8d1ca;
  padding-top:20px!important;
}

.pupilary-distance > div {
  margin-right:20px!important
}

.pd-single, .pd-dual-wrapper {
  margin-left:210px!important
}

.prescription-type .description {
  margin:20px
}

@media (max-width:640px) {
  .left-shape-wrapper, .right-shape-wrapper {
  display:flex;
  
}
  .select-span {
    width:100px;
  }
  .pd-single, .pd-dual-wrapper {
  margin-left:0px!important
}
  .pv-right-title, .pv-left-title, .right-shape-title, .left-shape-title {
    flex-basis:100%;
  }
  
  .pv-no-display-right, .pv-no-display-left, {
    flex-wrap:wrap;

  }

}
</style>
<script>
$(document).ready(function() {
 
  $('body').append('<div class="injected-form-wrapper"></div>');
  $('.injected-form-wrapper').load('/custom-form-embed .form-wrapper');
  $('.injected-form-wrapper').wrap('<div class="lightbox-content"></div>');
  $('.form-wrapper').unwrap('.injected-form-wrapper');
  $('.lightbox-content').wrap('<div class="lightbox-inner"></div>');
  $('.lightbox-inner').wrap('<div class="sqs-modal-lightbox-content"></div>');
  $('.sqs-modal-lightbox-content').prepend('<div class="lightbox-background"></div>');
  $('.sqs-modal-lightbox-content').wrap('<div class="sqs-modal-lightbox" style="display:none;"></div>');
  
  
  $(document).ajaxComplete(function(){
    $('.form-wrapper').append('<div class="lightbox-close">×</div>');
    $('.lightbox-close').click(function(){
  $('.sqs-modal-lightbox').attr('style','display:none;');
  $('html').removeClass('sqs-modal-lightbox-open');
});
  var f = $('.form-wrapper .field-list').children();
  f.eq(0).addClass('prescription-type');
  f.eq(1).addClass('left-sphere');
  f.eq(2).addClass('left-cylinder');
  f.eq(3).addClass('left-axis');
  f.eq(4).addClass('right-sphere');
  f.eq(5).addClass('right-cylinder');
  f.eq(6).addClass('right-axis');
  f.eq(7).addClass('prism-values');
  f.eq(8).addClass('pv-right-ph');
  f.eq(9).addClass('pv-right-bd');
  f.eq(10).addClass('pv-right-pv');
  f.eq(11).addClass('pv-right-vbd');
  f.eq(12).addClass('pv-left-ph');
  f.eq(13).addClass('pv-left-bd');
  f.eq(14).addClass('pv-left-pv');
  f.eq(15).addClass('pv-left-vbd');
  f.eq(16).addClass('pupilary-distance');
  f.eq(17).addClass('pd-single');
  f.eq(18).addClass('pd-dual-left');
  f.eq(19).addClass('pd-dual-right');
  
  $('.left-sphere, .left-cylinder, .left-axis').wrapAll('<div class="left-shape-wrapper"></div>');
  
  $('.right-sphere, .right-cylinder, .right-axis').wrapAll('<div class="right-shape-wrapper"></div>');
  
  $('.left-shape-wrapper').prepend('<div class="left-shape-title title">OD LEFT</div>');
  
  $('.right-shape-wrapper').prepend('<div class="right-shape-title title">OS RIGHT</div>');
  
    $('.pv-right-ph, .pv-right-bd, .pv-right-pv, .pv-right-vbd').wrapAll('<div class="pv-no-display-right"></div>');
  
  $('.pv-left-ph, .pv-left-bd, .pv-left-pv, .pv-left-vbd').wrapAll('<div class="pv-no-display-left"></div>');
  
  $('.pv-no-display-right').prepend('<div class="pv-right-title title">OD RIGHT</div>');
  
  $('.pv-no-display-left').prepend('<div class="pv-left-title title">OD LEFT</div>');
  
  $('.prism-values, .pv-no-display-right, .pv-no-display-left').wrapAll('<div class="prism-values-wrapper"></div>');
  
  $('.pv-no-display-right, .pv-no-display-left').wrapAll('<div class="pv-no-display-wrapper"></div>');
  
  $('.pd-dual-left, .pd-dual-right').wrapAll('<div class="pd-dual-wrapper"></div>');
  
  $('.pupilary-distance, .pd-single, .pd-dual-wrapper').wrapAll('<div class="pupilary-distance-wrapper"></div>');
  
 $('.prescription-type .description').insertAfter('.prescription-type select');
  
   $('.form-item.select select').wrap('<span class="select-span"></span>');
  
  $('.form-item input:radio').wrap('<span class="radio-span"></span>');
  
  $('.select-span').prepend('<label class="filler-label"></label>');
  
  $('.select-span select').addClass('selector');
  
  $('.pv-right-ph .title').text('Prism Horizontal');
  $('.pv-right-bd .title').text('Base Direction');
  $('.pv-right-pv .title').text('Prism Vertical');
  $('.pv-right-vbd .title').text('Base Direction');
  
  $('.left-sphere .title, .right-sphere .title').text('Sphere');
  $('.left-cylinder .title, .right-cylinder .title').text('Cylinder');
  $('.left-axis .title, .right-axis .title').text('Axis');

$('.lightbox-handle').click(function(){  
var checkLightBox = setInterval(function(){
  if ( $( ".lightbox-content" ).length ) {
lightboxReady()
   clearInterval(checkLightBox);
 }
},100);
});  
    
    
  
//function lightboxReady(){
  
  $('.left-sphere option[value="0.00"], .left-cylinder option[value="0.00"], .right-sphere option[value="0.00"], .right-cylinder option[value="0.00"] ').attr('selected','selected');
  
  $('.prism-values input[value="No"]').attr('checked','checked');
  
  $('.pupilary-distance input[value="Single PD"]').attr('checked','checked');
  
  $('.pv-no-display-wrapper').hide();
  $('.pd-dual-wrapper').hide();
  
  $('.prism-values .option').click(function(){
    if (($(this).find('input').val()) == "Yes"){
      $('.pv-no-display-wrapper').slideDown();
    } else {
      $('.pv-no-display-wrapper').slideUp();
    }
  })
  
   
  $('.pupilary-distance .option').click(function(){
    console.log('pd clicked');
    if (($(this).find('input').val()) == "Single PD"){
     
      $('.pd-single').slideDown();
      $('.pd-dual-wrapper').slideUp();
    } else if (($(this).find('input').val()) == "Dual PD"){
      $('.pd-single').slideUp();
      $('.pd-dual-wrapper').slideDown();
    }
  });
  
  $('.radio-span').click(function(){
    $('.radio-span input').each(function(){
      if ($(this).prop("checked") == true) {
          $(this).closest('.radio-span').addClass('checked');
          } else if ($(this).prop("checked") == false) {
            $(this).closest('.radio-span').removeClass('checked');
          }
    });
    
    
  });
  
  $('.radio-span input').each(function(){
      if ($(this).prop("checked") == true) {
          $(this).closest('.radio-span').addClass('checked');
          } else if ($(this).prop("checked") == false) {
            $(this).closest('.radio-span').removeClass('checked');
          }
    });
  });
//}; //End Lightbox Ready

$('.sqs-add-to-cart-button').click(function(){
  $('.sqs-modal-lightbox').attr('style','');
  $('html').addClass('sqs-modal-lightbox-open');
});

  
});
  

  
</script>