Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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: ->
elem = $('body')[0]
if elem.requestFullscreen
else if elem.msRequestFullscreen
else if elem.mozRequestFullScreen
else if elem.webkitRequestFullscreen
.widget-fullscreen {
display: none !important;

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>

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.

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....

In order to perform the automatic key press you can use a tool called xdotool which is capable to emulate user inputs. The only thing to do for you is to call a script periodically which uses that tool.

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