leaflet.fullscreen - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

Control.FullScreen.js

@@ -1,162 +0,22 @@
-(function (root, factory) {
-	if (typeof define === 'function' && define.amd) {
-		// AMD. Register as an anonymous module.
-		define(['leaflet'], factory);
-	} else if (typeof modules === 'object' && module.exports) {
-		// define a Common JS module that relies on 'leaflet'
-		module.exports = factory(require('leaflet'));
-	} else {
-		// Assume Leaflet is loaded into global object L already
-		factory(L);
-	}
-}(this, function (L) {
-	'use strict';
-
-	L.Control.FullScreen = L.Control.extend({
-		options: {
-			position: 'topleft',
-			title: 'Full Screen',
-			titleCancel: 'Exit Full Screen',
-			forceSeparateButton: false,
-			forcePseudoFullscreen: false,
-			fullscreenElement: false
-		},
-		
-		onAdd: function (map) {
-			var className = 'leaflet-control-zoom-fullscreen', container, content = '';
-			
-			if (map.zoomControl && !this.options.forceSeparateButton) {
-				container = map.zoomControl._container;
-			} else {
-				container = L.DomUtil.create('div', 'leaflet-bar');
-			}
-			
-			if (this.options.content) {
-				content = this.options.content;
-			} else {
-				className += ' fullscreen-icon';
-			}
-
-			this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
-			this._map.fullscreenControl = this;
-
-			this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
-
-			return container;
-		},
-		
-		onRemove: function (map) {
-			L.DomEvent
-				.off(this.link, 'click', L.DomEvent.stopPropagation)
-				.off(this.link, 'click', L.DomEvent.preventDefault)
-				.off(this.link, 'click', this.toggleFullScreen, this);
-			
-			L.DomEvent
-				.off(this._container, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
-				.off(this._container, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
-				.off(this._container, screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
-			
-			L.DomEvent
-				.off(document, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
-				.off(document, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
-				.off(document, screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
-		},
-		
-		_createButton: function (title, className, content, container, fn, context) {
-			this.link = L.DomUtil.create('a', className, container);
-			this.link.href = '#';
-			this.link.title = title;
-			this.link.innerHTML = content;
-
-			this.link.setAttribute('role', 'button');
-			this.link.setAttribute('aria-label', title);
-
-			L.DomEvent
-				.on(this.link, 'click', L.DomEvent.stopPropagation)
-				.on(this.link, 'click', L.DomEvent.preventDefault)
-				.on(this.link, 'click', fn, context);
-			
-			L.DomEvent
-				.on(container, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
-				.on(container, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
-				.on(container, screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
-			
-			L.DomEvent
-				.on(document, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
-				.on(document, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
-				.on(document, screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
-
-			return this.link;
-		},
-		
-		toggleFullScreen: function () {
-			var map = this._map;
-			map._exitFired = false;
-			if (map._isFullscreen) {
-				if (screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
-					screenfull.exit();
-				} else {
-					L.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
-					map.invalidateSize();
-				}
-				map.fire('exitFullscreen');
-				map._exitFired = true;
-				map._isFullscreen = false;
-			}
-			else {
-				if (screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
-					screenfull.request(this.options.fullscreenElement ? this.options.fullscreenElement : map._container);
-				} else {
-					L.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
-					map.invalidateSize();
-				}
-				map.fire('enterFullscreen');
-				map._isFullscreen = true;
-			}
-		},
-		
-		_toggleTitle: function () {
-			this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
-		},
-		
-		_handleFullscreenChange: function () {
-			var map = this._map;
-			map.invalidateSize();
-			if (!screenfull.isFullscreen && !map._exitFired) {
-				map.fire('exitFullscreen');
-				map._exitFired = true;
-				map._isFullscreen = false;
-			}
-		}
-	});
-
-	L.Map.include({
-		toggleFullscreen: function () {
-			this.fullscreenControl.toggleFullScreen();
-		}
-	});
-
-	L.Map.addInitHook(function () {
-		if (this.options.fullscreenControl) {
-			this.addControl(L.control.fullscreen(this.options.fullscreenControlOptions));
-		}
-	});
-
-	L.control.fullscreen = function (options) {
-		return new L.Control.FullScreen(options);
-	};
-
-  return L;
-}));
-
 /*!
-* screenfull
+* Based on package 'screenfull'
 * v5.1.0 - 2020-12-24
 * (c) Sindre Sorhus; MIT License
+* Added definition for using screenfull as an amd module
+* Must be placed before the definition of leaflet.fullscreen
+* as it is required by that
 */
-(function () {
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define('screenfull', factory);
+  } else if (typeof module === 'object' && module.exports) {
+		module.exports.screenfull = factory();
+  } else {
+		// Save 'screenfull' into global window variable
+		root.screenfull = factory();
+	}
+}(this, function () {
 	'use strict';
 
 	var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
-	var isCommonjs = typeof module !== 'undefined' && module.exports;
 
@@ -300,28 +160,162 @@ var fn = (function () {
 	if (!fn) {
-		if (isCommonjs) {
-			module.exports = {isEnabled: false};
-		} else {
-			window.screenfull = {isEnabled: false};
-		}
+		return {isEnabled: false};
+	} else {
+		Object.defineProperties(screenfull, {
+			isFullscreen: {
+				get: function () {
+					return Boolean(document[fn.fullscreenElement]);
+				}
+			},
+			element: {
+				enumerable: true,
+				get: function () {
+					return document[fn.fullscreenElement];
+				}
+			},
+			isEnabled: {
+				enumerable: true,
+				get: function () {
+					// Coerce to boolean in case of old WebKit
+					return Boolean(document[fn.fullscreenEnabled]);
+				}
+			}
+		});
+		return screenfull;
+	}
+}));
 
-		return;
+/*!
+* leaflet.fullscreen
+*/
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+		// define an AMD module that requires 'leaflet' and 'screenfull'
+		// and resolve to an object containing leaflet and screenfull
+		define('leafletFullScreen', ['leaflet', 'screenfull'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+		// define a CommonJS module that requires 'leaflet' and 'screenfull'
+		module.exports = factory(require('leaflet'), require('screenfull'));
+  } else {
+		// Assume 'leaflet' and 'screenfull' are loaded into global variable already
+		factory(root.L, root.screenfull);
 	}
+}(this, function (leaflet, screenfull) {
+	'use strict';
 
-	Object.defineProperties(screenfull, {
-		isFullscreen: {
-			get: function () {
-				return Boolean(document[fn.fullscreenElement]);
+	leaflet.Control.FullScreen = leaflet.Control.extend({
+		options: {
+			position: 'topleft',
+			title: 'Full Screen',
+			titleCancel: 'Exit Full Screen',
+			forceSeparateButton: false,
+			forcePseudoFullscreen: false,
+			fullscreenElement: false
+		},
+
+		_screenfull: screenfull,
+
+		onAdd: function (map) {
+			var className = 'leaflet-control-zoom-fullscreen', container, content = '';
+
+			if (map.zoomControl && !this.options.forceSeparateButton) {
+				container = map.zoomControl._container;
+			} else {
+				container = leaflet.DomUtil.create('div', 'leaflet-bar');
 			}
+
+			if (this.options.content) {
+				content = this.options.content;
+			} else {
+				className += ' fullscreen-icon';
+			}
+
+			this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
+			this._map.fullscreenControl = this;
+
+			this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
+
+			return container;
 		},
-		element: {
-			enumerable: true,
-			get: function () {
-				return document[fn.fullscreenElement];
+
+		onRemove: function () {
+			leaflet.DomEvent
+				.off(this.link, 'click', leaflet.DomEvent.stopPropagation)
+				.off(this.link, 'click', leaflet.DomEvent.preventDefault)
+				.off(this.link, 'click', this.toggleFullScreen, this);
+
+			leaflet.DomEvent
+				.off(this._container, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stopPropagation)
+				.off(this._container, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.preventDefault)
+				.off(this._container, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
+
+			leaflet.DomEvent
+				.off(document, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stopPropagation)
+				.off(document, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.preventDefault)
+				.off(document, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
+		},
+
+		_createButton: function (title, className, content, container, fn, context) {
+			this.link = leaflet.DomUtil.create('a', className, container);
+			this.link.href = '#';
+			this.link.title = title;
+			this.link.innerHTML = content;
+
+			this.link.setAttribute('role', 'button');
+			this.link.setAttribute('aria-label', title);
+
+			leaflet.DomEvent
+				.on(this.link, 'click', leaflet.DomEvent.stopPropagation)
+				.on(this.link, 'click', leaflet.DomEvent.preventDefault)
+				.on(this.link, 'click', fn, context);
+
+			leaflet.DomEvent
+				.on(container, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stopPropagation)
+				.on(container, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.preventDefault)
+				.on(container, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
+
+			leaflet.DomEvent
+				.on(document, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stopPropagation)
+				.on(document, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.preventDefault)
+				.on(document, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
+
+			return this.link;
+		},
+
+		toggleFullScreen: function () {
+			var map = this._map;
+			map._exitFired = false;
+			if (map._isFullscreen) {
+				if (this._screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					this._screenfull.exit();
+				} else {
+					leaflet.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
 			}
+			else {
+				if (this._screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					this._screenfull.request(this.options.fullscreenElement ? this.options.fullscreenElement : map._container);
+				} else {
+					leaflet.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('enterFullscreen');
+				map._isFullscreen = true;
+			}
 		},
-		isEnabled: {
-			enumerable: true,
-			get: function () {
-				// Coerce to boolean in case of old WebKit
-				return Boolean(document[fn.fullscreenEnabled]);
+
+		_toggleTitle: function () {
+			this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
+		},
+
+		_handleFullscreenChange: function () {
+			var map = this._map;
+			map.invalidateSize();
+			if (!this._screenfull.isFullscreen && !map._exitFired) {
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
 			}
@@ -331,7 +325,22 @@ }
 
-	if (isCommonjs) {
-		module.exports = screenfull;
-	} else {
-		window.screenfull = screenfull;
-	}
-})();
+	leaflet.Map.include({
+		toggleFullscreen: function () {
+			this.fullscreenControl.toggleFullScreen();
+		}
+	});
+
+	leaflet.Map.addInitHook(function () {
+		if (this.options.fullscreenControl) {
+			this.addControl(leaflet.control.fullscreen(this.options.fullscreenControlOptions));
+		}
+	});
+
+	leaflet.control.fullscreen = function (options) {
+		return new leaflet.Control.FullScreen(options);
+	};
+
+	// must return an object containing also screenfull to make screenfull
+	// available outside of this package, if used as an amd module,
+	// as webpack cannot handle amd define with moduleid
+	return {leaflet: leaflet, screenfull: screenfull};
+}));

package.json

 {
   "name": "leaflet.fullscreen",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Simple plugin for Leaflet that adds fullscreen button to your maps.",
@@ -20,3 +20,3 @@ "main": "Control.FullScreen.js",
   "devDependencies": {
-    "eslint": "^5.4.0"
+    "eslint": "^8.1.0"
   },
@@ -23,0 +23,0 @@ "author": "b_b",

README.md

@@ -36,5 +36,5 @@ Leaflet.Control.FullScreen
 
-If your map have a zoomControl the fullscreen button will be added at the bottom of this one.
+If your map has a zoomControl the fullscreen button will be added at the bottom of this one.
 
-If your map doesn't have a zoomContron the fullscreen button will be added to topleft corner of the map (same as the zoomcontrol).
+If your map doesn't have a zoomControl the fullscreen button will be added to topleft corner of the map (same as the zoomControl).
 
@@ -48,7 +48,7 @@ If you want to use the plugin on a map embedded in an iframe, don't forget to set `allowfullscreen` attribute on your iframe.
 L.control.fullscreen({
-  position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
+  position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, default topleft
   title: 'Show me the fullscreen !', // change the title of the button, default Full Screen
   titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
   content: null, // change the content of the button, can be HTML, default null
-  forceSeparateButton: true, // force seperate button to detach from zoom buttons, default false
+  forceSeparateButton: true, // force separate button to detach from zoom buttons, default false
   forcePseudoFullscreen: true, // force use of pseudo full screen even if full screen API is available, default false
@@ -78,2 +78,2 @@ fullscreenElement: false // Dom element to render in full screen, false by default, fallback to map._container
 
-Demo : https://brunob.github.com/leaflet.fullscreen/
+Demo : https://brunob.github.io/leaflet.fullscreen/

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18131

increased by5.93%

Lines of code

307

increased by4.07%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes