Improved iframe initialization code.

static/css/note.css

@@ -1,6 +1,5 @@
 body {
   padding: 1em;
-  font-size: 90%;
   line-height: 140%;
   font-family: sans-serif;
 }

static/css/style.css

@@ -459,14 +459,12 @@ h1 {
   margin: 0.25em;
 }
 
-#static_notes {
+#notes {
   text-align: left;
   margin: 0em;
-  line-height: 140%;
 }
 
-#static_notes h3 {
+#notes h3 {
-  margin-bottom: 0.5em;
 }
 
 #notes {
@@ -526,11 +524,11 @@ h1 {
 
 .note_frame {
   -moz-border-radius: 5px;
-  margin: 0em;
   padding: 0em;
   overflow: hidden;
   width: 100%;
-  border: 1px solid #999999;
+  border: 2px solid #999999;
+  margin: 0em;
   margin-bottom: 0.75em;
   background-color: #ffffff;
   overflow-x: auto;
@@ -542,18 +540,213 @@ h1 {
 
 .static_note_div {
   -moz-border-radius: 5px;
-  font-size: 90%;
   display: block;
-  margin: 0em;
+  padding: 0.5em 1em 1em 1.5em;
-  padding: 0.5em 1.5em 1em 1.5em;
   font-family: sans-serif;
   overflow: hidden;
-  border: 1px solid #999999;
+  border: 2px solid #999999;
-  margin-bottom: 0.75em;
+  margin: 0em;
+  margin-bottom: 0.95em;
   background-color: #ffffff;
   overflow-x: auto;
 }
 
+.static_note_contents {
+  font-size: 90%;
+  line-height: 140%;
+}
+
+.static_note_contents h3 {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid #dddddd;
+  margin-bottom: 0.75em;
+}
+
+.static_note_contents a[target ^= "_new"] {
+  background: url(/static/images/web_icon_tiny.png) right center no-repeat;
+  padding-right: 13px;
+}
+
+.diff a[target ^= "_new"] {
+  background-image: none;
+  padding-right: 0;
+}
+
+.static_note_contents a:hover {
+  color: #ff6600;
+}
+
+.static_note_contents ins {
+  color: green;
+  text-decoration: none;
+}
+
+.static_note_contents ins a {
+  color: green;
+}
+
+.static_note_contents del {
+  color: red;
+  text-decoration: line-through;
+}
+
+.static_note_contents del a {
+  color: red;
+}
+
+.static_note_contents img {
+  border-width: 0;
+}
+
+.static_note_contents .left_justified {
+  float: left;
+  margin: 0.5em 1.5em 0.5em 0;
+}
+
+.static_note_contents .center_justified {
+  display: block;
+  margin: 0.5em auto 0.5em auto;
+  text-align: center;
+}
+
+.static_note_contents .right_justified {
+  float: right;
+  margin: 0.5em 0 0.5em 1.5em;
+}
+
+.static_note_contents hr {
+  border: 0;
+  color: #000000;
+  background-color: #000000;
+  height: 1px;
+}
+
+.static_note_contents .button {
+  border-style: outset;
+  border-width: 0px;
+  background-color: #d0e0f0;
+  font-size: 100%;
+  outline: none;
+  cursor: pointer;
+}
+
+.static_note_contents .button:hover {
+  background-color: #ffcc66;
+}
+
+.static_note_contents .revoke_button {
+  margin-left: 0.5em;
+  font-size: 90%;
+}
+
+.static_note_contents .admin_button {
+  margin-left: 0.5em;
+  font-size: 90%;
+}
+
+.static_note_contents .remove_user_button {
+  margin-left: 0.5em;
+  font-size: 90%;
+}
+
+.static_note_contents .text_field {
+  margin-top: 0.25em;
+  padding: 0.25em;
+  border: #999999 1px solid;
+}
+
+.static_note_contents .textarea_field {
+  margin-top: 0.25em;
+  padding: 0.25em;
+  border: #999999 1px solid;
+  overflow: auto;
+}
+
+.static_note_contents ul {
+  list-style-type: disc;
+}
+
+.static_note_contents ul li {
+  margin-top: 0.5em;
+}
+
+.static_note_contents ol li {
+  margin-top: 0.5em;
+}
+
+.center_text {
+  text-align: center;
+}
+
+.static_note_contents .small_text {
+  padding-top: 0.5em;
+  font-size: 90%;
+}
+
+.static_note_contents .radio_label {
+  color: #000000;
+}
+
+.static_note_contents .radio_label:hover {
+  color: #ff6600;
+  cursor: pointer;
+}
+
+.static_note_contents .indented {
+  margin-left: 1em;
+}
+
+.static_note_contents .radio_table td {
+  padding-right: 1em;
+}
+
+.static_note_contents #import_notebook_table {
+  font-size: 72%;
+  border-collapse: collapse;
+  border: 1px solid #999999;
+}
+
+.static_note_contents #import_notebook_table td {
+  border: 1px solid #999999;
+  padding: 0.5em;
+}
+
+.static_note_contents #import_notebook_table .heading_row {
+  font-weight: bold;
+}
+
+.static_note_contents .thumbnail_left {
+  float: left;
+  margin: 0.5em;
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+  border: 1px solid #999999;
+}
+
+.static_note_contents .thumbnail_right {
+  float: right;
+  margin: 0.5em;
+  margin-left: 1em;
+  margin-bottom: 0.5em;
+  border: 1px solid #999999;
+}
+
+.static_note_contents .search_results_summary {
+  font-size: 82%;
+}
+
+.static_note_contents .invite_status {
+  font-size: 82%;
+}
+
+.static_note_contents .invite_link_area {
+  font-size: 82%;
+  margin-left: 2em;
+}
+
+.static_note_contents .user_status {
+  font-size: 82%;
+}
 .page_title a {
   color: #000000;
   text-decoration: none;

static/js/Editor.js

@@ -130,7 +130,7 @@ Editor.prototype.create_iframe = function ( position_after ) {
   this.iframe = createDOM( "iframe",
     {
       // iframe src attribute is necessary in IE 6 on an HTTPS site to prevent annoying warnings
-      "src": "/static/html/blank_note.html",
+      //"src": "/static/html/blank_note.html",
       "frameBorder": "0",
       "scrolling": "no",
       "id": iframe_id,
@@ -143,13 +143,14 @@ Editor.prototype.create_iframe = function ( position_after ) {
   this.iframe.editor = this;
 
   // if there is already a static note open for this editor, replace its div with the new iframe
-  if ( getElement( "static_note_" + this.id ) ) {
+  var static_note = getElement( "static_note_" + this.id );
+  if ( static_note ) {
     var note_holder = getElement( "note_holder_" + this.id );
     this.note_controls = getElement( "note_controls_" + this.id );
     this.connect_note_controls( true );
     this.div = null;
 
-    replaceChildNodes( note_holder, this.iframe );
+    swapDOM( static_note, this.iframe );
     insertSiblingNodesBefore( this.iframe, this.note_controls );
   } else {
     this.create_note_controls();
@@ -166,7 +167,7 @@ Editor.prototype.create_iframe = function ( position_after ) {
       appendChildNodes( "notes", note_holder );
   }
 
-  connect( this.iframe, "onload", function ( event ) { self.init_document(); } );
+  this.init_document();
 }
 
 Editor.prototype.create_div = function ( position_after ) {
@@ -186,7 +187,6 @@ Editor.prototype.create_div = function ( position_after ) {
   this.div = createDOM(
     "div", { "class": "static_note_div", "id": "static_note_" + this.id }
   );
-
   this.div.innerHTML = this.initial_text;
 
   // if there is already an iframe open for this editor, replace it with the new static note div
@@ -228,7 +228,7 @@ Editor.prototype.init_document = function () {
     if ( this.edit_enabled )
       this.document.designMode = "On";    
 
-    setTimeout( function () { self.finish_init(); }, 1 );
+//    setTimeout( function () { self.finish_init(); }, 1 );
   } else { // browsers such as IE
     this.document = this.iframe.contentWindow.document;
 
@@ -237,8 +237,17 @@ Editor.prototype.init_document = function () {
       // work-around for IE bug: reget the document after designMode is turned on
       this.document = this.iframe.contentWindow.document;
     }
-    setTimeout( function () { self.finish_init(); }, 100 );
+//    setTimeout( function () { self.finish_init(); }, 100 );
   }
+
+  this.document.open();
+  this.document.write(
+    '<html><head><style>html { padding: 0.5em 1em 1em 1em; } body { font-size: 90%; line-height: 140%; font-family: sans-serif; } h3 { padding-bottom: 0.25em; border-bottom: 1px solid #dddddd; margin-bottom: 0.75em; } a[target ^= "_new"] { background: url(/static/images/web_icon_tiny.png) right center no-repeat; padding-right: 13px; } .diff a[target ^= "_new"] { background-image: none; padding-right: 0; } a:hover { color: #ff6600; } ins { color: green; text-decoration: none; } ins a { color: green; } del { color: red; text-decoration: line-through; } del a { color: red; } img { border-width: 0; } .left_justified { float: left; margin: 0.5em 1.5em 0.5em 0; } .center_justified { display: block; margin: 0.5em auto 0.5em auto; text-align: center; } .right_justified { float: right; margin: 0.5em 0 0.5em 1.5em; } hr { border: 0; color: #000000; background-color: #000000; height: 1px; } .button { border-style: outset; border-width: 0px; background-color: #d0e0f0; font-size: 100%; outline: none; cursor: pointer; } .button:hover { background-color: #ffcc66; } .revoke_button { margin-left: 0.5em; font-size: 90%; } .admin_button { margin-left: 0.5em; font-size: 90%; } .remove_user_button { margin-left: 0.5em; font-size: 90%; } .text_field { margin-top: 0.25em; padding: 0.25em; border: #999999 1px solid; } .textarea_field { margin-top: 0.25em; padding: 0.25em; border: #999999 1px solid; overflow: auto; } ul { list-style-type: disc; } ul li { margin-top: 0.5em; } ol li { margin-top: 0.5em; } .center_text { text-align: center; } .small_text { padding-top: 0.5em; font-size: 90%; } .radio_label { color: #000000; } .radio_label:hover { color: #ff6600; cursor: pointer; } .indented { margin-left: 1em; } .radio_table td { padding-right: 1em; } #import_notebook_table { font-size: 72%; border-collapse: collapse; border: 1px solid #999999; } #import_notebook_table td { border: 1px solid #999999; padding: 0.5em; } #import_notebook_table .heading_row { font-weight: bold; } .thumbnail_left { float: left; margin: 0.5em; margin-right: 1em; margin-bottom: 0.5em; border: 1px solid #999999; } .thumbnail_right { float: right; margin: 0.5em; margin-left: 1em; margin-bottom: 0.5em; border: 1px solid #999999; } .search_results_summary { font-size: 82%; } .invite_status { font-size: 82%; } .invite_link_area { font-size: 82%; margin-left: 2em; } .user_status { font-size: 82%; }</style>' +
+    '<meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta></head><body>' + this.initial_text + '</body></html>'
+  );
+  this.document.close();
+
+  this.finish_init();
 }
 
 // third and final stage of construction, invoked by init_document(). do not call directly
@@ -252,7 +261,7 @@ Editor.prototype.finish_init = function () {
       this.initial_text += "&#8203;";
   }
 
-  this.insert_html( this.initial_text );
+//  this.insert_html( this.initial_text );
 
   // since the browser may subtly tweak the html when it's inserted, save off the browser's version
   // of the html here. this yields more accurate comparisons within the dirty() method
@@ -639,6 +648,8 @@ Editor.prototype.scrape_title = function () {
 }
 
 Editor.prototype.focused = function () {
+  this.create_iframe();
+
   signal( this, "focused", this );
 }
 
@@ -830,7 +841,7 @@ Editor.prototype.state_enabled = function ( state_name, node_names ) {
 Editor.prototype.current_node_names = function () {
   var node_names = new Array();
 
-  if ( !this.edit_enabled || !this.iframe )
+  if ( !this.edit_enabled || !this.iframe || !this.document )
     return node_names;
 
   // to determine whether the specified state is enabled, see whether the current selection is

static/js/Wiki.js

@@ -825,6 +825,8 @@ Wiki.prototype.create_editor = function ( id, note_text, deleted_from_id, revisi
 
   var startup = this.startup_notes[ id ];
   var editor = new Editor( id, this.notebook.object_id, note_text, deleted_from_id, revision, read_write, startup, highlight, focus, position_after, dirty, own_notes_only );
+  if ( focus )
+    this.editor_focused( editor );
 
   if ( this.notebook.read_write ) {
     connect( editor, "state_changed", this, "editor_state_changed" );

view/Main_page.py

@@ -89,7 +89,10 @@ class Main_page( Page ):
       return [ Div(
         note_controls( note, read_write ),
         Div(
-          note.contents,
+          Span(
+            note.contents,
+            class_ = u"static_note_contents",
+          ),
           id = "static_note_%s" % note.object_id,
           class_ = u"static_note_div",
         ),