openlayer 3: how to add visible pan control - openlayers-3

Question

openlayer 2.13 has a visible pan control but not ol3.
I tried adding one here: http://jsfiddle.net/tr8691ev/13/
var v=map.getView();
var c=v.getCenter();
c[1]=+2;
// p=ol.animation.pan({duration:600,source:v.getCenter()});
//map.beforeRender(p);
v.setCenter(c,v.getZoom());
This one doesn't work as it should.
What is wrong with it? Thanks.

Answer 1

I did a function to change the center if user pan outside an area.
In this case is important handle the resolution of the map to know how big is the area depending on zoom.
In your case when user click left you should change center
var mapHorizontalMove = (mapSize[0] * resolution) / 10.0;
var mapVerticalMove = (mapSize[1] * resolution) / 10.0;
//left
center[0] -= mapHorizontalMove;
//right
center[0] += mapHorizontalMove;
//down
center[1] -= mapVerticalMove ;
//up
center[1] += mapVerticalMove ;
Mysample:
var maxExtent = [-79.59975, -1.200, -53.03076, 13.72883];
view.on('change:center', function (evt) {
var center = view.getCenter();
var x = center[0];
var y = center[1];
var resolution = view.getResolution();
var mapSize = map.getSize();
var mapHalfWidth = (mapSize[0] * resolution) / 2.0;
var mapHalfHeight = (mapSize[1] * resolution) / 2.0;
if (center[0] - mapHalfWidth < maxExtent[0]) {
x = maxExtent[0] + mapHalfWidth;
} else if (center[0] + mapHalfWidth > maxExtent[2]) {
x = maxExtent[2] - mapHalfWidth;
}
if (center[1] - mapHalfHeight < maxExtent[1]) {
y = maxExtent[1] + mapHalfHeight;
} else if (center[1] + mapHalfHeight > maxExtent[3]) {
y = maxExtent[3] - mapHalfHeight;
}
if (center[0] != x || center[1] != y) {
view.setCenter([x, y]);
}
});

Answer 2

.:| Just for whom witch reaches here like Me |:.
If you have got a OpenLayers' map without any controls visible,
And every thing seems Ok in your code,
Just add ol.css in your Head tag and all will be come back.