Create a gist now

Instantly share code, notes, and snippets.

Fullscreen Widget for the Dashing dashboard from Shopify

Include in your dashboard like this:

<div data-id="fullscreen" data-view="Fullscreen"></div>

It doesn't even need to be part of the grid, Dashing will happily initialise it anywhere on your page. It is invisible.

Once added to your page, Hit 'f' to enter fullscreen.

class Dashing.Fullscreen extends Dashing.Widget
ready: ->
$(document).keypress =>
if event.charCode is 102
@requestFullscreen()
requestFullscreen: ->
elem = $('body')[0]
if elem.requestFullscreen
elem.requestFullscreen()
else if elem.msRequestFullscreen
elem.msRequestFullscreen()
else if elem.mozRequestFullScreen
elem.mozRequestFullScreen()
else if elem.webkitRequestFullscreen
elem.webkitRequestFullscreen()
.widget-fullscreen {
display: none !important;
}
@jorgemorgado

You can also install this across all your dashboards by adding the widget to the dashboards/layout.erb. Example:

<div id="container">
  <%= yield %>
  <div data-id="fullscreen" data-view="Fullscreen"></div>
</div>
@ghost
ghost commented Mar 31, 2016

Is it possible to have this automatically run when the page does?

I currently use the dashboard reload widget and each time I reload I need to push f again.

Can it run on document.ready or the likes? Thanks.

@villaocho

Any solution to the "automatically run" request?

I have a tablet that i would like to have this function to run automatically due to the lack of keyboard....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment