Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PiwikPro Tag Manager Debug Resize
<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>
@mbaersch

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment