-
Notifications
You must be signed in to change notification settings - Fork 2
/
overlay.htm
110 lines (99 loc) · 4.4 KB
/
overlay.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<!-- this is kind of a test file -->
<!--
things to do
1. type
console.setStyle("log",'color:#F00;font-size:40px;font-family: "Comic Sans MS", cursive, sans-serif;');
console.logWithStyle("So long an thanks for all the fish");
console.setStyle("log","font-size:40px;background-color:#000;color:#FFF;");
console.logWithStyle("I wish you a bit more fun with console.log");
2. press "CTRL+Shift+L" in the browser and download (still yet fake data)
3. eliminate console.log in production with using some flag to change execution; e.g. in TWIGs
{% if app.production %}
<script type="text/javascript">console.error=console.log=function(){};</script>
{% endif%}
or in this file after including log.js
<script type="text/javascript">
var app.production=true;
if (app.production) {
console.error=console.log=function(){};
}
</script>
4. consider coding more stuff yourself (and probably submit it):
add an overlay with console.output for easy access during dev
log history: send it to the server on app error
log history: let user save app infos as a file
play sounds on error
-->
<!-- trying to use this, seeing no fake map app?
run it from a local domain localhost or log.js OR insert your own GMap API key below -->
<head>
<script src="log.js"></script>
<script src="shortcut.js"></script>
<style type="text/css">
div#specialBox {
display: none;
position: fixed;
z-index: 9001; //it's over 9000!
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
top:0;
left:0;
opacity: 0.9;
background: #FFF;
color: #000;
}
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#container { width: 100%; height: 100% }
#nav { z-index: 100; position: absolute;
margin: 10px 0px 0px 200px; background-color: #fff;
border: 1px #000 Solid; padding: 5px; }
#map { width: 100%; height: 100% }
</style>
<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
document.getElementById('loghistory').innerHTML=console.log.history.join("\n");
document.getElementById('errorhistory').innerHTML=console.error.history.join("\n");
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
//use data url, base64 here; not finished
// http://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri
// http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript
// http://html5-demos.appspot.com/static/a.download.html
function changeDataLink(){
var d = document.getElementById("link");
d.href = "data:application/json;base64,abcdefghijklmnopt";
}
</script>
</head>
<body>
<div id="overlay"></div>
<iframe width="100%" height="100%" frameborder="0" style="border:0; height:100%;width:100%;"
src="https://www.google.com/maps/embed/v1/place?q=Binzm%C3%BChlestrasse%2014%2C%20Zurich%2C%20Switzerland&key=AIzaSyCQeyM9rHXvF74o-lIMy9mJkQssDahEZMI"></iframe>
<div id="specialBox">
<p>Debug</p>
<!--data:application/json-->
<a id="link"
href="data:application/octet-stream;base64,Ww0KICB7DQogICAgIl9pZCI6ICI1NDAwMzNmZTZjMzRhNjA3MGE4MmYyZDUiLA0KICAgICJpbmRleCI6IDAsDQogICAgImd1aWQiOiAiOTJmM2JhMmUtMTgxMC00MWEwLWE2Y2ItZmE1OGJhOTE1MTA3IiwNCiAgICAiaXNBY3RpdmUiOiBmYWxzZSwNCiAgICAiYmFsYW5jZSI6ICIkMiwyOTIuODgiLA0KICAgICJwaWN0dXJlIjogImh0dHA6Ly9wbGFjZWhvbGQuaXQvMzJ4MzIiDQp9DQpd"
>Download app log</a>
<p>Log history <textarea id="loghistory"></textarea></p>
<p>Error history <textarea id="errorhistory"></textarea></p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<script>
shortcut.add("Ctrl+Shift+Alt+L",toggleOverlay);
</script>
</body>
</html>