|
|
| Line 1: |
Line 1: |
| | importStylesheet('User:WindPower/vector.css') | | 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);
| |
