Allowed user to select/upload images when editing. When uploaded thumbnails and description pages are automatically created. Git commiting can now handle multiple files at once.

1 files changed, 137 insertions, 0 deletions

diff --git a/templates/editexpopage.html b/templates/editexpopage.html
index ef3aa20..b71c91f 100644
--- a/templates/editexpopage.html
+++ b/templates/editexpopage.html
@@ -5,6 +5,8 @@
 <!--<script src="{{ settings.TINY_MCE_MEDIA_URL }}tiny_mce.js" type="text/javascript"></script>-->
 <!-- <script type="text/javascript"> tinyMCE.init({ mode : "textareas"  }); </script>-->
 
+<script src="{{ settings.MEDIA_URL }}admin/js/vendor/jquery/jquery.js" type="text/javascript"></script>
+
     <script src={{ settings.MEDIA_URL }}codemirror/codemirror.js></script>
     <script src={{ settings.MEDIA_URL }}codemirror/xml.js></script>
     <script src={{ settings.MEDIA_URL }}codemirror/javascript.js></script>
@@ -38,9 +40,82 @@
       height: 5%;
       }
     </style>
+    <style type=text/css>
+	html {
+	  font-family: "Helvetica Neue", sans-serif;
+	  width: 100%;
+	  color: #666666;
+	  text-align: center;
+	}
+
+	.popup-overlay {
+	  /*Hides pop-up when there is no "active" class*/
+	  visibility: hidden;
+	  position: absolute;
+	  background: #ffffff;
+	  border: 3px solid #666666;
+	  width: 90%;
+	  height: 80%;
+	  overflow: scroll; 
+	  left: 5%;
+	  z-index: 20;
+	}
+
+	.popup-overlay.active {
+	  /*displays pop-up when "active" class is present*/
+	  visibility: visible;
+	  text-align: center;
+	}
+
+	.popup-content {
+	  /*Hides pop-up content when there is no "active" class */
+	  visibility: hidden;
+	}
+
+	.popup-content.active {
+	  /*Shows pop-up content when "active" class is present */
+	  visibility: visible;
+	}
+
+	button {
+	  display: inline-block;
+	  vertical-align: middle;
+	  border-radius: 30px;
+	  margin: .20rem;
+	  font-size: 1rem;
+	  color: #666666;
+	  background: #ffffff;
+	  border: 1px solid #666666;
+	}
+
+	button:hover {
+	  border: 1px solid #666666;
+	  background: #666666;
+	  color: #ffffff;
+	}
+	</style>
 {% endblock %}
 {% block body %}
 <h1>Edit {{ path }}</h1>
+<!--Creates the add image popup-->
+<div class="add-image-popup popup-overlay">
+  <div class="add-image-popup popup-content">
+    <h2>Select Image</h2>
+    <p id="image_popup_content"> Loading ...</p>
+    <button onclick="new_image_popup()">Upload Image</button> 
+    <button class="close" onclick="$('.add-image-popup').removeClass('active');">Close</button> 
+  </div>
+</div>
+
+<!--Creates the new image popup-->
+<div class="new-image-popup popup-overlay">
+  <div class="new-image-popup popup-content">
+    <h2>New Image</h2>
+    <p id="new_image_popup_content"> Loading ...</p>
+    <button class="close" onclick="$('.new-image-popup').removeClass('active');">Close</button> 
+  </div>
+</div>
+
 <form action="" method="post">{% csrf_token %}
 {{ form.non_field_errors }}
 <div class="fieldWrapper">
@@ -62,6 +137,7 @@
 <button type="button" onclick="addTag('h4', '')">heading 4</button> 
 <button type="button" onclick="addTag('a', 'href=&quot;&quot;')">hyperlink</button> 
 <button type="button" onclick="addTag('p', '')">paragraph</button> 
+<button type="button" onclick="add_image_popup()">image</button> 
 <div class="fieldWrapper">
     {{ form.change_message.errors }}
     <label for="{{ form.title.id_for_label }}">Git change message:</label>
@@ -70,6 +146,60 @@
 {% include "menu.html" %}
 <p><input type="submit" value="Submit" /></p>
 </form>
+
+
+<script>
+
+
+function add_image_popup() {
+  $('.add-image-popup').addClass('active'); 
+  $('#image_popup_content').load("{% url 'image_selector' path %}", function() {
+      $('.thumbnail').click(function(){
+           $(".add-image-popup").removeClass("active");
+           addStr($( this ).attr("data-html"))
+           });
+    })
+  }
+function new_image_popup() {
+  $('.add-image-popup').removeClass('active');
+  $('.new-image-popup').addClass('active');
+  $.ajax({
+          type : "GET", 
+          dataType: "json",
+          url: "{% url 'new_image_form' path %}",
+          success: function(data){handle_new_image(data)}
+          });  
+  }
+  
+function handle_new_image(data) {
+  if (data.hasOwnProperty('form')) {
+      $('#new_image_popup_content').html(data.form);
+      $('#new_image_form').on('submit', function(e){
+         e.preventDefault();
+         data = $('#new_image_form').serialize();
+         
+         $.ajax({
+                type : "POST", 
+                dataType: "json",
+                url: "{% url 'new_image_form' path %}",
+                data: new FormData($('#new_image_form')[0]),     
+                processData: false,
+                contentType: false,
+                success: function(data){
+                   handle_new_image(data);
+                }
+            });
+         });
+    }
+  else if (data.hasOwnProperty('html')) {
+    $('.new-image-popup').removeClass('active');
+    addStr(data.html);
+    }
+  else {
+    alert(data.error);
+    }
+  }
+</script>
     <script>
       var delay;
       // Initialize CodeMirror editor with a nice html5 canvas demo.
@@ -103,5 +233,12 @@
           editor.focus();
           editor.setCursor({line: to.line , ch : to.ch + 2 + tag.length + attr.length });
       }
+      
+      function addStr(x){
+          var to = editor.getCursor(false);
+          editor.replaceRange(x, to);
+          editor.focus();
+          editor.setCursor({line: to.line , ch : to.ch + x.length });
+      }
     </script>
 {% endblock %}