1 files changed, 130 insertions, 0 deletions
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
new file mode 100644
index 0000000..2db82e6
--- /dev/null
+++ b/design/templates/admin/insert_images.html
@@ -0,0 +1,130 @@
+{% load get_image_by_size %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<head>
+<style>
+.item-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 6px;
+    font-family: sans-serif;
+    font-size: 11px;
+    padding: 6px 0 4px;
+    border-top: #ccc 1px solid;
+}
+.item { margin: 0;}
+.item img { margin: 0 0 4px 0;}
+figure {
+    max-width: 180px;
+}
+.actions {
+    list-style-type: none;
+    margin: 0 0 0 10px;
+    padding: 0;
+}
+.actions li {
+    margin: 3px 0;
+}
+.actions a {
+    color: #666;
+}
+</style>
+<script>
+function buildVideo(video_mp4, video_webm, id, c, poster) {
+    console.log(poster);
+    html = '<div class="self-embed-container">\n\t<video poster="'+poster+'" controls="true" loop="false" preload="auto" id="'+id+'" class="vidauto';
+    if (c) {
+        html += c+'"';
+    } else {
+        html += '"';
+    }
+    html += '>\n\t\t<source src="'+video_webm+'" type="video/webm">\n';
+    html += '\t\t<source src="'+video_mp4+'" type="video/mp4">\n';
+    html += '\t\tYour browser does not support video playback via HTML5.\n\t</video>\n</div>';
+    return html;
+}
+function buildImage(image_url, id, c, caption) {
+    html = '<img src="'+image_url+'" id="image-'+id+'" class="';
+    if (c) {
+        html += c;
+    }
+    if (caption) {
+        html += ' caption" />';
+    } 
+    else {
+        html += '" />';
+    }
+    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();
+    return false;
+}
+</script>
+</head>
+<body>
+    <input type="button" value="Refresh" onClick="window.location.reload()">
+    <button id="add_id_image" onClick="window.parent.open('/admin/photos/luximage/add/?_to_field=id&amp;_popup=1')">Upload Image
+        <img src="/static/admin/img/icon-addlink.svg" alt="Add">
+    </button>
+    <div class="up-wrapper">{% for object in object_list %}
+        <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>
+        <ul class="actions">{%if object.get_type == "LuxVideo"  %}
+            <li><a data-is-video="true" data-video-mp4="{{object.video_mp4.url}}" data-video-webm="{{object.video_webm.url}}" data-id="{{object.id}}" data-class="vid" data-poster="{{object.video_poster.url}}" onclick="insertImage(this);return false;" class="insert" href="#">Insert video</a>{%else%}
+            <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picwide" onclick="insertImage(this);return false;" href="#" >full width</a></li>
+            <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picwide" data-caption="true" onclick="insertImage(this);return false;" href="#">full width cap</a></li>
+            <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="cluster pic5" onclick="insertImage(this);return false;" href="#">cluster</a></li>
+            <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>
+            {% 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>
+
+<!-- "next page" action -->
+<a class="nextPage browse right"></a>
+<script>
+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);
+        }
+        var el = parent.document.getElementById('{{textarea_id}}');
+        var start = el.selectionStart;
+        var end = el.selectionEnd;
+        var text = el.value;
+        var before = text.substring(0, start);
+        var after  = text.substring(end, text.length);
+        el.value = (before + code + after);
+        el.selectionStart = el.selectionEnd = start + code.length;
+        el.focus();
+}
+</script>
+</body>
+</html>