added audio insert to admin image inserter

1 files changed, 21 insertions, 3 deletions

diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
index fb079c6..2db82e6 100644
--- a/design/templates/admin/insert_images.html
+++ b/design/templates/admin/insert_images.html
@@ -56,6 +56,12 @@ function buildImage(image_url, id, c, caption) {
     }
     return html;
 }
+function buildAudio(audio_mp3, audio_ogg) {
+    html = '<audio controls="" preload="auto">\n\t<source src="'+audio_mp3+'">\n\t'
+    html += '<source src="'+audio_ogg+'">\n\t'
+    html += 'Sorry, your browser does not support audio in HTML\n</audio>'
+    return html;
+}
 function openInNewTab(url) {
     var win = window.open(url, '_blank');
     win.focus();
@@ -69,8 +75,9 @@ function openInNewTab(url) {
         <img src="/static/admin/img/icon-addlink.svg" alt="Add">
     </button>
     <div class="up-wrapper">{% for object in object_list %}
-        <div class="item-wrapper" id="images">
-            <figure class="item" >
+        <div class="item-wrapper images">
+        {% if object.get_type != "Audio" %}
+        <figure class="item" >
             <img src="{% if object.get_type == "LuxImage" %}{% get_image_by_size object 'tn' %}{%else%}{{object.video_poster.url}}" style="max-width: 150px{%endif%}" />
             <figcaption>{{object.id}} {% if object.caption %}&ndash; {{object.caption}}{%endif%}</figcaption>
         </figure>
@@ -82,7 +89,16 @@ function openInNewTab(url) {
             <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" onclick="insertImage(this);return false;" href="#">column width</a></li>
             <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" data-caption="true" onclick="insertImage(this);return false;" href="#">column width cap</a></li>
             <li><a onclick='openInNewTab("/admin/photos/luximage/{{object.pk}}/change/");' href="#">Edit Image</a></li>{%endif%}
-        </ul>
+            </ul>
+            {% else %}
+            <figure class="item" >
+            <img src="/media/img/audio_icon.png" style="max-width: 50px" />
+            </figure>
+            <ul class="actions">
+            <li><a data-is-audio="true" data-mp3="{{object.mp3.url}}" data-ogg="{{object.ogg.url}}" data-id="{{object.id}}" data-class="audio" onclick="insertImage(this);return false;" class="insert" href="#">Insert audio</a>
+            <li><a onclick='openInNewTab("/admin/recordings/audio/{{object.pk}}/change/");' href="#">Edit Recording</a></li>
+            </ul>
+            {% endif %}
         </div>
 {% endfor %}
 </div>
@@ -94,6 +110,8 @@ function insertImage(item) {
         if (item.dataset.isVideo) {
             console.log(item.dataset.poster);
             var code = buildVideo(item.dataset.videoMp4, item.dataset.videoWebm, item.dataset.id, item.dataset.class, item.dataset.poster);
+        } else if (item.dataset.isAudio) {
+            var code = buildAudio(item.dataset.mp3, item.dataset.ogg);
         } else {
             var code = buildImage(item.dataset.src, item.dataset.id, item.dataset.class, item.dataset.caption);
         }