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/README.md b/README.md index 525ff65..168a397 100644 --- a/README.md +++ b/README.md @@ -59,11 +59,17 @@ Leaflet.fullscreen is [available through the Mapbox Plugin CDN](https://www.mapb ### Building - npm install && make - -__ProTip__ You may want to install `watch` so you can run `watch make` -without needing to execute make on every change. + npm install + npm run test + npm run uglifyjs + npm run sass ### Supported Leaflet Versions Leaflet 1.0 and later is supported. Earlier versions may work, but are not tested. + +### License + +ISC + +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/Leaflet.fullscreen.min.css b/dist/Leaflet.fullscreen.min.css new file mode 100644 index 0000000..bd7811a --- /dev/null +++ b/dist/Leaflet.fullscreen.min.css @@ -0,0 +1 @@ +.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:#000;-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")}.leaflet-pseudo-fullscreen{position:fixed !important;width:100% !important;height:100% !important;top:0 !important;left:0 !important;z-index:99999}/*# 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..fe6839a --- /dev/null +++ b/dist/Leaflet.fullscreen.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/Leaflet.fullscreen.scss"],"names":[],"mappings":"AACC,8BACO,eAEA,+DACI,qBACA,WACA,YACA,WACA,sBACA,8CACA,sCACA,8BACA,sBACA,6BACA,qBAOJ,0DACI,gDACA,wCAKZ,2BACI,0BACA,sBACA,uBACA,iBACA,kBACA","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 7384960..0000000 Binary files a/dist/fullscreen.png and /dev/null differ diff --git a/dist/fullscreen@2x.png b/dist/fullscreen@2x.png deleted file mode 100644 index 9fca7f8..0000000 Binary files a/dist/fullscreen@2x.png and /dev/null differ 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..5531d3f 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "example": "examples" }, "scripts": { - "test": "jshint dist/Leaflet.fullscreen.js" + "test": "jshint src/Leaflet.fullscreen.js", + "uglifyjs": "uglifyjs src/Leaflet.fullscreen.js > dist/Leaflet.fullscreen.min.js", + "sass": "sass -s compressed src/Leaflet.fullscreen.scss dist/Leaflet.fullscreen.min.css" }, "repository": { "type": "git", @@ -20,8 +22,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..6744b91 --- /dev/null +++ b/src/Leaflet.fullscreen.scss @@ -0,0 +1,37 @@ +.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'); + } + } +} + +.leaflet-pseudo-fullscreen { + position: fixed !important; + width: 100% !important; + height: 100% !important; + top: 0 !important; + left: 0 !important; + z-index: 99999; +}