src/chrome_frame/cfinstall/src/implementation/dialoginteractiondelegate.js

   1 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview Displays the Chrome Frame installation flow in a Closure
   7  * dialog component.
   8  */
   9
  10 goog.provide('google.cf.installer.DialogInteractionDelegate');
  11
  12 goog.require('goog.math.Size');
  13 goog.require('goog.style');
  14 goog.require('goog.ui.Dialog');
  15 goog.require('goog.userAgent');
  16
  17 goog.require('google.cf.installer.InteractionDelegate');
  18
  19 /**
  20  * An implementation of google.cf.installer.InteractionDelegate that decorates
  21  * the installation flow using a goog.ui.Dialog .
  22  * @constructor
  23  * @implements {google.cf.installer.InteractionDelegate}
  24  */
  25 google.cf.installer.DialogInteractionDelegate = function() {
  26 };
  27
  28 /**
  29  * Whether we have already injected the dialog styles into the page.
  30  * @type {boolean}
  31  * @private
  32  **/
  33 google.cf.installer.DialogInteractionDelegate.injectedCss_ = false;
  34
  35 /**
  36  * Injects the dialog styles into the page.
  37  * @private
  38  **/
  39 google.cf.installer.DialogInteractionDelegate.injectCss_ = function() {
  40   if (google.cf.installer.DialogInteractionDelegate.injectedCss_)
  41     return;
  42
  43   google.cf.installer.DialogInteractionDelegate.injectedCss_ = true;
  44
  45   goog.style.installStyles(
  46       '.xdgcfinstall-dlg {' +
  47         'background: #c1d9ff;' +
  48         'border: 1px solid #3a5774;' +
  49         'color: #000;' +
  50         'padding: 4px;' +
  51         'position: absolute;' +
  52       '}' +
  53
  54       '.xdgcfinstall-dlg-bg {' +
  55         'background: #666;' +
  56         'left: 0;' +
  57         'position: absolute;' +
  58         'top: 0;' +
  59       '}' +
  60
  61       '.xdgcfinstall-dlg-title {' +
  62         'background: #e0edfe;' +
  63         'color: #000;' +
  64         'cursor: pointer;' +
  65         'font-size: 120%;' +
  66         'font-weight: bold;' +
  67
  68         'padding: 0px;' +
  69         'height: 17px;' +
  70         'position: relative;' +
  71         '_zoom: 1; /* Ensures proper width in IE6 RTL. */' +
  72       '}' +
  73
  74       '.xdgcfinstall-dlg-title-close {' +
  75         /* Client apps may override the URL at which they serve the sprite. */
  76         'background: #e0edfe' +
  77             'url(//ssl.gstatic.com/editor/editortoolbar.png)' +
  78             'no-repeat -528px 0;' +
  79         'cursor: default;' +
  80         'font-size: 0%;' +
  81         'height: 15px;' +
  82         'position: absolute;' +
  83         'top: 1px;' +
  84         'right: 1px;' +
  85         'width: 15px;' +
  86         'padding: 0px 0px 0px 0px;' +
  87         'align: right;' +
  88       '}' +
  89
  90       '.xdgcfinstall-dlg-content {' +
  91         'background-color: #fff;' +
  92         'padding: 0px;' +
  93       '}'
  94   );
  95 };
  96
  97 /**
  98  * The active dialog.
  99  * @type {goog.ui.Dialog}
 100  * @private
 101  */
 102 google.cf.installer.DialogInteractionDelegate.prototype.dialog_ = null;
 103
 104 /**
 105  * @inheritDoc
 106  */
 107 google.cf.installer.DialogInteractionDelegate.prototype.getIFrameContainer =
 108     function() {
 109   google.cf.installer.DialogInteractionDelegate.injectCss_();
 110
 111   this.dialog_ = new goog.ui.Dialog('xdgcfinstall-dlg', true);
 112   this.dialog_.setButtonSet(null);
 113   // TODO(user): The IFrame must be 'visible' or else calculation of its
 114   // contents' dimensions is incorrect on IE, yet the following line also
 115   // disables interaction with and dims the page contents. It would be best to
 116   // only do that when show() is called. Best way is probably to push the mask
 117   // elements offscreen.
 118   this.dialog_.setVisible(true);
 119   goog.style.setPosition(this.dialog_.getDialogElement(), -5000, -5000);
 120   return /** @type {!HTMLElement} */(this.dialog_.getContentElement());
 121 };
 122
 123 /**
 124  * @inheritDoc
 125  */
 126 google.cf.installer.DialogInteractionDelegate.prototype.customizeIFrame =
 127     function(iframe) {
 128 };
 129
 130 /**
 131  * @inheritDoc
 132  */
 133 google.cf.installer.DialogInteractionDelegate.prototype.show =
 134     function() {
 135   if (goog.userAgent.IE) {
 136     // By default, in IE, the dialog does not respect the width of its contents.
 137     // So we set its dimensions here. We need to specifically add some space for
 138     // the title bar.
 139     var iframeSize = goog.style.getBorderBoxSize(
 140         this.dialog_.getContentElement().getElementsByTagName('iframe')[0]);
 141     var titleSize = goog.style.getBorderBoxSize(this.dialog_.getTitleElement());
 142     goog.style.setContentBoxSize(this.dialog_.getDialogElement(),
 143                                  new goog.math.Size(
 144                                      iframeSize.width,
 145                                      iframeSize.height + titleSize.height));
 146   }
 147   // Ask the dialog to re-center itself based on the new dimensions.
 148   this.dialog_.reposition();
 149 };
 150
 151
 152 /**
 153  * @inheritDoc
 154  */
 155 google.cf.installer.DialogInteractionDelegate.prototype.reset = function() {
 156   if (this.dialog_) {
 157    this.dialog_.setVisible(false);
 158    this.dialog_.dispose();
 159    this.dialog_ = null;
 160   }
 161 };