update video overlay js
This commit is contained in:
parent
d3a8fe3636
commit
354da0d010
1 changed files with 34 additions and 26 deletions
|
@ -1,39 +1,47 @@
|
||||||
function getVideoOverlay(page) {
|
function getVideoOverlay(page) {
|
||||||
var PLAY_BUTTON='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjNDA0MDQwIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJkZWZhdWx0IiwibmFtZSI6InN5bWJvbFBsYXkiLCJ0aGVtZSI6Im94bGlnaHQifS0tPg==';
|
|
||||||
function playButton(height) {
|
|
||||||
var img = document.createElement('img');
|
|
||||||
img.src = PLAY_BUTTON;
|
|
||||||
img.style.cssText = "position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;opacity:0.8;height: "+height+"px;width: auto";
|
|
||||||
img.title = 'Click to play';
|
|
||||||
return img;
|
|
||||||
}
|
|
||||||
return videoOverlay[page] ? {
|
return videoOverlay[page] ? {
|
||||||
beginLayout: function() {
|
beginLayout: function() {
|
||||||
this.counter = 0;
|
this.counter = 0;
|
||||||
//console.log('lets beging');
|
//console.log('lets beging');
|
||||||
},
|
},
|
||||||
endLayout: function() {
|
endLayout: function() {
|
||||||
//console.log('lets end it here');
|
//console.log('lets end it here');
|
||||||
},
|
},
|
||||||
appendImage: function(image) {
|
appendImage: function(image) {
|
||||||
this.counter++;
|
this.counter++;
|
||||||
var id = this.counter;
|
var id = this.counter;
|
||||||
if (videoOverlay[page][id]) {
|
if (videoOverlay[page][id] || editable) {
|
||||||
console.log('add image', image, this);
|
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.style.cssText = "position: relative; width: "
|
div.className = 'interface';
|
||||||
+ image.width + "px;height: "
|
div.style.left = image.left + 'px';
|
||||||
+ image.height + "px;top:"
|
div.style.top = image.top + 'px';
|
||||||
+ image.top + "px;left:"
|
div.style.width = image.width + 'px';
|
||||||
+ image.left + "px;";
|
div.style.height = image.height + 'px';
|
||||||
div.appendChild(playButton(image.height/1.5));
|
if (videoOverlay[page][id]) {
|
||||||
div.onclick = function(event) {
|
div.title = 'Click to Play';
|
||||||
event.preventDefault();
|
div.onclick = function(event) {
|
||||||
event.stopPropagation();
|
event.preventDefault();
|
||||||
div.innerHTML = videoOverlay[page][id];
|
event.stopPropagation();
|
||||||
div.style.opacity = 1;
|
div.innerHTML = videoOverlay[page][id];
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg==';
|
||||||
|
img.className = 'button playButton';
|
||||||
|
div.appendChild(img);
|
||||||
|
} else {
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=';
|
||||||
|
img.className = 'button editButton';
|
||||||
|
img.title = 'Click to Edit';
|
||||||
|
img.onclick = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
console.log('EDIT');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
div.appendChild(img);
|
||||||
|
}
|
||||||
this.div.appendChild(div);
|
this.div.appendChild(div);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue