rewrite video overlay js
This commit is contained in:
rolux
parent
22893ed62f
commit
ff6a6689bf
1 changed files with 89 additions and 61 deletions
|
|
@ -33,68 +33,97 @@ function getVideoOverlay(page) {
|
||||||
//console.log('lets end it here');
|
//console.log('lets end it here');
|
||||||
},
|
},
|
||||||
appendImage: function(image) {
|
appendImage: function(image) {
|
||||||
this.counter++;
|
var id = ++this.counter,
|
||||||
var id = this.counter;
|
hasVideo = videoOverlay[page] && videoOverlay[page][id],
|
||||||
if (editable || videoOverlay[page][id]) {
|
$interface, $playButton, $editButton;
|
||||||
var div = document.createElement('div');
|
if (editable || hasVideo) {
|
||||||
div.style.left = image.left + 'px';
|
$interface = Ox.$('<div>')
|
||||||
div.style.top = image.top + 'px';
|
.addClass('interface')
|
||||||
div.style.width = image.width + 'px';
|
.css({
|
||||||
div.style.height = image.height + 'px';
|
left: image.left + 'px',
|
||||||
if (videoOverlay[page] && videoOverlay[page][id]) {
|
top: image.top + 'px',
|
||||||
div.className = 'interface video';
|
width: image.width + 'px',
|
||||||
div.title = 'Click to play video';
|
height: image.height + 'px'
|
||||||
div.onclick = function(event) {
|
});
|
||||||
event.preventDefault();
|
$playButton = Ox.$('<img>')
|
||||||
event.stopPropagation();
|
.addClass('button playButton')
|
||||||
var iframe = document.createElement('iframe');
|
.attr({
|
||||||
iframe.width = '100%';
|
src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg=='
|
||||||
iframe.height = '100%';
|
})
|
||||||
iframe.setAttribute('frameborder', '0');
|
.hide()
|
||||||
iframe.id = 'video' + page + id;
|
.appendTo($interface);
|
||||||
iframe.src = getEmbedURL(iframe.id, videoOverlay[page][id]);
|
$editButton = Ox.$('<img>')
|
||||||
div.appendChild(iframe);
|
.addClass('button editButton')
|
||||||
Array.prototype.forEach.call(div.getElementsByClassName('button'), function(e) {
|
.attr({
|
||||||
e.style.display = 'none';
|
src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=',
|
||||||
});
|
title: 'Click to add video'
|
||||||
return false;
|
})
|
||||||
};
|
.on({click: edit})
|
||||||
var img = document.createElement('img');
|
.hide()
|
||||||
img.className = 'button playButton';
|
.appendTo($interface);
|
||||||
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg==';
|
|
||||||
div.appendChild(img);
|
|
||||||
} else {
|
|
||||||
div.className = 'interface';
|
|
||||||
}
|
|
||||||
if (editable) {
|
if (editable) {
|
||||||
var img = document.createElement('img');
|
$editButton.show();
|
||||||
img.className = 'button editButton';
|
|
||||||
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=';
|
|
||||||
img.title = videoOverlay[page] && videoOverlay[page][id]
|
|
||||||
? 'Click to edit or remove video' : 'Click to add video';
|
|
||||||
img.onclick = function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
if (!videoOverlay[page]) {
|
|
||||||
videoOverlay[page] = {}
|
|
||||||
}
|
|
||||||
if (!videoOverlay[page][id]) {
|
|
||||||
videoOverlay[page][id] = '';
|
|
||||||
}
|
|
||||||
console.log('EDIT');
|
|
||||||
var message = 'Please enter a pan.do/ra video URL, like\n'
|
|
||||||
+ 'http://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'
|
|
||||||
+ (videoOverlay[page][id] ? '\n\nTo remove the video, just remove the URL.' : ''),
|
|
||||||
url = prompt(message, videoOverlay[page][id]);
|
|
||||||
if (url !== null) {
|
|
||||||
videoOverlay[page][id] = url;
|
|
||||||
saveVideoOverlay();
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
div.appendChild(img);
|
|
||||||
}
|
}
|
||||||
this.div.appendChild(div);
|
if (hasVideo) {
|
||||||
|
enableVideoUI();
|
||||||
|
}
|
||||||
|
this.div.appendChild($interface[0]);
|
||||||
|
}
|
||||||
|
function play(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
var videoId = 'video' + page + id,
|
||||||
|
$iframe = Ox.$('<iframe>')
|
||||||
|
.attr({
|
||||||
|
id: videoId,
|
||||||
|
src: getEmbedURL(videoId, videoOverlay[page][id]),
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
frameborder: 0
|
||||||
|
})
|
||||||
|
.appendTo($interface);
|
||||||
|
$playButton.hide();
|
||||||
|
$editButton && $editButton.hide();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
function edit(e) {
|
||||||
|
var url;
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!videoOverlay[page]) {
|
||||||
|
videoOverlay[page] = {}
|
||||||
|
}
|
||||||
|
if (!videoOverlay[page][id]) {
|
||||||
|
videoOverlay[page][id] = '';
|
||||||
|
}
|
||||||
|
url = prompt(
|
||||||
|
'Please enter a pan.do/ra video URL, like\n'
|
||||||
|
+ 'http://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'
|
||||||
|
+ (videoOverlay[page][id] ? '\n\nTo remove the video, just remove the URL.' : ''),
|
||||||
|
videoOverlay[page][id]
|
||||||
|
);
|
||||||
|
if (url !== null) {
|
||||||
|
videoOverlay[page][id] = url;
|
||||||
|
saveVideoOverlay();
|
||||||
|
url !== '' ? enableVideoUI() : disableVideoUI()
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
function enableVideoUI() {
|
||||||
|
$interface
|
||||||
|
.addClass('video')
|
||||||
|
.attr({title: 'Click to play video'})
|
||||||
|
.on({click: play});
|
||||||
|
$playButton.show();
|
||||||
|
$editButton.attr({title: 'Click to edit or remove video'});
|
||||||
|
}
|
||||||
|
function disableVideoUI() {
|
||||||
|
$interface
|
||||||
|
.removeClass('video')
|
||||||
|
.attr({title: ''})
|
||||||
|
.off({click: play});
|
||||||
|
$playButton.hide();
|
||||||
|
$editButton.attr({title: 'Click to add video'});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} : null;
|
} : null;
|
||||||
|
|
@ -114,7 +143,6 @@ function saveVideoOverlay() {
|
||||||
request.open('POST', '/save');
|
request.open('POST', '/save');
|
||||||
request.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
|
request.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
|
||||||
request.send(formData);
|
request.send(formData);
|
||||||
|
|
||||||
function getCookie(name) {
|
function getCookie(name) {
|
||||||
var cookieValue = null;
|
var cookieValue = null;
|
||||||
if (document.cookie && document.cookie != '') {
|
if (document.cookie && document.cookie != '') {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue