PiwikPro Tag Manager Debug Resize

piwikpro-resize-tagcode.html

<script>
/*
PIWIK PRO TAG MANAGER DEBUGGER RESIZE
adds 200px width to the PiwikPro Tag Manager debug panel and creates links (at top right) to enhance or decrease with in 200 pixel steps

usage: create new (async) html tag in PiwikPro Tag Manager, paste this code and fire tag on DOM ready, if "Preview Mode" is "1". 
       get preview status from stg_debug cookie as there is no built in variable for debug status (afaik)
*/
  function ppResizeDebug(w) {
    var pnl = document.querySelector("#seventag_container_debugger");
    if (pnl) pnl.style.width = w.toString() + "px";
    showHideBtns();
  }
  
  //hide buttons if panel is minimized or too small
  function showHideBtns(){
    var bgr = document.querySelector("#biggerPreviewLink");
    var sml = document.querySelector("#smallerPreviewLink");
    var pnl = document.querySelector("#seventag_container_debugger");
    var w = pnl.clientWidth || parseInt(pnl.style.width) || 0;
    if (bgr && sml) {
      bgr.style.display = w>300 ? "inline-block" : "none";
      sml.style.display = bgr.style.display;      
    }        
  }
  
  //resize on link click
  function ppDebugAdd(x) {
    var d = document.querySelector("#seventag_container_debugger");
    var w = d.clientWidth || parseInt(d.style.width) || 0;
    if (d && (w>0)) ppResizeDebug(w+x);
    return false;
  }
  
  //init with +200px and create resize links
  setTimeout(function(){
    
    ppResizeDebug(600);  
    
    if (!document.querySelector("#biggerPreviewLink")) {    
      var dbg = document.querySelector("#seventag_container_debugger");
      if (!dbg) return;
      dbg.style.maxWidth = "100%";
      var plnk = document.createElement('a'); 
      plnk.setAttribute('style', 'font-family:arial;font-size:13px;color:#fff;text-decoration:none;position:absolute;right:70px;top:17px');  
      plnk.setAttribute('id', 'biggerPreviewLink');  
      plnk.setAttribute('href', '#');  
      plnk.innerHTML = "&#5130;";
      plnk.addEventListener('click', function(e){
        ppDebugAdd(200); 
        e.preventDefault(); 
        e.stopPropagation();
        return false;
      });
      dbg.appendChild(plnk);      

      plnk = document.createElement('a'); 
      plnk.setAttribute('style', 'font-family:arial;font-size:13px;color:#fff;text-decoration:none;position:absolute;right:70px;top:30px');  
      plnk.setAttribute('id', 'smallerPreviewLink');  
      plnk.setAttribute('href', '#');  
      plnk.innerHTML = "&#5125;";
      plnk.addEventListener('click', function(e){
        ppDebugAdd(-200); 
        e.preventDefault(); 
        e.stopPropagation();
        return false;
      });
      dbg.appendChild(plnk);    
      
      //create observer for panel div if resized from inside iframe to show or hide resize links
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
       var observer = new MutationObserver(function(mutations) {
         mutations.forEach(function(mutation) {
           if(mutation.type==="attributes") setTimeout(showHideBtns, 1000);
         });    
       });
       var config = { attributes: true, childList: false, characterData: false }
       observer.observe(dbg, config);      
    
    }
  }, 1000);  
  
</script>