Permalink
Browse files

Very crude monkeypatch solution to show last console.log

  • Loading branch information...
1 parent 9d0fe06 commit 0069caee78b33923c098486d001e17d9fc642f29 @gbraad committed Jan 8, 2015
Showing with 169 additions and 25 deletions.
  1. +19 −25 index.html
  2. +9 −0 js/console.js
  3. +35 −0 style/prompt.css
  4. +106 −0 style/views.css
View
@@ -2,32 +2,12 @@
<html>
<head>
<!-- >Prompt - FxOS as a hardware platform -->
- <style>
- body {
- background: black;
- color: white;
- }
-
- .abs-center {
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- }
-
- .icon {
- width: 14rem;
- height: 14rem;
- background-image: url("style/icons/icon_scalable-glow.svg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- </style>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="style/views.css">
+ <link rel="stylesheet" type="text/css" href="style/prompt.css">
+ <script src="js/console.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Stuff from gaia regarding operators and stuff -->
@@ -37,9 +17,23 @@
<!-- Own scripts -->
<!--<script defer src="js/[your-script].js"></script>-->
- </head>
+
+ </head>
<body>
- <div class="abs-center icon"></div>
+
+ <div id="views">
+ <div id="main-panel-wrapper">
+ <div id="prompt-panel" class="active panel" data-panel-id="prompt" role="tabpanel">
+ <div id="prompt-icon" class="abs-center"></div>
+
+ <!-- Currently shows last console.log message -->
+ <div id="prompt-output"></div>
+ </div>
+ <div id="console-panel" class="hidden panel" data-panel-id="console" role="tabpanel">
+ <textarea id="console-editor"></textarea>
+ </div>
+ </div>
+ </div>
</body>
</html>
View
@@ -0,0 +1,9 @@
+var real_console_log = console.log;
+
+// Overwrite the default log behavior to pipe to an output element.
+console.log = function(msg) {
+ var output = document.getElementById("prompt-output");
+ if(output)
+ output.innerHTML = msg;
+ real_console_log(msg);
+}
View
@@ -0,0 +1,35 @@
+html, body {
+ background-color: black;
+ color: white;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ color: white;
+ font-size: 14px;
+ -moz-user-select: none;
+}
+
+.abs-center {
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
+#prompt-icon {
+ width: 14rem;
+ height: 14rem;
+ background-image: url("icons/icon_scalable-glow.svg");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+}
+
+#prompt-output {
+ position: absolute;
+ margin: 4px;
+ bottom: 0px;
+ color: rgb(88, 88, 88);
+}
View
@@ -0,0 +1,106 @@
+/* View */
+#views {
+ background-color: black;
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+#main-panel-wrapper {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.panel {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ left: 0;
+
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ border: 0;
+
+ background-color: black;
+ color: white;
+}
+
+.panel.active {
+ z-index: 1;
+}
+
+.hidden {
+ display: none;
+}
+
+.slide-in-left {
+ animation-duration: 0.5s;
+ animation-name: slide-in-left;
+}
+.slide-in-right {
+ animation-duration: 0.5s;
+ animation-name: slide-in-right;
+}
+.slide-out-left {
+ animation-duration: 0.5s;
+ animation-name: slide-out-left;
+}
+.slide-out-right {
+ animation-duration: 0.5s;
+ animation-name: slide-out-right;
+}
+
+@keyframes slide-in-left {
+ from {
+ transform: translateX(-100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+@keyframes slide-in-right {
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+@keyframes slide-out-left {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+}
+@keyframes slide-out-right {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(100%);
+ }
+}
+
+/* RTL View */
+html[dir=rtl] .slide-in-left {
+ animation-name: slide-in-right;
+}
+html[dir=rtl] .slide-in-right {
+ animation-name: slide-in-left;
+}
+html[dir=rtl] .slide-out-left {
+ animation-name: slide-out-right;
+}
+html[dir=rtl] .slide-out-right {
+ animation-name: slide-out-left;
+}

0 comments on commit 0069cae

Please sign in to comment.