karmaworld/templates/partial/filepicker.html

   1 {% load url from future %}
   2 {% load socialaccount %}
   3 {{ file_upload_form.media }}
   4 <section id=filepicker-form class="extend-form">
   5   <div class="row" id="filepicker_row">
   6     <div class="small-8 small-offset-1 columns large-10">
   7        {{ file_upload_form.as_p }}
   8     </div>
   9   </div> <!--.row -->
  10   <div class="row" >
  11     <div class="small-10 small-offset-1 columns">
  12       <div id="forms_container">
  13       </div>
  14       <div id="success" class="hide">
  15         <p>Thank you for sharing:</p>
  16         <ul id="uploaded_files">
  17         </ul>
  18         {% if not request.user.is_authenticated %}
  19           <p>It will take a minute for your notes to appear here.
  20             We'd love to have you sign up so you can <strong>claim the <span id="thank-points"></span> karma points
  21             you just got.</strong> With a KarmaNotes account,
  22             you can build a reputation by continuing to upload great notes.
  23             <a href="">Want to share again?</a></p>
  24           <div class="socialaccount_ballot">
  25             <ul class="socialaccount_providers">
  26               {% include "socialaccount/snippets/provider_list.html" with process="login" %}
  27             </ul>
  28             <a href="{{ signup_url }}">Sign up for a traditional account</a>
  29           </div>
  30         {% else %}
  31           <p>It will take a minute for your notes to appear. This page will refresh soon so you
  32             can see your new notes.
  33             You'll be awarded <strong><span id="thank-points"></span> karma points.</strong>
  34             <a href="">Want to share again?</a></p>
  35         {% endif %}
  36       </div>
  37     </div>
  38
  39     <div id="form-template" class="row" style="display:none">
  40       <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
  41         <div class="small-11 large-6 columns">
  42           <legend>Title of Note <small class="form">* Required</small></legend>
  43           <input type="text" class="intext" id="id_name" name="name"
  44                 placeholder="">
  45         </div>
  46         <div class="small-12 large-5 columns">
  47           <legend>Tags (comma seperated)</legend>
  48           <input type="text" id="id_tags" name="tags" class="taggit-tags"
  49                 placeholder="shakespeare, econ, physics">
  50         </div>
  51         <div class="show-for-small columns small-1 end">
  52           <i class="fa fa-times-circle awesome-action remove"></i>
  53         </div>
  54         <div class="hidden-fields" style="display:none;">
  55           <input type="text" id="id_fpfile" name="fpfile" class="fpurl">
  56           <input type="text" id="id_mimetype" name="mimetype" class="mimetype">
  57           <input type="text" id="id_course" name="course" value="{{ course.id }}"
  58             class="course_id">
  59           {% csrf_token %}
  60           <input type="text" class="csrf" value='{{ csrf_token }}'>
  61         </div>
  62         <div class="show-for-medium-up columns large-1 end">
  63           <i class="fa fa-times-circle awesome-action remove" id="icon-remove-sign"></i>
  64         </div>
  65       </form>
  66     </div>
  67   </div>
  68   <div class="small-8 small-offset-3 columns large-2">
  69     <div id="save-btn" class="hide">
  70       <i id="save-btn-icon" class="fa fa-save"></i> Save
  71     </div>
  72   </div>
  73
  74   <script>
  75     var uploaded_files = new Array();
  76     // these are obsolete without the drag-drop widget that we removed from the partial above
  77     // var $dropzone = $('#filepicker_dropzone');
  78     var $dropzone_result = $('#filepicker_dropzone_result');
  79
  80
  81     /*
  82      *  load the file form template and append it to the form container
  83      *  takes a fileupload event
  84      */
  85     var makeFileForm = function(upFile) {
  86       var _form = document.getElementById('form-template').cloneNode(deep=true);
  87       // save the Filename to the form name field
  88       $(_form.children[0].children[0].children[1]).val(upFile.filename); // replace with upFile name
  89       _form.style.display = "inline";
  90       _form.id = null; // clear the unique id
  91       // save the FP url to the form
  92       $(_form.children[0].children[3].children[0]).val(upFile.url);
  93       // save the mimetype to the form
  94       $(_form.children[0].children[3].children[1]).val(upFile.mimetype);
  95
  96       document.getElementById('forms_container').appendChild(_form);
  97
  98       if (document.location.host === 'www.karmanotes.org' ||
  99         document.location.host === 'karmanotes.org') {
 100         _gat._getTracker()._trackEvent('upload', 'filepicker file drop');
 101       }
 102
 103       $('.remove').on('click', function(e){
 104           e.stopPropagation();
 105           $(this).parent().parent().remove();
 106       });
 107
 108       $('#save-btn').show();
 109     };
 110
 111     $('#save-btn').on('click', function(e){
 112       e.stopPropagation();
 113       $(this).unbind('click');
 114       $(this).addClass('disabled');
 115
 116       var saveIcon = $('#save-btn-icon');
 117       saveIcon.removeClass('fa-save');
 118       saveIcon.addClass('fa-spinner fa-spin');
 119
 120       $('#forms_container .inline-form').each(function(i,el){
 121           var name, tags, fpurl, course;
 122           name = $(el).find('.intext').val();
 123           fp_file = $(el).find('.fpurl').val();
 124           tags = $(el).find('.taggit-tags').val();
 125           course = $(el).find('.course_id').val();
 126           csrf = $(el).find('.csrf').val();
 127           email = $('#id_email').val();
 128           mimetype = $(el).find('.mimetype').val();
 129
 130           $.post('{% url 'upload_post' %}', {
 131             'name': name,
 132             'fp_file': fp_file,
 133             'tags': tags,
 134             'course': course,
 135             'csrfmiddlewaretoken': csrf,
 136             'mimetype': mimetype,
 137             'email': email
 138           }, function(data){
 139             if (data === 'success') {
 140               // For multiple uploads, we may end up clearing and re-
 141               //  writing this multiple times, but show the same list
 142               //  each time.
 143               $('#uploaded_files').empty();
 144               for (var i=0; i < uploaded_files.length; i++) {
 145                 $('#uploaded_files').append($('<li>', {text: uploaded_files[i]}));
 146               }
 147               $('#thank-points').html(uploaded_files.length*5);
 148               $('#success').show();
 149               $('#save-btn').hide();
 150               $('#filepicker_row').hide();
 151               $('#forms_container .inline-form').remove();
 152               $('#forms_container').hide();
 153               if (document.location.host === 'www.karmanotes.org' ||
 154                 document.location.host === 'karmanotes.org') {
 155                 _gat._getTracker()._trackEvent('upload', 'upload form submitted');
 156               }
 157               {% if user.is_authenticated %}
 158                 setTimeout(function(){
 159                   location.reload(true);
 160                 }, 20000);
 161               {% endif %}
 162             }
 163           });
 164           // Add the name we've just uploaded to the list
 165           uploaded_files.push(name);
 166       });
 167     });
 168
 169     var got_file = function(event){
 170       $dropzone_result.text(event);
 171         for (var i=0; i < event.fpfiles.length; i++){
 172           makeFileForm(event.fpfiles[i]);
 173         }
 174     };
 175   </script>
 176
 177
 178 </section>