gistfile1.txt

(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);