From e3211364be279dc4b4ae5c0bf5adb73bb1c9299e Mon Sep 17 00:00:00 2001 From: Wong Hoi Sing Edison Date: Mon, 29 Nov 2021 22:43:21 +0800 Subject: [PATCH] Rework PNG Icon with SVG and SCSS Existing implementation using `icon-fullscreen.png` and `icon-fullscreen-2x.png` for different screen (e.g. iOS with retina display). Moreover, we don't have any toggle effect for the icon status. This PR rework the icon with: * Locally vendor Font Awesome v5.15.4 `compress-solid.svg` and `expand-solid.svg` * Add default content for icon * Add toggle status for icon * Rework style with SCSS * Create minified version JS and CSS * Simplify demo and README.md with above changes Some style reuse from: https://github.com/domoritz/leaflet-locatecontrol/pull/296 Online demo: https://drustack.github.io/brunob-leaflet.fullscreen/ Fix #87 Signed-off-by: Wong Hoi Sing Edison --- .gitignore | 2 + Control.FullScreen.css | 8 --- README.md | 10 ++- compress-solid.svg | 1 + dist/Control.FullScreen.min.css | 1 + dist/Control.FullScreen.min.css.map | 1 + dist/Control.FullScreen.min.js | 1 + expand-solid.svg | 1 + icon-fullscreen-2x.png | Bin 215 -> 0 bytes icon-fullscreen.png | Bin 139 -> 0 bytes index.html | 13 +--- package.json | 9 ++- .../Control.FullScreen.js | 13 +++- src/Control.FullScreen.scss | 60 ++++++++++++++++++ 14 files changed, 96 insertions(+), 24 deletions(-) create mode 100644 .gitignore delete mode 100644 Control.FullScreen.css create mode 100644 compress-solid.svg create mode 100644 dist/Control.FullScreen.min.css create mode 100644 dist/Control.FullScreen.min.css.map create mode 100644 dist/Control.FullScreen.min.js create mode 100644 expand-solid.svg delete mode 100644 icon-fullscreen-2x.png delete mode 100644 icon-fullscreen.png rename Control.FullScreen.js => src/Control.FullScreen.js (95%) create mode 100644 src/Control.FullScreen.scss 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 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/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; +}