diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d5f19d8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/Control.FullScreen.css b/Control.FullScreen.css
deleted file mode 100644
index 96ae11e..0000000
--- a/Control.FullScreen.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.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; }
\ No newline at end of file
diff --git a/README.md b/README.md
index 44085bb..b873829 100644
--- 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 ''
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
new file mode 100644
index 0000000..c34dbc6
--- /dev/null
+++ b/compress-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/dist/Control.FullScreen.min.css b/dist/Control.FullScreen.min.css
new file mode 100644
index 0000000..97ae70f
--- /dev/null
+++ b/dist/Control.FullScreen.min.css
@@ -0,0 +1 @@
+a.leaflet-control-zoom-fullscreen{cursor:pointer}a.leaflet-control-zoom-fullscreen .fullscreen-icon{display:inline-block;width:16px;height:16px;margin:7px;background-color:#000;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}a.leaflet-control-zoom-fullscreen .fullscreen-icon-expand{-webkit-mask-image:url("../expand-solid.svg");mask-image:url("../expand-solid.svg")}a.leaflet-control-zoom-fullscreen .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}.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}/*# sourceMappingURL=Control.FullScreen.min.css.map */
diff --git a/dist/Control.FullScreen.min.css.map b/dist/Control.FullScreen.min.css.map
new file mode 100644
index 0000000..fc48ecf
--- /dev/null
+++ b/dist/Control.FullScreen.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/Control.FullScreen.scss"],"names":[],"mappings":"AAAA,kCACI,eAEA,mDACI,qBACA,WACA,YACA,WACA,sBACA,8BACA,sBACA,6BACA,qBAGJ,0DACI,8CACA,sCAGJ,4DACI,gDACA,wCAKP,uCACC,sBACA,uBACA,cAGD,kCACC,sBACA,uBACA,cAGD,+BACC,sBACA,uBACA,cAGD,8BACC,sBACA,uBACA,cAIF,2BACC,0BACA,sBACA,uBACA,mBACA,oBACA","file":"Control.FullScreen.min.css"}
\ No newline at end of file
diff --git a/dist/Control.FullScreen.min.js b/dist/Control.FullScreen.min.js
new file mode 100644
index 0000000..cb81aa2
--- /dev/null
+++ b/dist/Control.FullScreen.min.js
@@ -0,0 +1 @@
+(function(root,factory){if(typeof define==="function"&&define.amd){define("screenfull",factory)}else if(typeof module==="object"&&module.exports){module.exports.screenfull=factory()}else{root.screenfull=factory()}})(this,function(){"use strict";var document=typeof window!=="undefined"&&typeof window.document!=="undefined"?window.document:{};var fn=function(){var val;var fnMap=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]];var i=0;var l=fnMap.length;var ret={};for(;i':''}},_handleFullscreenChange:function(){var map=this._map;map.invalidateSize();if(!this._screenfull.isFullscreen&&!map._exitFired){map.fire("exitFullscreen");map._exitFired=true;map._isFullscreen=false}}});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)};return{leaflet:leaflet,screenfull:screenfull}});
diff --git a/expand-solid.svg b/expand-solid.svg
new file mode 100644
index 0000000..c5eb790
--- /dev/null
+++ b/expand-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icon-fullscreen-2x.png b/icon-fullscreen-2x.png
deleted file mode 100644
index efc0dfb..0000000
Binary files a/icon-fullscreen-2x.png and /dev/null differ
diff --git a/icon-fullscreen.png b/icon-fullscreen.png
deleted file mode 100644
index 8ee2447..0000000
Binary files a/icon-fullscreen.png and /dev/null differ
diff --git a/index.html b/index.html
index 84626ce..58cd839 100644
--- a/index.html
+++ b/index.html
@@ -4,19 +4,12 @@
Leaflet.Control.FullScreen Demo
+
+
+
-
-
diff --git a/package.json b/package.json
index 77367a0..772ab2a 100644
--- 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 b/src/Control.FullScreen.js
similarity index 95%
rename from Control.FullScreen.js
rename to src/Control.FullScreen.js
index ed8c85d..18ca6cd 100644
--- a/Control.FullScreen.js
+++ b/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 = '';
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 ? '': '';
+ }
+ },
+
_handleFullscreenChange: function () {
var map = this._map;
map.invalidateSize();
diff --git a/src/Control.FullScreen.scss b/src/Control.FullScreen.scss
new file mode 100644
index 0000000..fce5a47
--- /dev/null
+++ 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;
+}