Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

server/static: add transitioner keyboard events #38

Closed
wants to merge 2 commits into from

2 participants

eugeneventer Aaron Barnes
eugeneventer

fullscreen mode can now be navigated with left and right arrows and paused with spacebar ;)
refactored some code, so transitioner should be more robust

Aaron Barnes
Owner

Duplicate of #36

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

Showing 2 unique commits by 1 author.

Jan 31, 2013
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
Feb 07, 2013
eugeneventer eugeneventer server/static: default to blocks view, pause indicator, more refactoring 0601107
This page is out of date. Refresh to see the latest.
12 server/static/base.css
@@ -151,12 +151,24 @@ p.footer-left {
151 151 float: right;
152 152 }
153 153
  154 +.footer-center {
  155 + width: 25%;
  156 + margin-left: auto;
  157 + margin-right: auto;
  158 + text-align: center;
  159 +}
  160 +
154 161 #view-toggler {
155 162 margin-left: 10px;
156 163 width: 16px;
157 164 height: 16px;
158 165 }
159 166
  167 +#transitioner-paused-indicator {
  168 + color: red;
  169 + font-weight: bold;
  170 +}
  171 +
160 172 div.error {
161 173 top: 0;
162 174 color: red;
156 server/static/base.js
@@ -36,67 +36,161 @@ $(document).ready(function() {
36 36
37 37 updater.start();
38 38
39   - transitioner.start();
40   -
41 39 // add listener for view toggle
42 40 $('#view-toggler').click(function (e) {
43   - $('body').toggleClass('dashboard-fullscreen');
  41 + if (!$('body').hasClass('dashboard-fullscreen')) {
  42 + $('body').addClass('dashboard-fullscreen');
44 43
45   - if ($('body').hasClass('dashboard-fullscreen')) {
46   - transitioner.start();
  44 + transitioner.init();
  45 + transitioner.add_listeners();
47 46 } else {
48 47 transitioner.stop();
49   - }
  48 + transitioner.remove_listeners();
50 49
51   - });
  50 + $('body').removeClass('dashboard-fullscreen');
52 51
  52 + // show all plugins
  53 + $('div.plugin').show();
  54 + }
  55 + });
53 56 });
54 57
55 58 // Plugin transitioner
56 59 var transitioner = {
57 60 config: {
58 61 tdelay: 10000, // delay between transitions
59   - edelay: 1000, // effect delay
  62 + edelay: 1000, // effect delay (cannot be more than tdelay!)
60 63 interval: 0,
61   - timeout: 0
  64 + paused: 0,
  65 + firstplugin: null,
  66 + lastplugin: null,
  67 + toshow: null // plugin to show
62 68 },
63 69
64   - start: function() {
  70 + init: function() {
  71 + var obj = this;
  72 +
65 73 // hide all plugins
66 74 $('.dashboard-fullscreen div.plugin').hide();
  75 +
  76 + obj.config.firstplugin = $('.dashboard-fullscreen div.plugin:first');
  77 + obj.config.lastplugin = $('.dashboard-fullscreen div.plugin:last');
  78 +
  79 + // show the first plugin immediately
  80 + obj.config.firstplugin.fadeIn(obj.config.edelay);
  81 +
  82 + // start on interval (if more than one plugin)
  83 + if (obj.config.firstplugin.next().length) {
  84 + obj.config.toshow = obj.config.firstplugin.next();
  85 + obj.start();
  86 + } else {
  87 + obj.config.toshow = obj.config.firstplugin;
  88 + }
  89 + },
  90 +
  91 + add_listeners: function() {
67 92 var obj = this;
68   - var firstplugin = $('.dashboard-fullscreen div.plugin:first');
69   - // start transitioning immediately
70   - obj.plugin_transition(firstplugin);
71   - // continue on interval
72   - tinterval = $('div.plugin').length * (obj.config.tdelay + obj.config.edelay);
73   - this.config.interval = setInterval(function() {obj.plugin_transition(firstplugin);}, tinterval);
  93 +
  94 + // add keyboard listeners
  95 + $('body.dashboard-fullscreen').keydown(function (e) {
  96 + if (e.which == 32) { // spacebar for pause
  97 + obj.config.paused = !obj.config.paused;
  98 + if (obj.config.paused) {
  99 + obj.stop();
  100 + $('.footer-center').append('<p id="transitioner-paused-indicator">Paused</p>');
  101 + $('#transitioner-paused-indicator').effect("pulsate", { times:77 }, 77777);
  102 + } else {
  103 + $('#transitioner-paused-indicator').remove();
  104 + obj.start();
  105 + }
  106 + } else {
  107 + // any other keypress should unpause
  108 + $('#transitioner-paused-indicator').remove();
  109 + obj.config.paused = 0;
  110 + }
  111 +
  112 + if (e.which == 39) { // rigth arrow
  113 + // stop transitioner temporarily
  114 + obj.stop();
  115 +
  116 + // call transition manually
  117 + obj.plugin_transition();
  118 +
  119 + // start transitioner
  120 + obj.start();
  121 + } else if (e.which == 37) { // left arrow
  122 + // stop transitioner temporarily
  123 + obj.stop();
  124 +
  125 + // call transition manually
  126 + obj.config.toshow = obj.get_prev();
  127 + obj.plugin_transition();
  128 +
  129 + // start transitioner
  130 + obj.start();
  131 + }
  132 + });
74 133 },
75 134
76   - plugin_transition: function(plugin) {
77   - $('.dashboard-fullscreen div.plugin').hide();
  135 + remove_listeners: function() {
  136 + $('body.dashboard-fullscreen').off('keydown');
  137 + },
  138 +
  139 + // show the current plugin and set next one to show
  140 + plugin_transition: function() {
78 141 var obj = this;
79   - var nextplugin = plugin.next();
80   - if (nextplugin.length) {
81   - plugin.fadeIn(obj.config.edelay);
82 142
83   - obj.config.timeout = setTimeout(function () {
84   - plugin.fadeOut(obj.config.edelay, function() {obj.plugin_transition(nextplugin)});
85   - }, obj.config.tdelay);
  143 + // hide all plugins
  144 + $('.dashboard-fullscreen div.plugin').hide();
  145 +
  146 + // show current plugin
  147 + obj.config.toshow.fadeIn(obj.config.edelay);
  148 +
  149 + // set next plugin to show
  150 + obj.config.toshow = obj.get_next();
  151 + },
  152 +
  153 + get_next: function() {
  154 + var next = this.config.toshow.next();
  155 +
  156 + if (next.length) {
  157 + return next;
86 158 } else {
87   - plugin.fadeIn(obj.config.edelay);
  159 + // wrap around :D
  160 + return this.config.firstplugin;
88 161 }
89 162 },
90 163
91   - stop: function() {
92   - // show all plugins
93   - $('div.plugin').show();
  164 + get_prev: function() {
  165 + var prev = this.config.toshow.prev().prev(); // we need to go back 2 as toshow is the next one
94 166
95   - // remove timeout event
96   - clearTimeout(this.config.timeout);
  167 + if (prev.length) {
  168 + return prev;
  169 + } else if (this.config.toshow == this.config.firstplugin) {
  170 + // little hack to get wrapping to work
  171 + return this.config.lastplugin.prev();
  172 + } else {
  173 + // wrap around :D
  174 + return this.config.lastplugin;
  175 + }
  176 + },
  177 +
  178 + stop: function() {
  179 + var obj = this;
97 180
98 181 // remove the transitioning interval
99   - clearInterval(this.config.interval);
  182 + clearInterval(obj.config.interval);
  183 + obj.config.interval = 0;
  184 + },
  185 +
  186 + start: function() {
  187 + var obj = this;
  188 +
  189 + // add new interval (if more than one plugin)
  190 + if (obj.config.firstplugin.next().length) {
  191 + tinterval = obj.config.tdelay + obj.config.edelay;
  192 + obj.config.interval = setInterval(function() {obj.plugin_transition();}, obj.config.tdelay);
  193 + }
100 194 }
101 195 }
102 196
6 server/static/jquery-ui-1.10.0.custom.min.js
6 additions, 0 deletions not shown
4 server/templates/index.html
@@ -5,7 +5,7 @@
5 5 <title>Catalyst Dashboard</title>
6 6 <link rel="stylesheet" href="{{ static_url("base.css") }}" type="text/css"/>
7 7 </head>
8   - <body class="dashboard-fullscreen">
  8 + <body>
9 9
10 10 <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>
11 11
@@ -22,9 +22,11 @@
22 22 <p class="footer-right">
23 23 You can open this dashboard locally at <a href="{{ url }}">{{ url }}</a>
24 24 </p>
  25 + <div class="footer-center"></div>
25 26 </div>
26 27
27 28 <script src="{{ static_url("jquery-1.7.2.min.js") }}" type="text/javascript"></script>
  29 + <script src="{{ static_url("jquery-ui-1.10.0.custom.min.js") }}" type="text/javascript"></script>
28 30 <script src="{{ static_url("d3.v2.min.js") }}" type="text/javascript"></script>
29 31 <script src="{{ static_url("base.js") }}" type="text/javascript"></script>
30 32 {{ plugin_clients() }}

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.