Fullscreen button does nothing if fullscreen is not allowed

WeAreFairphone / fprsmap

This is a Leaflet map of the local Fairphoners communities

https://map.fairphone.community

GNU General Public License v3.0

10 stars 7 forks source link

Fullscreen button does nothing if fullscreen is not allowed #48

Closed StefanBrand closed 7 years ago

StefanBrand commented 7 years ago

https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled https://github.com/Leaflet/Leaflet.fullscreen

Roboe commented 7 years ago

Problematic issue. fullscreenEnabled is right now a living standard and has virtually no browser support. I can get it to work on my desktop Firefox only after manually enabling full-screen-api.unprefix.enabled at about:config.

Roboe commented 7 years ago

We can check if the map is inside an iframe with window.self !== window.top. This, however, doesn't mean the iframe can't use the Fullscreen API. If true, we can skip enabling the fullscreen plugin as a workaround.

StefanBrand commented 7 years ago

The issue is that Discourse strips out the allowfullscreen="true" part from the iframe. Check it out in the Firefox Inspector.

Am 11.01.2017 um 16:40 schrieb Roberto M.F.:

We can check if the map is inside an |iframe| with |window.self===window.top|. This, however, doesn't mean the iframe can't use the Fullscreen API. If false, we can not enable the fullscreen plugin as a workaround.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WeAreFairphone/fprsmap/issues/48#issuecomment-271901899, or mute the thread https://github.com/notifications/unsubscribe-auth/AIiMgZKcvzEZjYAShZsllKpIzgagadHeks5rRPfsgaJpZM4LgC_8.

Roboe commented 7 years ago

Yes, I know. We can't do anything about that, it's not our content.

StefanBrand commented 7 years ago

I wonder if the fullscreen feature is very useful anyway. It's not widely used (Gxxgle maps doesn't use it, for example).

Am 11.01.2017 um 16:53 schrieb Roberto M.F.:

Yes, I know. We can't do anything about that, it's not our content.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WeAreFairphone/fprsmap/issues/48#issuecomment-271906035, or mute the thread https://github.com/notifications/unsubscribe-auth/AIiMgYixkJ_7GWflvk5cxBmruau2KwpGks5rRPsUgaJpZM4LgC_8.

Roboe commented 7 years ago

Sure, I only see the usefulness of a fullscreen button when the map is embeded, but anything significant, though. Should we remove the fullscreen feature once and for all then?

StefanBrand commented 7 years ago

Can we display a link to the full map on all pages that are not the full map itself?

Am 11.01.2017 um 17:02 schrieb Roberto M.F.:

Sure, I only see the usefulness of a fullscreen button when the map is embeded, but anything significant, though. Should we remove the fullscreen feature once and for all then?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WeAreFairphone/fprsmap/issues/48#issuecomment-271908745, or mute the thread https://github.com/notifications/unsubscribe-auth/AIiMgbaVZADyW159GJ80SAh9pIenv-ykks5rRP0TgaJpZM4LgC_8.

Roboe commented 7 years ago

Yes, with the window.self !== window.top I wrote above. If true, show a label with a link to the full map.

StefanBrand commented 7 years ago

Ah Ok, that's that.

Am 11.01.2017 um 17:17 schrieb Roberto M.F.:

Yes, with the |window.self !== window.top| I wrote above. If |true|, show a label with a link to the full map.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WeAreFairphone/fprsmap/issues/48#issuecomment-271913276, or mute the thread https://github.com/notifications/unsubscribe-auth/AIiMgWTlgGySZDyNeIHctEWQJTnhTI7pks5rRQCigaJpZM4LgC_8.

StefanBrand commented 7 years ago

I need help with this. Using easyButton I tried to make a button with a link. Unfortunately the icon is not centred...

Demo is at https://stefanbrand.github.io/fprsmap/, to test this, copy the following code into an empty .html-file:

<head>
</head>
<body>
<iframe src="https://stefanbrand.github.io/fprsmap/" width="100%" height="400" allowfullscreen="true" frameborder="0">
     <p><a href="https://wearefairphone.github.io/fprsmap/" target="_blank">See the Fairphone Community Map!</a></p>
</iframe>
</body>

Roboe commented 7 years ago

Good idea! Open a PR so I'd be able to push some code, please

P.S.: We can use the same image as the full-screen plugin and copy some of its CSS to fake it, ;)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAA0CAYAAACU7CiIAAAAZElEQVRYhe2VUQ4AEQwFHe0dzc3tP43sWkKemcSPqGmi2pQAekgq0Ro9d47odcBoHKK/cXAwflXnK/Lp3gAALX69zncebRFJysF75BkJhvLlQw7Rp0urvfnFcMc/Wiry6d5wJw/anVRQrHaNVQAAAABJRU5ErkJggg==

StefanBrand commented 7 years ago

I opened the PR. At the moment I can't do any coding...

StefanBrand commented 7 years ago

I have an alternative solution: We could simply add a text link to the attribution control:

http://leafletjs.com/reference-1.0.3.html#control-attribution

It might be more intuitive than a fullscreen button that doesn't do fullscreen, but leads to an external page.