Cacher is the code snippet organizer for pro developers

// Rezize Creative Manager Studio Panel Extension
// version: 0.0.1
(function(){

    var _body = window.parent.document.body;
    console.log(_body);
    //var sidenav = window.parent.document.querySelector('.c-sidenav');
    var sidenav = window.parent.document.querySelector('.o-app div.c-sidenav');
    var inner = window.parent.document.querySelector('.o-app__body');
    var sidenavScrollArea = window.parent.document.querySelector('.c-sidenav__content.o-scroll-container');

    var iframe = _body.querySelector('#ad');
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    var oAppWidth, windowWidth;
    var panelIsOpen = true;

    if(!_body.querySelector('#handle-icon')){
        // remove transitions    
        sidenav.style.transition = 'none';
        inner.style.transition = 'none';

        // widen version list to full width
        sidenavScrollArea.style.setProperty('width', 'calc(100% - 1px)', 'important');

        // hide orginal handle icon
        var handle = window.parent.document.querySelector('.c-menu-handle');
        handle.style.display = 'none';

        // create custom handle icon
        var icon = document.createElement('IMG');
        icon.src = 'https://flashtalking.net/de-cgn/testing/handle.png';
        icon.id = 'handle-icon';
        icon.style.position = 'absolute';
        icon.style.top = 'calc(50% - 26px)';
        icon.style.left = '0';
        icon.style.cursor = 'ew-resize';
        icon.setAttribute('draggable', false);
        
        // create custom handle area
        var customHandle = document.createElement('div');
        customHandle.id = 'customHandle';
        customHandle.style.position = 'absolute';
        customHandle.style.height = '100%';
        customHandle.style.width = '43px'; // DANGER! ELEMENT IS INVISIBLE AND COULD OVERLAY AD/CLICKTAG
        customHandle.style.backgroundColor = 'transparent';
        customHandle.style.left = window.getComputedStyle(sidenav, null).getPropertyValue('width');
        customHandle.style.top = '0';
        customHandle.style.zIndex = '1000000';
        customHandle.append(icon);
        _body.append(customHandle);

        // Listeners
        icon.addEventListener('mousedown', iconHandler);

        icon.addEventListener('dblclick', function(){
            if(!panelIsOpen){
                openPanel();
            }else{
                closePanel();
            }
        });

        _body.addEventListener('mouseup', function(){
            _body.removeEventListener('mousemove', mouseMoveHandler);
            iframeDocument.body.querySelector('div').removeEventListener('mousemove', mouseMoveHandler);
            iframe.style.pointerEvents = 'all';
        });

        _body.addEventListener('mouseleave', function(){
            _body.removeEventListener('mousemove', mouseMoveHandler);
            iframeDocument.body.querySelector('div').removeEventListener('mousemove', mouseMoveHandler);
            iframe.style.pointerEvents = 'all';
        });
    }
    
    window.parent.addEventListener('resize', resize);

    // Handler
    function resize(){
        if(window.parent.innerWidth >= 980){
            panelStandardWidth = 360;
        }else{
            panelStandardWidth = 300;
        }
        if(panelIsOpen){
            oAppWidth = parseInt( window.getComputedStyle(window.parent.document.querySelector('.o-app'), null).getPropertyValue('width') );
            inner.style.setProperty('width', oAppWidth - 10 - parseInt( window.getComputedStyle(sidenav, null).getPropertyValue('width') ) + 'px', 'important');
            //customHandle.style.left =  parseInt( window.getComputedStyle(sidenav, null).getPropertyValue('width') ) +'px';
            _body.querySelector('#customHandle').style.left =  parseInt( window.getComputedStyle(sidenav, null).getPropertyValue('width') ) +'px';
        }else{
            oAppWidth = parseInt( window.getComputedStyle(window.parent.document.querySelector('.o-app'), null).getPropertyValue('width') );
            inner.style.setProperty('width', oAppWidth +'px', 'important');
        }
    }
    resize();

    function mouseMoveHandler(e){

        if(e.clientX <= (panelStandardWidth+10)){
            customHandle.style.left =  panelStandardWidth+'px';
            sidenav.style.width =  panelStandardWidth+'px';
        }else{
            customHandle.style.left =  e.clientX-10 +'px';
            sidenav.style.setProperty('width', e.clientX-10 +'px', 'important');
            inner.style.setProperty('left', e.clientX-10 +'px', 'important');
            inner.style.setProperty('width', oAppWidth - parseInt( window.getComputedStyle(sidenav, null).getPropertyValue('width') ) +'px', 'important');
        }
    }

    function iconHandler(){
        _body.addEventListener('mousemove', mouseMoveHandler);
        iframeDocument.body.querySelector('div').addEventListener('mousemove', mouseMoveHandler);
        iframe.style.pointerEvents = 'none';
        window.addEventListener('mouseup', function(){
            iframe.style.pointerEvents = 'all';
        });
    }

    function closePanel(){
        icon.removeEventListener('mousedown', iconHandler);
        sidenav.style.display = 'none';
        customHandle.style.left = '0';
        inner.style.setProperty('left', '0', 'important');
        inner.style.setProperty('width', '100%', 'important');
        panelIsOpen = false;
    }

    function openPanel(){
        icon.addEventListener('mousedown', iconHandler);
        sidenav.style.display = 'block';
        sidenav.style.width = panelStandardWidth+'px';
        customHandle.style.left = panelStandardWidth+'px';
        inner.style.setProperty('left', panelStandardWidth+'px', 'important');
        inner.style.setProperty('width', oAppWidth - panelStandardWidth + 'px', 'important');
        panelIsOpen = true;
    }
})();