Script to display frequently (or not) changed data without console.log'ing it.

Installation

npm install --save-dev og-log

Usage

First you need to create a "Logger" that will contain all the components.

var logger = new og.Logger();

Currently you can add 3 types of components to the logger:

og.component.Static

Static Is a component where if you want to update the value of the component you need to manualy call .update() method. The example below shows how to update the component every time the window size is changed.

var staticLogger = new og.component.Static({
	leftStartValue: 'Window width:',
	rightStartValue: window.innerWidth
});
staticLogger.addTo(logger);

window.addEventListener('resize', function(){
	staticLogger.update(window.innerWidth)
});

og.component.Interval

Interval is a component that updates itself every n ms. It recieves a value getter function as an option and call it every time when interval ticks. The component displays the value that value getter returns. The code below shows an example of using this component for tracking your cursor position.

var mousePosition = {clientX: 1, clientY: 1};
var intervalLogger = new og.component.Interval({
	interval: 500,
	valueGetter: function(){
		return mousePosition;
	},
	formatter: function(input){
		return JSON.stringify(input);
	}
});
intervalLogger.addTo(logger);

window.addEventListener('mousemove', function(event){
	mousePosition.clientX = event.clientX;
	mousePosition.clientY = event.clientY;
});

We need to stop on Interval constructor options to explain how the component works in a bit more details.

1. ** interval** is option for settings update frequency of the timer in ms. In this example the component will update itself every 500 ms.
2. valueGetter option contains a function that returns a mousePosition variable that is updated everytime the mousemove event fires.
3. formatter is an important option here. Formatter is a function that processes your data somehow. The result that this function returned will be displayed on the screen. The default formatter for every component looks like this

function(input){ 
	return input;
}

So the default formatter just returns the whatever input you pass to him. That will not work in our case because in the example we work with an object that will look something like this {clientX: 1, clientY: 1}. So what the script do is it going to pass this object to the formatter, the formatter will return the same object and then this object will be inserted to the DOM. So the normal behavior for javascript for in this case would be the [object Object] output. That's not what we want to see, so we change to formatter function so it will return a proper string that can be inserted in the DOM.

og.component.Stack

Stack is a component that displays the data you log in a "stack". In this example the component will be updated every 1 second. The script will just log the numbers from 0 to 10 and when the script will log 10 values it will call the .clear() method wich will clear the component. And then just starts all over again.

var stackLogger = new og.component.Stack({
	maxHeight: 100
});
stackLogger.addTo(logger);

var stackValue = 0;
setInterval(function(){
	if (stackValue > 10) {
		stackLogger.clear();
		stackValue = 0;
	}
	stackValue++;
	stackLogger.insert(stackValue);
}, 1000);