Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
(function($){
$(document).ready(function(){
$('input[name="input_4"]').on( 'input', function() {
if( $('select[name="input_2"]').val() === 'en_option2' || $('select[name="input_2"]').val() === 'en_option4' ){
$('#name').html( 'When You Support<br><span>' + $(this).val() + '</span><br>You Support' );
}else if( $('select[name="input_2"]').val() === 'es_option2' || $('select[name="input_2"]').val() === 'es_option4' ){
$('#name').html( 'Cuando Apoyas<br><span>' + $(this).val() + '</span><br>Tu Apoyo' );
}else{
$('#name').html( $(this).val() );
}
});
$('select[name="input_2"]').on( 'change', function(){
if( $('select[name="input_2"]').val() === 'en_option2' || $('select[name="input_2"]').val() === 'en_option4' ){
$('#name').html( 'When You Support<br><span>' + $('input[name="input_4"]').val() + '</span><br>You Support' );
}else{
$('#name').html( $('input[name="input_4"]').val() );
}
$('#preview').removeClass();
var asset = $(this).val();
var src = theme.directory + '/images/asset_generator/';
var addClass;
switch( asset ){
case 'en_option1':
src += 'we_are_forfortcollins.jpg';
break;
case 'en_option2':
src += 'support_local.jpg';
break;
case 'en_option3':
src += 'show_us_how.jpg';
break;
case 'en_option4':
src += 'support_community.jpg';
break;
case 'es_option1':
src += 'nosotros_somos_forfortcollins.jpg';
break;
case 'es_option2':
src += 'tu_apoyo_local.jpg';
break;
case 'es_option3':
src += 'como_estas.jpg';
break;
case 'es_option4':
src += 'tu_apoyo_comunidad.jpg';
break;
}
$('#preview').addClass( asset );
$('#asset'). attr( 'src', src );
});
$('select[name="input_5"]').on( 'change', function(){
$('#text-field').html( $(this).val());
});
$('select[name="input_9"]').on( 'change', function(){
$('#text-field').html( $(this).val());
});
$('#generate').on("click", function(e){
e.preventDefault()
makeImage();
setTimeout( function(){
$('#gform_1').submit();
}, 1000 );
});
function makeImage(){
if( $(window).width() < 769 ){
var scale = 6
var height = 180;
var width = 180;
}else{
scale = 3;
height = 360;
width = 360;
}
html2canvas($('#preview')[0],{
scrollX: 0,
scrollY: -window.scrollY,
height: height,
width: width,
scale: scale,
// backgroundColor: null,
}).then(function(canvas) {
var image = canvas.toDataURL("image/jpeg", 1.0);
// $('#preview').fadeOut();
download( image, "socialPost.jpg", "image/jpeg" );
// $('.social-post-creator').append( "<img src='" + image + "'>" );
});
}
})
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment