1 files changed, 108 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..7e39583
--- /dev/null
+++ b/design/templates/admin/insert_images.html
@@ -0,0 +1,108 @@
+{% 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 src="/static/jquery.tools.min.js"></script>
+<script>
+// execute your scripts when the DOM is ready. this is a good habit
+
+function buildImage(image_url, c, caption) {
+    html = '<img src="'+image_url+'" class="';
+    if (c) {
+        html += c;
+    }
+    if (caption) {
+        html += ' caption" />';
+    } 
+    else {
+        html += '" />';
+    }
+    return html;
+}
+$(function(){
+    var ta = parent.document.getElementById('{{textarea_id}}');
+    
+    $('#uploads li').click(function(){
+        $(this).children('.popup').show();
+    });
+    
+    $('.popup .close').click(function(){
+        $(this).parent('.popup').hide();
+        return false;
+    });
+    
+    $('.insert').click(function(){
+        var code = buildImage($(this).attr('data-src'), $(this).attr('data-class'), $(this).attr('data-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()
+        $(this).parents('.popup').hide();
+        return false;
+    });
+    
+    $('#refresh').click(function(){
+        location.reload(true);
+        return false;
+    });
+    
+});
+        
+       
+</script>
+</head>
+<body>
+    <input type="button" value="Refresh" onClick="window.location.reload()">
+    <div class="up-wrapper">{% for image in images %}
+        <div class="item-wrapper">
+        <figure class="item" >
+            <img src="{% get_image_by_size image 'tn' %}" />
+            <figcaption>{{image.title}} {% if image.caption %}&ndash; {{image.caption}}{%endif%}</figcaption>
+        </figure>
+        <ul class="actions">
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picwide" class="insert" href="">full width</a></li>
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picfull" class="insert" href="">column width</a></li>
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picwide" data-caption="true" class="insert" href="">full width cap</a></li>
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picfull" data-caption="true" class="insert" href="">column width cap</a></li>
+            <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>
+        </ul>
+        </div>
+{% endfor %}
+</div>
+
+<!-- "next page" action -->
+<a class="nextPage browse right"></a>
+</body>
+</html>