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 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 @@ - - - - diff --git a/index.html b/index.html index 5a55412..506da76 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,47 @@
- +A HTML5 fullscreen plugin for Leaflet.
-