The transition from a static note div to a design-mode-enabled iframe now appears visually seamless.
This commit is contained in:
parent
d5b0351bb4
commit
7442f46de2
|
@ -552,6 +552,10 @@ h1 {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.focused_note_frame {
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
.static_note_contents {
|
.static_note_contents {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
|
|
|
@ -130,13 +130,13 @@ Editor.prototype.create_iframe = function ( position_after ) {
|
||||||
this.iframe = createDOM( "iframe",
|
this.iframe = createDOM( "iframe",
|
||||||
{
|
{
|
||||||
// iframe src attribute is necessary in IE 6 on an HTTPS site to prevent annoying warnings
|
// iframe src attribute is necessary in IE 6 on an HTTPS site to prevent annoying warnings
|
||||||
//"src": "/static/html/blank_note.html",
|
"src": "about:blank",
|
||||||
"frameBorder": "0",
|
"frameBorder": "0",
|
||||||
"scrolling": "no",
|
"scrolling": "no",
|
||||||
"id": iframe_id,
|
"id": iframe_id,
|
||||||
"name": iframe_id,
|
"name": iframe_id,
|
||||||
"class": "note_frame",
|
"class": "note_frame invisible",
|
||||||
"onresize": function () { setTimeout( function () { self.resize() }, 50 ); }
|
"onresize": function () { setTimeout( function () { self.resize() }, 50 ); },
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
this.iframe.editor = this;
|
this.iframe.editor = this;
|
||||||
|
@ -148,14 +148,33 @@ Editor.prototype.create_iframe = function ( position_after ) {
|
||||||
this.connect_note_controls( true );
|
this.connect_note_controls( true );
|
||||||
|
|
||||||
disconnectAll( this.div );
|
disconnectAll( this.div );
|
||||||
|
addElementClass( static_note, "focused_note_frame" );
|
||||||
|
|
||||||
swapDOM( static_note, this.iframe );
|
var frame_height = elementDimensions( static_note ).h;
|
||||||
|
insertSiblingNodesAfter( static_note, this.iframe );
|
||||||
|
|
||||||
|
// give the invisible iframe the exact same position as the div it will replace
|
||||||
|
setStyle( this.iframe, { "position": "fixed" } );
|
||||||
|
setElementPosition( this.iframe, getElementPosition( static_note ) );
|
||||||
|
|
||||||
|
// give the iframe the note's current contents and then resize it based on the size of the div
|
||||||
|
this.set_iframe_contents( this.contents() );
|
||||||
|
this.resize( frame_height );
|
||||||
|
|
||||||
|
// make the completed iframe visible, and now remove the static div
|
||||||
|
removeElementClass( this.iframe, "invisible" );
|
||||||
|
removeElement( static_note );
|
||||||
|
|
||||||
|
// set the iframe positioning back to standard static positioning and move the note controls
|
||||||
|
setStyle( this.iframe, { "position": "static" } );
|
||||||
insertSiblingNodesBefore( this.iframe, this.note_controls );
|
insertSiblingNodesBefore( this.iframe, this.note_controls );
|
||||||
|
|
||||||
this.init_iframe();
|
// finally, turn on design mode so the iframe is editable
|
||||||
|
this.enable_design_mode();
|
||||||
|
|
||||||
this.div = null;
|
this.div = null;
|
||||||
} else {
|
} else {
|
||||||
|
// TODO: rewrite this portion of the function as above
|
||||||
this.create_note_controls();
|
this.create_note_controls();
|
||||||
this.connect_note_controls();
|
this.connect_note_controls();
|
||||||
|
|
||||||
|
@ -169,12 +188,61 @@ Editor.prototype.create_iframe = function ( position_after ) {
|
||||||
else
|
else
|
||||||
appendChildNodes( "notes", note_holder );
|
appendChildNodes( "notes", note_holder );
|
||||||
|
|
||||||
this.init_iframe();
|
this.set_iframe_contents( this.contents() );
|
||||||
|
this.enable_design_mode();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.finish_init();
|
this.finish_init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Editor.prototype.set_iframe_contents = function ( contents_text ) {
|
||||||
|
if ( this.iframe.contentDocument ) { // browsers such as Firefox
|
||||||
|
this.document = this.iframe.contentDocument;
|
||||||
|
} else { // browsers such as IE
|
||||||
|
this.document = this.iframe.contentWindow.document;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.document.open();
|
||||||
|
if ( !contents_text ) {
|
||||||
|
// hack: add a zero-width space to make the horizontal line under title show up in the
|
||||||
|
// correct position, even before there is a title
|
||||||
|
contents_text = "<h3>​";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.document.write(
|
||||||
|
'<html><head><style>html { padding: 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>' + contents_text + '</body></html>'
|
||||||
|
);
|
||||||
|
this.document.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
Editor.prototype.enable_design_mode = function () {
|
||||||
|
if ( this.iframe.contentDocument ) { // browsers such as Firefox
|
||||||
|
if ( this.edit_enabled )
|
||||||
|
this.document.designMode = "On";
|
||||||
|
} else { // browsers such as IE
|
||||||
|
if ( this.edit_enabled ) {
|
||||||
|
this.document.designMode = "On";
|
||||||
|
// work-around for IE bug: reget the document after designMode is turned on
|
||||||
|
this.document = this.iframe.contentWindow.document;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// move the text cursor to the end of the text
|
||||||
|
if ( this.iframe.contentWindow && this.iframe.contentWindow.getSelection ) { // browsers such as Firefox
|
||||||
|
var selection = this.iframe.contentWindow.getSelection();
|
||||||
|
var last_node = this.document.body.lastChild;
|
||||||
|
if ( last_node.nodeValue == "\n" && last_node.previousSibling )
|
||||||
|
last_node = last_node.previousSibling;
|
||||||
|
|
||||||
|
selection.selectAllChildren( last_node );
|
||||||
|
selection.collapseToEnd();
|
||||||
|
} else if ( this.document.selection ) { // browsers such as IE
|
||||||
|
// TODO: finish this for IE
|
||||||
|
var range = this.document.selection.createRange();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Editor.prototype.create_div = function ( position_after ) {
|
Editor.prototype.create_div = function ( position_after ) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
@ -227,56 +295,6 @@ Editor.prototype.create_div = function ( position_after ) {
|
||||||
signal( self, "init_complete" );
|
signal( self, "init_complete" );
|
||||||
}
|
}
|
||||||
|
|
||||||
Editor.prototype.init_iframe = function () {
|
|
||||||
var self = this; // necessary so that the member functions of this editor object are used
|
|
||||||
|
|
||||||
if ( this.iframe.contentDocument ) { // browsers such as Firefox
|
|
||||||
this.document = this.iframe.contentDocument;
|
|
||||||
|
|
||||||
if ( this.edit_enabled )
|
|
||||||
this.document.designMode = "On";
|
|
||||||
|
|
||||||
// setTimeout( function () { self.finish_init(); }, 1 );
|
|
||||||
} else { // browsers such as IE
|
|
||||||
this.document = this.iframe.contentWindow.document;
|
|
||||||
|
|
||||||
if ( this.edit_enabled ) {
|
|
||||||
this.document.designMode = "On";
|
|
||||||
// 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 );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.document.open();
|
|
||||||
var contents_text = this.contents();
|
|
||||||
if ( !contents_text ) {
|
|
||||||
// hack: add a zero-width space to make the horizontal line under title show up in the
|
|
||||||
// correct position, even before there is a title
|
|
||||||
contents_text = "<h3>​";
|
|
||||||
}
|
|
||||||
|
|
||||||
this.document.write(
|
|
||||||
'<html><head><style>html { padding: 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>' + contents_text + '</body></html>'
|
|
||||||
);
|
|
||||||
this.document.close();
|
|
||||||
|
|
||||||
// move the text cursor to the end of the text
|
|
||||||
if ( this.iframe.contentWindow && this.iframe.contentWindow.getSelection ) { // browsers such as Firefox
|
|
||||||
var selection = this.iframe.contentWindow.getSelection();
|
|
||||||
var last_node = this.document.body.lastChild;
|
|
||||||
if ( last_node.nodeValue == "\n" && last_node.previousSibling )
|
|
||||||
last_node = last_node.previousSibling;
|
|
||||||
|
|
||||||
selection.selectAllChildren( last_node );
|
|
||||||
selection.collapseToEnd();
|
|
||||||
} else if ( this.document.selection ) { // browsers such as IE
|
|
||||||
// TODO: finish this for IE
|
|
||||||
var range = this.document.selection.createRange();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Editor.prototype.finish_init = function () {
|
Editor.prototype.finish_init = function () {
|
||||||
// since the browser may subtly tweak the html when it's inserted, save off the browser's version
|
// 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
|
// of the html here. this yields more accurate comparisons within the dirty() method
|
||||||
|
@ -336,7 +354,6 @@ Editor.prototype.finish_init = function () {
|
||||||
this.exec_command( "insertbronreturn", true );
|
this.exec_command( "insertbronreturn", true );
|
||||||
}
|
}
|
||||||
|
|
||||||
this.resize();
|
|
||||||
if ( this.init_highlight ) self.highlight();
|
if ( this.init_highlight ) self.highlight();
|
||||||
|
|
||||||
this.scrape_title();
|
this.scrape_title();
|
||||||
|
@ -420,21 +437,25 @@ Editor.prototype.query_command_value = function ( command ) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// resize the editor's frame to fit the dimensions of its content
|
// resize the editor's frame to fit the dimensions of its content
|
||||||
Editor.prototype.resize = function () {
|
Editor.prototype.resize = function ( height ) {
|
||||||
if ( !this.document ) return;
|
if ( !this.document ) return;
|
||||||
|
var FRAME_BORDER_HEIGHT = 4; // 2 pixels at the top and 2 at the bottom
|
||||||
|
|
||||||
var height;
|
if ( height ) {
|
||||||
|
height -= FRAME_BORDER_HEIGHT;
|
||||||
if ( WEBKIT ) {
|
// if no height is given, get the height from this editor's document body
|
||||||
var self = this;
|
} else {
|
||||||
withDocument( this.document, function () {
|
if ( WEBKIT ) {
|
||||||
var body = getFirstElementByTagAndClassName( "body" );
|
var self = this;
|
||||||
height = elementDimensions( body ).h;
|
withDocument( this.document, function () {
|
||||||
} );
|
var body = getFirstElementByTagAndClassName( "body" );
|
||||||
} else if ( this.iframe.contentDocument ) { // Gecko and other sane browsers
|
height = elementDimensions( body ).h;
|
||||||
height = elementDimensions( this.document.documentElement ).h;
|
} );
|
||||||
} else { // IE
|
} else if ( this.iframe.contentDocument ) { // Gecko and other sane browsers
|
||||||
height = this.document.body.scrollHeight;
|
height = elementDimensions( this.document.documentElement ).h;
|
||||||
|
} else { // IE
|
||||||
|
height = this.document.body.scrollHeight;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setElementDimensions( this.iframe, { "h": height } );
|
setElementDimensions( this.iframe, { "h": height } );
|
||||||
|
|
Reference in New Issue