brunob · hswong3i · Nov 29, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/Control.FullScreen.css b/Control.FullScreen.css
diff --git a/README.md b/README.md
@@ -47,7 +47,7 @@ L.control.fullscreen({
   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
+  content: null, // change the content of the button, can be HTML, default '<span class="fullscreen-icon fullscreen-icon-expand"></span>'
   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
   fullscreenElement: false // Dom element to render in full screen, false by default, fallback to map._container
@@ -74,3 +74,11 @@ Source code : https://github.com/brunob/leaflet.fullscreen
 Downloads : https://github.com/brunob/leaflet.fullscreen/releases
 
 Demo : https://brunob.github.io/leaflet.fullscreen/
+
+
+LICENSE
+-------
+
+MIT
+
+SVG icons from [Font Awesome v5.15.4](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.15.4): [Creative Commons Attribution 4.0](https://fontawesome.com/license/free)
diff --git a/compress-solid.svg b/compress-solid.svg
diff --git a/dist/Control.FullScreen.min.css b/dist/Control.FullScreen.min.css
diff --git a/dist/Control.FullScreen.min.css.map b/dist/Control.FullScreen.min.css.map
diff --git a/dist/Control.FullScreen.min.js b/dist/Control.FullScreen.min.js
diff --git a/expand-solid.svg b/expand-solid.svg
diff --git a/icon-fullscreen-2x.png b/icon-fullscreen-2x.png
diff --git a/icon-fullscreen.png b/icon-fullscreen.png
diff --git a/index.html b/index.html
@@ -4,19 +4,12 @@
 	<meta charset='utf-8'>
 	<title>Leaflet.Control.FullScreen Demo</title>
 	<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
+	<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
+	<link rel="stylesheet" href="dist/Control.FullScreen.min.css" />
+	<script src="dist/Control.FullScreen.min.js"></script>
 	<style type="text/css">
 		#map { width: 700px; height: 433px; }
-		.fullscreen-icon { background-image: url(icon-fullscreen.png); }
-		.leaflet-retina .fullscreen-icon { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; }
-		/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
-		.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
-		.leaflet-container:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
-		.leaflet-container:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
-		.leaflet-container:fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
-		.leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }
 	</style>
-	<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-	<script src="Control.FullScreen.js"></script>
 </head>
 <body>
 

diff --git a/package.json b/package.json
@@ -4,7 +4,10 @@
   "description": "Simple plugin for Leaflet that adds fullscreen button to your maps.",
   "main": "Control.FullScreen.js",
   "scripts": {
-    "test": "eslint --config .eslintrc Control.FullScreen.js"
+    "test": "eslint --config .eslintrc src/Control.FullScreen.js",
+    "uglifyjs": "uglifyjs src/Control.FullScreen.js > dist/Control.FullScreen.min.js",
+    "sass": "sass -s compressed src/Control.FullScreen.scss dist/Control.FullScreen.min.css",
+    "build": "npm run uglifyjs; npm run sass"
   },
   "repository": {
     "type": "git",
@@ -17,7 +20,9 @@
     "fullscreen"
   ],
   "devDependencies": {
-    "eslint": "^8.1.0"
+    "eslint": "^8.1.0",
+    "sass": "^1.43.5",
+    "uglify-js": "^3.14.3"
   },
   "author": "b_b",
   "license": "MIT License",

diff --git a/Control.FullScreen.js → src/Control.FullScreen.js b/Control.FullScreen.js → src/Control.FullScreen.js
@@ -214,7 +214,9 @@
 		_screenfull: screenfull,
 
 		onAdd: function (map) {
-			var className = 'leaflet-control-zoom-fullscreen', container, content = '';
+			var className = 'leaflet-control-zoom-fullscreen';
+			var container;
+			var content = '<span class="fullscreen-icon fullscreen-icon-expand"></span>';
 
 			if (map.zoomControl && !this.options.forceSeparateButton) {
 				container = map.zoomControl._container;
@@ -224,14 +226,13 @@
 
 			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);
+			this._map.on('enterFullscreen exitFullscreen', this._toggleContent, this);
 
 			return container;
 		},
@@ -310,6 +311,12 @@
 			this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
 		},
 
+		_toggleContent: function () {
+			if (!this.options.content) {
+				this.link.innerHTML = this._map._isFullscreen ? '<span class="fullscreen-icon fullscreen-icon-expand"></span>': '<span class="fullscreen-icon fullscreen-icon-compress"></span>';
+			}
+		},
+
 		_handleFullscreenChange: function () {
 			var map = this._map;
 			map.invalidateSize();

diff --git a/src/Control.FullScreen.scss b/src/Control.FullScreen.scss
@@ -0,0 +1,60 @@
+a.leaflet-control-zoom-fullscreen {
+    cursor: pointer;
+
+    .fullscreen-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin: 7px;
+        background-color: black;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+    }
+
+    .fullscreen-icon-expand {
+        -webkit-mask-image: url('../expand-solid.svg');
+        mask-image: url('../expand-solid.svg');
+    }
+
+    .fullscreen-icon-compress {
+        -webkit-mask-image: url('../compress-solid.svg');
+        mask-image: url('../compress-solid.svg');
+    }
+}
+
+.leaflet-container {
+	&:-webkit-full-screen {
+		width: 100% !important;
+		height: 100% !important;
+		z-index: 99999;
+	}
+
+	&:-ms-fullscreen {
+		width: 100% !important;
+		height: 100% !important;
+		z-index: 99999;
+	}
+
+	&:full-screen {
+		width: 100% !important;
+		height: 100% !important;
+		z-index: 99999;
+	}
+
+	&:fullscreen {
+		width: 100% !important;
+		height: 100% !important;
+		z-index: 99999;
+	}
+}
+
+.leaflet-pseudo-fullscreen {
+	position: fixed !important;
+	width: 100% !important;
+	height: 100% !important;
+	top: 0px !important;
+	left: 0px !important;
+	z-index: 99999;
+}