alainbloch · August 25, 2010 21:22
diff --git a/gistfile1.html b/gistfile1.html
 <style type="text/css" media="screen">

  body {
    padding: 10px;
  }

  #content {
    width: 400px;
    margin: 20px auto 0;
  }

  input {
    font-size: 15px;
    width: 300px;
  }
  .new-btn {
    padding-left: 8px;
    padding-right: 8px;
  }

  .watermark {
    color: lightGrey;
  }

  #message {
    margin: 5px 95px 5px 5px;
    color: grey;
    font-size: 90%;
  }
  #message img {
    vertical-align: text-bottom;
    float: none;
    margin: 0;
    padding: 0;
  }
  #message.error {
    color: red;
    font-weight: bold;
  }

 </style>

 <div id="content">
  <form action="javascript:void(0)">
    <label for="title">Question</label>
    <input type="text" id="title" >
    <button type="submit" class="new-btn">Add</button>
    <p id="message"></p>
  </form>
 </div>

 <script type="text/javascript" src="https://d116kjvcha6xvt.cloudfront.net/jquery.watermark-3.0.5/jquery.watermark.min.js"></script>

 <script type="text/javascript">

  function init() {
    yam.connect.init();
  };

  window.onload = function () {
    setTimeout(init, 1000);
  };

  jQuery(document).ready(function($) {
    
    // Set question title if question parameter is present
    if (ymodule.params.question){
      $('#title').val(ymodule.params.question);
    };
    
    // Set default attachment progress
    var attachmentInProgress = false;
    
    // Adding watermark to title field
    $('#title').watermark('Enter your question here.');
    
    // Focus on the title field
    $('#title').focus();    
    
    // Attach create action to button
     $('form').submit(function() {
       
       if (attachmentInProgress) {
         return; //I'm already attaching.
       } else {
         attachmentInProgress = true; // Attachment is now in progress
       }
       
       // Function to trim out white-spaces
       var trimString = function (string) {
         return string.replace(/^\s+|\s+$/g, "");
       };

       // Clear out existing messages
       clearMessage();
       
       // Get the question title
       var title = trimString($('#title').val());
  
       // Validate the question title
       if (!title) {
         displayError("Question must not be blank");
         $('#title').focus();
         attachmentInProgress = false; // exiting the attachment flow
         return;
       }
       
       // Instance the question
       question = QuestionAttachment.create({ title : title });

       // Display the loading spinner
       displayLoading("Adding question");
       
       // This view is also used to create questions from the directory view but we need to treat it differently.
       if (ymodule.params.directory_question){         
         saveDirectoryQuestion(question);
       } else {
         // save the question, and then create the attachment, and close the lightbox as a callback
         ymodule.createAttachAndCloseNewAttachment(question);
       };
       
       // saves the question then creates a message and associates the question with the message
       function saveDirectoryQuestion(question){
         
         // construct the callback for directory questions
         var createMessageCallback = function (resp){
           var questionId = resp;
           var dataObj    = { 
               body                   : question.title
             , ymodule_attachment_ids : questionId
             , authenticity_token     : yam.connect.token 
           };
           var connectOpts = {
               url        : ymodule.site + "/api/v1/messages"
             , data       : dataObj
             , method     : 'post'
             , success  : function(data){
                // redirect to canvas view

                // close lightbox
                ymodule.msg.postParent('close-lightbox');
               }
             , error : function(data){
                alert('error!');
               }
           };
          console.log("createMessageCallback: connectOpts => ");
          console.log(connectOpts);
          // make API call
          yam.connect.send(connectOpts);
           
         };
          // Finally save the question and then invoke the callback        
         question.save(createMessageCallback);
       
       };
            
     });
    
    // Message handlers
    var displayError = function (message) {
      displayMessage(message);
      $('#message').addClass("error");
    };
    var displayMessage = function (message) {
      clearMessage();
      $('#message').text(message);
    };
    var displayLoading = function (message) {
      clearMessage();
      $('#message').removeClass("error").append("<img src='/images/small-spinner.gif' /> ").append($("<span>").text(message));
    };
    var clearMessage = function () {
      $('#message').removeClass("error").empty();
    };
    
     
  });
 </script>
	<style type="text/css" media="screen">

	body {
	padding: 10px;
	}

	#content {
	width: 400px;
	margin: 20px auto 0;
	}

	input {
	font-size: 15px;
	width: 300px;
	}
	.new-btn {
	padding-left: 8px;
	padding-right: 8px;
	}

	.watermark {
	color: lightGrey;
	}

	#message {
	margin: 5px 95px 5px 5px;
	color: grey;
	font-size: 90%;
	}
	#message img {
	vertical-align: text-bottom;
	float: none;
	margin: 0;
	padding: 0;
	}
	#message.error {
	color: red;
	font-weight: bold;
	}

	</style>

	<div id="content">
	<form action="javascript:void(0)">
	<label for="title">Question</label>
	<input type="text" id="title" >
	<button type="submit" class="new-btn">Add</button>
	<p id="message"></p>
	</form>
	</div>

	<script type="text/javascript" src="https://d116kjvcha6xvt.cloudfront.net/jquery.watermark-3.0.5/jquery.watermark.min.js"></script>

	<script type="text/javascript">

	function init() {
	yam.connect.init();
	};

	window.onload = function () {
	setTimeout(init, 1000);
	};

	jQuery(document).ready(function($) {

	// Set question title if question parameter is present
	if (ymodule.params.question){
	$('#title').val(ymodule.params.question);
	};

	// Set default attachment progress
	var attachmentInProgress = false;

	// Adding watermark to title field
	$('#title').watermark('Enter your question here.');

	// Focus on the title field
	$('#title').focus();

	// Attach create action to button
	$('form').submit(function() {

	if (attachmentInProgress) {
	return; //I'm already attaching.
	} else {
	attachmentInProgress = true; // Attachment is now in progress
	}

	// Function to trim out white-spaces
	var trimString = function (string) {
	return string.replace(/^\s+\|\s+$/g, "");
	};

	// Clear out existing messages
	clearMessage();

	// Get the question title
	var title = trimString($('#title').val());

	// Validate the question title
	if (!title) {
	displayError("Question must not be blank");
	$('#title').focus();
	attachmentInProgress = false; // exiting the attachment flow
	return;
	}

	// Instance the question
	question = QuestionAttachment.create({ title : title });

	// Display the loading spinner
	displayLoading("Adding question");

	// This view is also used to create questions from the directory view but we need to treat it differently.
	if (ymodule.params.directory_question){
	saveDirectoryQuestion(question);
	} else {
	// save the question, and then create the attachment, and close the lightbox as a callback
	ymodule.createAttachAndCloseNewAttachment(question);
	};

	// saves the question then creates a message and associates the question with the message
	function saveDirectoryQuestion(question){

	// construct the callback for directory questions
	var createMessageCallback = function (resp){
	var questionId = resp;
	var dataObj = {
	body : question.title
	, ymodule_attachment_ids : questionId
	, authenticity_token : yam.connect.token
	};
	var connectOpts = {
	url : ymodule.site + "/api/v1/messages"
	, data : dataObj
	, method : 'post'
	, success : function(data){
	// redirect to canvas view

	// close lightbox
	ymodule.msg.postParent('close-lightbox');
	}
	, error : function(data){
	alert('error!');
	}
	};
	console.log("createMessageCallback: connectOpts => ");
	console.log(connectOpts);
	// make API call
	yam.connect.send(connectOpts);

	};
	// Finally save the question and then invoke the callback
	question.save(createMessageCallback);

	};

	});

	// Message handlers
	var displayError = function (message) {
	displayMessage(message);
	$('#message').addClass("error");
	};
	var displayMessage = function (message) {
	clearMessage();
	$('#message').text(message);
	};
	var displayLoading = function (message) {
	clearMessage();
	$('#message').removeClass("error").append("<img src='/images/small-spinner.gif' /> ").append($("<span>").text(message));
	};
	var clearMessage = function () {
	$('#message').removeClass("error").empty();
	};


	});
	</script>