updating more js functionality for adding notes

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index e32265847c046da96459351de6714d9800bea7d2..c343f48dc9902ed2bda7dd7a46f5ae54443eb6f6 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -527,6 +527,12 @@ a.activity_target:hover
   /* transition: ease-out ? ? ? */
 }
 
+.disabled
+{
+  color: #afafaf;
+  cursor: auto;
+}
+
 #add-note-form, #add-course
 {
   display: none;

diff --git a/karmaworld/assets/js/lightboxupload.js b/karmaworld/assets/js/lightboxupload.js
index d988e4b24dd9c6a7a8548826c976c5f47980353a..582d30c0d3f6d202622237f7c9641f0328ede29b 100644 (file)
--- a/karmaworld/assets/js/lightboxupload.js
+++ b/karmaworld/assets/js/lightboxupload.js
@@ -6,17 +6,17 @@ $(function(){
   // Show the upload lightbox on upload button click
 
   $('#add-note-btn').click(function(){
+    // show the add note form
     // TODO: rewrite to .show the form with a slide transition
     $('#add-note-form').show();
+    // Bring up the file picker automatically
     $('input#file_upload_input').click();
-  });
-
-  // Submit the add-note form
-  $('#save-btn').click(function(){
-    $('#add-note-form').submit();
+    // hide the add a note button
+    $('#add-note-btn').hide()
   });
 
   // Dismiss x click
+  // FIXME:
   $(".lightbox_close").click(function() {
     $(".modal_content").hide();
   });
@@ -25,11 +25,20 @@ $(function(){
       action: ajax_upload_url, // added to page via template var
       element: $('#file-uploader')[0],
       multiple: false,
+
       onComplete: function( id, fileName, responseJSON ) {
         if( responseJSON.success ) {
-          //console.log( "success!" ) ;
+          // activate the form for submitting
           $('form#upload_form').attr('action', responseJSON.note_url);
-          $('input.submit_upload').show();
+          // inform the user of success
+          $('#add-note-status').text('Uploaded');
+          // TODO: activate the save button
+          $('#save-btn').removeClass('disabled');
+          // add a click handler to submit the add-note form
+          $('#save-btn').click(function(){
+            $('form#add-note').submit();
+          });
+
         }
       },
       onAllComplete: function( uploads ) {
@@ -41,8 +50,11 @@ $(function(){
       onProgress: function(id, fileName, loaded, total) {
         console.log("running onProgress " + fileName + " " + loaded);
         console.log(String((100*loaded/total)+'%'));
+        // Animate the progress bar
         $('#progress-fill').animate({
           width: String((100*loaded/total)+'%')}, 5000);
+        // fill out the filename
+        $('#filename').text(fileName);
       },
       params: {
         'csrf_token': csrf_token,

diff --git a/karmaworld/templates/partial/add_note.html b/karmaworld/templates/partial/add_note.html
index 25a1b657002d2a552a8288b7faf3ed64c1359919..3e936320e2ba361dce69fd0a08dbf3919e47e51f 100644 (file)
--- a/karmaworld/templates/partial/add_note.html
+++ b/karmaworld/templates/partial/add_note.html
@@ -10,7 +10,7 @@
     {% csrf_token %}
     <div class="row">
       <div class="four columns offset-by-one">
-        <legend>Title of Note <small class="form">* Required</small></legend>
+        <legend><span id=add-note-status>Uploading</span> <span id=filename>note</span>...</legend>
         <div class=progress> <div id="progress-fill"></div> </div>
       </div>
       <div class="one columns offset-by-five end">