How can I dynamically restrict pan extents on an image layer in OpenLayers 3?

Question

I have been sandboxing with OpenLayers 3 and thus far have been happy with the results. I have used answers on this site to restrict my most zoomed out level from panning and to restrict the range of allowed zooming.

I have encountered the problem though that once a user zooms in I want the extent to be restricted to the original boundaries of the image and not to the new limits of the viewport, that is, you should still be able to pan to the edge of the original map, even zoomed in.

How can I adjust the extent correctly on zoom so that my users can pan on the zoomed map, but not on the unzoomed version?

var extent = [0, 0, 700, 800];
var projection = new ol.proj.Projection({
 code: 'EPSG:4326',
 units: 'pixels',
 extent: extent
});
var map = new ol.Map({
 target: 'map',
 layers: [
new ol.layer.Image({
 source: new ol.source.ImageStatic({
 url: 'http://realmsofdespair.info/world-map.jpg',
 projection: projection,
 imageSize: [700, 800],
 imageExtent: extent
 })
})
 ],
 view: new ol.View({
minZoom: 2,
maxZoom: 5,
projection: projection,
center: ol.extent.getCenter(extent),
extent: [350, 400, 350, 400],
zoom: 2

}) });

The above is my test code, forgive the crudeness of the model, I'm new to GIS in general and to OpenLayers in specific.

I realize that this example has the panning completely locked down, I suppose I've been looking for a per zoom level extent transformation or a javascript event, perhaps zoomend, that can be called on zoom so that the extent can be rewritten.

I suppose I could be confusing my actual resolution with the mapunits, so that if I'm zoomed in 8x 1 pixel in the original picture is now 8 in the zoomed. Eventually I plan to replace the jpg with a vector graphic, but this is a test of concept.

Answer 1

I save my center when start the map.
Then if user try to move the map on Zoom 0 i reset the view.
In your case if detect a zoom change you could change the extent

//Init the first extent 
 var extent = [-79.608, -1.1, -53.106, 13.721];
 extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:4326", "EPSG:3857"));
 map.getView().fitExtent(extent, map.getSize());
//zoom 0
 var centerZoom = view.getCenter(); 
 view.on('change:center', function (evt) {
 var zoom = view.getZoom();
 var center = view.getCenter();
 txtCenter = '' + center;
 txtCenterZoom = '' + centerZoom; 
//reset the center if user move it
 if (zoom == 0 && txtCenter != txtCenterZoom) { 
 map.getView().fitExtent(extent, map.getSize());
 } 
 });