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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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&_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 %}– {{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 pic66" 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>
|
