81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
|
$( document ).ready(() => {
|
||
|
|
|
||
|
|
var counter = 0;
|
||
|
|
|
||
|
|
function generatePanel(i) {
|
||
|
|
return '<div class="dashboard--elem--panel">' +
|
||
|
|
'<span id="full' + i + '"><i class="glyphicon glyphicon-fullscreen"></i></span> ' +
|
||
|
|
'<span id="reload' + i +'"><i class="glyphicon glyphicon-repeat"></i></span>' +
|
||
|
|
'<span id="close' + i + '"><i class="glyphicon glyphicon-remove"></i></span> ' +
|
||
|
|
'</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
// add event listeners
|
||
|
|
function bindEvents(id) {
|
||
|
|
$( '#close' + id)[0].addEventListener('click', streamClose);
|
||
|
|
$( '#reload' + id)[0].addEventListener('click', streamReload);
|
||
|
|
$( '#full' + id)[0].addEventListener('click', streamFull);
|
||
|
|
}
|
||
|
|
|
||
|
|
// close frame with stream
|
||
|
|
function streamClose(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
$(this)[0].removeEventListener('click', streamClose);
|
||
|
|
let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
|
||
|
|
parent.empty();
|
||
|
|
if(parent.hasClass('fullscreen')){
|
||
|
|
parent.removeClass('fullscreen');
|
||
|
|
$('.dashboard--elem').removeClass('hide');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// reload stream
|
||
|
|
function streamReload(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
let elem = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
|
||
|
|
let idStr = $(this).attr('id');
|
||
|
|
let id = parseInt(idStr.match(/(\d+)$/)[0]);
|
||
|
|
let html = elem.html();
|
||
|
|
elem.empty();
|
||
|
|
elem.html(html);
|
||
|
|
|
||
|
|
bindEvents(id);
|
||
|
|
}
|
||
|
|
|
||
|
|
function streamFull(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
|
||
|
|
if(parent.hasClass('fullscreen')){
|
||
|
|
parent.removeClass('fullscreen');
|
||
|
|
$('.dashboard--elem').removeClass('hide');
|
||
|
|
} else {
|
||
|
|
$('.dashboard--elem').addClass('hide');
|
||
|
|
parent.addClass('fullscreen');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$('.dashboard--elem').on('drop', function (e) {
|
||
|
|
console.log('drop');
|
||
|
|
e.preventDefault();
|
||
|
|
let target = e.target;
|
||
|
|
let url = e.originalEvent.dataTransfer.getData('URL');
|
||
|
|
|
||
|
|
if(!url || url.indexOf('https://gto.to/?r=') === -1){
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
$(target).empty();
|
||
|
|
let panel = generatePanel(counter);
|
||
|
|
$( this ).append( panel + '<iframe src="' + url + '" width="100%" height="100%" align="center">\n' +
|
||
|
|
' Iframe is not supported\n' +
|
||
|
|
' </iframe>' );
|
||
|
|
|
||
|
|
bindEvents(counter);
|
||
|
|
counter++;
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|