Option to Center Content to Client when the Content is smaller then the Client

[kaplag]

This option would allow the content to be centered in the client space instead of anchored to the left top. If the user resizes the browser window or has zoom enabled and zooms out it will snap move to the center.

add the option

this.options = {
 /** Enable content to center in client when zooming out */
centering: false,
};

add internal fields variables for offset values

/* {Number} Offset to center left position */
        __leftOffset: 0,

        /* {Number} Offset to center top position */
        __topOffset: 0,

add logic to calculator left and top offset based on size. I put this in _computerScrollMax function

            var xoffset = 0;
            var yoffset = 0;

            if(self.options.centering){

                if (self.__clientWidth>(self.__contentWidth*self.__zoomLevel)){
                    xoffset = (self.__clientWidth-(self.__contentWidth*self.__zoomLevel))/2;
                }else{
                    xoffset = 0;
                }

                if (self.__clientHeight>(self.__contentHeight*self.__zoomLevel)){
                    yoffset = (self.__clientHeight-(self.__contentHeight*self.__zoomLevel))/2;
                }else{
                    yoffset = 0;
                }
            }

            self.__leftOffset = xoffset;
            self.__topOffset = yoffset;

add code to subtract the offset from the left and top when publishing. There are two callbacks in the __publish function

// Push values out
                        if (self.__callback) {
                            self.__callback(self.__scrollLeft - self.__leftOffset , self.__scrollTop - self.__topOffset , self.__zoomLevel); // greg minus out here
                        }

// Push values out
                if (self.__callback) {
                    self.__callback(left - self.__leftOffset, top - self.__topOffset, zoom);
                }

If This worked perfectly right I'd love to make a pull request but there is an issue with pinch to zoom. I guess since the offset is always being applied to left and top when performing a pinch it slides the content under you. I tired to fix this by then subtracting the offsets from where the touch code is done but it's still not perfect. Any suggestions or a different approach would be much appreciated.

I can post my code somewhere if anyone is interested in solving this.

[alanrubin]

Thanks for that ! I was looking for a solution to that issue and the changes you described worked perfectly for me as well.

[ValYouW]

Thanks for that!
I would also add this adjustment to getValues:

getValues: function() {

	var self = this;
	return {
		left: self.__scrollLeft - (self.options.centering ? self.__leftOffset : 0),
		top: self.__scrollTop - (self.options.centering ? self.__topOffset : 0),
		zoom: self.__zoomLevel
	};
}