Web Inspector Experiments

wie.js

/**
 * [EXPERIMENTS]
 */
var anchors = document.getElementsByTagName('a');
for ( key in anchors ) {
	if ( anchors[key].nodeType == 1 ) {
	anchors[key].addEventListener('click', function(event){
		event.preventDefault();
	});
	}
}
	
var elements = document.querySelectorAll('div, section, aside,ul,li,span,a,p,h1,h2,h3,h4.h5,h6');

var editorWindow = document.createElement('div');
	editorWindow.setAttribute("id", 'editorWindow');

var paddingText = document.createElement('input');
	paddingText.setAttribute("min","0");
	paddingText.setAttribute("max","80");
	paddingText.setAttribute("step","1");
	paddingText.setAttribute("type","range");
	paddingText.setAttribute("width","200px");

var fontSize = document.createElement('input');
	fontSize.setAttribute("min","5");
	fontSize.setAttribute("max","80");
	fontSize.setAttribute("step","1");
	fontSize.setAttribute("type","range");
	fontSize.setAttribute("width","200px");

	editorWindow.appendChild(fontSize);

	fontSize.addEventListener('change', function(font){
		currentActiveElement.style.fontSize = font.target.value + 'px';
	});

var colorText = document.createElement('input');
	colorText.setAttribute("type", "color");
	editorWindow.appendChild(colorText);

var currentActiveElement = null;

editorWindow.appendChild(paddingText);
editorWindow.style.width = '100%';
editorWindow.style.padding = '20px';
editorWindow.style.position = 'fixed';
editorWindow.style.zIndex = '999';
editorWindow.style.backgroundColor = '#ddd';
editorWindow.style.bottom = '0';
editorWindow.style.left = '0';
editorWindow.style.borderTop = '2px solid #000';

document.getElementsByTagName('body')[0].append(editorWindow);

paddingText.addEventListener('change', function(paddingText){
	currentActiveElement.style.padding = paddingText.target.value + "px";
});

colorText.addEventListener('change',function(colorText){
	currentActiveElement.style.color = colorText.target.value;
});

for ( el in elements ) { 
	var element = elements[el];

	if ( 1 === element.nodeType ) {
		element.addEventListener('mouseover', documentEditorMouseEnter);
		element.addEventListener('mouseout', documentEditorMouseOut);
		element.addEventListener('click', windowEditorSetElementActive);
	}
}

function documentEditorMouseOut(nodeElement) {
	nodeElement.stopPropagation();
	var currentElement = this;
	currentElement.style.boxShadow = "none";
}

function documentEditorMouseEnter(nodeElement) {
	nodeElement.stopPropagation();
	var currentElement = this;
	currentElement.style.boxShadow = "0px 0px 1px 1px green";
}

function windowEditorSetElementActive(nodeElement) {

	nodeElement.stopPropagation();

	if (  currentActiveElement  ) {
		currentActiveElement.style.boxShadow = "";
		currentActiveElement.addEventListener('mouseout', documentEditorMouseOut);
	}

	currentActiveElement = nodeElement.target;
	currentActiveElement.style.boxShadow = "0px 0px 1px 1px green";
	currentActiveElement.removeEventListener('mouseout', documentEditorMouseOut);
	
	console.log(nodeElement);

	return;
}