pack JS, add widgets to code blocks

dip3.css

@@ -1,5 +1,6 @@
 html{background:#fff;color:#000}
-body{font:normal medium 'Gill Sans','Gill Sans MT','Ikarius ADF',Candara,Jara,sans-serif;margin:1.75em;line-height:1.75;word-spacing:0.1em}
+body{margin:1.75em}
+body,.widgets a{font:normal medium 'Gill Sans','Gill Sans MT','Ikarius ADF',Candara,Jara,sans-serif;line-height:1.75;word-spacing:0.1em}
 a{background:transparent;text-decoration:none;border-bottom:1px dotted}
 a:hover{border-bottom:1px solid}
 a:link{color:#1b67c9}
@@ -13,8 +14,10 @@ h1,h2,h3{font-size:medium;clear:both}
 h1{background:papayawhip;color:#000;width:100%;margin:0}
 pre{white-space:pre-wrap;margin:2.154em 0;padding:0 0 0 2.154em;border-left:1px dotted}
 pre,kbd,code,samp{font-family:Consolas,Inconsolata,Monaco,monospace;font-size:medium;line-height:2.154;word-spacing:0}
-pre a{display:inline;padding:0.4375em 0;border:0}
+pre a{padding:0.4375em 0;border:0}
 pre a:hover{border:0}
+.widgets,.widgets a{font-size:small}
+.widgets a{color:#1b67c9;text-decoration:underline;padding:0}
 kbd{font-weight:bold}
 .prompt{color:#667}/*the neighbor of the beast*/
 td pre{margin:0;padding:0;border:0}
@@ -35,7 +38,7 @@ span,tr + tr th:first-child{font-family:'Arial Unicode MS',sans-serif;font-style
 table.simple th{font-family:inherit !important}
 .fr{width:100%;margin:2.154em 0;border:1px dotted}
 .fr h4{margin-top:-1.2em;margin-left:-1em;width:8.5em;border:1px dotted;padding: 3px 3px 3px 13px;background:#fff;color:inherit;position:relative}
-.hover{background:#eee;color:inherit;cursor:default}
+.hover{background:#eee !important;color:inherit !important;cursor:default !important}
 body{counter-reset:h1}
 h1:before{counter-increment:h1;content:counter(h1) ". "}
 h1{counter-reset:h2}

dip3.js

@@ -1,6 +1,73 @@
+function getPreContent(elm) {
+    if (elm.nodeType == 3) {
+        // this string will be concatenated to a "<pre>" and displayed as HTML, so escape brackets
+        return elm.nodeValue.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    if (elm.nodeType != 1) {
+        // don't include comments
+	return '';
+    }
+    if (elm.nodeName.toLowerCase() == 'span') {
+        // don't include callouts
+        return '';
+    }
+    if (elm.className && elm.className == 'widgets') {
+        // don't include the "view as plain text" and "download" widgets
+        return '';
+    }
+    var arChildren = elm.childNodes;
+    var count = arChildren.length;
+    var s = '';
+    for (var i = 0; i < count; i++) {
+        s += getPreContent(arChildren[i]);
+    }
+    return s;
+}
+
+function plainTextOnClick(id) {
+    var elm = document.getElementById(id);
+    if (!elm) { return; }
+    var win = window.open("about:blank", "plaintext", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left=35,top=75");
+    win.document.open();
+    win.document.write('<pre>' + getPreContent(elm));
+    win.document.close();
+}
+
+function toggleBlock(id) {
+    var elm = document.getElementById(id);
+    if (!elm) { return; }
+    var elmToggle = document.getElementById(id + 'toggle');
+    if (!elmToggle) { return; }
+    var elmBlock = document.getElementById(id + 'block');
+    if (!elmBlock) { return; }
+    if (elmToggle.firstChild.nodeValue == 'show') {
+	elmBlock.style.display = 'block';
+	elmToggle.firstChild.nodeValue = 'hide';
+    } else {
+	elmBlock.style.display = 'none';
+	elmToggle.firstChild.nodeValue = 'show';
+    }
+}
+
 window.onload = function() {
-// synchronized highlighting for code blocks with callouts
+// downloadable code samples
 var arPre = document.getElementsByTagName('pre');
+for (var i = arPre.length - 1; i >= 0; i--) {
+    var elmPre = arPre[i];
+    if (elmPre.className == 'screen' || elmPre.firstChild.nodeName.toLowerCase() == 'code') {
+	var id = elmPre.id;
+	if (!id) {
+	    id = "autopre" + i;
+	    elmPre.id = id;
+	}
+	elmPre.innerHTML = '<div id="' + id + 'widgets" class="widgets">[<a id="' + id + 'toggle" class="toggle" href="javascript:toggleBlock(\'' + id + '\')">hide</a>] [<a id="' + id + 'plaintext" href="javascript:plainTextOnClick(\'' + id + '\')">open in new window</a>]</div><div id="' + id + 'block">' + elmPre.innerHTML + '</div>';
+    }
+  
+}
+
+// synchronized highlighting for code blocks with callouts
+// note: must do this after downloadable code samples loop because
+//       setting innerHTML destroys event handlers
 for (var i = arPre.length - 1; i >= 0; i--) {
     var elmPre = arPre[i];
     var arCallout = elmPre.getElementsByTagName('span');
@@ -44,7 +111,7 @@ for (var i = arPre.length - 1; i >= 0; i--) {
 var arTables = document.getElementsByTagName('table');
 for (var i = arTables.length - 1; i >= 0; i--) {
     var elmTable = arTables[i];
-    var olNotes = document.getElementById("skip" + elmTable.id);
+    var olNotes = document.getElementById('skip' + elmTable.id);
     if (!olNotes) { continue; }
     var arNotes = olNotes.getElementsByTagName('li');
     var arTableRows = elmTable.getElementsByTagName('tr');
@@ -72,4 +139,5 @@ for (var i = arTables.length - 1; i >= 0; i--) {
         };
     }
 }
+
 }

dip3.packed.js

@@ -0,0 +1 @@
+function getPreContent(e){if(e.nodeType==3){return e.nodeValue.replace(/</g,"&lt;").replace(/>/g,"&gt;")}if(e.nodeType!=1){return""}if(e.nodeName.toLowerCase()=="span"){return""}if(e.className&&e.className=="widgets"){return""}var d=e.childNodes;var c=d.length;var b="";for(var a=0;a<c;a++){b+=getPreContent(d[a])}return b}function plainTextOnClick(c){var b=document.getElementById(c);if(!b){return}var a=window.open("about:blank","plaintext","toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left=35,top=75");a.document.open();a.document.write("<pre>"+getPreContent(b));a.document.close()}function toggleBlock(d){var c=document.getElementById(d);if(!c){return}var b=document.getElementById(d+"toggle");if(!b){return}var a=document.getElementById(d+"block");if(!a){return}if(b.firstChild.nodeValue=="show"){a.style.display="block";b.firstChild.nodeValue="hide"}else{a.style.display="none";b.firstChild.nodeValue="show"}}window.onload=function(){var b=document.getElementsByTagName("pre");for(var h=b.length-1;h>=0;h--){var k=b[h];if(k.className=="screen"||k.firstChild.nodeName.toLowerCase()=="code"){var a=k.id;if(!a){a="autopre"+h;k.id=a}k.innerHTML='<div id="'+a+'widgets" class="widgets">[<a id="'+a+'toggle" class="toggle" href="javascript:toggleBlock(\''+a+'\')">hide</a>] [<a id="'+a+'plaintext" href="javascript:plainTextOnClick(\''+a+'\')">open in new window</a>]</div><div id="'+a+'block">'+k.innerHTML+"</div>"}}for(var h=b.length-1;h>=0;h--){var k=b[h];var d=k.getElementsByTagName("span");if(d.length==0){continue}var p=k.nextSibling;while(p&&(p.nodeType!=1)){p=p.nextSibling}if(p.nodeName.toLowerCase()!="ol"){continue}var q=p.getElementsByTagName("li");if(q.length!=d.length){alert("Number of callouts != number of callout list items:\n"+k.innerHTML);continue}for(var g=d.length-1;g>=0;g--){var m=d[g].parentNode;var f=q[g];m._li=f;f._div=m;m.onmouseover=function(){this.className="hover";this._li.className="hover"};f.onmouseover=function(){this.className="hover";this._div.className="hover"};m.onmouseout=function(){this.className="";this._li.className=""};f.onmouseout=function(){this.className="";this._div.className=""}}}var e=document.getElementsByTagName("table");for(var h=e.length-1;h>=0;h--){var o=e[h];var n=document.getElementById("skip"+o.id);if(!n){continue}var r=n.getElementsByTagName("li");var c=o.getElementsByTagName("tr");if(r.length==0){continue}for(var g=c.length-1;g>=1;g--){var s=c[g];var l=r[g-1];s._li=l;l._tr=s;s.onmouseover=function(){this.className="hover";this._li.className="hover"};l.onmouseover=function(){this.className="hover";this._tr.className="hover"};s.onmouseout=function(){this.className="";this._li.className=""};l.onmouseout=function(){this.className="";this._tr.className=""}}}};

your-first-python-program.html

@@ -8,7 +8,7 @@
 <style type="text/css">
 body{counter-reset:h1 0}
 </style>
-<script type="text/javascript" src="dip3.js"></script>
+<script type="text/javascript" src="dip3.packed.js"></script>
 </head>
 <body>
 <p class="skip"><a href="#divingin">skip to main content</a>
@@ -22,7 +22,6 @@ body{counter-reset:h1 0}
 <li><a href="#declaringfunctions">Declaring functions</a>
 <li><a href="#readability">Writing readable code</a>
 <ol>
-<li><a href="#whybother">Why bother?</a>
 <li><a href="#docstrings">Docstrings</a>
 <li><a href="#functionannotations">Function annotations</a>
 <li><a href="#styleconventions">Style conventions</a>
@@ -37,7 +36,7 @@ body{counter-reset:h1 0}
 </ol>
 <h2 id="divingin">Diving in</h2>
 <p class="fancy">You know how other books go on and on about programming fundamentals and finally work up to building something useful?  Let's skip all that.  Here is a complete, working Python program.  It probably makes absolutely no sense to you.  Don't worry about that, because you're going to dissect it line by line.  But read through it first and see what, if anything, you can make of it.
-<pre><code>SUFFIXES = {1000: ('KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'),
+<pre><code class="python">SUFFIXES = {1000: ('KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'),
             1024: ('KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB')}
 
 def approximate_size(size, a_kilobyte_is_1024_bytes=True):
@@ -109,8 +108,7 @@ if __name__ == "__main__":
 <tr><th>Strongly typed</th><td>Pascal, Java</td><td>Python, Ruby</td></tr>
 </table>
 <h2 id="readability">Writing readable code</h2>
-<h3 id="whybother">Why bother?</h3>
-<p>FIXME
+<p>I won't bore you with a long finger-wagging speech about the importance of documenting your code.  Just know that code is written once but read many times, and the most important audience for your code is yourself, six months after writing it (i.e. after you've forgotten everything but need to fix something).  Python makes it easy to write readable code, so take advantage of it.  You'll thank me in six months.
 <h3 id="docstrings">Documentation strings</h3>
 <p>You can document a Python function by giving it a documentation string (<code>docstring</code> for short).  In this program, the <code>approximate_size</code> function has a <code>docstring</code>:
 <pre><code>def approximate_size(size, a_kilobyte_is_1024_bytes=True):