Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

server/static/base.js: add transitioner keyboard events, refactor #36

Merged
merged 4 commits into from

2 participants

@eugeneventer

Fullscreen mode can now be navigated with left and right arrows and
paused with spacebar ;). Also refactored transitioner to be more robust.

@eugeneventer eugeneventer server/static/base.js: add transitioner keyboard events
fullscreen mode can now be navigated with left and right arrows and
paused with spacebar ;)
72d34aa
@srynot4sale
Owner

I think this should indicate that it is paused in the UI somewhere - what do you think?

@srynot4sale
Owner

Please can you also change the default dashboard behavior to not page though the plugins?

@srynot4sale
Owner

-5000!

When paused, changes to non-fullscreen

@eugeneventer
Owner

changed the pause key, cos firefox does not want to play nicely with spacebar :(

@srynot4sale srynot4sale merged commit aac4aa9 into catalyst:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 31, 2013
  1. @eugeneventer

    server/static/base.js: add transitioner keyboard events

    eugeneventer authored
    fullscreen mode can now be navigated with left and right arrows and
    paused with spacebar ;)
Commits on Feb 7, 2013
  1. @eugeneventer
  2. @eugeneventer
Commits on Feb 8, 2013
  1. @eugeneventer
This page is out of date. Refresh to see the latest.
View
12 server/static/base.css
@@ -151,12 +151,24 @@ p.footer-left {
float: right;
}
+.footer-center {
+ width: 25%;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+}
+
#view-toggler {
margin-left: 10px;
width: 16px;
height: 16px;
}
+#transitioner-paused-indicator {
+ color: red;
+ font-weight: bold;
+}
+
div.error {
top: 0;
color: red;
View
157 server/static/base.js
@@ -36,67 +36,162 @@ $(document).ready(function() {
updater.start();
- transitioner.start();
-
// add listener for view toggle
$('#view-toggler').click(function (e) {
- $('body').toggleClass('dashboard-fullscreen');
+ if (!$('body').hasClass('dashboard-fullscreen')) {
+ $('body').addClass('dashboard-fullscreen');
- if ($('body').hasClass('dashboard-fullscreen')) {
- transitioner.start();
+ transitioner.init();
+ transitioner.add_listeners();
} else {
transitioner.stop();
- }
+ transitioner.remove_listeners();
- });
+ $('body').removeClass('dashboard-fullscreen');
+ // show all plugins
+ $('div.plugin').show();
+ }
+ });
});
// Plugin transitioner
var transitioner = {
config: {
tdelay: 10000, // delay between transitions
- edelay: 1000, // effect delay
+ edelay: 1000, // effect delay (cannot be more than tdelay!)
interval: 0,
- timeout: 0
+ paused: 0,
+ firstplugin: null,
+ lastplugin: null,
+ toshow: null // plugin to show
},
- start: function() {
+ init: function() {
+ var obj = this;
+
// hide all plugins
$('.dashboard-fullscreen div.plugin').hide();
+
+ obj.config.firstplugin = $('.dashboard-fullscreen div.plugin:first');
+ obj.config.lastplugin = $('.dashboard-fullscreen div.plugin:last');
+
+ // show the first plugin immediately
+ obj.config.firstplugin.fadeIn(obj.config.edelay);
+
+ // start on interval (if more than one plugin)
+ if (obj.config.firstplugin.next().length) {
+ obj.config.toshow = obj.config.firstplugin.next();
+ obj.start();
+ } else {
+ obj.config.toshow = obj.config.firstplugin;
+ }
+ },
+
+ add_listeners: function() {
var obj = this;
- var firstplugin = $('.dashboard-fullscreen div.plugin:first');
- // start transitioning immediately
- obj.plugin_transition(firstplugin);
- // continue on interval
- tinterval = $('div.plugin').length * (obj.config.tdelay + obj.config.edelay);
- this.config.interval = setInterval(function() {obj.plugin_transition(firstplugin);}, tinterval);
+
+ // add keyboard listeners
+ $('body.dashboard-fullscreen').keydown(function (e) {
+ if (e.which == 40) { // down arrow for pause
+ obj.config.paused = !obj.config.paused;
+ if (obj.config.paused) {
+ obj.stop();
+ $('.footer-center').append('<p id="transitioner-paused-indicator">Paused</p>');
+ $('#transitioner-paused-indicator').effect("pulsate", { times:77 }, 77777);
+ } else {
+ $('#transitioner-paused-indicator').remove();
+ obj.start();
+ }
+ return false; // prevent repainting that might happen
+ } else {
+ // any other keypress should unpause
+ $('#transitioner-paused-indicator').remove();
+ obj.config.paused = 0;
+ }
+
+ if (e.which == 39) { // rigth arrow
+ // stop transitioner temporarily
+ obj.stop();
+
+ // call transition manually
+ obj.plugin_transition();
+
+ // start transitioner
+ obj.start();
+ } else if (e.which == 37) { // left arrow
+ // stop transitioner temporarily
+ obj.stop();
+
+ // call transition manually
+ obj.config.toshow = obj.get_prev();
+ obj.plugin_transition();
+
+ // start transitioner
+ obj.start();
+ }
+ });
},
- plugin_transition: function(plugin) {
- $('.dashboard-fullscreen div.plugin').hide();
+ remove_listeners: function() {
+ $('body.dashboard-fullscreen').off('keydown');
+ },
+
+ // show the current plugin and set next one to show
+ plugin_transition: function() {
var obj = this;
- var nextplugin = plugin.next();
- if (nextplugin.length) {
- plugin.fadeIn(obj.config.edelay);
- obj.config.timeout = setTimeout(function () {
- plugin.fadeOut(obj.config.edelay, function() {obj.plugin_transition(nextplugin)});
- }, obj.config.tdelay);
+ // hide all plugins
+ $('.dashboard-fullscreen div.plugin').hide();
+
+ // show current plugin
+ obj.config.toshow.fadeIn(obj.config.edelay);
+
+ // set next plugin to show
+ obj.config.toshow = obj.get_next();
+ },
+
+ get_next: function() {
+ var next = this.config.toshow.next();
+
+ if (next.length) {
+ return next;
} else {
- plugin.fadeIn(obj.config.edelay);
+ // wrap around :D
+ return this.config.firstplugin;
}
},
- stop: function() {
- // show all plugins
- $('div.plugin').show();
+ get_prev: function() {
+ var prev = this.config.toshow.prev().prev(); // we need to go back 2 as toshow is the next one
- // remove timeout event
- clearTimeout(this.config.timeout);
+ if (prev.length) {
+ return prev;
+ } else if (this.config.toshow == this.config.firstplugin) {
+ // little hack to get wrapping to work
+ return this.config.lastplugin.prev();
+ } else {
+ // wrap around :D
+ return this.config.lastplugin;
+ }
+ },
+
+ stop: function() {
+ var obj = this;
// remove the transitioning interval
- clearInterval(this.config.interval);
+ clearInterval(obj.config.interval);
+ obj.config.interval = 0;
+ },
+
+ start: function() {
+ var obj = this;
+
+ // add new interval (if more than one plugin)
+ if (obj.config.firstplugin.next().length) {
+ tinterval = obj.config.tdelay + obj.config.edelay;
+ obj.config.interval = setInterval(function() {obj.plugin_transition();}, obj.config.tdelay);
+ }
}
}
View
6 server/static/jquery-ui-1.10.0.custom.min.js
6 additions, 0 deletions not shown
View
4 server/templates/index.html
@@ -9,7 +9,7 @@
var base_url = '{{ url }}';
</script>
</head>
- <body class="dashboard-fullscreen">
+ <body>
<a href="https://github.com/catalyst/websockets-dashboard"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
@@ -26,9 +26,11 @@
<p class="footer-right">
You can open this dashboard locally at <a href="{{ url }}">{{ url }}</a>
</p>
+ <div class="footer-center"></div>
</div>
<script src="{{ static_url("jquery-1.7.2.min.js") }}" type="text/javascript"></script>
+ <script src="{{ static_url("jquery-ui-1.10.0.custom.min.js") }}" type="text/javascript"></script>
<script src="{{ static_url("d3.v2.min.js") }}" type="text/javascript"></script>
<script src="{{ static_url("base.js") }}" type="text/javascript"></script>
{{ plugin_clients() }}
Something went wrong with that request. Please try again.