imgViewer2-rails 1.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e54354db6de17ffc21443d2bf2b7ff8dcd6d05b7
+  data.tar.gz: f14a502111ee8b177f93db26f0df0ff1dd2a3032
+SHA512:
+  metadata.gz: 6fc82488afc230471a34d0b25320b65030aa9e0d4e0d7b050773ab4d3e6d24e4002f05318405dbe603c1e0255d2eb3a022c62b1e4418c8e64bd5139cfcac1062
+  data.tar.gz: e94c7f1941139d4d483be60af1ddff9601bdb4955b860d7c674bde826d695b8e03cee7a6d5e92c7c163f6e6df2ebb53e38a3ee594835f96f7e43bbbcc44a0055

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2017 Wayne Mogg (https://github.com/waynegm)
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+imgViewer2-Rails [![Gem Version][version-badge]][rubygems]
+===================
+
+[imgViewer2](https://github.com/waynegm/imgViewer2), Extensible and responsive jQuery plugin to zoom and pan images based on the Leaflet mapping library rails wrap.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'imgViewer2-rails'
+
+And then execute:
+
+    $ bundle
+
+## How to use
+
+Add to your JavaScript manifest file (application.js):
+
+```js
+//= require leaflet
+//= require imgViewer2
+```
+
+Add to your application-wide CSS file (application.css):
+
+```css
+= require leaflet
+```
+
+Visit [official doc](https://github.com/waynegm/imgViewer2#documentation)
+
+[version-badge]: https://badge.fury.io/rb/imgViewer2-rails.svg
+[rubygems]: https://rubygems.org/gems/imgViewer2-rails

data/lib/imgViewer2-rails.rb

@@ -0,0 +1,11 @@
+require 'imgViewer2-rails/version'
+require 'leaflet-rails'
+
+module Jquery
+  module ImgViewer2
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/lib/imgViewer2-rails/version.rb

@@ -0,0 +1,5 @@
+module Jquery
+  module ImgViewer2
+    VERSION = '1.1.0'.freeze
+  end
+end

data/vendor/assets/javascripts/imgViewer2.js

@@ -0,0 +1,500 @@
+/*
+ * imgViewer2
+ * 
+ *
+ * Copyright (c) 2013 Wayne Mogg
+ * Licensed under the MIT license.
+ */
+
+
+
+var waitForFinalEvent = (function () {
+	var timers = {};
+	return function (callback, ms, uniqueId) {
+		if (!uniqueId) {
+			uniqueId = "Don't call this twice without a uniqueId";
+		}
+		if (timers[uniqueId]) {
+			clearTimeout (timers[uniqueId]);
+		}
+		timers[uniqueId] = setTimeout(callback, ms);
+	};
+})();
+/*
+ *	imgViewer2 plugin starts here
+ */
+;(function($) {
+	$.widget("wgm.imgViewer2", {
+		options: {
+			zoomStep: 0.5,
+			zoomMax: undefined,
+			zoomable: true,
+			dragable: true,
+			onClick: $.noop,
+			onReady: $.noop
+		},
+		
+		_create: function() {
+			var self = this;
+			if (!$(this.element).is("img")) {
+                var elem = this.element.children()[0];
+                if (!$(elem).is("img")) {
+                    $.error('imgviewer plugin can only be applied to img elements');
+                } else {
+                    self.img = self.element.children()[0];
+                }
+            } else {
+                self.img = self.element[0];
+			}
+//		the original img element
+			var $img = $(self.img);
+/*
+ *		a copy of the original image to be positioned over it and manipulated to
+ *		provide zoom and pan
+ */
+			self.view = $("<div class='viewport' />").uniqueId().appendTo("body");
+			var $view = $(self.view);
+			self.map  = {};
+			self.bounds = {};
+//		a flag used to check the target image has loaded
+			self.ready = false;
+			self.resize = false;
+			$img.one("load",function() {
+//			get and some geometry information about the image
+				self.ready = true;
+				var	width = $img.width(),
+					height = $img.height(),
+					offset = $img.offset();
+//			cache the image padding information
+					self.offsetPadding = {
+							top: parseInt($img.css('padding-top'),10),
+							left: parseInt($img.css('padding-left'),10),
+							right: parseInt($img.css('padding-right'),10),
+							bottom: parseInt($img.css('padding-bottom'),10)
+					};
+/*
+ *			cache the image margin/border size information
+ *			because of IE8 limitations left and right borders are assumed to be the same width 
+ *			and likewise top and bottom borders
+ */
+					self.offsetBorder = {
+							x: Math.round(($img.outerWidth()-$img.innerWidth())/2),
+							y: Math.round(($img.outerHeight()-$img.innerHeight())/2)
+					};
+/*
+ *			define the css style for the view container using absolute positioning to
+ *			put it directly over the original image
+ */
+					var vTop = offset.top + self.offsetBorder.y + self.offsetPadding.top,
+						vLeft = offset.left + self.offsetBorder.x + self.offsetPadding.left;
+
+					$view.css({
+								position: "absolute",
+								overflow: "hidden",
+								top: vTop+"px",
+								left: vLeft+"px",
+								width: width+"px",
+								height: height+"px"
+					});
+//			add the leaflet map
+					self.bounds = L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth));
+					self.map = L.map($view.attr('id'), {crs:L.CRS.Simple,
+														minZoom: -10,
+														trackresize: false,
+														maxBoundsViscosity: 1.0,
+														attributionControl: false,
+														inertia: false,
+														zoomSnap: 0,
+														wheelPxPerZoomLevel: Math.round(36/self.options.zoomStep),
+														zoomDelta: self.options.zoomStep
+					});
+					self.zimg = L.imageOverlay(self.img.src, self.bounds).addTo(self.map);
+					self.map.options.minZoom = self.map.getBoundsZoom(self.bounds,false);
+					self.map.fitBounds(self.bounds);
+					self.bounds = self.map.getBounds();
+					self.map.setMaxBounds(self.bounds);
+					if (self.options.zoomMax !== null) {
+						var lzoom = self.leafletZoom(self.options.zoomMax);
+						if (lzoom < self.map.getZoom()) {
+							self.map.setZoom(lzoom);
+						}
+						self.map.options.maxZoom = lzoom;
+					}
+					if (!self.options.dragable) {
+						self.map.dragging.disable();
+					}
+					if (!self.options.zoomable) {
+						self.map.zoomControl.disable();
+						self.map.boxZoom.disable();
+						self.map.touchZoom.disable();
+						self.map.doubleClickZoom.disable();
+						self.map.scrollWheelZoom.disable();
+					}
+					self.map.on('click', function(ev) {
+						if (self.options.onClick !== null) {
+							self.options.onClick.call(self, ev.originalEvent, self.eventToImg(ev));
+						}
+					});
+					self.map.on('zoomend', function() {
+						if (self.options.zoomMax >= 1 && this.getZoom() > this.options.zoomMax) {
+							this.setZoom(this.options.zoomMax);
+						}
+						if (!self.resize) {
+							self.bounds = self.map.getBounds();
+						}
+					});
+					self.map.on('moveend', function() {
+						if (!self.resize) {
+							self.bounds = self.map.getBounds();
+						}
+					});
+					self.map.on('resize', function() {
+						self.map.options.minZoom = -10;
+						self.map.fitBounds(self.bounds,{animate:false});
+						self.map.options.minZoom = self.map.getBoundsZoom(L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth)),true);
+						self.map.options.maxZoom = self.leafletZoom(self.options.zoomMax);
+						waitForFinalEvent(function(){
+							self.resize = false;
+							self._view_resize();
+							self.map.options.minZoom = -10;
+							self.map.fitBounds(self.bounds,{animate:false});
+							self.map.options.minZoom = self.map.getBoundsZoom(L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth)),true);
+							self.map.options.maxZoom = self.leafletZoom(self.options.zoomMax);
+						}, 300, $img[0].id);
+					});
+					self.options.onReady.call(self);
+			}).each(function() {
+				if (this.complete) { $(this).trigger("load"); }
+			});
+/*
+/*
+ *		Window resize handler
+ */
+			$(window).resize(function() {
+				if (self.ready) {
+					self.resize = true;
+					self._view_resize();
+					self.map.invalidateSize({animate: false});
+				}
+			});
+		},
+/*
+ *	View resize - the aim is to keep the view centered on the same location in the original image
+ */
+		_view_resize: function() {
+			if (this.ready) {
+				var $view = $(this.view),
+					$img = $(this.img),
+					width = $img.width(),
+					height = $img.height(),
+					offset = $img.offset(),
+					vTop = Math.round(offset.top + this.offsetBorder.y + this.offsetPadding.top),
+					vLeft = Math.round(offset.left + this.offsetBorder.x + this.offsetPadding.left);
+				$view.css({
+							top: vTop+"px",
+							left: vLeft+"px",
+							width: width+"px",
+							height: height+"px"
+				});
+			}
+		},
+/*
+ *	Remove the plugin
+ */  
+		destroy: function() {
+			$(window).unbind("resize");
+			this.map.remove();
+			$(this.view).remove();
+			$.Widget.prototype.destroy.call(this);
+		},
+  
+		_setOption: function(key, value) {
+			switch(key) {
+				case 'zoomStep':
+					if (parseFloat(value) <= 0 ||  isNaN(parseFloat(value))) {
+						return;
+					}
+					break;
+				case 'zoomMax':
+					if (parseFloat(value) < 1 || isNaN(parseFloat(value))) {
+						return;
+					}
+					break;
+			}
+			var version = $.ui.version.split('.');
+			if (version[0] > 1 || version[1] > 8) {
+				this._super(key, value);
+			} else {
+				$.Widget.prototype._setOption.apply(this, arguments);
+			}
+			switch(key) {
+				case 'zoomStep':
+					if (this.ready) {
+						this.map.options.zoomDelta = this.options.zoomStep;
+						this.map.options.wheelPxPerZoomLevel = Math.round(60/this.options.zoomStep);
+					}
+					break;
+				case 'zoomMax':
+					if (this.ready) {
+						lzoom = this.leafletZoom(this.options.zoomMax);
+						if (lzoom < this.map.getZoom()) {
+							this.map.setZoom(lzoom);
+						}
+						this.map.options.maxZoom = lzoom;
+						this.map.fire('zoomend');
+					}
+					break;
+				case 'zoomable':
+					if (this.options.zoomable) {
+						this.map.zoomControl.enable();
+						this.map.boxZoom.enable();
+						this.map.touchZoom.enable();
+						this.map.doubleClickZoom.enable();
+						this.map.scrollWheelZoom.enable();
+					} else {
+						this.map.zoomControl.disable();
+						this.map.boxZoom.disable();
+						this.map.touchZoom.disable();
+						this.map.doubleClickZoom.disable();
+						this.map.scrollWheelZoom.disable();
+					}
+					break;
+				case 'dragable':
+					if (this.options.dragable) {
+						this.map.dragging.enable();
+					} else {
+						this.map.dragging.disable();
+					}
+					break;
+			}
+		},
+/*
+ *	Test if a relative image coordinate is visible in the current view
+ */
+		isVisible: function(relx, rely) {
+			var view = this.getView();
+			if (view) {
+				return (relx >= view.left && relx <= view.right && rely >= view.top && rely <= view.bottom);
+			} else {
+				return false;
+			}
+		},
+/*
+ *	Convert a user supplied zoom to a Leaflet zoom
+*/
+		leafletZoom: function(zoom) {
+			if (this.ready && zoom !== undefined) {
+				var img = this.img,
+					map = this.map,
+					lzoom = map.getZoom() || 0,
+					size = map.getSize(),
+					width = img.naturalWidth,
+					height = img.naturalHeight,
+					nw = L.latLng(height/zoom,width/zoom),
+					se = L.latLng(0,0),
+					boundsSize = map.project(nw, lzoom).subtract(map.project(se, lzoom));
+
+				var scale = Math.min(size.x / boundsSize.x, -size.y / boundsSize.y);
+				return map.getScaleZoom(scale, lzoom);
+			} else {
+				return undefined;
+			}
+		},
+/*
+ *	Get the Leaflet map object
+*/
+		getMap: function() {
+			if (this.ready) {
+				return this.map;
+			}
+			else {
+				return null;
+			}
+		},
+/*
+ *	Get current zoom level
+ *	Returned zoom will always be >=1
+ *	a zoom of 1 means the entire image is just visible within the viewport
+ *	a zoom of 2 means half the image is visible in the viewport etc
+*/
+		getZoom: function() {
+			if (this.ready) {
+				var img = this.img,
+					map = this.map,
+					width = img.naturalWidth,
+					height = img.naturalHeight,
+					constraint = this.options.constraint,
+					bounds = map.getBounds();
+				if (constraint == 'width' ) {
+					return Math.max(1, width/(bounds.getEast()-bounds.getWest()));
+				} else if (constraint == 'height') {
+					return Math.max(1,height/(bounds.getNorth()-bounds.getSouth()));
+				} else {
+					return Math.max(1, (width/(bounds.getEast()-bounds.getWest()) + height/(bounds.getNorth()-bounds.getSouth()))/2);
+				}
+			} else {
+				return null;
+			}
+		},
+/*
+ *	Set the zoom level
+ *	Zoom must be >=1
+ *	a zoom of 1 means the entire image is just visible within the viewport
+ *	a zoom of 2 means half the image is visible in the viewport etc
+*/
+		setZoom: function( zoom ) {
+			if (this.ready) {
+				zoom = Math.max(1, zoom);
+				if (this.options.zoomMax !== null) {
+					zoom = Math.min(zoom, this.options.zoomMax);
+				}
+				var img = this.img,
+					map = this.map,
+					width = img.naturalWidth,
+					height = img.naturalHeight,
+					constraint = this.options.constraint,
+					center = map.getCenter(),
+					bounds = map.getBounds();
+				var hvw, hvh;
+				if (constraint == 'width') {
+					hvw = width/zoom/2;
+					hvh = hvw * (bounds.getNorth()-bounds.getSouth())/(bounds.getEast()-bounds.getWest());
+				} else if (constraint == 'height') {
+					hvh = height/zoom/2;
+					hvw = hvh * (bounds.getEast()-bounds.getWest())/(bounds.getNorth()-bounds.getSouth());
+				} else {
+					hvw = width/zoom/2;
+					hvh = height/zoom/2;
+				}
+						
+				var	east = center.lng + hvw,
+					west = center.lng - hvw,
+					north = center.lat + hvh,
+					south = center.lat - hvh;
+				if (west<0) {
+					east += west;
+					west = 0;
+				} else if (east > width) {
+					west -= east-width;
+					east = width;
+				}
+				if (south<0) {
+					north += south;
+					south = 0;
+				} else if (north > height) {
+					south -= north-height;
+					north = height;
+				}
+				map.fitBounds(L.latLngBounds(L.latLng(south,west), L.latLng(north,east)),{animate:false});
+			}
+			return this;
+		},
+/*
+ *	Get relative image coordinates of current view
+ */
+		getView: function() {
+			if (this.ready) {
+				var img = this.img,
+					width = img.naturalWidth,
+					height = img.naturalHeight,
+					bnds = this.map.getBounds();
+			 return {
+					top: 1 - bnds.getNorth()/height,
+					left: bnds.getWest()/width,
+					bottom: 1 - bnds.getSouth()/height,
+					right: bnds.getEast()/width
+				};
+			} else {
+				return null;
+			}
+		},
+/*
+ *	Pan the view to be centred at the given relative image location
+ */
+		panTo: function(relx, rely) {
+			if ( this.ready && relx >= 0 && relx <= 1 && rely >= 0 && rely <=1 ) {
+				var img = this.img,
+					map = this.map,
+					bounds = this.bounds,
+//					bounds = map.getBounds(),
+					east = bounds.getEast(),
+					west = bounds.getWest(),
+					north = bounds.getNorth(),
+					south = bounds.getSouth(),
+					centerX = (east+west)/2,
+					centerY = (north+south)/2,
+					width = img.naturalWidth,
+					height = img.naturalHeight,
+					newY = (1-rely)*height,
+					newX = relx*width;
+				east += newX - centerX;
+				west += newX - centerX;
+				north += newY - centerY;
+				south += newY - centerY;
+                if (west<0) {
+                    east -= west;
+                    west = 0;
+                }
+                if (east > width) {
+                    west -= east-width;
+                    east = width;
+                }
+                if (south<0) {
+                    north -= south;
+                    south = 0;
+                }
+                if (north > height) {
+                    south -= north-height;
+                    north = height;
+                }
+                map.fitBounds(L.latLngBounds(L.latLng(south,west), L.latLng(north,east)),{animate:false});
+			}
+			return this;
+		},
+/*
+ *	Return the relative image coordinate for a Leaflet event 
+ */		
+		eventToImg: function(ev) {
+			if (this.ready) {
+				var img = this.img,
+					width = img.naturalWidth,
+					height = img.naturalHeight;
+				relx = ev.latlng.lng/width;
+				rely = 1 - ev.latlng.lat/height;
+				if (relx>=0 && relx<=1 && rely>=0 && rely<=1) {
+					return {x: relx, y: rely};
+				} else {
+					return null;
+				}
+			} else {
+				return null;
+			}
+		},
+/*
+ * Convert relative image coordinate to Leaflet LatLng point
+ */
+		relposToLatLng: function(x,y) {
+			if (this.ready) {
+				var img = this.img,
+					width = img.naturalWidth,
+					height = img.naturalHeight;
+				return L.latLng((1-y)*height, x*width);
+			} else {
+				return null;
+			}
+		},
+/*
+ * Convert relative image coordinate to Image pixel
+ */
+		relposToImage: function(pos) {
+			if (this.ready) {
+				var img = this.img,
+					width = img.naturalWidth,
+					height = img.naturalHeight;
+				return {x: Math.round(pos.x*width), y: Math.round(pos.y*height)};
+			} else {
+				return null;
+			}
+		}
+	});
+})(jQuery);

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: imgViewer2-rails
+version: !ruby/object:Gem::Version
+  version: 1.1.0
+platform: ruby
+authors:
+- Wayne Mogg
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-12-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: leaflet-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.2.0
+description: Extensible and responsive jQuery plugin to zoom and pan images based
+  on the Leaflet mapping library.
+email:
+- waynegm@gmail.com
+- eric@managebac.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- lib/imgViewer2-rails.rb
+- lib/imgViewer2-rails/version.rb
+- vendor/assets/javascripts/imgViewer2.js
+homepage: https://github.com/eduvo/imgViewer2-rails
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.14
+signing_key: 
+specification_version: 4
+summary: Extensible and responsive jQuery plugin to zoom and pan images based on the
+  Leaflet mapping library.
+test_files: []