User:Moussekateer/vector.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

importStylesheet('User:WindPower/vector.css')
var viewer3d = {

	dragging: null,

	draggingFrameX: 0,

	draggingFrameY: 0,

	viewers: [],

	frameThresholdX: 10,

	frameThresholdY: 128,

	realMod: function(x, y) {

		return ((x % y) + y) % y;

	},

	init: function() {

		$('.viewer-3d').each(viewer3d.bind);

		$(document).mouseup(viewer3d.release);

		$(document).mousemove(viewer3d.move);

	},

	bind: function() {

		var v = $(this);

		var num = viewer3d.viewers.length;

		var framesS = v.find('.viewer-3d-framemap').text().split(/,/g);

		var frameMap = [];

		var heightMap = [];

		var leftCropMap = [];

		var totalW = parseInt(framesS[0]);

		var maxFrameW = parseInt(framesS[1]);

		var totalH = parseInt(framesS[2]);

		var verticalSteps = parseInt(framesS[3]);

		var midVertical = Math.floor(verticalSteps / 2);

		for(var f = 4; f < framesS.length; f += 3) {

			frameMap.push(parseInt(framesS[f]));

			heightMap.push(parseInt(framesS[f + 1]));

			leftCropMap.push(parseInt(framesS[f + 2]));

		}

		var url = v.find('.viewer-3d-url').text();

		var frameN = v.find('.viewer-3d-frame');

		v.find('img').detach();

		var klasses = v.attr('class').split(/ /g);

		var startFrame = 0;

		for(var k in klasses) {

			if(klasses[k].substr(0, 11) == 'startframe-') {

				startFrame = Math.min(frameMap.length - 1, Math.max(0, parseInt(klasses[k].substr(11))));

			}

		}

		var viewer = {

			node: v,

			frameNode: frameN,

			frameX: startFrame,

			frameY: midVertical,

			map: frameMap,

			cropMap: leftCropMap,

			width: v.width(),

			height: v.height(),

			totalWidth: totalW,

			totalHeight: totalH,

			maxFrameWidth: maxFrameW,

			mouseX: 0,

			mouseY: 0,

			xStep: verticalSteps

		};

		viewer3d.viewers.push(viewer);

		v.mousedown(viewer3d.drag).attr('data-id', num);

		frameN.mousedown(viewer3d.drag).attr('data-id', num).css({

			background: 'url(' + url + ') no-repeat top left',

			top: Math.round((viewer.height - viewer.totalHeight) / 2) + 'px',

			height: viewer.totalHeight + 'px'

		});

		viewer3d.display(viewer, viewer.frameX, viewer.frameY);

	},

	drag: function(e) {

		var v = viewer3d.getViewer(this);

		v.mouseX = e.pageX;

		v.mouseY = e.pageY;

		viewer3d.dragging = v;

		draggingFrameX = v.frameX;

		draggingFrameY = v.frameY;

		return false;

	},

	release: function() {

		var v = viewer3d.dragging;

		viewer3d.dragging = null;

		if(v != null) {

			v.frameX = viewer3d.draggingFrameX;

			v.frameY = viewer3d.draggingFrameY;

		}

		viewer3d.draggingFrameX = 0;

		viewer3d.draggingFrameY = 0;

	},

	getViewer: function(node) {

		return viewer3d.viewers[parseInt($(node).attr('data-id'))];

	},

	display: function(v, frameX, frameY) {

		var frameID = viewer3d.realMod(frameX * v.xStep + frameY, v.map.length);

		var frameOffset = v.map[frameID];

		var frameWidth = 0;

		if(frameID == v.map.length - 1) {

			frameWidth = v.totalWidth - frameOffset;

		} else {

			frameWidth = v.map[frameID + 1] - frameOffset;

		}

		v.frameNode.css({

			backgroundPosition: (-frameOffset - frameID) + 'px 0px',

			left: Math.round((v.width - v.maxFrameWidth) / 2.0 + v.cropMap[frameID]) + 'px',

			width: frameWidth + 'px'

		});

	},

	move: function(e) {

		if(viewer3d.dragging == null) {

			return;

		}

		var v = viewer3d.dragging;

		var mouseDeltaX = e.pageX - v.mouseX;

		var mouseDeltaY = e.pageY - v.mouseY;

		var frameDeltaX = Math.round(mouseDeltaX / viewer3d.frameThresholdX);

		var frameDeltaY = -Math.round(mouseDeltaY / viewer3d.frameThresholdY);

		viewer3d.draggingFrameX = v.frameX + frameDeltaX;

		viewer3d.draggingFrameY = Math.max(0, Math.min(v.xStep - 1, v.frameY + frameDeltaY));

		viewer3d.display(v, viewer3d.draggingFrameX, viewer3d.draggingFrameY);

	}

}
addOnloadHook(viewer3d.init);