$( document ).ready(() => { var counter = 0; function generatePanel(i) { return '
' + ' ' + '' + ' ' + '
'; } // 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 + '' ); bindEvents(counter); counter++; return false; }); });