jmalarcon / jquery.pan Goto Github PK

Hi
Quick question:
Would it possible to change/block the axis move depending on image orientation?
To be more precise, I'd like to:
— allow the horizontal axis move/block the vertical axis move for landscape images (the image height would be the viewport height)
— allow the vertical axis move/block the horizontal axis move on portrait image (the image width would be the viewport width).

Great fork btw 👍

Hi,
hence there is no issue, I hope its fine, when I ask my question in the issue tracker.

I have some issue together with datatables and the responsive child-items, respectively sub-rows.

Any ideas. I appreciate any help.
Thanks...

Edit: has been kindly answered by kthorngren in the datatables forum. The hidden child details arent in the dom with activated responsive.
https://datatables.net/reference/event/responsive-display

Found this tool to be super useful, quick, elegant, and extremely simple to use. However, many of the images we deal with in web apps on a day-to-day basis originate as scans which can arrive in unpredictable orientations, so the lack of rotation capability was a pain point for us. So I made a few quick additions to your code to allow for rotation and will attach them here. Also updated the control icons to make them a bit more visible since we found the original controls were too hard for many users to spot.

Extracting the current transition state directly from CSS styles is difficult, so the rotation functions which I've added lean on storing the current rotation state in a 'data-' attribute of the 'PanImg' element. This has the added benefit of your preferred rotation being sustained throughout a page session even if you close the image previewer and return to it later.

I haven't done much in the way of platform testing the additions, but verified they work as expected on at least Chrome (79), IE(11), Edge, and Droid Chrome. Rather than fork your project - just passing along my adjustments and will leave it up to you if you think they are worth inclusion in an update, or inspire something similar of your own making.

Additions to jquery.pan.css:

.panWrapper a.controls.rc {
    background-image: url('img/rotateClockwz.png');
    margin-left: 60px;
}

.panWrapper a.controls.ra {
    background-image: url('img/rotateAntiClockwz.png');
    margin-left: -60px;
}

Additions to jquery.pan.js:
icon instantiations

		var rc = document.createElement('a');
		$(rc).addClass("controls rc");
		$(panWrapper).append(rc);

		var ra = document.createElement('a');
		$(ra).addClass("controls ra");
		$(panWrapper).append(ra);

and two new functions

		$(rc).click(function (e) {
			var panImg = $(".panWrapper img.i");
			var angle = (panImg.data('rotAngle')) || 0;
			angle += 90;
			if(angle > 360){angle = angle-360};
			panImg.css({'transform' : 'rotate(' + angle + 'deg)'});
			panImg.data('rotAngle', angle);
			panInit(e);
		});

		$(ra).click(function (e) {
			var panImg = $(".panWrapper img.i");
			var angle = (panImg.data('rotAngle')) || 0;
			angle -= 90;
			if(angle < 360){angle = angle+360};
			panImg.css({'transform' : 'rotate(' + angle + 'deg)'});
			panImg.data('rotAngle', angle);
			panInit(e);
		});