Created
January 20, 2016 04:01
-
-
Save palesz/f9ac3181f4bbea95d693 to your computer and use it in GitHub Desktop.
Dashboard looper
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Dashboard Looper</title> | |
| <script type="text/javascript"> | |
| var dashboards = [ | |
| { | |
| "title": "Palesz.org", | |
| "url": "http://palesz.org", | |
| "delay": "5" | |
| }, | |
| { | |
| "title": "INDEX", | |
| "url": "http://index.hu", | |
| "delay": "10" | |
| }, | |
| { | |
| "title": "Some PDF", | |
| "url": "http://www.pdf995.com/samples/pdf.pdf", | |
| "delay": "10" | |
| } | |
| ]; | |
| var active = -1; | |
| var state = window.performance.now(); | |
| var autoAdvance = false; | |
| function switchTo(index) { | |
| var d = dashboards[index]; | |
| var dbframe = document.getElementById("dashboard"); | |
| dbframe.src = d.url; | |
| document.getElementById("dashboard-title").innerHTML = "<a href=\"" + d.url + "\" style='color: white; text-decoration: none; text-transform: uppercase;'>[" + (index+1) + "] " + d.title + "</a>"; | |
| } | |
| function move(step, stepper) { | |
| var s = window.performance.now(); | |
| state = s; | |
| active = (active+step+dashboards.length) % dashboards.length; | |
| switchTo(active); | |
| setTimeout(function() { | |
| if (autoAdvance && state == s) { | |
| stepper(); | |
| } | |
| }, dashboards[active].delay * 1000); | |
| } | |
| function next() { | |
| move(1, next); | |
| } | |
| function previous() { | |
| move(-1, previous); | |
| } | |
| function toggleAutoAdvance() { | |
| autoAdvance = !autoAdvance; | |
| document.getElementById("toggle").innerHTML = autoAdvance ? "[STOP]" : "[START]"; | |
| if (autoAdvance) { | |
| setTimeout(next, 1000); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body style="margin: 0; padding: 0; overflow: hidden;"> | |
| <div style="float: left;"><a href="#" onclick="previous();" style="text-decoration: none; color: white;"><< previous</a></div> | |
| <div style="float: right;"> | |
| <a href="#" onclick="toggleAutoAdvance();" style="text-decoration: none; color: white;" id="toggle">[STOP]</a> | |
| <a href="#" onclick="next();" style="text-decoration: none; color: white;">next >></a> | |
| </div> | |
| <div id="dashboard-title" style="text-align: center; height: 25px; background-color: black; color: white;"></div> | |
| <iframe id="dashboard" src="#" style="overflow:hidden;height:calc(100% - 25px);width:100%;border:0px;"></iframe> | |
| <script type="text/javascript"> | |
| toggleAutoAdvance(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment