Improved iframe initialization code.
This commit is contained in:
Dan Helfman
parent
d058f779ae
commit
087723ebdd
|
|
@ -1,6 +1,5 @@
|
|||
body {
|
||||
padding: 1em;
|
||||
font-size: 90%;
|
||||
line-height: 140%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -459,14 +459,12 @@ h1 {
|
|||
margin: 0.25em;
|
||||
}
|
||||
|
||||
#static_notes {
|
||||
#notes {
|
||||
text-align: left;
|
||||
margin: 0em;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
#static_notes h3 {
|
||||
margin-bottom: 0.5em;
|
||||
#notes h3 {
|
||||
}
|
||||
|
||||
#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 1.5em 1em 1.5em;
|
||||
padding: 0.5em 1em 1em 1.5em;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
border: 1px solid #999999;
|
||||
margin-bottom: 0.75em;
|
||||
border: 2px solid #999999;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 += "​";
|
||||
}
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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" );
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
),
|
||||
|
|
|
|||
Reference in New Issue