First Local Commit - After Clean up.
Signed-off-by: Rick Hays <rhays@haysgang.com>
This commit is contained in:
551
system/Debug/Toolbar/Views/toolbar.js
Normal file
551
system/Debug/Toolbar/Views/toolbar.js
Normal file
@@ -0,0 +1,551 @@
|
||||
/*
|
||||
* Functionality for the CodeIgniter Debug Toolbar.
|
||||
*/
|
||||
|
||||
var ciDebugBar = {
|
||||
|
||||
toolbar : null,
|
||||
icon : null,
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
init : function () {
|
||||
this.toolbar = document.getElementById('debug-bar');
|
||||
this.icon = document.getElementById('debug-icon');
|
||||
|
||||
ciDebugBar.createListeners();
|
||||
ciDebugBar.setToolbarState();
|
||||
ciDebugBar.setToolbarPosition();
|
||||
ciDebugBar.toggleViewsHints();
|
||||
|
||||
document.getElementById('debug-bar-link').addEventListener('click', ciDebugBar.toggleToolbar, true);
|
||||
document.getElementById('debug-icon-link').addEventListener('click', ciDebugBar.toggleToolbar, true);
|
||||
|
||||
// Allows to highlight the row of the current history request
|
||||
var btn = document.querySelector('button[data-time="' + localStorage.getItem('debugbar-time') + '"]');
|
||||
ciDebugBar.addClass(btn.parentNode.parentNode, 'current');
|
||||
|
||||
historyLoad = document.getElementsByClassName('ci-history-load');
|
||||
|
||||
for (var i = 0; i < historyLoad.length; i++)
|
||||
{
|
||||
historyLoad[i].addEventListener('click', function () {
|
||||
loadDoc(this.getAttribute('data-time'));
|
||||
}, true);
|
||||
}
|
||||
|
||||
// Display the active Tab on page load
|
||||
var tab = ciDebugBar.readCookie('debug-bar-tab');
|
||||
if (document.getElementById(tab))
|
||||
{
|
||||
var el = document.getElementById(tab);
|
||||
el.style.display = 'block';
|
||||
ciDebugBar.addClass(el, 'active');
|
||||
tab = document.querySelector('[data-tab=' + tab + ']');
|
||||
if (tab)
|
||||
{
|
||||
ciDebugBar.addClass(tab.parentNode, 'active');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
createListeners : function () {
|
||||
var buttons = [].slice.call(document.querySelectorAll('#debug-bar .ci-label a'));
|
||||
|
||||
for (var i = 0; i < buttons.length; i++)
|
||||
{
|
||||
buttons[i].addEventListener('click', ciDebugBar.showTab, true);
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
showTab: function () {
|
||||
// Get the target tab, if any
|
||||
var tab = document.getElementById(this.getAttribute('data-tab'));
|
||||
|
||||
// If the label have not a tab stops here
|
||||
if (! tab)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove debug-bar-tab cookie
|
||||
ciDebugBar.createCookie('debug-bar-tab', '', -1);
|
||||
|
||||
// Check our current state.
|
||||
var state = tab.style.display;
|
||||
|
||||
// Hide all tabs
|
||||
var tabs = document.querySelectorAll('#debug-bar .tab');
|
||||
|
||||
for (var i = 0; i < tabs.length; i++)
|
||||
{
|
||||
tabs[i].style.display = 'none';
|
||||
}
|
||||
|
||||
// Mark all labels as inactive
|
||||
var labels = document.querySelectorAll('#debug-bar .ci-label');
|
||||
|
||||
for (var i = 0; i < labels.length; i++)
|
||||
{
|
||||
ciDebugBar.removeClass(labels[i], 'active');
|
||||
}
|
||||
|
||||
// Show/hide the selected tab
|
||||
if (state != 'block')
|
||||
{
|
||||
tab.style.display = 'block';
|
||||
ciDebugBar.addClass(this.parentNode, 'active');
|
||||
// Create debug-bar-tab cookie to persistent state
|
||||
ciDebugBar.createCookie('debug-bar-tab', this.getAttribute('data-tab'), 365);
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
addClass : function (el, className) {
|
||||
if (el.classList)
|
||||
{
|
||||
el.classList.add(className);
|
||||
}
|
||||
else
|
||||
{
|
||||
el.className += ' ' + className;
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
removeClass : function (el, className) {
|
||||
if (el.classList)
|
||||
{
|
||||
el.classList.remove(className);
|
||||
}
|
||||
else
|
||||
{
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle display of a data table
|
||||
*
|
||||
* @param obj
|
||||
*/
|
||||
toggleDataTable : function (obj) {
|
||||
if (typeof obj == 'string')
|
||||
{
|
||||
obj = document.getElementById(obj + '_table');
|
||||
}
|
||||
|
||||
if (obj)
|
||||
{
|
||||
obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle tool bar from full to icon and icon to full
|
||||
*/
|
||||
toggleToolbar : function () {
|
||||
var open = ciDebugBar.toolbar.style.display != 'none';
|
||||
|
||||
ciDebugBar.icon.style.display = open == true ? 'inline-block' : 'none';
|
||||
ciDebugBar.toolbar.style.display = open == false ? 'inline-block' : 'none';
|
||||
|
||||
// Remember it for other page loads on this site
|
||||
ciDebugBar.createCookie('debug-bar-state', '', -1);
|
||||
ciDebugBar.createCookie('debug-bar-state', open == true ? 'minimized' : 'open' , 365);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Sets the initial state of the toolbar (open or minimized) when
|
||||
* the page is first loaded to allow it to remember the state between refreshes.
|
||||
*/
|
||||
setToolbarState: function () {
|
||||
var open = ciDebugBar.readCookie('debug-bar-state');
|
||||
|
||||
ciDebugBar.icon.style.display = open != 'open' ? 'inline-block' : 'none';
|
||||
ciDebugBar.toolbar.style.display = open == 'open' ? 'inline-block' : 'none';
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
toggleViewsHints: function () {
|
||||
// Avoid toggle hints on history requests that are not the initial
|
||||
if (localStorage.getItem('debugbar-time') != localStorage.getItem('debugbar-time-new'))
|
||||
{
|
||||
var a = document.querySelector('a[data-tab="ci-views"]');
|
||||
a.href = '#';
|
||||
return;
|
||||
}
|
||||
|
||||
var nodeList = []; // [ Element, NewElement( 1 )/OldElement( 0 ) ]
|
||||
var sortedComments = [];
|
||||
var comments = [];
|
||||
|
||||
var getComments = function () {
|
||||
var nodes = [];
|
||||
var result = [];
|
||||
var xpathResults = document.evaluate( "//comment()[starts-with(., ' DEBUG-VIEW')]", document, null, XPathResult.ANY_TYPE, null);
|
||||
var nextNode = xpathResults.iterateNext();
|
||||
while ( nextNode )
|
||||
{
|
||||
nodes.push( nextNode );
|
||||
nextNode = xpathResults.iterateNext();
|
||||
}
|
||||
|
||||
// sort comment by opening and closing tags
|
||||
for (var i = 0; i < nodes.length; ++i)
|
||||
{
|
||||
// get file path + name to use as key
|
||||
var path = nodes[i].nodeValue.substring( 18, nodes[i].nodeValue.length - 1 );
|
||||
|
||||
if ( nodes[i].nodeValue[12] === 'S' ) // simple check for start comment
|
||||
{
|
||||
// create new entry
|
||||
result[path] = [ nodes[i], null ];
|
||||
}
|
||||
else if (result[path])
|
||||
{
|
||||
// add to existing entry
|
||||
result[path][1] = nodes[i];
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// find node that has TargetNode as parentNode
|
||||
var getParentNode = function ( node, targetNode ) {
|
||||
if ( node.parentNode === null )
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
if ( node.parentNode !== targetNode )
|
||||
{
|
||||
return getParentNode( node.parentNode, targetNode );
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
// define invalid & outer ( also invalid ) elements
|
||||
const INVALID_ELEMENTS = [ 'NOSCRIPT', 'SCRIPT', 'STYLE' ];
|
||||
const OUTER_ELEMENTS = [ 'HTML', 'BODY', 'HEAD' ];
|
||||
|
||||
var getValidElementInner = function ( node, reverse ) {
|
||||
// handle invalid tags
|
||||
if ( OUTER_ELEMENTS.indexOf( node.nodeName ) !== -1 )
|
||||
{
|
||||
for (var i = 0; i < document.body.children.length; ++i)
|
||||
{
|
||||
var index = reverse ? document.body.children.length - ( i + 1 ) : i;
|
||||
var element = document.body.children[index];
|
||||
|
||||
// skip invalid tags
|
||||
if ( INVALID_ELEMENTS.indexOf( element.nodeName ) !== -1 )
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
return [ element, reverse ];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// get to next valid element
|
||||
while ( node !== null && INVALID_ELEMENTS.indexOf( node.nodeName ) !== -1 )
|
||||
{
|
||||
node = reverse ? node.previousElementSibling : node.nextElementSibling;
|
||||
}
|
||||
|
||||
// return non array if we couldnt find something
|
||||
if ( node === null )
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
return [ node, reverse ];
|
||||
};
|
||||
|
||||
// get next valid element ( to be safe to add divs )
|
||||
// @return [ element, skip element ] or null if we couldnt find a valid place
|
||||
var getValidElement = function ( nodeElement ) {
|
||||
if (nodeElement)
|
||||
{
|
||||
if ( nodeElement.nextElementSibling !== null )
|
||||
{
|
||||
return getValidElementInner( nodeElement.nextElementSibling, false )
|
||||
|| getValidElementInner( nodeElement.previousElementSibling, true );
|
||||
}
|
||||
if ( nodeElement.previousElementSibling !== null )
|
||||
{
|
||||
return getValidElementInner( nodeElement.previousElementSibling, true );
|
||||
}
|
||||
}
|
||||
|
||||
// something went wrong! -> element is not in DOM
|
||||
return null;
|
||||
};
|
||||
|
||||
function showHints()
|
||||
{
|
||||
// Had AJAX? Reset view blocks
|
||||
sortedComments = getComments();
|
||||
|
||||
for (var key in sortedComments)
|
||||
{
|
||||
var startElement = getValidElement( sortedComments[key][0] );
|
||||
var endElement = getValidElement( sortedComments[key][1] );
|
||||
|
||||
// skip if we couldnt get a valid element
|
||||
if ( startElement === null || endElement === null )
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
// find element which has same parent as startelement
|
||||
var jointParent = getParentNode( endElement[0], startElement[0].parentNode );
|
||||
if ( jointParent === null )
|
||||
{
|
||||
// find element which has same parent as endelement
|
||||
jointParent = getParentNode( startElement[0], endElement[0].parentNode );
|
||||
if ( jointParent === null )
|
||||
{
|
||||
// both tries failed
|
||||
continue;
|
||||
}
|
||||
else
|
||||
{
|
||||
startElement[0] = jointParent;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
endElement[0] = jointParent;
|
||||
}
|
||||
|
||||
var debugDiv = document.createElement( 'div' ); // holder
|
||||
var debugPath = document.createElement( 'div' ); // path
|
||||
var childArray = startElement[0].parentNode.childNodes; // target child array
|
||||
var parent = startElement[0].parentNode;
|
||||
var start, end;
|
||||
|
||||
// setup container
|
||||
debugDiv.classList.add( 'debug-view' );
|
||||
debugDiv.classList.add( 'show-view' );
|
||||
debugPath.classList.add( 'debug-view-path' );
|
||||
debugPath.innerText = key;
|
||||
debugDiv.appendChild( debugPath );
|
||||
|
||||
// calc distance between them
|
||||
// start
|
||||
for (var i = 0; i < childArray.length; ++i)
|
||||
{
|
||||
// check for comment ( start & end ) -> if its before valid start element
|
||||
if ( childArray[i] === sortedComments[key][1] ||
|
||||
childArray[i] === sortedComments[key][0] ||
|
||||
childArray[i] === startElement[0] )
|
||||
{
|
||||
start = i;
|
||||
if ( childArray[i] === sortedComments[key][0] )
|
||||
{
|
||||
start++; // increase to skip the start comment
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
// adjust if we want to skip the start element
|
||||
if ( startElement[1] )
|
||||
{
|
||||
start++;
|
||||
}
|
||||
|
||||
// end
|
||||
for (var i = start; i < childArray.length; ++i)
|
||||
{
|
||||
if ( childArray[i] === endElement[0] )
|
||||
{
|
||||
end = i;
|
||||
// dont break to check for end comment after end valid element
|
||||
}
|
||||
else if ( childArray[i] === sortedComments[key][1] )
|
||||
{
|
||||
// if we found the end comment, we can break
|
||||
end = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// move elements
|
||||
var number = end - start;
|
||||
if ( endElement[1] )
|
||||
{
|
||||
number++;
|
||||
}
|
||||
for (var i = 0; i < number; ++i)
|
||||
{
|
||||
if ( INVALID_ELEMENTS.indexOf( childArray[start] ) !== -1 )
|
||||
{
|
||||
// skip invalid childs that can cause problems if moved
|
||||
start++;
|
||||
continue;
|
||||
}
|
||||
debugDiv.appendChild( childArray[start] );
|
||||
}
|
||||
|
||||
// add container to DOM
|
||||
nodeList.push( parent.insertBefore( debugDiv, childArray[start] ) );
|
||||
}
|
||||
|
||||
ciDebugBar.createCookie('debug-view', 'show', 365);
|
||||
ciDebugBar.addClass(btn, 'active');
|
||||
}
|
||||
|
||||
function hideHints()
|
||||
{
|
||||
for (var i = 0; i < nodeList.length; ++i)
|
||||
{
|
||||
var index;
|
||||
|
||||
// find index
|
||||
for (var j = 0; j < nodeList[i].parentNode.childNodes.length; ++j)
|
||||
{
|
||||
if ( nodeList[i].parentNode.childNodes[j] === nodeList[i] )
|
||||
{
|
||||
index = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// move child back
|
||||
while ( nodeList[i].childNodes.length !== 1 )
|
||||
{
|
||||
nodeList[i].parentNode.insertBefore( nodeList[i].childNodes[1], nodeList[i].parentNode.childNodes[index].nextSibling );
|
||||
index++;
|
||||
}
|
||||
|
||||
nodeList[i].parentNode.removeChild( nodeList[i] );
|
||||
}
|
||||
nodeList.length = 0;
|
||||
|
||||
ciDebugBar.createCookie('debug-view', '', -1);
|
||||
ciDebugBar.removeClass(btn, 'active');
|
||||
}
|
||||
|
||||
var btn = document.querySelector('[data-tab=ci-views]');
|
||||
|
||||
// If the Views Collector is inactive stops here
|
||||
if (! btn)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
btn.parentNode.onclick = function () {
|
||||
if (ciDebugBar.readCookie('debug-view'))
|
||||
{
|
||||
hideHints();
|
||||
}
|
||||
else
|
||||
{
|
||||
showHints();
|
||||
}
|
||||
};
|
||||
|
||||
// Determine Hints state on page load
|
||||
if (ciDebugBar.readCookie('debug-view'))
|
||||
{
|
||||
showHints();
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
setToolbarPosition: function () {
|
||||
var btnPosition = document.getElementById('toolbar-position');
|
||||
|
||||
if (ciDebugBar.readCookie('debug-bar-position') === 'top')
|
||||
{
|
||||
ciDebugBar.addClass(ciDebugBar.icon, 'fixed-top');
|
||||
ciDebugBar.addClass(ciDebugBar.toolbar, 'fixed-top');
|
||||
}
|
||||
|
||||
btnPosition.addEventListener('click', function () {
|
||||
var position = ciDebugBar.readCookie('debug-bar-position');
|
||||
|
||||
ciDebugBar.createCookie('debug-bar-position', '', -1);
|
||||
|
||||
if (!position || position === 'bottom')
|
||||
{
|
||||
ciDebugBar.createCookie('debug-bar-position', 'top', 365);
|
||||
ciDebugBar.addClass(ciDebugBar.icon, 'fixed-top');
|
||||
ciDebugBar.addClass(ciDebugBar.toolbar, 'fixed-top');
|
||||
}
|
||||
else
|
||||
{
|
||||
ciDebugBar.createCookie('debug-bar-position', 'bottom', 365);
|
||||
ciDebugBar.removeClass(ciDebugBar.icon, 'fixed-top');
|
||||
ciDebugBar.removeClass(ciDebugBar.toolbar, 'fixed-top');
|
||||
}
|
||||
}, true);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Helper to create a cookie.
|
||||
*
|
||||
* @param name
|
||||
* @param value
|
||||
* @param days
|
||||
*/
|
||||
createCookie : function (name,value,days) {
|
||||
if (days)
|
||||
{
|
||||
var date = new Date();
|
||||
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
|
||||
var expires = "; expires=" + date.toGMTString();
|
||||
}
|
||||
else
|
||||
{
|
||||
var expires = "";
|
||||
}
|
||||
|
||||
document.cookie = name + "=" + value + expires + "; path=/";
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
readCookie : function (name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
|
||||
for (var i = 0; i < ca.length; i++)
|
||||
{
|
||||
var c = ca[i];
|
||||
while (c.charAt(0) == ' ')
|
||||
{
|
||||
c = c.substring(1,c.length);
|
||||
}
|
||||
if (c.indexOf(nameEQ) == 0)
|
||||
{
|
||||
return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user