From f9e5a05f7c4daf87aa8cc52ce67781af34991637 Mon Sep 17 00:00:00 2001 From: Wong Hoi Sing Edison Date: Fri, 26 Nov 2021 23:41:35 +0800 Subject: [PATCH] Rework Legacy PNG Icons with Font Awesome SVG Existing implementation handle icon with PNG, with manual positioning with CSS background image. This PR rework icons with Font Awesome SVG: - Locally venor Font Awesome v5.15.4 `expand-solid.svg` and `compress-solid.svg` - Rework styling with SCSS - Fix accessibility (see #110) - Test with Leaflet v1.7.1 - Update demo with above changes Fix #98 Fix #102 Fix #103 Fix #110 Fix #114 Signed-off-by: Wong Hoi Sing Edison --- .gitignore | 1 + Makefile | 16 +-- compress-solid.svg | 1 + dist/Leaflet.fullscreen.min.css | 23 +++++ dist/Leaflet.fullscreen.min.css.map | 1 + dist/Leaflet.fullscreen.min.js | 2 +- dist/fullscreen.png | Bin 299 -> 0 bytes dist/fullscreen@2x.png | Bin 420 -> 0 bytes dist/leaflet.fullscreen.css | 40 -------- expand-solid.svg | 1 + fullscreen.svg | 147 ---------------------------- index.html | 57 ++++++----- package.json | 5 +- {dist => src}/Leaflet.fullscreen.js | 9 +- src/Leaflet.fullscreen.scss | 28 ++++++ 15 files changed, 105 insertions(+), 226 deletions(-) create mode 100644 compress-solid.svg create mode 100644 dist/Leaflet.fullscreen.min.css create mode 100644 dist/Leaflet.fullscreen.min.css.map delete mode 100644 dist/fullscreen.png delete mode 100644 dist/fullscreen@2x.png delete mode 100644 dist/leaflet.fullscreen.css create mode 100644 expand-solid.svg delete mode 100644 fullscreen.svg rename {dist => src}/Leaflet.fullscreen.js (96%) create mode 100644 src/Leaflet.fullscreen.scss diff --git a/.gitignore b/.gitignore index 3c3629e..d5f19d8 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +package-lock.json diff --git a/Makefile b/Makefile index c0ec3a7..4ac32d0 100644 --- a/Makefile +++ b/Makefile @@ -1,14 +1,16 @@ # See the README for installation instructions. UGLIFY = node_modules/.bin/uglifyjs +SASS = node_modules/.bin/sass -all: \ - $(shell npm install) \ - dist/Leaflet.fullscreen.min.js \ +.PHONY: all +all: dist/Leaflet.fullscreen.min.js dist/Leaflet.fullscreen.min.css +.PHONY: clean clean: - rm -f dist/Leaflet.fullscreen.min.js + rm -f dist/Leaflet.fullscreen.min.js dist/Leaflet.fullscreen.min.css -dist/Leaflet.fullscreen.min.js: dist/Leaflet.fullscreen.js - $(UGLIFY) dist/Leaflet.fullscreen.js > dist/Leaflet.fullscreen.min.js +dist/Leaflet.fullscreen.min.js: + $(UGLIFY) src/Leaflet.fullscreen.js > dist/Leaflet.fullscreen.min.js -.PHONY: clean +dist/Leaflet.fullscreen.min.css: + $(SASS) src/Leaflet.fullscreen.scss dist/Leaflet.fullscreen.min.css 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/Leaflet.fullscreen.min.css b/dist/Leaflet.fullscreen.min.css new file mode 100644 index 0000000..8299240 --- /dev/null +++ b/dist/Leaflet.fullscreen.min.css @@ -0,0 +1,23 @@ +.leaflet-control-fullscreen a { + cursor: pointer; +} +.leaflet-control-fullscreen a .leaflet-control-fullscreen-icon { + display: inline-block; + width: 16px; + height: 16px; + margin: 7px; + background-color: black; + -webkit-mask-image: url("../expand-solid.svg"); + mask-image: url("../expand-solid.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} + +.leaflet-fullscreen-on a .leaflet-control-fullscreen-icon { + -webkit-mask-image: url("../compress-solid.svg"); + mask-image: url("../compress-solid.svg"); +} + +/*# sourceMappingURL=Leaflet.fullscreen.min.css.map */ diff --git a/dist/Leaflet.fullscreen.min.css.map b/dist/Leaflet.fullscreen.min.css.map new file mode 100644 index 0000000..1f4b8d7 --- /dev/null +++ b/dist/Leaflet.fullscreen.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/Leaflet.fullscreen.scss"],"names":[],"mappings":"AACC;EACO;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;EACA","file":"Leaflet.fullscreen.min.css"} \ No newline at end of file diff --git a/dist/Leaflet.fullscreen.min.js b/dist/Leaflet.fullscreen.min.js index fc2eb24..5141c93 100644 --- a/dist/Leaflet.fullscreen.min.js +++ b/dist/Leaflet.fullscreen.min.js @@ -1 +1 @@ -(function(factory){var L;if(typeof define==="function"&&define.amd){define(["leaflet"],factory)}else if(typeof module!=="undefined"){L=require("leaflet");module.exports=factory(L)}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}factory(window.L)}})(function(L){L.Control.Fullscreen=L.Control.extend({options:{position:"topleft",title:{"false":"View Fullscreen","true":"Exit Fullscreen"}},onAdd:function(map){var container=L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){L.DomEvent.stopPropagation(e);L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}this.invalidateSize()},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});L.Map.mergeOptions({fullscreenControl:false});L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=L.bind(this._onFullscreenChange,this);this.whenReady(function(){L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});L.control.fullscreen=function(options){return new L.Control.Fullscreen(options)}}); \ No newline at end of file +(function(factory){if(typeof define==="function"&&define.amd){define(["leaflet"],factory)}else if(typeof module!=="undefined"){module.exports=factory(require("leaflet"))}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}factory(window.L)}})(function(L){L.Control.Fullscreen=L.Control.extend({options:{position:"topleft",title:{false:"View fullscreen",true:"Exit fullscreen"}},onAdd:function(map){var container=L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this.link.setAttribute("role","button");this.icon=L.DomUtil.create("span","leaflet-control-fullscreen-icon",this.link);this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){L.DomEvent.stopPropagation(e);L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}this.invalidateSize()},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});L.Map.mergeOptions({fullscreenControl:false});L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=L.bind(this._onFullscreenChange,this);this.whenReady(function(){L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});L.control.fullscreen=function(options){return new L.Control.Fullscreen(options)}}); diff --git a/dist/fullscreen.png b/dist/fullscreen.png deleted file mode 100644 index 7384960aeb574240163a493a151fead20dc0611a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^Qb26N!3HF!ywT_YQY^(zo*^7SP{WY|;&T>wL>2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4qJR0?c|VVoi#&H*nzk><=VJ7@HQU1Z_V>w`?l#_f{i*8umu)iddGww* z>3vx+!GG1OU;EWUx0X~hxG2rq^x@2zjVbjX|F1ZfDD>^!i>Z@e=`4{;y0s+g&91Al p8%^ww-;@2hQY^(zo*^7SP{WbZ0pxQQctjR6 zFi5WlVa7PAi84Sz$r9IylHmNblJdl&REF~Ma=pyF?Be9af>gcyqV(DCY@`?%7!^HT z978JRyuIbf*JL2VaIybmlC5OHCOKa72`f5-7F_i-&hI_2WYN~Lh-s=-MZdrEUP%*} z>sZ2eQPQPc-_~GhNruVq5#|tNZ+oU=grd-gUnYNV=qh zG%mj`vhJT;R_We%ZYLD1nqTlNvfit=eS6-uth>4XAS32xbAe3_xBA?>tb=y5HuU z3;cF;mu&UdD*aXc7p&&~tXS+n%cpkMnWxvJ=SIz`_Afs_0puwZOTbRIWrz!l?^k@w RJ`)(C44$rjF6*2UngH1ls0082 diff --git a/dist/leaflet.fullscreen.css b/dist/leaflet.fullscreen.css deleted file mode 100644 index f489257..0000000 --- a/dist/leaflet.fullscreen.css +++ /dev/null @@ -1,40 +0,0 @@ -.leaflet-control-fullscreen a { - background:#fff url(fullscreen.png) no-repeat 0 0; - background-size:26px 52px; - } - .leaflet-touch .leaflet-control-fullscreen a { - background-position: 2px 2px; - } - .leaflet-fullscreen-on .leaflet-control-fullscreen a { - background-position:0 -26px; - } - .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a { - background-position: 2px -24px; - } - -/* Do not combine these two rules; IE will break. */ -.leaflet-container:-webkit-full-screen { - width:100%!important; - height:100%!important; - } -.leaflet-container.leaflet-fullscreen-on { - width:100%!important; - height:100%!important; - } - -.leaflet-pseudo-fullscreen { - position:fixed!important; - width:100%!important; - height:100%!important; - top:0!important; - left:0!important; - z-index:99999; - } - -@media - (-webkit-min-device-pixel-ratio:2), - (min-resolution:192dpi) { - .leaflet-control-fullscreen a { - background-image:url(fullscreen@2x.png); - } - } 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/fullscreen.svg b/fullscreen.svg deleted file mode 100644 index e4dbb2a..0000000 --- a/fullscreen.svg +++ /dev/null @@ -1,147 +0,0 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - diff --git a/index.html b/index.html index 5a55412..506da76 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,47 @@ - + Leaflet.fullscreen + + + -
-
+
+

Leaflet.fullscreen

A HTML5 fullscreen plugin for Leaflet.

-
-
+
+
-

For usage, check out the project on GitHub.

+

For usage, check out the project on GitHub.

- + + + diff --git a/package.json b/package.json index d319791..d6c83fd 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,9 @@ "client" ], "devDependencies": { - "uglify-js": "2.4.3", - "jshint": "2.3.0" + "jshint": "^2.13.1", + "sass": "^1.43.5", + "uglify-js": "^3.14.3" }, "author": "John Firebaugh", "license": "ISC", diff --git a/dist/Leaflet.fullscreen.js b/src/Leaflet.fullscreen.js similarity index 96% rename from dist/Leaflet.fullscreen.js rename to src/Leaflet.fullscreen.js index 71e35c9..ffbca3e 100644 --- a/dist/Leaflet.fullscreen.js +++ b/src/Leaflet.fullscreen.js @@ -17,8 +17,8 @@ options: { position: 'topleft', title: { - 'false': 'View Fullscreen', - 'true': 'Exit Fullscreen' + 'false': 'View fullscreen', + 'true': 'Exit fullscreen' } }, @@ -27,6 +27,9 @@ this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container); this.link.href = '#'; + this.link.setAttribute('role', 'button'); + + this.icon = L.DomUtil.create('span', 'leaflet-control-fullscreen-icon', this.link); this._map = map; this._map.on('fullscreenchange', this._toggleTitle, this); @@ -165,4 +168,4 @@ L.control.fullscreen = function (options) { return new L.Control.Fullscreen(options); }; -})); \ No newline at end of file +})); diff --git a/src/Leaflet.fullscreen.scss b/src/Leaflet.fullscreen.scss new file mode 100644 index 0000000..9694070 --- /dev/null +++ b/src/Leaflet.fullscreen.scss @@ -0,0 +1,28 @@ +.leaflet-control-fullscreen { + a { + cursor: pointer; + + .leaflet-control-fullscreen-icon { + display: inline-block; + width: 16px; + height: 16px; + margin: 7px; + background-color: black; + -webkit-mask-image: url('../expand-solid.svg'); + mask-image: url('../expand-solid.svg'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + } + } +} + +.leaflet-fullscreen-on { + a { + .leaflet-control-fullscreen-icon { + -webkit-mask-image: url('../compress-solid.svg'); + mask-image: url('../compress-solid.svg'); + } + } +}