Revamp printer mechanism

index.htm

@@ -100,7 +100,8 @@ By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
     <option value="sample.readsector">Read Sector File</option>
   </select>
 
-  <input type="button" id="btn_capture" value="Echo to &quot;Printer&quot;" title="Pops up a &quot;printer&quot; window and echoes all output there, so you can copy/paste">
+  <input type="button" id="show_paper" value="Show output" title="Echo all output to a &quot;print-out&quot;, so you can copy/paste">
+  <input type="button" id="hide_paper" value="Hide output" title="Hide the &quot;print-out&quot;">
 
   <!-- Source code editor inserted here -->
   <div id="editorframe"></div>
@@ -125,6 +126,8 @@ By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
   <li><a target="_blank" href="http://navahogunleg.net/blog/my-projects/ng-basic/">NG-BASIC for Javascript</a> Navaho Gunleg's interpreter
 </ul>
 
+<div id="paper"></div>
+
 <!-- CodeMirror syntax highlighting - this is optional -->
 <script src="../CodeMirror/lib/codemirror.js"></script>
 <link rel="stylesheet" href="../CodeMirror/lib/codemirror.css">

index.js

@@ -158,13 +158,16 @@ window.onload = function () {
   $('#btn_load').disabled = (window.localStorage.getItem("save_program") === null);
 
   // Add a "printer" on demand
-  addEvent($('#btn_capture'), 'click', function () {
+  var printer = null;
-    $('#btn_capture').disabled = true;
+  var paper = $('#paper');
-    var printer = new Printer(tty);
+  addEvent($('#show_paper'), 'click', function () {
-
+    window.getClassList(document.body).add('printout');
-    printer.onclose = function () {
+    printer = new Printer(tty, paper);
-      $('#btn_capture').disabled = false;
+  });
-    };
+  addEvent($('#hide_paper'), 'click', function () {
+    window.getClassList(document.body).remove('printout');
+    printer.close();
+    printer = null;
   });
 
 

printer.js

@@ -17,24 +17,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-function Printer(tty) {
+function Printer(tty, paper) {
-
-  // For closures
-  var self = this;
-
-  // Create new window and document
-  var w = window.open('about:blank', '_blank', 'width=500,height=400,status=0,location=0,menubar=0,toolbar=0');
-  var body = w.document.getElementsByTagName('body')[0];
-  body.style.fontFamily = 'Courier, Monospace';
-  body.style.backgroundColor = '#ffffff';
-  body.style.backgroundImage = "url('http://calormen.com/Star_Trek/ASCII/lpt.jpg')";
-  body.style.color = '#000000';
-  body.style.paddingLeft = '50px';
-
-  var paper = w.document.createElement('div');
-  paper.style.whiteSpace = 'pre';
-  body.appendChild(paper);
-
   var tty_writeChar = tty.writeChar;
   tty.writeChar = function(c) {
 
@@ -75,21 +58,21 @@ function Printer(tty) {
 
       case 10: // (LF) line feed
       case 13: // (CR) return
-        paper.appendChild(w.document.createTextNode('\n'));
+        paper.appendChild(document.createTextNode('\n'));
         break;
 
       default:
-        paper.appendChild(w.document.createTextNode(c));
+        paper.appendChild(document.createTextNode(c));
         break;
     }
 
-    paper.parentElement.scrollTop = paper.parentElement.scrollHeight;
+    if ('normalize' in paper) {
+      paper.normalize();
+    }
+    paper.scrollTop = paper.scrollHeight;
   };
 
-  w.onunload = function() {
+  this.close = function() {
-    if (self.onclose) {
-      self.onclose();
-    }
     tty.writeChar = tty_writeChar;
   };
 }

styles.css

@@ -7,6 +7,34 @@ a:hover { text-decoration: underline; }
 body { background-color: #EEEACD; color: black; }
 h1, h2, h3, p, ul { margin-bottom: 0; margin-top: 0; }
 
+/* "Paper" (for copying output) */
+#paper {
+  display: none;
+  margin: 0;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 560px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  font-family: Courier, Monospace;
+  background-color: #ffffff;
+  background-image: url('lpt.jpg');
+  background-repeat: repeat-y;
+  background-attachment: local;
+  color: #000000;
+  padding-left: 50px;
+  white-space: pre;
+  box-shadow: inset 0 5px 10px black;
+}
+
+body.printout #paper { display: block; }
+#show_paper { display: inline-block; }
+#hide_paper { display: none; }
+body.printout #show_paper { display: none; }
+body.printout #hide_paper { display: inline-block; }
 
 /* Apple II Screen */
 .frame   {width: 560px; height: 384px; border-style: ridge; border-width: 10px; border-color: gray; padding: 10px; background-color: #202020; }