signature_components.js

  $.each box, (key, value) ->
    # Insert a container with a 'Click to sign' button that replaces the signature (mobile devices)
    mobileSignatureContainer =  '<div id="mobile-signature-container">'
    mobileSignatureContainer += '<img id="signature_img_' + $(value).data('component-id') + '" class="signature-img" data-component-id="'
    mobileSignatureContainer += $(value).data('component-id') + '"><br/>'
    mobileSignatureContainer += '<a href="#" id="sign_button_' + $(value).data('component-id') + '" class="btn btn-info btn-xs mobile-sign-button" '
    mobileSignatureContainer += 'data-component-id="' + $(value).data('component-id') + '">Click to sign</a>'
    mobileSignatureContainer += '</div>'
    $(value).parent().before(mobileSignatureContainer)

    # Bind 'click to sign' button to put the signature box in the modal
    $(value).parent().parent().find('#mobile-signature-container .mobile-sign-button').click ->
      
      $("#show-signature-box-modal-body .landscape-modal-body-container").html(html)
      $("#show-signature-box-modal-body canvas").sketch()
      enableSignatureBoxButtons()
      $('#show-signature-box-modal').modal('show')
      return

    # Remove the signature box (and its controls) to re-create it when the 'click to sign' button is clicked
    $signatureBox = $(value).parent().remove()

    return

//------------------

  $.each box, (key, value) ->
    signature = '<img id="signature_img_' + $(value).data('component-id') + '" class="signature-img" data-component-id="'
    signature += $(value).data('component-id') + '"><br/>'
    signature += '<a href="#" id="sign_button_' + $(value).data('component-id') + '" class="btn btn-info btn-xs mobile-sign-button" '
    signature += 'data-component-id="' + $(value).data('component-id') + '">Click to sign</a>'
    $(value).before(signature)
    $signatureBox = $(value).remove()
    $submit = $('.signature-submit[data-component-id="' + $(value).data('component-id') + '"]').remove()
    $clear = $('.signature-clear[data-component-id="' + $(value).data('component-id') + '"]').remove()
    $(".landscape-modal-body-container").append('<div class="hidden-signature" id="modal_signature_' + $(value).data('component-id') + '" data-component-id="' + $(value).data('component-id') + '"></div>')
    $('#modal_signature_' + $(value).data('component-id')).html($signatureBox)
    $('#modal_signature_' + $(value).data('component-id')).append($submit)
    $('#modal_signature_' + $(value).data('component-id')).append($clear)
    $(value).addClass('signature-box-in-modal')
    $(value).sketch()
    $('.mobile-sign-button[data-component-id="' + $(value).data('component-id') + '"]').click ->
      $('#modal_signature_' + $(value).data('component-id')).removeClass('hidden-signature')
      $("#show-signature-box-modal").modal('show')
  enableSignatureBoxButtons();