From 58827c4ebd3d67391cbc7aba65a8aeb69afa3efc Mon Sep 17 00:00:00 2001 From: Dan Helfman Date: Thu, 22 Jan 2009 12:08:20 -0800 Subject: [PATCH] More work on the reusable iframe. Now visually appears seamless. --- static/css/style.css | 6 +--- static/js/Editor.js | 82 ++++++++++++++++++++++---------------------- view/Main_page.py | 3 ++ 3 files changed, 45 insertions(+), 46 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 8c3896f..260efd7 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -525,10 +525,10 @@ h1 { .note_frame { -moz-border-radius: 5px; + position: absolute; padding: 0em; margin: 0em; overflow: hidden; - width: 100%; border: 2px solid #999999; margin-bottom: 0.75em; background-color: #ffffff; @@ -773,10 +773,6 @@ h1 { .invisible { visibility: hidden; - height: 0; - padding: 0; - margin: 0; - border: 0; } .undisplayed { diff --git a/static/js/Editor.js b/static/js/Editor.js index cc5021f..e9ba83a 100644 --- a/static/js/Editor.js +++ b/static/js/Editor.js @@ -4,15 +4,31 @@ MSIE6 = /MSIE 6\.0/.test( navigator.userAgent ); MSIE = /MSIE/.test( navigator.userAgent ); OPERA = /Opera/.test( navigator.userAgent ); -REUSABLE_IFRAME = createDOM( "iframe", - { - // iframe src attribute is necessary in IE 6 on an HTTPS site to prevent annoying warnings - "src": MSIE6 && "/static/html/blank.html" || "about:blank", - "frameBorder": "0", - "scrolling": "no", - "class": "note_frame invisible" +FRAME_BORDER_WIDTH = 2; +FRAME_BORDER_HEIGHT = 2; + + +function Shared_iframe() { + this.iframe = createDOM( "iframe", + { + // iframe src attribute is necessary in IE 6 on an HTTPS site to prevent annoying warnings + "src": MSIE6 && "/static/html/blank.html" || "about:blank", + "frameBorder": "0", + "scrolling": "no", + "class": "note_frame invisible" + } + ); + + insertSiblingNodesAfter( "iframe_area", this.iframe ); + + // enable design mode + if ( this.iframe.contentDocument ) { // browsers such as Firefox + this.iframe.contentDocument.designMode = "On"; + } else { // browsers such as IE + this.iframe.contentWindow.document.designMode = "On"; } -); +} + function Editor( id, notebook_id, note_text, deleted_from_id, revision, read_write, startup, highlight, focus, position_after, start_dirty, own_notes_only ) { this.id = id; @@ -37,6 +53,10 @@ function Editor( id, notebook_id, note_text, deleted_from_id, revision, read_wri this.div = null; this.title = ""; + // all editors share a common design mode iframe, each claiming use of it as necessary + if ( !Editor.shared_iframe ) + Editor.shared_iframe = new Shared_iframe(); + this.create_div( position_after ); // if the Editor is to be focused, create an editable iframe. otherwise just create a static div @@ -191,7 +211,7 @@ Editor.prototype.claim_iframe = function ( position_after, click_position ) { return; // claim the reusable iframe for this note, stealing it from the note that's using it (if any) - this.iframe = REUSABLE_IFRAME; + this.iframe = Editor.shared_iframe.iframe; this.iframe.setAttribute( "id", iframe_id ); this.iframe.setAttribute( "name", iframe_id ); var other_div; @@ -208,10 +228,8 @@ Editor.prototype.claim_iframe = function ( position_after, click_position ) { this.iframe.editor = this; // hide the iframe and show a div in its place - setStyle( this.iframe, { "position": "fixed" } ); if ( other_div ) removeElementClass( other_div, "invisible" ); - addElementClass( this.iframe, "invisible" ); // setup the note controls this.note_controls = getElement( "note_controls_" + this.id ); @@ -220,7 +238,7 @@ Editor.prototype.claim_iframe = function ( position_after, click_position ) { // hide the iframe to make this transition appear seamless addElementClass( this.iframe, "invisible" ); var frame_height = elementDimensions( this.div ).h; - insertSiblingNodesAfter( this.div, this.iframe ); + var frame_width = elementDimensions( this.div ).w; // give the invisible iframe the exact same position as the div it will replace setElementPosition( this.iframe, getElementPosition( this.div ) ); @@ -229,28 +247,20 @@ Editor.prototype.claim_iframe = function ( position_after, click_position ) { var range = this.add_selection_bookmark(); this.set_iframe_contents( this.contents() ); this.remove_selection_bookmark( range ); + this.resize( frame_height, frame_width ); // make the completed iframe visible and hide the static div addElementClass( this.iframe, "focused_note_frame" ); removeElementClass( this.iframe, "invisible" ); addElementClass( this.div, "invisible" ); - // set the iframe positioning back to standard static positioning - setStyle( this.iframe, { "position": "static" } ); - - // finally, turn on design mode so the iframe is editable - this.enable_design_mode(); - function finish_init() { self.position_cursor( click_position, range ); self.connect_handlers(); } - // this small delay gives IE enough lag time after design mode is enabled to setup document.body - if ( MSIE ) - setTimeout( finish_init, 1 ); - else - finish_init(); + // this small delay gives the browser enough lag time after set_iframe_contents() to process the HTML + setTimeout( finish_init, 1 ); } Editor.prototype.set_iframe_contents = function ( contents_text ) { @@ -284,19 +294,6 @@ Editor.prototype.set_iframe_contents = function ( contents_text ) { 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; - } - } -} - Editor.prototype.focus_default_text_field = function () { // special-case: focus any username field found within this div var username = getElement( "username" ); @@ -379,8 +376,6 @@ Editor.prototype.position_cursor = function ( click_position, div_range ) { return; } } else if ( click_position && this.document.selection ) { // browsers such as IE - var FRAME_BORDER_WIDTH = 2; - // position the cursor by using given click position coordinates var range = this.document.selection.createRange(); range.moveToPoint( @@ -562,9 +557,8 @@ Editor.prototype.query_command_value = function ( command ) { } // resize the editor's frame to fit the dimensions of its content -Editor.prototype.resize = function ( height ) { +Editor.prototype.resize = function ( height, width ) { if ( !this.document ) return; - var FRAME_BORDER_HEIGHT = 2; if ( height ) { height -= FRAME_BORDER_HEIGHT * 2; // 2 pixels at the top and 2 at the bottom @@ -577,7 +571,13 @@ Editor.prototype.resize = function ( height ) { } } - setElementDimensions( this.iframe, { "h": height } ); + var size = { "h": height }; + if ( width ) { + width -= FRAME_BORDER_WIDTH * 2; // 2 pixels at the top and 2 at the bottom + size[ "w" ] = width; + } + + setElementDimensions( this.iframe, size ); } Editor.prototype.key_pressed = function ( event ) { diff --git a/view/Main_page.py b/view/Main_page.py index e70dde8..b38bea3 100644 --- a/view/Main_page.py +++ b/view/Main_page.py @@ -284,6 +284,9 @@ class Main_page( Page ): ), id = u"center_content_area", ), + Div( + id = u"iframe_area", + ), Div( Note_tree_area( notebook,