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>