From 778057a94fa546a833d26e672ff7562e3e033703 Mon Sep 17 00:00:00 2001 From: brunob Date: Wed, 1 Dec 2021 20:28:57 +0100 Subject: [PATCH 1/2] switch to a SVG icon + toggling icon status use icon from https://github.com/Leaflet/Leaflet.fullscreen optimised with https://jakearchibald.github.io/svgomg/ ref #97 & #87 --- Control.FullScreen.css | 6 ++++-- Control.FullScreen.js | 5 +++-- icon-fullscreen-2x.png | Bin 215 -> 0 bytes icon-fullscreen.png | Bin 139 -> 0 bytes icon-fullscreen.svg | 1 + index.html | 9 +-------- 6 files changed, 9 insertions(+), 12 deletions(-) delete mode 100644 icon-fullscreen-2x.png delete mode 100644 icon-fullscreen.png create mode 100644 icon-fullscreen.svg diff --git a/Control.FullScreen.css b/Control.FullScreen.css index 96ae11e..e07fea5 100644 --- a/Control.FullScreen.css +++ b/Control.FullScreen.css @@ -1,5 +1,7 @@ -.fullscreen-icon { background-image: url(icon-fullscreen.png); } -.leaflet-retina .fullscreen-icon { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; } +.fullscreen-icon { background-image: url(icon-fullscreen.svg); background-size:26px 52px; } +.fullscreen-icon.leaflet-fullscreen-on { background-position:0 -26px; } +.leaflet-touch .fullscreen-icon { background-position: 2px 2px; } +.leaflet-touch .fullscreen-icon.leaflet-fullscreen-on { background-position: 2px -24px; } /* 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; } diff --git a/Control.FullScreen.js b/Control.FullScreen.js index ed8c85d..9525621 100644 --- a/Control.FullScreen.js +++ b/Control.FullScreen.js @@ -231,7 +231,7 @@ 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._toggleState, this); return container; }, @@ -306,8 +306,9 @@ } }, - _toggleTitle: function () { + _toggleState: function () { this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel; + this._map._isFullscreen ? L.DomUtil.removeClass(this.link, 'leaflet-fullscreen-on') : L.DomUtil.addClass(this.link, 'leaflet-fullscreen-on'); }, _handleFullscreenChange: function () { diff --git a/icon-fullscreen-2x.png b/icon-fullscreen-2x.png deleted file mode 100644 index efc0dfbe88abebfca73e6b8f85d394b18ed50906..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 215 zcmV;|04V>7P)O)1TqPTnLVqF#wv#GSWq1n8%slbs`HBHZ?sS2cOdO4)3 zT@^K9Om76kB8$NC<`?WoZbAH}${!OSb@1^=Ie$6%hU*r8f#k2me~dB4%mAHFdkApa RWdi^J002ovPDHLkV1k|JSg8O2 diff --git a/icon-fullscreen.png b/icon-fullscreen.png deleted file mode 100644 index 8ee244724d9910a51bbc2d96e9a9ae32f215ba58..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 139 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI10wkH8TU>!ukf)1dNCji^0x1dB{|7(Vbls@z z&`|W{(@5ewlDVs2scim)WuJNY99-EnlGq#s*%$CIUSKd0XO#Bf;A4>yo5jJ-^3>7K lqDa%H!S~2LIiO4_{0&ssx(O;OXk;vd$@?2>|-4B<27B diff --git a/icon-fullscreen.svg b/icon-fullscreen.svg new file mode 100644 index 0000000..d8ea091 --- /dev/null +++ b/icon-fullscreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 84626ce..a65673d 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,9 @@ Leaflet.Control.FullScreen Demo + From cf4fd07b393213269c8d520cb2a76d17e6cdae39 Mon Sep 17 00:00:00 2001 From: brunob Date: Wed, 1 Dec 2021 20:46:08 +0100 Subject: [PATCH 2/2] a bit of rwd for example page --- README.md | 2 ++ icon-fullscreen.svg | 2 +- index.html | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 44085bb..79e59bd 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Inspired by http://elidupuis.github.com/leaflet.zoomfs/ Use the native javascript fullscreen API with help of https://github.com/sindresorhus/screenfull.js +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) + Released under the MIT License http://opensource.org/licenses/mit-license.php How ? diff --git a/icon-fullscreen.svg b/icon-fullscreen.svg index d8ea091..6107d8c 100644 --- a/icon-fullscreen.svg +++ b/icon-fullscreen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index a65673d..cefee6b 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,11 @@ Leaflet.Control.FullScreen Demo +