1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
{% 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) {
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 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&_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" id="images">
<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}} - {{object.title}} {% if object.caption %}– {{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}}" 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" class="insert" 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" class="insert" href="#">full width cap</a></li>
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="cluster pic" class="insert" href="#">cluster</a></li>
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" class="insert" 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" class="insert" href="#">column width cap</a></li>
<li><a onclick='openInNewTab("/admin/photos/luximage/{{object.pk}}/change/");' href="#">Edit Image</a></li>{%endif%}
</ul>
</div>
{% endfor %}
</div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>
<script>
Array.from(document.getElementsByClassName('insert')).forEach(function(item) {
if (item.dataset.isVideo) {
var code = buildVideo(item.dataset.videoMp4, item.dataset.videoWebm, item.dataset.id, item.dataset.class, item.dataset.dataPoster);
} else {
var code = buildImage(item.dataset.src, item.dataset.id, item.dataset.class, item.dataset.caption);
}
item.addEventListener("click", function(event) {
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();
return false;
}, false);
});
</script>
</body>
</html>
|
