111 lines
3.1 KiB
JavaScript
Executable File
111 lines
3.1 KiB
JavaScript
Executable File
$( document ).ready(() => {
|
|
|
|
var counter = 0;
|
|
|
|
|
|
|
|
let url_string = window.location.href;
|
|
let url = new URL(url_string);
|
|
let r = url.searchParams.get('r');
|
|
|
|
if(r){
|
|
init(r.split('|'));
|
|
}
|
|
|
|
function init(arr) {
|
|
let blocks = ['r4', 'r3', 'r2', 'r1'];
|
|
|
|
for(let i = 0; i< arr.length; i++){
|
|
if(blocks.length > 0 ){
|
|
let id = blocks.pop();
|
|
let panel = generatePanel(counter);
|
|
|
|
|
|
$( '#' + id ).append( panel + '<iframe src="https://gto.to/?r=' + arr[i] + '" width="100%" height="100%" align="center">\n' +
|
|
' Iframe is not supported\n' +
|
|
' </iframe>' );
|
|
bindEvents(counter);
|
|
counter++;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function generatePanel(i) {
|
|
return '<div style="display: none;" 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;
|
|
});
|
|
|
|
}); |