window.addEventListener('message', function(event) { if(event.origin != 'null' && event.data) { var data = JSON.parse(event.data); if(data.event == 'close') { var e = document.getElementById(data.id); Array.prototype.forEach.call(e.parentElement.getElementsByClassName('button'), function(e) { e.style.display = 'block'; }); e.parentElement.removeChild(e); } } }); function getEmbedUrl(id, videoUrl) { return ''; } function getVideoOverlay(page) { return (editable || videoOverlay[page]) ? { beginLayout: function() { this.counter = 0; //console.log('lets beging'); }, endLayout: function() { //console.log('lets end it here'); }, appendImage: function(image) { this.counter++; var id = this.counter; if (editable || videoOverlay[page][id]) { var div = document.createElement('div'); div.style.left = image.left + 'px'; div.style.top = image.top + 'px'; div.style.width = image.width + 'px'; div.style.height = image.height + 'px'; if (videoOverlay[page] && videoOverlay[page][id]) { div.className = 'interface video'; div.title = 'Click to play video'; div.onclick = function(event) { event.preventDefault(); event.stopPropagation(); var iframe = document.createElement('iframe'); iframe.width = '100%'; iframe.height = '100%'; iframe.frameborder = 0; iframe.id = 'video' + page + id; iframe.src = getEmbedUrl(iframe.id, videoOverlay[page][id]); div.appendChild(iframe); Array.prototype.forEach.call(div.getElementsByClassName('button'), function(e) { e.style.display = 'none'; }); return false; }; var img = document.createElement('img'); img.className = 'button playButton'; img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg=='; div.appendChild(img); } else { div.className = 'interface'; } if (editable) { var img = document.createElement('img'); 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\nhttp://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'; var url = prompt(message, videoOverlay[page][id]); if (url !== null) { videoOverlay[page][id] = url; saveVideoOverlay(); } return false; } div.appendChild(img); } this.div.appendChild(div); } } } : null; } function saveVideoOverlay() { var request = new XMLHttpRequest(), id = document.location.pathname.substring(1), formData = new FormData(); request.addEventListener('load', function (evt) { console.log(evt); }); formData.append('data', JSON.stringify({ 'id': id, 'overlay': videoOverlay })); request.open('POST', '/save'); request.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); request.send(formData); function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }