
let frameContainer;
let frameNode;

// Create frame and frame container 
function createIFrame() {
    frameContainer = document.createElement('div')
    frameNode = document.createElement('iframe');
    frameContainer.appendChild(frameNode)
}
// Calling iFrame creator on modal shown
$('#modal-iFrame').on('shown.bs.modal', function () {
    createIFrame()
});


// Updating iFrame by changing the path
document.querySelector('.iframe-path').addEventListener('input', function () {
    // console.log(this.value)

    document.querySelector('.iframe-preview').appendChild(frameContainer);
    frameNode.setAttribute('src', this.value);
})


//Adding iFrame to DOM =====================================>>>  
document.querySelector('.add-frame-btn').addEventListener('click', function () {

    // adding sizes
    let iframeWidth = document.querySelector('.iframe-width').value;
    let iframeHeight = document.querySelector('.iframe-height').value;
    frameContainer.style.width = `${iframeWidth}%`;
    frameContainer.style.height = `${iframeHeight}%`;;
    // adding class/id
    frameContainer.setAttribute('id', `layer${layerCounter}-iFrame`);
    frameContainer.setAttribute('class', 'resize-drag iFrame');


    document.querySelector('.screen').appendChild(frameContainer);
    ++layerCounter;
})
//  <<<=====================================