From 730829022ebcd8b9a3cc617b64cb6985b8e68830 Mon Sep 17 00:00:00 2001 From: Simon Conseil Date: Sun, 7 Mar 2021 21:50:12 -0300 Subject: [PATCH] Add fullscreen plugin --- .../static/leaflet/Control.FullScreen.css | 8 + .../static/leaflet/Control.FullScreen.js | 335 ++++++++++++++++++ sigal/themes/default/static/leaflet/README | 3 + .../static/leaflet/icon-fullscreen-2x.png | Bin 0 -> 215 bytes .../static/leaflet/icon-fullscreen.png | Bin 0 -> 139 bytes .../default/templates/default_head.html | 2 + sigal/themes/default/templates/map.html | 7 +- 7 files changed, 354 insertions(+), 1 deletion(-) create mode 100644 sigal/themes/default/static/leaflet/Control.FullScreen.css create mode 100644 sigal/themes/default/static/leaflet/Control.FullScreen.js create mode 100644 sigal/themes/default/static/leaflet/README create mode 100644 sigal/themes/default/static/leaflet/icon-fullscreen-2x.png create mode 100644 sigal/themes/default/static/leaflet/icon-fullscreen.png diff --git a/sigal/themes/default/static/leaflet/Control.FullScreen.css b/sigal/themes/default/static/leaflet/Control.FullScreen.css new file mode 100644 index 0000000..96ae11e --- /dev/null +++ b/sigal/themes/default/static/leaflet/Control.FullScreen.css @@ -0,0 +1,8 @@ +.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/sigal/themes/default/static/leaflet/Control.FullScreen.js b/sigal/themes/default/static/leaflet/Control.FullScreen.js new file mode 100644 index 0000000..7365e0d --- /dev/null +++ b/sigal/themes/default/static/leaflet/Control.FullScreen.js @@ -0,0 +1,335 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['leaflet'], factory); + } else if (typeof modules === 'object' && module.exports) { + // define a Common JS module that relies on 'leaflet' + module.exports = factory(require('leaflet')); + } else { + // Assume Leaflet is loaded into global object L already + factory(L); + } +}(this, function (L) { + 'use strict'; + + L.Control.FullScreen = L.Control.extend({ + options: { + position: 'topleft', + title: 'Full Screen', + titleCancel: 'Exit Full Screen', + forceSeparateButton: false, + forcePseudoFullscreen: false, + fullscreenElement: false + }, + + onAdd: function (map) { + var className = 'leaflet-control-zoom-fullscreen', container, content = ''; + + if (map.zoomControl && !this.options.forceSeparateButton) { + container = map.zoomControl._container; + } else { + container = L.DomUtil.create('div', 'leaflet-bar'); + } + + 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); + + return container; + }, + + onRemove: function (map) { + L.DomEvent + .off(this.link, 'click', L.DomEvent.stopPropagation) + .off(this.link, 'click', L.DomEvent.preventDefault) + .off(this.link, 'click', this.toggleFullScreen, this); + + L.DomEvent + .off(this._container, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation) + .off(this._container, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault) + .off(this._container, screenfull.raw.fullscreenchange, this._handleFullscreenChange, this); + + L.DomEvent + .off(document, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation) + .off(document, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault) + .off(document, screenfull.raw.fullscreenchange, this._handleFullscreenChange, this); + }, + + _createButton: function (title, className, content, container, fn, context) { + this.link = L.DomUtil.create('a', className, container); + this.link.href = '#'; + this.link.title = title; + this.link.innerHTML = content; + + this.link.setAttribute('role', 'button'); + this.link.setAttribute('aria-label', title); + + L.DomEvent + .on(this.link, 'click', L.DomEvent.stopPropagation) + .on(this.link, 'click', L.DomEvent.preventDefault) + .on(this.link, 'click', fn, context); + + L.DomEvent + .on(container, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation) + .on(container, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault) + .on(container, screenfull.raw.fullscreenchange, this._handleFullscreenChange, context); + + L.DomEvent + .on(document, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation) + .on(document, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault) + .on(document, screenfull.raw.fullscreenchange, this._handleFullscreenChange, context); + + return this.link; + }, + + toggleFullScreen: function () { + var map = this._map; + map._exitFired = false; + if (map._isFullscreen) { + if (screenfull.isEnabled && !this.options.forcePseudoFullscreen) { + screenfull.exit(); + } else { + L.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen'); + map.invalidateSize(); + } + map.fire('exitFullscreen'); + map._exitFired = true; + map._isFullscreen = false; + } + else { + if (screenfull.isEnabled && !this.options.forcePseudoFullscreen) { + screenfull.request(this.options.fullscreenElement ? this.options.fullscreenElement : map._container); + } else { + L.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen'); + map.invalidateSize(); + } + map.fire('enterFullscreen'); + map._isFullscreen = true; + } + }, + + _toggleTitle: function () { + this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel; + }, + + _handleFullscreenChange: function () { + var map = this._map; + map.invalidateSize(); + if (!screenfull.isFullscreen && !map._exitFired) { + map.fire('exitFullscreen'); + map._exitFired = true; + map._isFullscreen = false; + } + } + }); + + L.Map.include({ + toggleFullscreen: function () { + this.fullscreenControl.toggleFullScreen(); + } + }); + + L.Map.addInitHook(function () { + if (this.options.fullscreenControl) { + this.addControl(L.control.fullscreen(this.options.fullscreenControlOptions)); + } + }); + + L.control.fullscreen = function (options) { + return new L.Control.FullScreen(options); + }; + + return L; +})); + +/*! +* screenfull +* v5.1.0 - 2020-12-24 +* (c) Sindre Sorhus; MIT License +*/ +(function () { + 'use strict'; + + var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {}; + var isCommonjs = typeof module !== 'undefined' && module.exports; + + var fn = (function () { + var val; + + var fnMap = [ + [ + 'requestFullscreen', + 'exitFullscreen', + 'fullscreenElement', + 'fullscreenEnabled', + 'fullscreenchange', + 'fullscreenerror' + ], + // New WebKit + [ + 'webkitRequestFullscreen', + 'webkitExitFullscreen', + 'webkitFullscreenElement', + 'webkitFullscreenEnabled', + 'webkitfullscreenchange', + 'webkitfullscreenerror' + + ], + // Old WebKit + [ + '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 < l; i++) { + val = fnMap[i]; + if (val && val[1] in document) { + for (i = 0; i < val.length; i++) { + ret[fnMap[0][i]] = val[i]; + } + return ret; + } + } + + return false; + })(); + + var eventNameMap = { + change: fn.fullscreenchange, + error: fn.fullscreenerror + }; + + var screenfull = { + request: function (element, options) { + return new Promise(function (resolve, reject) { + var onFullScreenEntered = function () { + this.off('change', onFullScreenEntered); + resolve(); + }.bind(this); + + this.on('change', onFullScreenEntered); + + element = element || document.documentElement; + + var returnPromise = element[fn.requestFullscreen](options); + + if (returnPromise instanceof Promise) { + returnPromise.then(onFullScreenEntered).catch(reject); + } + }.bind(this)); + }, + exit: function () { + return new Promise(function (resolve, reject) { + if (!this.isFullscreen) { + resolve(); + return; + } + + var onFullScreenExit = function () { + this.off('change', onFullScreenExit); + resolve(); + }.bind(this); + + this.on('change', onFullScreenExit); + + var returnPromise = document[fn.exitFullscreen](); + + if (returnPromise instanceof Promise) { + returnPromise.then(onFullScreenExit).catch(reject); + } + }.bind(this)); + }, + toggle: function (element, options) { + return this.isFullscreen ? this.exit() : this.request(element, options); + }, + onchange: function (callback) { + this.on('change', callback); + }, + onerror: function (callback) { + this.on('error', callback); + }, + on: function (event, callback) { + var eventName = eventNameMap[event]; + if (eventName) { + document.addEventListener(eventName, callback, false); + } + }, + off: function (event, callback) { + var eventName = eventNameMap[event]; + if (eventName) { + document.removeEventListener(eventName, callback, false); + } + }, + raw: fn + }; + + if (!fn) { + if (isCommonjs) { + module.exports = {isEnabled: false}; + } else { + window.screenfull = {isEnabled: false}; + } + + return; + } + + Object.defineProperties(screenfull, { + isFullscreen: { + get: function () { + return Boolean(document[fn.fullscreenElement]); + } + }, + element: { + enumerable: true, + get: function () { + return document[fn.fullscreenElement]; + } + }, + isEnabled: { + enumerable: true, + get: function () { + // Coerce to boolean in case of old WebKit + return Boolean(document[fn.fullscreenEnabled]); + } + } + }); + + if (isCommonjs) { + module.exports = screenfull; + } else { + window.screenfull = screenfull; + } +})(); \ No newline at end of file diff --git a/sigal/themes/default/static/leaflet/README b/sigal/themes/default/static/leaflet/README new file mode 100644 index 0000000..52e894e --- /dev/null +++ b/sigal/themes/default/static/leaflet/README @@ -0,0 +1,3 @@ +plugins: +https://github.com/leaflet-extras/leaflet-providers +https://github.com/brunob/leaflet.fullscreen diff --git a/sigal/themes/default/static/leaflet/icon-fullscreen-2x.png b/sigal/themes/default/static/leaflet/icon-fullscreen-2x.png new file mode 100644 index 0000000000000000000000000000000000000000..efc0dfbe88abebfca73e6b8f85d394b18ed50906 GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/sigal/themes/default/static/leaflet/icon-fullscreen.png b/sigal/themes/default/static/leaflet/icon-fullscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..8ee244724d9910a51bbc2d96e9a9ae32f215ba58 GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/sigal/themes/default/templates/default_head.html b/sigal/themes/default/templates/default_head.html index a4856d3..0cb438c 100644 --- a/sigal/themes/default/templates/default_head.html +++ b/sigal/themes/default/templates/default_head.html @@ -1,5 +1,7 @@ {% if settings.show_map and album.show_map %} + + {% endif %} diff --git a/sigal/themes/default/templates/map.html b/sigal/themes/default/templates/map.html index 3165ea0..dd29cae 100644 --- a/sigal/themes/default/templates/map.html +++ b/sigal/themes/default/templates/map.html @@ -1,7 +1,12 @@ {% if settings.show_map and album.show_map %}