// Copyright 2007 The Closure Library Authors. All Rights Reserved. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS-IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. // All Rights Reserved. /** * @fileoverview Static functions for writing the contents of an iframe-based * editable field. These vary significantly from browser to browser. Uses * strings and document.write instead of DOM manipulation, because * iframe-loading is a performance bottleneck. * * @author nicksantos@google.com (Nick Santos) */ goog.provide('goog.editor.icontent'); goog.provide('goog.editor.icontent.FieldFormatInfo'); goog.provide('goog.editor.icontent.FieldStyleInfo'); goog.require('goog.dom'); goog.require('goog.editor.BrowserFeature'); goog.require('goog.style'); goog.require('goog.userAgent'); /** * A data structure for storing simple rendering info about a field. * * @param {string} fieldId The id of the field. * @param {boolean} standards Whether the field should be rendered in * standards mode. * @param {boolean} blended Whether the field is in blended mode. * @param {boolean} fixedHeight Whether the field is in fixedHeight mode. * @param {Object=} opt_extraStyles Other style attributes for the field, * represented as a map of strings. * @constructor * @final */ goog.editor.icontent.FieldFormatInfo = function( fieldId, standards, blended, fixedHeight, opt_extraStyles) { this.fieldId_ = fieldId; this.standards_ = standards; this.blended_ = blended; this.fixedHeight_ = fixedHeight; this.extraStyles_ = opt_extraStyles || {}; }; /** * A data structure for storing simple info about the styles of a field. * Only needed in Firefox/Blended mode. * @param {Element} wrapper The wrapper div around a field. * @param {string} css The css for a field. * @constructor * @final */ goog.editor.icontent.FieldStyleInfo = function(wrapper, css) { this.wrapper_ = wrapper; this.css_ = css; }; /** * Whether to always use standards-mode iframes. * @type {boolean} * @private */ goog.editor.icontent.useStandardsModeIframes_ = false; /** * Sets up goog.editor.icontent to always use standards-mode iframes. */ goog.editor.icontent.forceStandardsModeIframes = function() { goog.editor.icontent.useStandardsModeIframes_ = true; }; /** * Generate the initial iframe content. * @param {goog.editor.icontent.FieldFormatInfo} info Formatting info about * the field. * @param {string} bodyHtml The HTML to insert as the iframe body. * @param {goog.editor.icontent.FieldStyleInfo?} style Style info about * the field, if needed. * @return {string} The initial IFRAME content HTML. * @private */ goog.editor.icontent.getInitialIframeContent_ = function( info, bodyHtml, style) { var html = []; if (info.blended_ && info.standards_ || goog.editor.icontent.useStandardsModeIframes_) { html.push(''); } // // NOTE(user): Override min-widths that may be set for all // HTML/BODY nodes. A similar workaround is below for the tag. This // can happen if the host page includes a rule like this in its CSS: // // html, body {min-width: 500px} // // In this case, the iframe's and/or may be affected. This was // part of the problem observed in http://b/5674613. (The other part of that // problem had to do with the presence of a spurious horizontal scrollbar, // which caused the editor height to be computed incorrectly.) html.push(''); // '); // // Hidefocus is needed to ensure that IE7 doesn't show the dotted, focus // border when you tab into the field. html.push('', bodyHtml, ''); return html.join(''); }; /** * Write the initial iframe content in normal mode. * @param {goog.editor.icontent.FieldFormatInfo} info Formatting info about * the field. * @param {string} bodyHtml The HTML to insert as the iframe body. * @param {goog.editor.icontent.FieldStyleInfo?} style Style info about * the field, if needed. * @param {HTMLIFrameElement} iframe The iframe. */ goog.editor.icontent.writeNormalInitialBlendedIframe = function( info, bodyHtml, style, iframe) { // Firefox blended needs to inherit all the css from the original page. // Firefox standards mode needs to set extra style for images. if (info.blended_) { var field = style.wrapper_; // If there is padding on the original field, then the iFrame will be // positioned inside the padding by default. We don't want this, as it // causes the contents to appear to shift, and also causes the // scrollbars to appear inside the padding. // // To compensate, we set the iframe margins to offset the padding. var paddingBox = goog.style.getPaddingBox(field); if (paddingBox.top || paddingBox.left || paddingBox.right || paddingBox.bottom) { goog.style.setStyle( iframe, 'margin', (-paddingBox.top) + 'px ' + (-paddingBox.right) + 'px ' + (-paddingBox.bottom) + 'px ' + (-paddingBox.left) + 'px'); } } goog.editor.icontent.writeNormalInitialIframe(info, bodyHtml, style, iframe); }; /** * Write the initial iframe content in normal mode. * @param {goog.editor.icontent.FieldFormatInfo} info Formatting info about * the field. * @param {string} bodyHtml The HTML to insert as the iframe body. * @param {goog.editor.icontent.FieldStyleInfo?} style Style info about * the field, if needed. * @param {HTMLIFrameElement} iframe The iframe. */ goog.editor.icontent.writeNormalInitialIframe = function( info, bodyHtml, style, iframe) { var html = goog.editor.icontent.getInitialIframeContent_(info, bodyHtml, style); var doc = goog.dom.getFrameContentDocument(iframe); doc.open(); doc.write(html); doc.close(); }; /** * Write the initial iframe content in IE/HTTPS mode. * @param {goog.editor.icontent.FieldFormatInfo} info Formatting info about * the field. * @param {Document} doc The iframe document. * @param {string} bodyHtml The HTML to insert as the iframe body. */ goog.editor.icontent.writeHttpsInitialIframe = function(info, doc, bodyHtml) { var body = doc.body; // For HTTPS we already have a document with a doc type and a body element // and don't want to create a new history entry which can cause data loss if // the user clicks the back button. if (goog.editor.BrowserFeature.HAS_CONTENT_EDITABLE) { body.contentEditable = true; } body.className = 'editable'; body.setAttribute('g_editable', true); body.hideFocus = true; body.id = info.fieldId_; goog.style.setStyle(body, info.extraStyles_); body.innerHTML = bodyHtml; };