1
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14
// All Rights Reserved.
15

16
/**
17
 * @fileoverview Class to encapsulate an editable field.  Always uses an
18
 * iframe to contain the editable area, never inherits the style of the
19
 * surrounding page, and is always a fixed height.
20
 *
21
 * @author [email protected] (Nick Santos)
22
 * @see ../demos/editor/editor.html
23
 * @see ../demos/editor/field_basic.html
24
 */
25

26
goog.provide('goog.editor.Field');
27
goog.provide('goog.editor.Field.EventType');
28

29
goog.require('goog.a11y.aria');
30
goog.require('goog.a11y.aria.Role');
31
goog.require('goog.array');
32
goog.require('goog.asserts');
33
goog.require('goog.async.Delay');
34
goog.require('goog.dom');
35
goog.require('goog.dom.Range');
36
goog.require('goog.dom.TagName');
37
goog.require('goog.dom.classlist');
38
goog.require('goog.editor.BrowserFeature');
39
goog.require('goog.editor.Command');
40
goog.require('goog.editor.Plugin');
41
goog.require('goog.editor.icontent');
42
goog.require('goog.editor.icontent.FieldFormatInfo');
43
goog.require('goog.editor.icontent.FieldStyleInfo');
44
goog.require('goog.editor.node');
45
goog.require('goog.editor.range');
46
goog.require('goog.events');
47
goog.require('goog.events.EventHandler');
48
goog.require('goog.events.EventTarget');
49
goog.require('goog.events.EventType');
50
goog.require('goog.events.KeyCodes');
51
goog.require('goog.functions');
52
goog.require('goog.html.SafeHtml');
53
goog.require('goog.html.legacyconversions');
54
goog.require('goog.log');
55
goog.require('goog.log.Level');
56
goog.require('goog.string');
57
goog.require('goog.string.Unicode');
58
goog.require('goog.style');
59
goog.require('goog.userAgent');
60
goog.require('goog.userAgent.product');
61

62

63

64
/**
65
 * This class encapsulates an editable field.
66
 *
67
 * event: load Fires when the field is loaded
68
 * event: unload Fires when the field is unloaded (made not editable)
69
 *
70
 * event: beforechange Fires before the content of the field might change
71
 *
72
 * event: delayedchange Fires a short time after field has changed. If multiple
73
 *                      change events happen really close to each other only
74
 *                      the last one will trigger the delayedchange event.
75
 *
76
 * event: beforefocus Fires before the field becomes active
77
 * event: focus Fires when the field becomes active. Fires after the blur event
78
 * event: blur Fires when the field becomes inactive
79
 *
80
 * TODO: figure out if blur or beforefocus fires first in IE and make FF match
81
 *
82
 * @param {string} id An identifer for the field. This is used to find the
83
 *    field and the element associated with this field.
84
 * @param {Document=} opt_doc The document that the element with the given
85
 *     id can be found in.  If not provided, the default document is used.
86
 * @constructor
87
 * @extends {goog.events.EventTarget}
88
 */
89
goog.editor.Field = function(id, opt_doc) {
90
  goog.events.EventTarget.call(this);
91

92
  /**
93
   * The id for this editable field, which must match the id of the element
94
   * associated with this field.
95
   * @type {string}
96
   */
97
  this.id = id;
98

99
  /**
100
   * The hash code for this field. Should be equal to the id.
101
   * @type {string}
102
   * @private
103
   */
104
  this.hashCode_ = id;
105

106
  /**
107
   * Dom helper for the editable node.
108
   * @type {goog.dom.DomHelper}
109
   * @protected
110
   */
111
  this.editableDomHelper = null;
112

113
  /**
114
   * Map of class id to registered plugin.
115
   * @type {Object}
116
   * @private
117
   */
118
  this.plugins_ = {};
119

120

121
  /**
122
   * Plugins registered on this field, indexed by the goog.editor.Plugin.Op
123
   * that they support.
124
   * @type {Object<Array<goog.editor.Plugin>>}
125
   * @private
126
   */
127
  this.indexedPlugins_ = {};
128

129
  for (var op in goog.editor.Plugin.OPCODE) {
130
    this.indexedPlugins_[op] = [];
131
  }
132

133

134
  /**
135
   * Additional styles to install for the editable field.
136
   * @type {string}
137
   * @protected
138
   */
139
  this.cssStyles = '';
140

141
  // The field will not listen to change events until it has finished loading
142
  /** @private */
143
  this.stoppedEvents_ = {};
144
  this.stopEvent(goog.editor.Field.EventType.CHANGE);
145
  this.stopEvent(goog.editor.Field.EventType.DELAYEDCHANGE);
146
  /** @private */
147
  this.isModified_ = false;
148
  /** @private */
149
  this.isEverModified_ = false;
150
  /** @private */
151
  this.delayedChangeTimer_ = new goog.async.Delay(
152
      this.dispatchDelayedChange_, goog.editor.Field.DELAYED_CHANGE_FREQUENCY,
153
      this);
154

155
  /** @private */
156
  this.debouncedEvents_ = {};
157
  for (var key in goog.editor.Field.EventType) {
158
    this.debouncedEvents_[goog.editor.Field.EventType[key]] = 0;
159
  }
160

161
  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
162
    /** @private */
163
    this.changeTimerGecko_ = new goog.async.Delay(
164
        this.handleChange, goog.editor.Field.CHANGE_FREQUENCY, this);
165
  }
166

167
  /**
168
   * @type {goog.events.EventHandler<!goog.editor.Field>}
169
   * @protected
170
   */
171
  this.eventRegister = new goog.events.EventHandler(this);
172

173
  // Wrappers around this field, to be disposed when the field is disposed.
174
  /** @private */
175
  this.wrappers_ = [];
176

177
  /** @private */
178
  this.loadState_ = goog.editor.Field.LoadState_.UNEDITABLE;
179

180
  var doc = opt_doc || document;
181

182
  /**
183
   * The dom helper for the node to be made editable.
184
   * @type {goog.dom.DomHelper}
185
   * @protected
186
   */
187
  this.originalDomHelper = goog.dom.getDomHelper(doc);
188

189
  /**
190
   * The original node that is being made editable, or null if it has
191
   * not yet been found.
192
   * @type {Element}
193
   * @protected
194
   */
195
  this.originalElement = this.originalDomHelper.getElement(this.id);
196

197
  /**
198
   * @private {boolean}
199
   */
200
  this.followLinkInNewWindow_ =
201
      goog.editor.BrowserFeature.FOLLOWS_EDITABLE_LINKS;
202

203
  // Default to the same window as the field is in.
204
  /** @private */
205
  this.appWindow_ = this.originalDomHelper.getWindow();
206
};
207
goog.inherits(goog.editor.Field, goog.events.EventTarget);
208

209

210
/**
211
 * The editable dom node.
212
 * @type {Element}
213
 * TODO(user): Make this private!
214
 */
215
goog.editor.Field.prototype.field = null;
216

217

218
/**
219
 * Logging object.
220
 * @type {goog.log.Logger}
221
 * @protected
222
 */
223
goog.editor.Field.prototype.logger = goog.log.getLogger('goog.editor.Field');
224

225

226
/**
227
 * Event types that can be stopped/started.
228
 * @enum {string}
229
 */
230
goog.editor.Field.EventType = {
231
  /**
232
   * Dispatched when the command state of the selection may have changed. This
233
   * event should be listened to for updating toolbar state.
234
   */
235
  COMMAND_VALUE_CHANGE: 'cvc',
236
  /**
237
   * Dispatched when the field is loaded and ready to use.
238
   */
239
  LOAD: 'load',
240
  /**
241
   * Dispatched when the field is fully unloaded and uneditable.
242
   */
243
  UNLOAD: 'unload',
244
  /**
245
   * Dispatched before the field contents are changed.
246
   */
247
  BEFORECHANGE: 'beforechange',
248
  /**
249
   * Dispatched when the field contents change, in FF only.
250
   * Used for internal resizing, please do not use.
251
   */
252
  CHANGE: 'change',
253
  /**
254
   * Dispatched on a slight delay after changes are made.
255
   * Use for autosave, or other times your app needs to know
256
   * that the field contents changed.
257
   */
258
  DELAYEDCHANGE: 'delayedchange',
259
  /**
260
   * Dispatched before focus in moved into the field.
261
   */
262
  BEFOREFOCUS: 'beforefocus',
263
  /**
264
   * Dispatched when focus is moved into the field.
265
   */
266
  FOCUS: 'focus',
267
  /**
268
   * Dispatched when the field is blurred.
269
   */
270
  BLUR: 'blur',
271
  /**
272
   * Dispatched before tab is handled by the field.  This is a legacy way
273
   * of controlling tab behavior.  Use trog.plugins.AbstractTabHandler now.
274
   */
275
  BEFORETAB: 'beforetab',
276
  /**
277
   * Dispatched after the iframe containing the field is resized, so that UI
278
   * components which contain it can respond.
279
   */
280
  IFRAME_RESIZED: 'ifrsz',
281
  /**
282
   * Dispatched after a user action that will eventually fire a SELECTIONCHANGE
283
   * event. For mouseups, this is fired immediately before SELECTIONCHANGE,
284
   * since {@link #handleMouseUp_} fires SELECTIONCHANGE immediately. May be
285
   * fired up to {@link #SELECTION_CHANGE_FREQUENCY_} ms before SELECTIONCHANGE
286
   * is fired in the case of keyup events, since they use
287
   * {@link #selectionChangeTimer_}.
288
   */
289
  BEFORESELECTIONCHANGE: 'beforeselectionchange',
290
  /**
291
   * Dispatched when the selection changes.
292
   * Use handleSelectionChange from plugin API instead of listening
293
   * directly to this event.
294
   */
295
  SELECTIONCHANGE: 'selectionchange'
296
};
297

298

299
/**
300
 * The load state of the field.
301
 * @enum {number}
302
 * @private
303
 */
304
goog.editor.Field.LoadState_ = {
305
  UNEDITABLE: 0,
306
  LOADING: 1,
307
  EDITABLE: 2
308
};
309

310

311
/**
312
 * The amount of time that a debounce blocks an event.
313
 * TODO(nicksantos): As of 9/30/07, this is only used for blocking
314
 * a keyup event after a keydown. We might need to tweak this for other
315
 * types of events. Maybe have a per-event debounce time?
316
 * @type {number}
317
 * @private
318
 */
319
goog.editor.Field.DEBOUNCE_TIME_MS_ = 500;
320

321

322
/**
323
 * There is at most one "active" field at a time.  By "active" field, we mean
324
 * a field that has focus and is being used.
325
 * @type {?string}
326
 * @private
327
 */
328
goog.editor.Field.activeFieldId_ = null;
329

330

331
/**
332
 * Whether this field is in "modal interaction" mode. This usually
333
 * means that it's being edited by a dialog.
334
 * @type {boolean}
335
 * @private
336
 */
337
goog.editor.Field.prototype.inModalMode_ = false;
338

339

340
/**
341
 * The window where dialogs and bubbles should be rendered.
342
 * @type {!Window}
343
 * @private
344
 */
345
goog.editor.Field.prototype.appWindow_;
346

347

348
/**
349
 * Target node to be used when dispatching SELECTIONCHANGE asynchronously on
350
 * mouseup (to avoid IE quirk). Should be set just before starting the timer and
351
 * nulled right after consuming.
352
 * @type {Node}
353
 * @private
354
 */
355
goog.editor.Field.prototype.selectionChangeTarget_;
356

357

358
/**
359
 * Flag controlling wether to capture mouse up events on the window or not.
360
 * @type {boolean}
361
 * @private
362
 */
363
goog.editor.Field.prototype.useWindowMouseUp_ = false;
364

365

366
/**
367
 * FLag indicating the handling of a mouse event sequence.
368
 * @type {boolean}
369
 * @private
370
 */
371
goog.editor.Field.prototype.waitingForMouseUp_ = false;
372

373

374
/**
375
 * Sets the active field id.
376
 * @param {?string} fieldId The active field id.
377
 */
378
goog.editor.Field.setActiveFieldId = function(fieldId) {
379
  goog.editor.Field.activeFieldId_ = fieldId;
380
};
381

382

383
/**
384
 * @return {?string} The id of the active field.
385
 */
386
goog.editor.Field.getActiveFieldId = function() {
387
  return goog.editor.Field.activeFieldId_;
388
};
389

390

391
/**
392
 * Sets flag to control whether to use window mouse up after seeing
393
 * a mouse down operation on the field.
394
 * @param {boolean} flag True to track window mouse up.
395
 */
396
goog.editor.Field.prototype.setUseWindowMouseUp = function(flag) {
397
  goog.asserts.assert(
398
      !flag || !this.usesIframe(),
399
      'procssing window mouse up should only be enabled when not using iframe');
400
  this.useWindowMouseUp_ = flag;
401
};
402

403

404
/**
405
 * @return {boolean} Whether we're in modal interaction mode. When this
406
 *     returns true, another plugin is interacting with the field contents
407
 *     in a synchronous way, and expects you not to make changes to
408
 *     the field's DOM structure or selection.
409
 */
410
goog.editor.Field.prototype.inModalMode = function() {
411
  return this.inModalMode_;
412
};
413

414

415
/**
416
 * @param {boolean} inModalMode Sets whether we're in modal interaction mode.
417
 */
418
goog.editor.Field.prototype.setModalMode = function(inModalMode) {
419
  this.inModalMode_ = inModalMode;
420
};
421

422

423
/**
424
 * Returns a string usable as a hash code for this field. For field's
425
 * that were created with an id, the hash code is guaranteed to be the id.
426
 * TODO(user): I think we can get rid of this.  Seems only used from editor.
427
 * @return {string} The hash code for this editable field.
428
 */
429
goog.editor.Field.prototype.getHashCode = function() {
430
  return this.hashCode_;
431
};
432

433

434
/**
435
 * Returns the editable DOM element or null if this field
436
 * is not editable.
437
 * <p>On IE or Safari this is the element with contentEditable=true
438
 * (in whitebox mode, the iFrame body).
439
 * <p>On Gecko this is the iFrame body
440
 * TODO(user): How do we word this for subclass version?
441
 * @return {Element} The editable DOM element, defined as above.
442
 */
443
goog.editor.Field.prototype.getElement = function() {
444
  return this.field;
445
};
446

447

448
/**
449
 * Returns original DOM element that is being made editable by Trogedit or
450
 * null if that element has not yet been found in the appropriate document.
451
 * @return {Element} The original element.
452
 */
453
goog.editor.Field.prototype.getOriginalElement = function() {
454
  return this.originalElement;
455
};
456

457

458
/**
459
 * Registers a keyboard event listener on the field.  This is necessary for
460
 * Gecko since the fields are contained in an iFrame and there is no way to
461
 * auto-propagate key events up to the main window.
462
 * @param {string|Array<string>} type Event type to listen for or array of
463
 *    event types, for example goog.events.EventType.KEYDOWN.
464
 * @param {Function} listener Function to be used as the listener.
465
 * @param {boolean=} opt_capture Whether to use capture phase (optional,
466
 *    defaults to false).
467
 * @param {Object=} opt_handler Object in whose scope to call the listener.
468
 */
469
goog.editor.Field.prototype.addListener = function(
470
    type, listener, opt_capture, opt_handler) {
471
  var elem = this.getElement();
472
  // On Gecko, keyboard events only reliably fire on the document element when
473
  // using an iframe.
474
  if (goog.editor.BrowserFeature.USE_DOCUMENT_FOR_KEY_EVENTS && elem &&
475
      this.usesIframe()) {
476
    elem = elem.ownerDocument;
477
  }
478
  if (opt_handler) {
479
    this.eventRegister.listenWithScope(
480
        elem, type, listener, opt_capture, opt_handler);
481
  } else {
482
    this.eventRegister.listen(elem, type, listener, opt_capture);
483
  }
484
};
485

486

487
/**
488
 * Returns the registered plugin with the given classId.
489
 * @param {string} classId classId of the plugin.
490
 * @return {goog.editor.Plugin} Registered plugin with the given classId.
491
 */
492
goog.editor.Field.prototype.getPluginByClassId = function(classId) {
493
  return this.plugins_[classId];
494
};
495

496

497
/**
498
 * Registers the plugin with the editable field.
499
 * @param {goog.editor.Plugin} plugin The plugin to register.
500
 */
501
goog.editor.Field.prototype.registerPlugin = function(plugin) {
502
  var classId = plugin.getTrogClassId();
503
  if (this.plugins_[classId]) {
504
    goog.log.error(
505
        this.logger, 'Cannot register the same class of plugin twice.');
506
  }
507
  this.plugins_[classId] = plugin;
508

509
  // Only key events and execute should have these has* functions with a custom
510
  // handler array since they need to be very careful about performance.
511
  // The rest of the plugin hooks should be event-based.
512
  for (var op in goog.editor.Plugin.OPCODE) {
513
    var opcode = goog.editor.Plugin.OPCODE[op];
514
    if (plugin[opcode]) {
515
      this.indexedPlugins_[op].push(plugin);
516
    }
517
  }
518
  plugin.registerFieldObject(this);
519

520
  // By default we enable all plugins for fields that are currently loaded.
521
  if (this.isLoaded()) {
522
    plugin.enable(this);
523
  }
524
};
525

526

527
/**
528
 * Unregisters the plugin with this field.
529
 * @param {goog.editor.Plugin} plugin The plugin to unregister.
530
 */
531
goog.editor.Field.prototype.unregisterPlugin = function(plugin) {
532
  var classId = plugin.getTrogClassId();
533
  if (!this.plugins_[classId]) {
534
    goog.log.error(
535
        this.logger, 'Cannot unregister a plugin that isn\'t registered.');
536
  }
537
  delete this.plugins_[classId];
538

539
  for (var op in goog.editor.Plugin.OPCODE) {
540
    var opcode = goog.editor.Plugin.OPCODE[op];
541
    if (plugin[opcode]) {
542
      goog.array.remove(this.indexedPlugins_[op], plugin);
543
    }
544
  }
545

546
  plugin.unregisterFieldObject(this);
547
};
548

549

550
/**
551
 * Sets the value that will replace the style attribute of this field's
552
 * element when the field is made non-editable. This method is called with the
553
 * current value of the style attribute when the field is made editable.
554
 * @param {string} cssText The value of the style attribute.
555
 */
556
goog.editor.Field.prototype.setInitialStyle = function(cssText) {
557
  this.cssText = cssText;
558
};
559

560

561
/**
562
 * Reset the properties on the original field element to how it was before
563
 * it was made editable.
564
 */
565
goog.editor.Field.prototype.resetOriginalElemProperties = function() {
566
  var field = this.getOriginalElement();
567
  field.removeAttribute('contentEditable');
568
  field.removeAttribute('g_editable');
569
  field.removeAttribute('role');
570

571
  if (!this.id) {
572
    field.removeAttribute('id');
573
  } else {
574
    field.id = this.id;
575
  }
576

577
  field.className = this.savedClassName_ || '';
578

579
  var cssText = this.cssText;
580
  if (!cssText) {
581
    field.removeAttribute('style');
582
  } else {
583
    goog.dom.setProperties(field, {'style': cssText});
584
  }
585

586
  if (goog.isString(this.originalFieldLineHeight_)) {
587
    goog.style.setStyle(field, 'lineHeight', this.originalFieldLineHeight_);
588
    this.originalFieldLineHeight_ = null;
589
  }
590
};
591

592

593
/**
594
 * Checks the modified state of the field.
595
 * Note: Changes that take place while the goog.editor.Field.EventType.CHANGE
596
 * event is stopped do not effect the modified state.
597
 * @param {boolean=} opt_useIsEverModified Set to true to check if the field
598
 *   has ever been modified since it was created, otherwise checks if the field
599
 *   has been modified since the last goog.editor.Field.EventType.DELAYEDCHANGE
600
 *   event was dispatched.
601
 * @return {boolean} Whether the field has been modified.
602
 */
603
goog.editor.Field.prototype.isModified = function(opt_useIsEverModified) {
604
  return opt_useIsEverModified ? this.isEverModified_ : this.isModified_;
605
};
606

607

608
/**
609
 * Number of milliseconds after a change when the change event should be fired.
610
 * @type {number}
611
 */
612
goog.editor.Field.CHANGE_FREQUENCY = 15;
613

614

615
/**
616
 * Number of milliseconds between delayed change events.
617
 * @type {number}
618
 */
619
goog.editor.Field.DELAYED_CHANGE_FREQUENCY = 250;
620

621

622
/**
623
 * @return {boolean} Whether the field is implemented as an iframe.
624
 */
625
goog.editor.Field.prototype.usesIframe = goog.functions.TRUE;
626

627

628
/**
629
 * @return {boolean} Whether the field should be rendered with a fixed
630
 *     height, or should expand to fit its contents.
631
 */
632
goog.editor.Field.prototype.isFixedHeight = goog.functions.TRUE;
633

634

635
/**
636
 * @return {boolean} Whether the field should be refocused on input.
637
 *    This is a workaround for the iOS bug that text input doesn't work
638
 *    when the main window listens touch events.
639
 */
640
goog.editor.Field.prototype.shouldRefocusOnInputMobileSafari =
641
    goog.functions.FALSE;
642

643

644
/**
645
 * Map of keyCodes (not charCodes) that cause changes in the field contents.
646
 * @type {Object}
647
 * @private
648
 */
649
goog.editor.Field.KEYS_CAUSING_CHANGES_ = {
650
  46: true,  // DEL
651
  8: true    // BACKSPACE
652
};
653

654
if (!goog.userAgent.IE) {
655
  // Only IE doesn't change the field by default upon tab.
656
  // TODO(user): This really isn't right now that we have tab plugins.
657
  goog.editor.Field.KEYS_CAUSING_CHANGES_[9] = true;  // TAB
658
}
659

660

661
/**
662
 * Map of keyCodes (not charCodes) that when used in conjunction with the
663
 * Ctrl key cause changes in the field contents. These are the keys that are
664
 * not handled by basic formatting trogedit plugins.
665
 * @type {Object}
666
 * @private
667
 */
668
goog.editor.Field.CTRL_KEYS_CAUSING_CHANGES_ = {
669
  86: true,  // V
670
  88: true   // X
671
};
672

673
if (goog.userAgent.WINDOWS && !goog.userAgent.GECKO) {
674
  // In IE and Webkit, input from IME (Input Method Editor) does not generate a
675
  // keypress event so we have to rely on the keydown event. This way we have
676
  // false positives while the user is using keyboard to select the
677
  // character to input, but it is still better than the false negatives
678
  // that ignores user's final input at all.
679
  goog.editor.Field.KEYS_CAUSING_CHANGES_[229] = true;  // from IME;
680
}
681

682

683
/**
684
 * Returns true if the keypress generates a change in contents.
685
 * @param {goog.events.BrowserEvent} e The event.
686
 * @param {boolean} testAllKeys True to test for all types of generating keys.
687
 *     False to test for only the keys found in
688
 *     goog.editor.Field.KEYS_CAUSING_CHANGES_.
689
 * @return {boolean} Whether the keypress generates a change in contents.
690
 * @private
691
 */
692
goog.editor.Field.isGeneratingKey_ = function(e, testAllKeys) {
693
  if (goog.editor.Field.isSpecialGeneratingKey_(e)) {
694
    return true;
695
  }
696

697
  return !!(
698
      testAllKeys && !(e.ctrlKey || e.metaKey) &&
699
      (!goog.userAgent.GECKO || e.charCode));
700
};
701

702

703
/**
704
 * Returns true if the keypress generates a change in the contents.
705
 * due to a special key listed in goog.editor.Field.KEYS_CAUSING_CHANGES_
706
 * @param {goog.events.BrowserEvent} e The event.
707
 * @return {boolean} Whether the keypress generated a change in the contents.
708
 * @private
709
 */
710
goog.editor.Field.isSpecialGeneratingKey_ = function(e) {
711
  var testCtrlKeys = (e.ctrlKey || e.metaKey) &&
712
      e.keyCode in goog.editor.Field.CTRL_KEYS_CAUSING_CHANGES_;
713
  var testRegularKeys = !(e.ctrlKey || e.metaKey) &&
714
      e.keyCode in goog.editor.Field.KEYS_CAUSING_CHANGES_;
715

716
  return testCtrlKeys || testRegularKeys;
717
};
718

719

720
/**
721
 * Sets the application window.
722
 * @param {!Window} appWindow The window where dialogs and bubbles should be
723
 *     rendered.
724
 */
725
goog.editor.Field.prototype.setAppWindow = function(appWindow) {
726
  this.appWindow_ = appWindow;
727
};
728

729

730
/**
731
 * Returns the "application" window, where dialogs and bubbles
732
 * should be rendered.
733
 * @return {!Window} The window.
734
 */
735
goog.editor.Field.prototype.getAppWindow = function() {
736
  return this.appWindow_;
737
};
738

739

740
/**
741
 * Sets the zIndex that the field should be based off of.
742
 * TODO(user): Get rid of this completely.  Here for Sites.
743
 *     Should this be set directly on UI plugins?
744
 *
745
 * @param {number} zindex The base zIndex of the editor.
746
 */
747
goog.editor.Field.prototype.setBaseZindex = function(zindex) {
748
  this.baseZindex_ = zindex;
749
};
750

751

752
/**
753
 * Returns the zindex of the base level of the field.
754
 *
755
 * @return {number} The base zindex of the editor.
756
 */
757
goog.editor.Field.prototype.getBaseZindex = function() {
758
  return this.baseZindex_ || 0;
759
};
760

761

762
/**
763
 * Sets up the field object and window util of this field, and enables this
764
 * editable field with all registered plugins.
765
 * This is essential to the initialization of the field.
766
 * It must be called when the field becomes fully loaded and editable.
767
 * @param {Element} field The field property.
768
 * @protected
769
 */
770
goog.editor.Field.prototype.setupFieldObject = function(field) {
771
  this.loadState_ = goog.editor.Field.LoadState_.EDITABLE;
772
  this.field = field;
773
  this.editableDomHelper = goog.dom.getDomHelper(field);
774
  this.isModified_ = false;
775
  this.isEverModified_ = false;
776
  field.setAttribute('g_editable', 'true');
777
  goog.a11y.aria.setRole(field, goog.a11y.aria.Role.TEXTBOX);
778
};
779

780

781
/**
782
 * Help make the field not editable by setting internal data structures to null,
783
 * and disabling this field with all registered plugins.
784
 * @private
785
 */
786
goog.editor.Field.prototype.tearDownFieldObject_ = function() {
787
  this.loadState_ = goog.editor.Field.LoadState_.UNEDITABLE;
788

789
  for (var classId in this.plugins_) {
790
    var plugin = this.plugins_[classId];
791
    if (!plugin.activeOnUneditableFields()) {
792
      plugin.disable(this);
793
    }
794
  }
795

796
  this.field = null;
797
  this.editableDomHelper = null;
798
};
799

800

801
/**
802
 * Initialize listeners on the field.
803
 * @private
804
 */
805
goog.editor.Field.prototype.setupChangeListeners_ = function() {
806
  if ((goog.userAgent.product.IPHONE || goog.userAgent.product.IPAD) &&
807
      this.usesIframe() && this.shouldRefocusOnInputMobileSafari()) {
808
    // This is a workaround for the iOS bug that text input doesn't work
809
    // when the main window listens touch events.
810
    var editWindow = this.getEditableDomHelper().getWindow();
811
    this.boundRefocusListenerMobileSafari_ =
812
        goog.bind(editWindow.focus, editWindow);
813
    editWindow.addEventListener(
814
        goog.events.EventType.KEYDOWN, this.boundRefocusListenerMobileSafari_,
815
        false);
816
    editWindow.addEventListener(
817
        goog.events.EventType.TOUCHEND, this.boundRefocusListenerMobileSafari_,
818
        false);
819
  }
820
  if (goog.userAgent.OPERA && this.usesIframe()) {
821
    // We can't use addListener here because we need to listen on the window,
822
    // and removing listeners on window objects from the event register throws
823
    // an exception if the window is closed.
824
    this.boundFocusListenerOpera_ =
825
        goog.bind(this.dispatchFocusAndBeforeFocus_, this);
826
    this.boundBlurListenerOpera_ = goog.bind(this.dispatchBlur, this);
827
    var editWindow = this.getEditableDomHelper().getWindow();
828
    editWindow.addEventListener(
829
        goog.events.EventType.FOCUS, this.boundFocusListenerOpera_, false);
830
    editWindow.addEventListener(
831
        goog.events.EventType.BLUR, this.boundBlurListenerOpera_, false);
832
  } else {
833
    if (goog.editor.BrowserFeature.SUPPORTS_FOCUSIN) {
834
      this.addListener(goog.events.EventType.FOCUS, this.dispatchFocus_);
835
      this.addListener(
836
          goog.events.EventType.FOCUSIN, this.dispatchBeforeFocus_);
837
    } else {
838
      this.addListener(
839
          goog.events.EventType.FOCUS, this.dispatchFocusAndBeforeFocus_);
840
    }
841
    this.addListener(
842
        goog.events.EventType.BLUR, this.dispatchBlur,
843
        goog.editor.BrowserFeature.USE_MUTATION_EVENTS);
844
  }
845

846
  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
847
    // Ways to detect changes in Mozilla:
848
    //
849
    // keypress - check event.charCode (only typable characters has a
850
    //            charCode), but also keyboard commands lile Ctrl+C will
851
    //            return a charCode.
852
    // dragdrop - fires when the user drops something. This does not necessary
853
    //            lead to a change but we cannot detect if it will or not
854
    //
855
    // Known Issues: We cannot detect cut and paste using menus
856
    //               We cannot detect when someone moves something out of the
857
    //               field using drag and drop.
858
    //
859
    this.setupMutationEventHandlersGecko();
860
  } else {
861
    // Ways to detect that a change is about to happen in other browsers.
862
    // (IE and Safari have these events. Opera appears to work, but we haven't
863
    //  researched it.)
864
    //
865
    // onbeforepaste
866
    // onbeforecut
867
    // ondrop - happens when the user drops something on the editable text
868
    //          field the value at this time does not contain the dropped text
869
    // ondragleave - when the user drags something from the current document.
870
    //               This might not cause a change if the action was copy
871
    //               instead of move
872
    // onkeypress - IE only fires keypress events if the key will generate
873
    //              output. It will not trigger for delete and backspace
874
    // onkeydown - For delete and backspace
875
    //
876
    // known issues: IE triggers beforepaste just by opening the edit menu
877
    //               delete at the end should not cause beforechange
878
    //               backspace at the beginning should not cause beforechange
879
    //               see above in ondragleave
880
    // TODO(user): Why don't we dispatchBeforeChange from the
881
    // handleDrop event for all browsers?
882
    this.addListener(
883
        ['beforecut', 'beforepaste', 'drop', 'dragend'],
884
        this.dispatchBeforeChange);
885
    this.addListener(
886
        ['cut', 'paste'], goog.functions.lock(this.dispatchChange));
887
    this.addListener('drop', this.handleDrop_);
888
  }
889

890
  // TODO(user): Figure out why we use dragend vs dragdrop and
891
  // document this better.
892
  var dropEventName = goog.userAgent.WEBKIT ? 'dragend' : 'dragdrop';
893
  this.addListener(dropEventName, this.handleDrop_);
894

895
  this.addListener(goog.events.EventType.KEYDOWN, this.handleKeyDown_);
896
  this.addListener(goog.events.EventType.KEYPRESS, this.handleKeyPress_);
897
  this.addListener(goog.events.EventType.KEYUP, this.handleKeyUp_);
898

899
  this.selectionChangeTimer_ = new goog.async.Delay(
900
      this.handleSelectionChangeTimer_,
901
      goog.editor.Field.SELECTION_CHANGE_FREQUENCY_, this);
902

903
  if (this.followLinkInNewWindow_) {
904
    this.addListener(
905
        goog.events.EventType.CLICK, goog.editor.Field.cancelLinkClick_);
906
  }
907

908
  this.addListener(goog.events.EventType.MOUSEDOWN, this.handleMouseDown_);
909
  if (this.useWindowMouseUp_) {
910
    this.eventRegister.listen(
911
        this.editableDomHelper.getDocument(), goog.events.EventType.MOUSEUP,
912
        this.handleMouseUp_);
913
    this.addListener(goog.events.EventType.DRAGSTART, this.handleDragStart_);
914
  } else {
915
    this.addListener(goog.events.EventType.MOUSEUP, this.handleMouseUp_);
916
  }
917
};
918

919

920
/**
921
 * Frequency to check for selection changes.
922
 * @type {number}
923
 * @private
924
 */
925
goog.editor.Field.SELECTION_CHANGE_FREQUENCY_ = 250;
926

927

928
/**
929
 * Stops all listeners and timers.
930
 * @protected
931
 */
932
goog.editor.Field.prototype.clearListeners = function() {
933
  if (this.eventRegister) {
934
    this.eventRegister.removeAll();
935
  }
936

937
  if ((goog.userAgent.product.IPHONE || goog.userAgent.product.IPAD) &&
938
      this.usesIframe() && this.shouldRefocusOnInputMobileSafari()) {
939
    try {
940
      var editWindow = this.getEditableDomHelper().getWindow();
941
      editWindow.removeEventListener(
942
          goog.events.EventType.KEYDOWN, this.boundRefocusListenerMobileSafari_,
943
          false);
944
      editWindow.removeEventListener(
945
          goog.events.EventType.TOUCHEND,
946
          this.boundRefocusListenerMobileSafari_, false);
947
    } catch (e) {
948
      // The editWindow no longer exists, or has been navigated to a different-
949
      // origin URL. Either way, the event listeners have already been removed
950
      // for us.
951
    }
952
    delete this.boundRefocusListenerMobileSafari_;
953
  }
954
  if (goog.userAgent.OPERA && this.usesIframe()) {
955
    try {
956
      var editWindow = this.getEditableDomHelper().getWindow();
957
      editWindow.removeEventListener(
958
          goog.events.EventType.FOCUS, this.boundFocusListenerOpera_, false);
959
      editWindow.removeEventListener(
960
          goog.events.EventType.BLUR, this.boundBlurListenerOpera_, false);
961
    } catch (e) {
962
      // The editWindow no longer exists, or has been navigated to a different-
963
      // origin URL. Either way, the event listeners have already been removed
964
      // for us.
965
    }
966
    delete this.boundFocusListenerOpera_;
967
    delete this.boundBlurListenerOpera_;
968
  }
969

970
  if (this.changeTimerGecko_) {
971
    this.changeTimerGecko_.stop();
972
  }
973
  this.delayedChangeTimer_.stop();
974
};
975

976

977
/** @override */
978
goog.editor.Field.prototype.disposeInternal = function() {
979
  if (this.isLoading() || this.isLoaded()) {
980
    goog.log.warning(this.logger, 'Disposing a field that is in use.');
981
  }
982

983
  if (this.getOriginalElement()) {
984
    this.execCommand(goog.editor.Command.CLEAR_LOREM);
985
  }
986

987
  this.tearDownFieldObject_();
988
  this.clearListeners();
989
  this.clearFieldLoadListener_();
990
  this.originalDomHelper = null;
991

992
  if (this.eventRegister) {
993
    this.eventRegister.dispose();
994
    this.eventRegister = null;
995
  }
996

997
  this.removeAllWrappers();
998

999
  if (goog.editor.Field.getActiveFieldId() == this.id) {
1000
    goog.editor.Field.setActiveFieldId(null);
1001
  }
1002

1003
  for (var classId in this.plugins_) {
1004
    var plugin = this.plugins_[classId];
1005
    if (plugin.isAutoDispose()) {
1006
      plugin.dispose();
1007
    }
1008
  }
1009
  delete (this.plugins_);
1010

1011
  goog.editor.Field.superClass_.disposeInternal.call(this);
1012
};
1013

1014

1015
/**
1016
 * Attach an wrapper to this field, to be thrown out when the field
1017
 * is disposed.
1018
 * @param {goog.Disposable} wrapper The wrapper to attach.
1019
 */
1020
goog.editor.Field.prototype.attachWrapper = function(wrapper) {
1021
  this.wrappers_.push(wrapper);
1022
};
1023

1024

1025
/**
1026
 * Removes all wrappers and destroys them.
1027
 */
1028
goog.editor.Field.prototype.removeAllWrappers = function() {
1029
  var wrapper;
1030
  while (wrapper = this.wrappers_.pop()) {
1031
    wrapper.dispose();
1032
  }
1033
};
1034

1035

1036
/**
1037
 * Sets whether activating a hyperlink in this editable field will open a new
1038
 *     window or not.
1039
 * @param {boolean} followLinkInNewWindow
1040
 */
1041
goog.editor.Field.prototype.setFollowLinkInNewWindow = function(
1042
    followLinkInNewWindow) {
1043
  this.followLinkInNewWindow_ = followLinkInNewWindow;
1044
};
1045

1046

1047
/**
1048
 * List of mutation events in Gecko browsers.
1049
 * @type {Array<string>}
1050
 * @protected
1051
 */
1052
goog.editor.Field.MUTATION_EVENTS_GECKO = [
1053
  'DOMNodeInserted', 'DOMNodeRemoved', 'DOMNodeRemovedFromDocument',
1054
  'DOMNodeInsertedIntoDocument', 'DOMCharacterDataModified'
1055
];
1056

1057

1058
/**
1059
 * Mutation events tell us when something has changed for mozilla.
1060
 * @protected
1061
 */
1062
goog.editor.Field.prototype.setupMutationEventHandlersGecko = function() {
1063
  // Always use DOMSubtreeModified on Gecko when not using an iframe so that
1064
  // DOM mutations outside the Field do not trigger handleMutationEventGecko_.
1065
  if (goog.editor.BrowserFeature.HAS_DOM_SUBTREE_MODIFIED_EVENT ||
1066
      !this.usesIframe()) {
1067
    this.eventRegister.listen(
1068
        this.getElement(), 'DOMSubtreeModified',
1069
        this.handleMutationEventGecko_);
1070
  } else {
1071
    var doc = this.getEditableDomHelper().getDocument();
1072
    this.eventRegister.listen(
1073
        doc, goog.editor.Field.MUTATION_EVENTS_GECKO,
1074
        this.handleMutationEventGecko_, true);
1075

1076
    // DOMAttrModified fires for a lot of events we want to ignore.  This goes
1077
    // through a different handler so that we can ignore many of these.
1078
    this.eventRegister.listen(
1079
        doc, 'DOMAttrModified',
1080
        goog.bind(
1081
            this.handleDomAttrChange, this, this.handleMutationEventGecko_),
1082
        true);
1083
  }
1084
};
1085

1086

1087
/**
1088
 * Handle before change key events and fire the beforetab event if appropriate.
1089
 * This needs to happen on keydown in IE and keypress in FF.
1090
 * @param {goog.events.BrowserEvent} e The browser event.
1091
 * @return {boolean} Whether to still perform the default key action.  Only set
1092
 *     to true if the actual event has already been canceled.
1093
 * @private
1094
 */
1095
goog.editor.Field.prototype.handleBeforeChangeKeyEvent_ = function(e) {
1096
  // There are two reasons to block a key:
1097
  var block =
1098
      // #1: to intercept a tab
1099
      // TODO: possibly don't allow clients to intercept tabs outside of LIs and
1100
      // maybe tables as well?
1101
      (e.keyCode == goog.events.KeyCodes.TAB && !this.dispatchBeforeTab_(e)) ||
1102
      // #2: to block a Firefox-specific bug where Macs try to navigate
1103
      // back a page when you hit command+left arrow or comamnd-right arrow.
1104
      // See https://bugzilla.mozilla.org/show_bug.cgi?id=341886
1105
      // This was fixed in Firefox 29, but still exists in older versions.
1106
      (goog.userAgent.GECKO && e.metaKey &&
1107
       !goog.userAgent.isVersionOrHigher(29) &&
1108
       (e.keyCode == goog.events.KeyCodes.LEFT ||
1109
        e.keyCode == goog.events.KeyCodes.RIGHT));
1110

1111
  if (block) {
1112
    e.preventDefault();
1113
    return false;
1114
  } else {
1115
    // In Gecko we have both keyCode and charCode. charCode is for human
1116
    // readable characters like a, b and c. However pressing ctrl+c and so on
1117
    // also causes charCode to be set.
1118

1119
    // TODO(arv): Del at end of field or backspace at beginning should be
1120
    // ignored.
1121
    this.gotGeneratingKey_ = e.charCode ||
1122
        goog.editor.Field.isGeneratingKey_(e, goog.userAgent.GECKO);
1123
    if (this.gotGeneratingKey_) {
1124
      this.dispatchBeforeChange();
1125
      // TODO(robbyw): Should we return the value of the above?
1126
    }
1127
  }
1128

1129
  return true;
1130
};
1131

1132

1133
/**
1134
 * Keycodes that result in a selectionchange event (e.g. the cursor moving).
1135
 * @type {!Object<number, number>}
1136
 */
1137
goog.editor.Field.SELECTION_CHANGE_KEYCODES = {
1138
  8: 1,   // backspace
1139
  9: 1,   // tab
1140
  13: 1,  // enter
1141
  33: 1,  // page up
1142
  34: 1,  // page down
1143
  35: 1,  // end
1144
  36: 1,  // home
1145
  37: 1,  // left
1146
  38: 1,  // up
1147
  39: 1,  // right
1148
  40: 1,  // down
1149
  46: 1   // delete
1150
};
1151

1152

1153
/**
1154
 * Map of keyCodes (not charCodes) that when used in conjunction with the
1155
 * Ctrl key cause selection changes in the field contents. These are the keys
1156
 * that are not handled by the basic formatting trogedit plugins. Note that
1157
 * combinations like Ctrl-left etc are already handled in
1158
 * SELECTION_CHANGE_KEYCODES
1159
 * @type {Object}
1160
 * @private
1161
 */
1162
goog.editor.Field.CTRL_KEYS_CAUSING_SELECTION_CHANGES_ = {
1163
  65: true,  // A
1164
  86: true,  // V
1165
  88: true   // X
1166
};
1167

1168

1169
/**
1170
 * Map of keyCodes (not charCodes) that might need to be handled as a keyboard
1171
 * shortcut (even when ctrl/meta key is not pressed) by some plugin. Currently
1172
 * it is a small list. If it grows too big we can optimize it by using ranges
1173
 * or extending it from SELECTION_CHANGE_KEYCODES
1174
 * @type {Object}
1175
 * @private
1176
 */
1177
goog.editor.Field.POTENTIAL_SHORTCUT_KEYCODES_ = {
1178
  8: 1,   // backspace
1179
  9: 1,   // tab
1180
  13: 1,  // enter
1181
  27: 1,  // esc
1182
  33: 1,  // page up
1183
  34: 1,  // page down
1184
  37: 1,  // left
1185
  38: 1,  // up
1186
  39: 1,  // right
1187
  40: 1   // down
1188
};
1189

1190

1191
/**
1192
 * Calls all the plugins of the given operation, in sequence, with the
1193
 * given arguments. This is short-circuiting: once one plugin cancels
1194
 * the event, no more plugins will be invoked.
1195
 * @param {goog.editor.Plugin.Op} op A plugin op.
1196
 * @param {...*} var_args The arguments to the plugin.
1197
 * @return {boolean} True if one of the plugins cancel the event, false
1198
 *    otherwise.
1199
 * @private
1200
 */
1201
goog.editor.Field.prototype.invokeShortCircuitingOp_ = function(op, var_args) {
1202
  var plugins = this.indexedPlugins_[op];
1203
  var argList = goog.array.slice(arguments, 1);
1204
  for (var i = 0; i < plugins.length; ++i) {
1205
    // If the plugin returns true, that means it handled the event and
1206
    // we shouldn't propagate to the other plugins.
1207
    var plugin = plugins[i];
1208
    if ((plugin.isEnabled(this) || goog.editor.Plugin.IRREPRESSIBLE_OPS[op]) &&
1209
        plugin[goog.editor.Plugin.OPCODE[op]].apply(plugin, argList)) {
1210
      // Only one plugin is allowed to handle the event. If for some reason
1211
      // a plugin wants to handle it and still allow other plugins to handle
1212
      // it, it shouldn't return true.
1213
      return true;
1214
    }
1215
  }
1216

1217
  return false;
1218
};
1219

1220

1221
/**
1222
 * Invoke this operation on all plugins with the given arguments.
1223
 * @param {goog.editor.Plugin.Op} op A plugin op.
1224
 * @param {...*} var_args The arguments to the plugin.
1225
 * @private
1226
 */
1227
goog.editor.Field.prototype.invokeOp_ = function(op, var_args) {
1228
  var plugins = this.indexedPlugins_[op];
1229
  var argList = goog.array.slice(arguments, 1);
1230
  for (var i = 0; i < plugins.length; ++i) {
1231
    var plugin = plugins[i];
1232
    if (plugin.isEnabled(this) || goog.editor.Plugin.IRREPRESSIBLE_OPS[op]) {
1233
      plugin[goog.editor.Plugin.OPCODE[op]].apply(plugin, argList);
1234
    }
1235
  }
1236
};
1237

1238

1239
/**
1240
 * Reduce this argument over all plugins. The result of each plugin invocation
1241
 * will be passed to the next plugin invocation. See goog.array.reduce.
1242
 * @param {goog.editor.Plugin.Op} op A plugin op.
1243
 * @param {string} arg The argument to reduce. For now, we assume it's a
1244
 *     string, but we should widen this later if there are reducing
1245
 *     plugins that don't operate on strings.
1246
 * @param {...*} var_args Any extra arguments to pass to the plugin. These args
1247
 *     will not be reduced.
1248
 * @return {string} The reduced argument.
1249
 * @private
1250
 */
1251
goog.editor.Field.prototype.reduceOp_ = function(op, arg, var_args) {
1252
  var plugins = this.indexedPlugins_[op];
1253
  var argList = goog.array.slice(arguments, 1);
1254
  for (var i = 0; i < plugins.length; ++i) {
1255
    var plugin = plugins[i];
1256
    if (plugin.isEnabled(this) || goog.editor.Plugin.IRREPRESSIBLE_OPS[op]) {
1257
      argList[0] = plugin[goog.editor.Plugin.OPCODE[op]].apply(plugin, argList);
1258
    }
1259
  }
1260
  return argList[0];
1261
};
1262

1263

1264
/**
1265
 * Prepare the given contents, then inject them into the editable field.
1266
 * @param {?string} contents The contents to prepare.
1267
 * @param {Element} field The field element.
1268
 * @protected
1269
 */
1270
goog.editor.Field.prototype.injectContents = function(contents, field) {
1271
  var styles = {};
1272
  var newHtml = this.getInjectableContents(contents, styles);
1273
  goog.style.setStyle(field, styles);
1274
  goog.editor.node.replaceInnerHtml(field, newHtml);
1275
};
1276

1277

1278
/**
1279
 * Returns prepared contents that can be injected into the editable field.
1280
 * @param {?string} contents The contents to prepare.
1281
 * @param {Object} styles A map that will be populated with styles that should
1282
 *     be applied to the field element together with the contents.
1283
 * @return {string} The prepared contents.
1284
 */
1285
goog.editor.Field.prototype.getInjectableContents = function(contents, styles) {
1286
  return this.reduceOp_(
1287
      goog.editor.Plugin.Op.PREPARE_CONTENTS_HTML, contents || '', styles);
1288
};
1289

1290

1291
/**
1292
 * Handles keydown on the field.
1293
 * @param {goog.events.BrowserEvent} e The browser event.
1294
 * @private
1295
 */
1296
goog.editor.Field.prototype.handleKeyDown_ = function(e) {
1297
  // Mac only fires Cmd+A for keydown, not keyup: b/22407515.
1298
  if (goog.userAgent.MAC && e.keyCode == goog.events.KeyCodes.A) {
1299
    this.maybeStartSelectionChangeTimer_(e);
1300
  }
1301

1302
  if (!goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
1303
    if (!this.handleBeforeChangeKeyEvent_(e)) {
1304
      return;
1305
    }
1306
  }
1307

1308
  if (!this.invokeShortCircuitingOp_(goog.editor.Plugin.Op.KEYDOWN, e) &&
1309
      goog.editor.BrowserFeature.USES_KEYDOWN) {
1310
    this.handleKeyboardShortcut_(e);
1311
  }
1312
};
1313

1314

1315
/**
1316
 * Handles keypress on the field.
1317
 * @param {goog.events.BrowserEvent} e The browser event.
1318
 * @private
1319
 */
1320
goog.editor.Field.prototype.handleKeyPress_ = function(e) {
1321
  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
1322
    if (!this.handleBeforeChangeKeyEvent_(e)) {
1323
      return;
1324
    }
1325
  } else {
1326
    // In IE only keys that generate output trigger keypress
1327
    // In Mozilla charCode is set for keys generating content.
1328
    this.gotGeneratingKey_ = true;
1329
    this.dispatchBeforeChange();
1330
  }
1331

1332
  if (!this.invokeShortCircuitingOp_(goog.editor.Plugin.Op.KEYPRESS, e) &&
1333
      !goog.editor.BrowserFeature.USES_KEYDOWN) {
1334
    this.handleKeyboardShortcut_(e);
1335
  }
1336
};
1337

1338

1339
/**
1340
 * Handles keyup on the field.
1341
 * @param {!goog.events.BrowserEvent} e The browser event.
1342
 * @private
1343
 */
1344
goog.editor.Field.prototype.handleKeyUp_ = function(e) {
1345
  if (!goog.editor.BrowserFeature.USE_MUTATION_EVENTS &&
1346
      (this.gotGeneratingKey_ ||
1347
       goog.editor.Field.isSpecialGeneratingKey_(e))) {
1348
    // The special keys won't have set the gotGeneratingKey flag, so we check
1349
    // for them explicitly
1350
    this.handleChange();
1351
  }
1352

1353
  this.invokeShortCircuitingOp_(goog.editor.Plugin.Op.KEYUP, e);
1354
  this.maybeStartSelectionChangeTimer_(e);
1355
};
1356

1357

1358
/**
1359
 * Fires {@code BEFORESELECTIONCHANGE} and starts the selection change timer
1360
 * (which will fire {@code SELECTIONCHANGE}) if the given event is a key event
1361
 * that causes a selection change.
1362
 * @param {!goog.events.BrowserEvent} e The browser event.
1363
 * @private
1364
 */
1365
goog.editor.Field.prototype.maybeStartSelectionChangeTimer_ = function(e) {
1366
  if (this.isEventStopped(goog.editor.Field.EventType.SELECTIONCHANGE)) {
1367
    return;
1368
  }
1369

1370
  if (goog.editor.Field.SELECTION_CHANGE_KEYCODES[e.keyCode] ||
1371
      ((e.ctrlKey || e.metaKey) &&
1372
       goog.editor.Field.CTRL_KEYS_CAUSING_SELECTION_CHANGES_[e.keyCode])) {
1373
    this.dispatchEvent(goog.editor.Field.EventType.BEFORESELECTIONCHANGE);
1374
    this.selectionChangeTimer_.start();
1375
  }
1376
};
1377

1378

1379
/**
1380
 * Handles keyboard shortcuts on the field.  Note that we bake this into our
1381
 * handleKeyPress/handleKeyDown rather than using goog.events.KeyHandler or
1382
 * goog.ui.KeyboardShortcutHandler for performance reasons.  Since these
1383
 * are handled on every key stroke, we do not want to be going out to the
1384
 * event system every time.
1385
 * @param {goog.events.BrowserEvent} e The browser event.
1386
 * @private
1387
 */
1388
goog.editor.Field.prototype.handleKeyboardShortcut_ = function(e) {
1389
  // Alt key is used for i18n languages to enter certain characters. like
1390
  // control + alt + z (used for IMEs) and control + alt + s for Polish.
1391
  // So we don't invoke handleKeyboardShortcut at all for alt keys.
1392
  if (e.altKey) {
1393
    return;
1394
  }
1395

1396
  var isModifierPressed = goog.userAgent.MAC ? e.metaKey : e.ctrlKey;
1397
  if (isModifierPressed ||
1398
      goog.editor.Field.POTENTIAL_SHORTCUT_KEYCODES_[e.keyCode]) {
1399
    // TODO(user): goog.events.KeyHandler uses much more complicated logic
1400
    // to determine key.  Consider changing to what they do.
1401
    var key = e.charCode || e.keyCode;
1402

1403
    if (key == 17) {  // Ctrl key
1404
      // In IE and Webkit pressing Ctrl key itself results in this event.
1405
      return;
1406
    }
1407

1408
    var stringKey = String.fromCharCode(key).toLowerCase();
1409
    // Ctrl+Cmd+Space generates a charCode for a backtick on Mac Firefox, but
1410
    // has the correct string key in the browser event.
1411
    if (goog.userAgent.MAC && goog.userAgent.GECKO && stringKey == '`' &&
1412
        e.getBrowserEvent().key == ' ') {
1413
      stringKey = ' ';
1414
    }
1415
    // Converting the keyCode for "\" using fromCharCode creates "u", so we need
1416
    // to look out for it specifically.
1417
    if (e.keyCode == goog.events.KeyCodes.BACKSLASH) {
1418
      stringKey = '\\';
1419
    }
1420

1421
    if (this.invokeShortCircuitingOp_(
1422
            goog.editor.Plugin.Op.SHORTCUT, e, stringKey, isModifierPressed)) {
1423
      e.preventDefault();
1424
      // We don't call stopPropagation as some other handler outside of
1425
      // trogedit might need it.
1426
    }
1427
  }
1428
};
1429

1430

1431
/**
1432
 * Executes an editing command as per the registered plugins.
1433
 * @param {string} command The command to execute.
1434
 * @param {...*} var_args Any additional parameters needed to execute the
1435
 *     command.
1436
 * @return {*} False if the command wasn't handled, otherwise, the result of
1437
 *     the command.
1438
 */
1439
goog.editor.Field.prototype.execCommand = function(command, var_args) {
1440
  var args = arguments;
1441
  var result;
1442

1443
  var plugins = this.indexedPlugins_[goog.editor.Plugin.Op.EXEC_COMMAND];
1444
  for (var i = 0; i < plugins.length; ++i) {
1445
    // If the plugin supports the command, that means it handled the
1446
    // event and we shouldn't propagate to the other plugins.
1447
    var plugin = plugins[i];
1448
    if (plugin.isEnabled(this) && plugin.isSupportedCommand(command)) {
1449
      result = plugin.execCommand.apply(plugin, args);
1450
      break;
1451
    }
1452
  }
1453

1454
  return result;
1455
};
1456

1457

1458
/**
1459
 * Gets the value of command(s).
1460
 * @param {string|Array<string>} commands String name(s) of the command.
1461
 * @return {*} Value of each command. Returns false (or array of falses)
1462
 *     if designMode is off or the field is otherwise uneditable, and
1463
 *     there are no activeOnUneditable plugins for the command.
1464
 */
1465
goog.editor.Field.prototype.queryCommandValue = function(commands) {
1466
  var isEditable = this.isLoaded() && this.isSelectionEditable();
1467
  if (goog.isString(commands)) {
1468
    return this.queryCommandValueInternal_(commands, isEditable);
1469
  } else {
1470
    var state = {};
1471
    for (var i = 0; i < commands.length; i++) {
1472
      state[commands[i]] =
1473
          this.queryCommandValueInternal_(commands[i], isEditable);
1474
    }
1475
    return state;
1476
  }
1477
};
1478

1479

1480
/**
1481
 * Gets the value of this command.
1482
 * @param {string} command The command to check.
1483
 * @param {boolean} isEditable Whether the field is currently editable.
1484
 * @return {*} The state of this command. Null if not handled.
1485
 *     False if the field is uneditable and there are no handlers for
1486
 *     uneditable commands.
1487
 * @private
1488
 */
1489
goog.editor.Field.prototype.queryCommandValueInternal_ = function(
1490
    command, isEditable) {
1491
  var plugins = this.indexedPlugins_[goog.editor.Plugin.Op.QUERY_COMMAND];
1492
  for (var i = 0; i < plugins.length; ++i) {
1493
    var plugin = plugins[i];
1494
    if (plugin.isEnabled(this) && plugin.isSupportedCommand(command) &&
1495
        (isEditable || plugin.activeOnUneditableFields())) {
1496
      return plugin.queryCommandValue(command);
1497
    }
1498
  }
1499
  return isEditable ? null : false;
1500
};
1501

1502

1503
/**
1504
 * Fires a change event only if the attribute change effects the editiable
1505
 * field. We ignore events that are internal browser events (ie scrollbar
1506
 * state change)
1507
 * @param {Function} handler The function to call if this is not an internal
1508
 *     browser event.
1509
 * @param {goog.events.BrowserEvent} browserEvent The browser event.
1510
 * @protected
1511
 */
1512
goog.editor.Field.prototype.handleDomAttrChange = function(
1513
    handler, browserEvent) {
1514
  if (this.isEventStopped(goog.editor.Field.EventType.CHANGE)) {
1515
    return;
1516
  }
1517

1518
  var e = browserEvent.getBrowserEvent();
1519

1520
  // For XUL elements, since we don't care what they are doing
1521
  try {
1522
    if (e.originalTarget.prefix ||
1523
        /** @type {!Element} */ (e.originalTarget).nodeName == 'scrollbar') {
1524
      return;
1525
    }
1526
  } catch (ex1) {
1527
    // Some XUL nodes don't like you reading their properties.  If we got
1528
    // the exception, this implies  a XUL node so we can return.
1529
    return;
1530
  }
1531

1532
  // Check if prev and new values are different, sometimes this fires when
1533
  // nothing has really changed.
1534
  if (e.prevValue == e.newValue) {
1535
    return;
1536
  }
1537
  handler.call(this, e);
1538
};
1539

1540

1541
/**
1542
 * Handle a mutation event.
1543
 * @param {goog.events.BrowserEvent|Event} e The browser event.
1544
 * @private
1545
 */
1546
goog.editor.Field.prototype.handleMutationEventGecko_ = function(e) {
1547
  if (this.isEventStopped(goog.editor.Field.EventType.CHANGE)) {
1548
    return;
1549
  }
1550

1551
  e = e.getBrowserEvent ? e.getBrowserEvent() : e;
1552
  // For people with firebug, firebug sets this property on elements it is
1553
  // inserting into the dom.
1554
  if (e.target.firebugIgnore) {
1555
    return;
1556
  }
1557

1558
  this.isModified_ = true;
1559
  this.isEverModified_ = true;
1560
  this.changeTimerGecko_.start();
1561
};
1562

1563

1564
/**
1565
 * Handle drop events. Deal with focus/selection issues and set the document
1566
 * as changed.
1567
 * @param {goog.events.BrowserEvent} e The browser event.
1568
 * @private
1569
 */
1570
goog.editor.Field.prototype.handleDrop_ = function(e) {
1571
  if (goog.userAgent.IE) {
1572
    // TODO(user): This should really be done in the loremipsum plugin.
1573
    this.execCommand(goog.editor.Command.CLEAR_LOREM, true);
1574
  }
1575

1576
  // TODO(user): I just moved this code to this location, but I wonder why
1577
  // it is only done for this case.  Investigate.
1578
  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
1579
    this.dispatchFocusAndBeforeFocus_();
1580
  }
1581

1582
  this.dispatchChange();
1583
};
1584

1585

1586
/**
1587
 * @return {HTMLIFrameElement} The iframe that's body is editable.
1588
 * @protected
1589
 */
1590
goog.editor.Field.prototype.getEditableIframe = function() {
1591
  var dh;
1592
  if (this.usesIframe() && (dh = this.getEditableDomHelper())) {
1593
    // If the iframe has been destroyed, the dh could still exist since the
1594
    // node may not be gc'ed, but fetching the window can fail.
1595
    var win = dh.getWindow();
1596
    return /** @type {HTMLIFrameElement} */ (win && win.frameElement);
1597
  }
1598
  return null;
1599
};
1600

1601

1602
/**
1603
 * @return {goog.dom.DomHelper?} The dom helper for the editable node.
1604
 */
1605
goog.editor.Field.prototype.getEditableDomHelper = function() {
1606
  return this.editableDomHelper;
1607
};
1608

1609

1610
/**
1611
 * @return {goog.dom.AbstractRange?} Closure range object wrapping the selection
1612
 *     in this field or null if this field is not currently editable.
1613
 */
1614
goog.editor.Field.prototype.getRange = function() {
1615
  var win = this.editableDomHelper && this.editableDomHelper.getWindow();
1616
  return win && goog.dom.Range.createFromWindow(win);
1617
};
1618

1619

1620
/**
1621
 * Dispatch a selection change event, optionally caused by the given browser
1622
 * event or selecting the given target.
1623
 * @param {goog.events.BrowserEvent=} opt_e Optional browser event causing this
1624
 *     event.
1625
 * @param {Node=} opt_target The node the selection changed to.
1626
 */
1627
goog.editor.Field.prototype.dispatchSelectionChangeEvent = function(
1628
    opt_e, opt_target) {
1629
  if (this.isEventStopped(goog.editor.Field.EventType.SELECTIONCHANGE)) {
1630
    return;
1631
  }
1632

1633
  // The selection is editable only if the selection is inside the
1634
  // editable field.
1635
  var range = this.getRange();
1636
  var rangeContainer = range && range.getContainerElement();
1637
  this.isSelectionEditable_ =
1638
      !!rangeContainer && goog.dom.contains(this.getElement(), rangeContainer);
1639

1640
  this.dispatchCommandValueChange();
1641
  this.dispatchEvent({
1642
    type: goog.editor.Field.EventType.SELECTIONCHANGE,
1643
    originalType: opt_e && opt_e.type
1644
  });
1645

1646
  this.invokeShortCircuitingOp_(
1647
      goog.editor.Plugin.Op.SELECTION, opt_e, opt_target);
1648
};
1649

1650

1651
/**
1652
 * Dispatch a selection change event using a browser event that was
1653
 * asynchronously saved earlier.
1654
 * @private
1655
 */
1656
goog.editor.Field.prototype.handleSelectionChangeTimer_ = function() {
1657
  var t = this.selectionChangeTarget_;
1658
  this.selectionChangeTarget_ = null;
1659
  this.dispatchSelectionChangeEvent(undefined, t);
1660
};
1661

1662

1663
/**
1664
 * This dispatches the beforechange event on the editable field
1665
 */
1666
goog.editor.Field.prototype.dispatchBeforeChange = function() {
1667
  if (this.isEventStopped(goog.editor.Field.EventType.BEFORECHANGE)) {
1668
    return;
1669
  }
1670

1671
  this.dispatchEvent(goog.editor.Field.EventType.BEFORECHANGE);
1672
};
1673

1674

1675
/**
1676
 * This dispatches the beforetab event on the editable field. If this event is
1677
 * cancelled, then the default tab behavior is prevented.
1678
 * @param {goog.events.BrowserEvent} e The tab event.
1679
 * @private
1680
 * @return {boolean} The result of dispatchEvent.
1681
 */
1682
goog.editor.Field.prototype.dispatchBeforeTab_ = function(e) {
1683
  return this.dispatchEvent({
1684
    type: goog.editor.Field.EventType.BEFORETAB,
1685
    shiftKey: e.shiftKey,
1686
    altKey: e.altKey,
1687
    ctrlKey: e.ctrlKey
1688
  });
1689
};
1690

1691

1692
/**
1693
 * Temporarily ignore change events. If the time has already been set, it will
1694
 * fire immediately now.  Further setting of the timer is stopped and
1695
 * dispatching of events is stopped until startChangeEvents is called.
1696
 * @param {boolean=} opt_stopChange Whether to ignore base change events.
1697
 * @param {boolean=} opt_stopDelayedChange Whether to ignore delayed change
1698
 *     events.
1699
 */
1700
goog.editor.Field.prototype.stopChangeEvents = function(
1701
    opt_stopChange, opt_stopDelayedChange) {
1702
  if (opt_stopChange) {
1703
    if (this.changeTimerGecko_) {
1704
      this.changeTimerGecko_.fireIfActive();
1705
    }
1706

1707
    this.stopEvent(goog.editor.Field.EventType.CHANGE);
1708
  }
1709
  if (opt_stopDelayedChange) {
1710
    this.clearDelayedChange();
1711
    this.stopEvent(goog.editor.Field.EventType.DELAYEDCHANGE);
1712
  }
1713
};
1714

1715

1716
/**
1717
 * Start change events again and fire once if desired.
1718
 * @param {boolean=} opt_fireChange Whether to fire the change event
1719
 *      immediately.
1720
 * @param {boolean=} opt_fireDelayedChange Whether to fire the delayed change
1721
 *      event immediately.
1722
 */
1723
goog.editor.Field.prototype.startChangeEvents = function(
1724
    opt_fireChange, opt_fireDelayedChange) {
1725

1726
  if (!opt_fireChange && this.changeTimerGecko_) {
1727
    // In the case where change events were stopped and we're not firing
1728
    // them on start, the user was trying to suppress all change or delayed
1729
    // change events. Clear the change timer now while the events are still
1730
    // stopped so that its firing doesn't fire a stopped change event, or
1731
    // queue up a delayed change event that we were trying to stop.
1732
    this.changeTimerGecko_.fireIfActive();
1733
  }
1734

1735
  this.startEvent(goog.editor.Field.EventType.CHANGE);
1736
  this.startEvent(goog.editor.Field.EventType.DELAYEDCHANGE);
1737
  if (opt_fireChange) {
1738
    this.handleChange();
1739
  }
1740

1741
  if (opt_fireDelayedChange) {
1742
    this.dispatchDelayedChange_();
1743
  }
1744
};
1745

1746

1747
/**
1748
 * Stops the event of the given type from being dispatched.
1749
 * @param {goog.editor.Field.EventType} eventType type of event to stop.
1750
 */
1751
goog.editor.Field.prototype.stopEvent = function(eventType) {
1752
  this.stoppedEvents_[eventType] = 1;
1753
};
1754

1755

1756
/**
1757
 * Re-starts the event of the given type being dispatched, if it had
1758
 * previously been stopped with stopEvent().
1759
 * @param {goog.editor.Field.EventType} eventType type of event to start.
1760
 */
1761
goog.editor.Field.prototype.startEvent = function(eventType) {
1762
  // Toggling this bit on/off instead of deleting it/re-adding it
1763
  // saves array allocations.
1764
  this.stoppedEvents_[eventType] = 0;
1765
};
1766

1767

1768
/**
1769
 * Block an event for a short amount of time. Intended
1770
 * for the situation where an event pair fires in quick succession
1771
 * (e.g., mousedown/mouseup, keydown/keyup, focus/blur),
1772
 * and we want the second event in the pair to get "debounced."
1773
 *
1774
 * WARNING: This should never be used to solve race conditions or for
1775
 * mission-critical actions. It should only be used for UI improvements,
1776
 * where it's okay if the behavior is non-deterministic.
1777
 *
1778
 * @param {goog.editor.Field.EventType} eventType type of event to debounce.
1779
 */
1780
goog.editor.Field.prototype.debounceEvent = function(eventType) {
1781
  this.debouncedEvents_[eventType] = goog.now();
1782
};
1783

1784

1785
/**
1786
 * Checks if the event of the given type has stopped being dispatched
1787
 * @param {goog.editor.Field.EventType} eventType type of event to check.
1788
 * @return {boolean} true if the event has been stopped with stopEvent().
1789
 * @protected
1790
 */
1791
goog.editor.Field.prototype.isEventStopped = function(eventType) {
1792
  return !!this.stoppedEvents_[eventType] ||
1793
      (this.debouncedEvents_[eventType] &&
1794
       (goog.now() - this.debouncedEvents_[eventType] <=
1795
        goog.editor.Field.DEBOUNCE_TIME_MS_));
1796
};
1797

1798

1799
/**
1800
 * Calls a function to manipulate the dom of this field. This method should be
1801
 * used whenever Trogedit clients need to modify the dom of the field, so that
1802
 * delayed change events are handled appropriately. Extra delayed change events
1803
 * will cause undesired states to be added to the undo-redo stack. This method
1804
 * will always fire at most one delayed change event, depending on the value of
1805
 * {@code opt_preventDelayedChange}.
1806
 *
1807
 * @param {function()} func The function to call that will manipulate the dom.
1808
 * @param {boolean=} opt_preventDelayedChange Whether delayed change should be
1809
 *      prevented after calling {@code func}. Defaults to always firing
1810
 *      delayed change.
1811
 * @param {Object=} opt_handler Object in whose scope to call the listener.
1812
 */
1813
goog.editor.Field.prototype.manipulateDom = function(
1814
    func, opt_preventDelayedChange, opt_handler) {
1815

1816
  this.stopChangeEvents(true, true);
1817
  // We don't want any problems with the passed in function permanently
1818
  // stopping change events. That would break Trogedit.
1819
  try {
1820
    func.call(opt_handler);
1821
  } finally {
1822
    // If the field isn't loaded then change and delayed change events will be
1823
    // started as part of the onload behavior.
1824
    if (this.isLoaded()) {
1825
      // We assume that func always modified the dom and so fire a single change
1826
      // event. Delayed change is only fired if not prevented by the user.
1827
      if (opt_preventDelayedChange) {
1828
        this.startEvent(goog.editor.Field.EventType.CHANGE);
1829
        this.handleChange();
1830
        this.startEvent(goog.editor.Field.EventType.DELAYEDCHANGE);
1831
      } else {
1832
        this.dispatchChange();
1833
      }
1834
    }
1835
  }
1836
};
1837

1838

1839
/**
1840
 * Dispatches a command value change event.
1841
 * @param {Array<string>=} opt_commands Commands whose state has
1842
 *     changed.
1843
 */
1844
goog.editor.Field.prototype.dispatchCommandValueChange = function(
1845
    opt_commands) {
1846
  if (opt_commands) {
1847
    this.dispatchEvent({
1848
      type: goog.editor.Field.EventType.COMMAND_VALUE_CHANGE,
1849
      commands: opt_commands
1850
    });
1851
  } else {
1852
    this.dispatchEvent(goog.editor.Field.EventType.COMMAND_VALUE_CHANGE);
1853
  }
1854
};
1855

1856

1857
/**
1858
 * Dispatches the appropriate set of change events. This only fires
1859
 * synchronous change events in blended-mode, iframe-using mozilla. It just
1860
 * starts the appropriate timer for goog.editor.Field.EventType.DELAYEDCHANGE.
1861
 * This also starts up change events again if they were stopped.
1862
 *
1863
 * @param {boolean=} opt_noDelay True if
1864
 *      goog.editor.Field.EventType.DELAYEDCHANGE should be fired syncronously.
1865
 */
1866
goog.editor.Field.prototype.dispatchChange = function(opt_noDelay) {
1867
  this.startChangeEvents(true, opt_noDelay);
1868
};
1869

1870

1871
/**
1872
 * Handle a change in the Editable Field.  Marks the field has modified,
1873
 * dispatches the change event on the editable field (moz only), starts the
1874
 * timer for the delayed change event.  Note that these actions only occur if
1875
 * the proper events are not stopped.
1876
 */
1877
goog.editor.Field.prototype.handleChange = function() {
1878
  if (this.isEventStopped(goog.editor.Field.EventType.CHANGE)) {
1879
    return;
1880
  }
1881

1882
  // Clear the changeTimerGecko_ if it's active, since any manual call to
1883
  // handle change is equiavlent to changeTimerGecko_.fire().
1884
  if (this.changeTimerGecko_) {
1885
    this.changeTimerGecko_.stop();
1886
  }
1887

1888
  this.isModified_ = true;
1889
  this.isEverModified_ = true;
1890

1891
  if (this.isEventStopped(goog.editor.Field.EventType.DELAYEDCHANGE)) {
1892
    return;
1893
  }
1894

1895
  this.delayedChangeTimer_.start();
1896
};
1897

1898

1899
/**
1900
 * Dispatch a delayed change event.
1901
 * @private
1902
 */
1903
goog.editor.Field.prototype.dispatchDelayedChange_ = function() {
1904
  if (this.isEventStopped(goog.editor.Field.EventType.DELAYEDCHANGE)) {
1905
    return;
1906
  }
1907
  // Clear the delayedChangeTimer_ if it's active, since any manual call to
1908
  // dispatchDelayedChange_ is equivalent to delayedChangeTimer_.fire().
1909
  this.delayedChangeTimer_.stop();
1910
  this.isModified_ = false;
1911
  this.dispatchEvent(goog.editor.Field.EventType.DELAYEDCHANGE);
1912
};
1913

1914

1915
/**
1916
 * Don't wait for the timer and just fire the delayed change event if it's
1917
 * pending.
1918
 */
1919
goog.editor.Field.prototype.clearDelayedChange = function() {
1920
  // The changeTimerGecko_ will queue up a delayed change so to fully clear
1921
  // delayed change we must also clear this timer.
1922
  if (this.changeTimerGecko_) {
1923
    this.changeTimerGecko_.fireIfActive();
1924
  }
1925
  this.delayedChangeTimer_.fireIfActive();
1926
};
1927

1928

1929
/**
1930
 * Dispatch beforefocus and focus for FF. Note that both of these actually
1931
 * happen in the document's "focus" event. Unfortunately, we don't actually
1932
 * have a way of getting in before the focus event in FF (boo! hiss!).
1933
 * In IE, we use onfocusin for before focus and onfocus for focus.
1934
 * @private
1935
 */
1936
goog.editor.Field.prototype.dispatchFocusAndBeforeFocus_ = function() {
1937
  this.dispatchBeforeFocus_();
1938
  this.dispatchFocus_();
1939
};
1940

1941

1942
/**
1943
 * Dispatches a before focus event.
1944
 * @private
1945
 */
1946
goog.editor.Field.prototype.dispatchBeforeFocus_ = function() {
1947
  if (this.isEventStopped(goog.editor.Field.EventType.BEFOREFOCUS)) {
1948
    return;
1949
  }
1950

1951
  this.execCommand(goog.editor.Command.CLEAR_LOREM, true);
1952
  this.dispatchEvent(goog.editor.Field.EventType.BEFOREFOCUS);
1953
};
1954

1955

1956
/**
1957
 * Dispatches a focus event.
1958
 * @private
1959
 */
1960
goog.editor.Field.prototype.dispatchFocus_ = function() {
1961
  if (this.isEventStopped(goog.editor.Field.EventType.FOCUS)) {
1962
    return;
1963
  }
1964
  goog.editor.Field.setActiveFieldId(this.id);
1965

1966
  this.isSelectionEditable_ = true;
1967

1968
  this.dispatchEvent(goog.editor.Field.EventType.FOCUS);
1969

1970
  if (goog.editor.BrowserFeature
1971
          .PUTS_CURSOR_BEFORE_FIRST_BLOCK_ELEMENT_ON_FOCUS) {
1972
    // If the cursor is at the beginning of the field, make sure that it is
1973
    // in the first user-visible line break, e.g.,
1974
    // no selection: <div><p>...</p></div> --> <div><p>|cursor|...</p></div>
1975
    // <div>|cursor|<p>...</p></div> --> <div><p>|cursor|...</p></div>
1976
    // <body>|cursor|<p>...</p></body> --> <body><p>|cursor|...</p></body>
1977
    var field = this.getElement();
1978
    var range = this.getRange();
1979

1980
    if (range) {
1981
      var focusNode = /** @type {!Element} */ (range.getFocusNode());
1982
      if (range.getFocusOffset() == 0 &&
1983
          (!focusNode || focusNode == field ||
1984
           focusNode.tagName == goog.dom.TagName.BODY)) {
1985
        goog.editor.range.selectNodeStart(field);
1986
      }
1987
    }
1988
  }
1989

1990
  if (!goog.editor.BrowserFeature.CLEARS_SELECTION_WHEN_FOCUS_LEAVES &&
1991
      this.usesIframe()) {
1992
    var parent = this.getEditableDomHelper().getWindow().parent;
1993
    parent.getSelection().removeAllRanges();
1994
  }
1995
};
1996

1997

1998
/**
1999
 * Dispatches a blur event.
2000
 * @protected
2001
 */
2002
goog.editor.Field.prototype.dispatchBlur = function() {
2003
  if (this.isEventStopped(goog.editor.Field.EventType.BLUR)) {
2004
    return;
2005
  }
2006

2007
  // Another field may have already been registered as active, so only
2008
  // clear out the active field id if we still think this field is active.
2009
  if (goog.editor.Field.getActiveFieldId() == this.id) {
2010
    goog.editor.Field.setActiveFieldId(null);
2011
  }
2012

2013
  this.isSelectionEditable_ = false;
2014
  this.dispatchEvent(goog.editor.Field.EventType.BLUR);
2015
};
2016

2017

2018
/**
2019
 * @return {boolean} Whether the selection is editable.
2020
 */
2021
goog.editor.Field.prototype.isSelectionEditable = function() {
2022
  return this.isSelectionEditable_;
2023
};
2024

2025

2026
/**
2027
 * Event handler for clicks in browsers that will follow a link when the user
2028
 * clicks, even if it's editable. We stop the click manually
2029
 * @param {goog.events.BrowserEvent} e The event.
2030
 * @private
2031
 */
2032
goog.editor.Field.cancelLinkClick_ = function(e) {
2033
  if (goog.dom.getAncestorByTagNameAndClass(
2034
          /** @type {Node} */ (e.target), goog.dom.TagName.A)) {
2035
    e.preventDefault();
2036
  }
2037
};
2038

2039

2040
/**
2041
 * Handle mouse down inside the editable field.
2042
 * @param {goog.events.BrowserEvent} e The event.
2043
 * @private
2044
 */
2045
goog.editor.Field.prototype.handleMouseDown_ = function(e) {
2046
  goog.editor.Field.setActiveFieldId(this.id);
2047

2048
  // Open links in a new window if the user control + clicks.
2049
  if (goog.userAgent.IE) {
2050
    var targetElement = e.target;
2051
    if (targetElement &&
2052
        /** @type {!Element} */ (targetElement).tagName == goog.dom.TagName.A &&
2053
        e.ctrlKey) {
2054
      this.originalDomHelper.getWindow().open(targetElement.href);
2055
    }
2056
  }
2057
  this.waitingForMouseUp_ = true;
2058
};
2059

2060

2061
/**
2062
 * Handle drag start. Needs to cancel listening for the mouse up event on the
2063
 * window.
2064
 * @param {goog.events.BrowserEvent} e The event.
2065
 * @private
2066
 */
2067
goog.editor.Field.prototype.handleDragStart_ = function(e) {
2068
  this.waitingForMouseUp_ = false;
2069
};
2070

2071

2072
/**
2073
 * Handle mouse up inside the editable field.
2074
 * @param {goog.events.BrowserEvent} e The event.
2075
 * @private
2076
 */
2077
goog.editor.Field.prototype.handleMouseUp_ = function(e) {
2078
  if (this.useWindowMouseUp_ && !this.waitingForMouseUp_) {
2079
    return;
2080
  }
2081
  this.waitingForMouseUp_ = false;
2082

2083
  /*
2084
   * We fire a selection change event immediately for listeners that depend on
2085
   * the native browser event object (e).  On IE, a listener that tries to
2086
   * retrieve the selection with goog.dom.Range may see an out-of-date
2087
   * selection range.
2088
   */
2089
  this.dispatchEvent(goog.editor.Field.EventType.BEFORESELECTIONCHANGE);
2090
  this.dispatchSelectionChangeEvent(e);
2091
  if (goog.userAgent.IE) {
2092
    /*
2093
     * Fire a second selection change event for listeners that need an
2094
     * up-to-date selection range. Save the event's target to be sent with it
2095
     * (it's safer than saving a copy of the event itself).
2096
     */
2097
    this.selectionChangeTarget_ = /** @type {Node} */ (e.target);
2098
    this.selectionChangeTimer_.start();
2099
  }
2100
};
2101

2102

2103
/**
2104
 * Retrieve the HTML contents of a field.
2105
 *
2106
 * Do NOT just get the innerHTML of a field directly--there's a lot of
2107
 * processing that needs to happen.
2108
  * @return {string} The scrubbed contents of the field.
2109
 */
2110
goog.editor.Field.prototype.getCleanContents = function() {
2111
  if (this.queryCommandValue(goog.editor.Command.USING_LOREM)) {
2112
    return goog.string.Unicode.NBSP;
2113
  }
2114

2115
  if (!this.isLoaded()) {
2116
    // The field is uneditable, so it's ok to read contents directly.
2117
    var elem = this.getOriginalElement();
2118
    if (!elem) {
2119
      goog.log.log(
2120
          this.logger, goog.log.Level.SHOUT,
2121
          "Couldn't get the field element to read the contents");
2122
    }
2123
    return elem.innerHTML;
2124
  }
2125

2126
  var fieldCopy = this.getFieldCopy();
2127

2128
  // Allow the plugins to handle their cleanup.
2129
  this.invokeOp_(goog.editor.Plugin.Op.CLEAN_CONTENTS_DOM, fieldCopy);
2130
  return this.reduceOp_(
2131
      goog.editor.Plugin.Op.CLEAN_CONTENTS_HTML, fieldCopy.innerHTML);
2132
};
2133

2134

2135
/**
2136
 * Get the copy of the editable field element, which has the innerHTML set
2137
 * correctly.
2138
 * @return {!Element} The copy of the editable field.
2139
 * @protected
2140
 */
2141
goog.editor.Field.prototype.getFieldCopy = function() {
2142
  var field = this.getElement();
2143
  // Deep cloneNode strips some script tag contents in IE, so we do this.
2144
  var fieldCopy = /** @type {Element} */ (field.cloneNode(false));
2145

2146
  // For some reason, when IE sets innerHtml of the cloned node, it strips
2147
  // script tags that fall at the beginning of an element. Appending a
2148
  // non-breaking space prevents this.
2149
  var html = field.innerHTML;
2150
  if (goog.userAgent.IE && html.match(/^\s*<script/i)) {
2151
    html = goog.string.Unicode.NBSP + html;
2152
  }
2153
  fieldCopy.innerHTML = html;
2154
  return fieldCopy;
2155
};
2156

2157

2158
/**
2159
 * Sets the contents of the field.
2160
 * @param {boolean} addParas Boolean to specify whether to add paragraphs
2161
 *    to long fields.
2162
 * @param {?string} html html to insert.  If html=null, then this defaults
2163
 *    to a nsbp for mozilla and an empty string for IE.
2164
 * @param {boolean=} opt_dontFireDelayedChange True to make this content change
2165
 *    not fire a delayed change event.
2166
 * @param {boolean=} opt_applyLorem Whether to apply lorem ipsum styles.
2167
 * @deprecated Use setSafeHtml instead.
2168
 */
2169
goog.editor.Field.prototype.setHtml = function(
2170
    addParas, html, opt_dontFireDelayedChange, opt_applyLorem) {
2171
  var safeHtml =
2172
      html ? goog.html.legacyconversions.safeHtmlFromString(html) : null;
2173
  this.setSafeHtml(
2174
      addParas, safeHtml, opt_dontFireDelayedChange, opt_applyLorem);
2175
};
2176

2177

2178
/**
2179
 * Sets the contents of the field.
2180
 * @param {boolean} addParas Boolean to specify whether to add paragraphs
2181
 *    to long fields.
2182
 * @param {?goog.html.SafeHtml} html html to insert.  If html=null, then this
2183
 *    defaults to a nsbp for mozilla and an empty string for IE.
2184
 * @param {boolean=} opt_dontFireDelayedChange True to make this content change
2185
 *    not fire a delayed change event.
2186
 * @param {boolean=} opt_applyLorem Whether to apply lorem ipsum styles.
2187
 */
2188
goog.editor.Field.prototype.setSafeHtml = function(
2189
    addParas, html, opt_dontFireDelayedChange, opt_applyLorem) {
2190
  if (this.isLoading()) {
2191
    goog.log.error(this.logger, "Can't set html while loading Trogedit");
2192
    return;
2193
  }
2194

2195
  // Clear the lorem ipsum style, always.
2196
  if (opt_applyLorem) {
2197
    this.execCommand(goog.editor.Command.CLEAR_LOREM);
2198
  }
2199

2200
  if (html && addParas) {
2201
    html = goog.html.SafeHtml.create('p', {}, html);
2202
  }
2203

2204
  // If we don't want change events to fire, we have to turn off change events
2205
  // before setting the field contents, since that causes mutation events.
2206
  if (opt_dontFireDelayedChange) {
2207
    this.stopChangeEvents(false, true);
2208
  }
2209

2210
  this.setInnerHtml_(html);
2211

2212
  // Set the lorem ipsum style, if the element is empty.
2213
  if (opt_applyLorem) {
2214
    this.execCommand(goog.editor.Command.UPDATE_LOREM);
2215
  }
2216

2217
  // TODO(user): This check should probably be moved to isEventStopped and
2218
  // startEvent.
2219
  if (this.isLoaded()) {
2220
    if (opt_dontFireDelayedChange) {  // Turn back on change events
2221
      // We must fire change timer if necessary before restarting change events!
2222
      // Otherwise, the change timer firing after we restart events will cause
2223
      // the delayed change we were trying to stop. Flow:
2224
      //   Stop delayed change
2225
      //   setInnerHtml_, this starts the change timer
2226
      //   start delayed change
2227
      //   change timer fires
2228
      //   starts delayed change timer since event was not stopped
2229
      //   delayed change fires for the delayed change we tried to stop.
2230
      if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
2231
        this.changeTimerGecko_.fireIfActive();
2232
      }
2233
      this.startChangeEvents();
2234
    } else {  // Mark the document as changed and fire change events.
2235
      this.dispatchChange();
2236
    }
2237
  }
2238
};
2239

2240

2241
/**
2242
 * Sets the inner HTML of the field. Works on both editable and
2243
 * uneditable fields.
2244
 * @param {?goog.html.SafeHtml} html The new inner HTML of the field.
2245
 * @private
2246
 */
2247
goog.editor.Field.prototype.setInnerHtml_ = function(html) {
2248
  var field = this.getElement();
2249
  if (field) {
2250
    // Safari will put <style> tags into *new* <head> elements. When setting
2251
    // HTML, we need to remove these spare <head>s to make sure there's a
2252
    // clean slate, but keep the first <head>.
2253
    // Note:  We punt on this issue for the non iframe case since
2254
    // we don't want to screw with the main document.
2255
    if (this.usesIframe() && goog.editor.BrowserFeature.MOVES_STYLE_TO_HEAD) {
2256
      var heads = goog.dom.getElementsByTagName(
2257
          goog.dom.TagName.HEAD, goog.asserts.assert(field.ownerDocument));
2258
      for (var i = heads.length - 1; i >= 1; --i) {
2259
        heads[i].parentNode.removeChild(heads[i]);
2260
      }
2261
    }
2262
  } else {
2263
    field = this.getOriginalElement();
2264
  }
2265

2266
  if (field) {
2267
    this.injectContents(html && goog.html.SafeHtml.unwrap(html), field);
2268
  }
2269
};
2270

2271

2272
/**
2273
 * Attemps to turn on designMode for a document.  This function can fail under
2274
 * certain circumstances related to the load event, and will throw an exception.
2275
 * @protected
2276
 */
2277
goog.editor.Field.prototype.turnOnDesignModeGecko = function() {
2278
  var doc = this.getEditableDomHelper().getDocument();
2279

2280
  // NOTE(nicksantos): This will fail under certain conditions, like
2281
  // when the node has display: none. It's up to clients to ensure that
2282
  // their fields are valid when they try to make them editable.
2283
  doc.designMode = 'on';
2284

2285
  if (goog.editor.BrowserFeature.HAS_STYLE_WITH_CSS) {
2286
    doc.execCommand('styleWithCSS', false, false);
2287
  }
2288
};
2289

2290

2291
/**
2292
 * Installs styles if needed. Only writes styles when they can't be written
2293
 * inline directly into the field.
2294
 * @protected
2295
 */
2296
goog.editor.Field.prototype.installStyles = function() {
2297
  if (this.cssStyles && this.shouldLoadAsynchronously()) {
2298
    goog.style.installSafeStyleSheet(
2299
        goog.html.legacyconversions.safeStyleSheetFromString(this.cssStyles),
2300
        this.getElement());
2301
  }
2302
};
2303

2304

2305
/**
2306
 * Signal that the field is loaded and ready to use.  Change events now are
2307
 * in effect.
2308
 * @private
2309
 */
2310
goog.editor.Field.prototype.dispatchLoadEvent_ = function() {
2311
  this.getElement();
2312
  this.installStyles();
2313
  this.startChangeEvents();
2314
  goog.log.info(this.logger, 'Dispatching load ' + this.id);
2315
  this.dispatchEvent(goog.editor.Field.EventType.LOAD);
2316
};
2317

2318

2319
/**
2320
 * @return {boolean} Whether the field is uneditable.
2321
 */
2322
goog.editor.Field.prototype.isUneditable = function() {
2323
  return this.loadState_ == goog.editor.Field.LoadState_.UNEDITABLE;
2324
};
2325

2326

2327
/**
2328
 * @return {boolean} Whether the field has finished loading.
2329
 */
2330
goog.editor.Field.prototype.isLoaded = function() {
2331
  return this.loadState_ == goog.editor.Field.LoadState_.EDITABLE;
2332
};
2333

2334

2335
/**
2336
 * @return {boolean} Whether the field is in the process of loading.
2337
 */
2338
goog.editor.Field.prototype.isLoading = function() {
2339
  return this.loadState_ == goog.editor.Field.LoadState_.LOADING;
2340
};
2341

2342

2343
/**
2344
 * Gives the field focus.
2345
 */
2346
goog.editor.Field.prototype.focus = function() {
2347
  if (!goog.editor.BrowserFeature.HAS_CONTENT_EDITABLE && this.usesIframe()) {
2348
    // In designMode, only the window itself can be focused; not the element.
2349
    this.getEditableDomHelper().getWindow().focus();
2350
  } else {
2351
    if (goog.userAgent.OPERA) {
2352
      // Opera will scroll to the bottom of the focused document, even
2353
      // if it is contained in an iframe that is scrolled to the top and
2354
      // the bottom flows past the end of it. To prevent this,
2355
      // save the scroll position of the document containing the editor
2356
      // iframe, then restore it after the focus.
2357
      var scrollX = this.appWindow_.pageXOffset;
2358
      var scrollY = this.appWindow_.pageYOffset;
2359
    }
2360
    this.getElement().focus();
2361
    if (goog.userAgent.OPERA) {
2362
      this.appWindow_.scrollTo(
2363
          /** @type {number} */ (scrollX), /** @type {number} */ (scrollY));
2364
    }
2365
  }
2366
};
2367

2368

2369
/**
2370
 * Gives the field focus and places the cursor at the start of the field.
2371
 */
2372
goog.editor.Field.prototype.focusAndPlaceCursorAtStart = function() {
2373
  // NOTE(user): Excluding Gecko to maintain existing behavior post refactoring
2374
  // placeCursorAtStart into its own method. In Gecko browsers that currently
2375
  // have a selection the existing selection will be restored, otherwise it
2376
  // will go to the start.
2377
  // TODO(user): Refactor the code using this and related methods. We should
2378
  // only mess with the selection in the case where there is not an existing
2379
  // selection in the field.
2380
  if (goog.editor.BrowserFeature.HAS_IE_RANGES || !goog.userAgent.GECKO) {
2381
    this.placeCursorAtStart();
2382
  }
2383
  this.focus();
2384
};
2385

2386

2387
/**
2388
 * Place the cursor at the start of this field. It's recommended that you only
2389
 * use this method (and manipulate the selection in general) when there is not
2390
 * an existing selection in the field.
2391
 */
2392
goog.editor.Field.prototype.placeCursorAtStart = function() {
2393
  this.placeCursorAtStartOrEnd_(true);
2394
};
2395

2396

2397
/**
2398
 * Place the cursor at the start of this field. It's recommended that you only
2399
 * use this method (and manipulate the selection in general) when there is not
2400
 * an existing selection in the field.
2401
 */
2402
goog.editor.Field.prototype.placeCursorAtEnd = function() {
2403
  this.placeCursorAtStartOrEnd_(false);
2404
};
2405

2406

2407
/**
2408
 * Helper method to place the cursor at the start or end of this field.
2409
 * @param {boolean} isStart True for start, false for end.
2410
 * @private
2411
 */
2412
goog.editor.Field.prototype.placeCursorAtStartOrEnd_ = function(isStart) {
2413
  var field = this.getElement();
2414
  if (field) {
2415
    var cursorPosition = isStart ? goog.editor.node.getLeftMostLeaf(field) :
2416
                                   goog.editor.node.getRightMostLeaf(field);
2417
    if (field == cursorPosition) {
2418
      // The rightmost leaf we found was the field element itself (which likely
2419
      // means the field element is empty). We can't place the cursor next to
2420
      // the field element, so just place it at the beginning.
2421
      goog.dom.Range.createCaret(field, 0).select();
2422
    } else {
2423
      goog.editor.range.placeCursorNextTo(cursorPosition, isStart);
2424
    }
2425
    this.dispatchSelectionChangeEvent();
2426
  }
2427
};
2428

2429

2430
/**
2431
 * Restore a saved range, and set the focus on the field.
2432
 * If no range is specified, we simply set the focus.
2433
 * @param {goog.dom.SavedRange=} opt_range A previously saved selected range.
2434
 */
2435
goog.editor.Field.prototype.restoreSavedRange = function(opt_range) {
2436
  if (opt_range) {
2437
    opt_range.restore();
2438
  }
2439
  this.focus();
2440
};
2441

2442

2443
/**
2444
 * Makes a field editable.
2445
 *
2446
 * @param {string=} opt_iframeSrc URL to set the iframe src to if necessary.
2447
 */
2448
goog.editor.Field.prototype.makeEditable = function(opt_iframeSrc) {
2449
  this.loadState_ = goog.editor.Field.LoadState_.LOADING;
2450

2451
  var field = this.getOriginalElement();
2452

2453
  // TODO: In the fieldObj, save the field's id, className, cssText
2454
  // in order to reset it on closeField. That way, we can muck with the field's
2455
  // css, id, class and restore to how it was at the end.
2456
  this.nodeName = field.nodeName;
2457
  this.savedClassName_ = field.className;
2458
  this.setInitialStyle(field.style.cssText);
2459

2460
  goog.dom.classlist.add(field, 'editable');
2461

2462
  this.makeEditableInternal(opt_iframeSrc);
2463
};
2464

2465

2466
/**
2467
 * Handles actually making something editable - creating necessary nodes,
2468
 * injecting content, etc.
2469
 * @param {string=} opt_iframeSrc URL to set the iframe src to if necessary.
2470
 * @protected
2471
 */
2472
goog.editor.Field.prototype.makeEditableInternal = function(opt_iframeSrc) {
2473
  this.makeIframeField_(opt_iframeSrc);
2474
};
2475

2476

2477
/**
2478
 * Handle the loading of the field (e.g. once the field is ready to setup).
2479
 * TODO(user): this should probably just be moved into dispatchLoadEvent_.
2480
 * @protected
2481
 */
2482
goog.editor.Field.prototype.handleFieldLoad = function() {
2483
  if (goog.userAgent.IE) {
2484
    // This sometimes fails if the selection is invalid. This can happen, for
2485
    // example, if you attach a CLICK handler to the field that causes the
2486
    // field to be removed from the DOM and replaced with an editor
2487
    // -- however, listening to another event like MOUSEDOWN does not have this
2488
    // issue since no mouse selection has happened at that time.
2489
    goog.dom.Range.clearSelection(this.editableDomHelper.getWindow());
2490
  }
2491

2492
  if (goog.editor.Field.getActiveFieldId() != this.id) {
2493
    this.execCommand(goog.editor.Command.UPDATE_LOREM);
2494
  }
2495

2496
  this.setupChangeListeners_();
2497
  this.dispatchLoadEvent_();
2498

2499
  // Enabling plugins after we fire the load event so that clients have a
2500
  // chance to set initial field contents before we start mucking with
2501
  // everything.
2502
  for (var classId in this.plugins_) {
2503
    this.plugins_[classId].enable(this);
2504
  }
2505
};
2506

2507

2508
/**
2509
 * Closes the field and cancels all pending change timers.  Note that this
2510
 * means that if a change event has not fired yet, it will not fire.  Clients
2511
 * should check fieldOj.isModified() if they depend on the final change event.
2512
 * Throws an error if the field is already uneditable.
2513
 *
2514
 * @param {boolean=} opt_skipRestore True to prevent copying of editable field
2515
 *     contents back into the original node.
2516
 */
2517
goog.editor.Field.prototype.makeUneditable = function(opt_skipRestore) {
2518
  if (this.isUneditable()) {
2519
    throw Error('makeUneditable: Field is already uneditable');
2520
  }
2521

2522
  // Fire any events waiting on a timeout.
2523
  // Clearing delayed change also clears changeTimerGecko_.
2524
  this.clearDelayedChange();
2525
  this.selectionChangeTimer_.fireIfActive();
2526
  this.execCommand(goog.editor.Command.CLEAR_LOREM);
2527

2528
  var html = null;
2529
  if (!opt_skipRestore && this.getElement()) {
2530
    // Rest of cleanup is simpler if field was never initialized.
2531
    html = this.getCleanContents();
2532
  }
2533

2534
  // First clean up anything that happens in makeFieldEditable
2535
  // (i.e. anything that needs cleanup even if field has not loaded).
2536
  this.clearFieldLoadListener_();
2537

2538
  var field = this.getOriginalElement();
2539
  if (goog.editor.Field.getActiveFieldId() == field.id) {
2540
    goog.editor.Field.setActiveFieldId(null);
2541
  }
2542

2543
  // Clear all listeners before removing the nodes from the dom - if
2544
  // there are listeners on the iframe window, Firefox throws errors trying
2545
  // to unlisten once the iframe is no longer in the dom.
2546
  this.clearListeners();
2547

2548
  // For fields that have loaded, clean up anything that happened in
2549
  // handleFieldOpen or later.
2550
  // If html is provided, copy it back and reset the properties on the field
2551
  // so that the original node will have the same properties as it did before
2552
  // it was made editable.
2553
  if (goog.isString(html)) {
2554
    goog.editor.node.replaceInnerHtml(field, html);
2555
    this.resetOriginalElemProperties();
2556
  }
2557

2558
  this.restoreDom();
2559
  this.tearDownFieldObject_();
2560

2561
  // On Safari, make sure to un-focus the field so that the
2562
  // native "current field" highlight style gets removed.
2563
  if (goog.userAgent.WEBKIT) {
2564
    field.blur();
2565
  }
2566

2567
  this.execCommand(goog.editor.Command.UPDATE_LOREM);
2568
  this.dispatchEvent(goog.editor.Field.EventType.UNLOAD);
2569
};
2570

2571

2572
/**
2573
 * Restores the dom to how it was before being made editable.
2574
 * @protected
2575
 */
2576
goog.editor.Field.prototype.restoreDom = function() {
2577
  // TODO(user): Consider only removing the iframe if we are
2578
  // restoring the original node, aka, if opt_html.
2579
  var field = this.getOriginalElement();
2580
  // TODO(robbyw): Consider throwing an error if !field.
2581
  if (field) {
2582
    // If the field is in the process of loading when it starts getting torn
2583
    // up, the iframe will not exist.
2584
    var iframe = this.getEditableIframe();
2585
    if (iframe) {
2586
      goog.dom.replaceNode(field, iframe);
2587
    }
2588
  }
2589
};
2590

2591

2592
/**
2593
 * Returns true if the field needs to be loaded asynchrnously.
2594
 * @return {boolean} True if loads are async.
2595
 * @protected
2596
 */
2597
goog.editor.Field.prototype.shouldLoadAsynchronously = function() {
2598
  if (!goog.isDef(this.isHttps_)) {
2599
    this.isHttps_ = false;
2600

2601
    if (goog.userAgent.IE && this.usesIframe()) {
2602
      // IE iframes need to load asynchronously if they are in https as we need
2603
      // to set an actual src on the iframe and wait for it to load.
2604

2605
      // Find the top-most window we have access to and see if it's https.
2606
      // Technically this could fail if we have an http frame in an https frame
2607
      // on the same domain (or vice versa), but walking up the window hierarchy
2608
      // to find the first window that has an http* protocol seems like
2609
      // overkill.
2610
      var win = this.originalDomHelper.getWindow();
2611
      while (win != win.parent) {
2612
        try {
2613
          win = win.parent;
2614
        } catch (e) {
2615
          break;
2616
        }
2617
      }
2618
      var loc = win.location;
2619
      this.isHttps_ =
2620
          loc.protocol == 'https:' && loc.search.indexOf('nocheckhttps') == -1;
2621
    }
2622
  }
2623
  return this.isHttps_;
2624
};
2625

2626

2627
/**
2628
 * Start the editable iframe creation process for Mozilla or IE whitebox.
2629
 * The iframes load asynchronously.
2630
 *
2631
 * @param {string=} opt_iframeSrc URL to set the iframe src to if necessary.
2632
 * @private
2633
 */
2634
goog.editor.Field.prototype.makeIframeField_ = function(opt_iframeSrc) {
2635
  var field = this.getOriginalElement();
2636
  // TODO(robbyw): Consider throwing an error if !field.
2637
  if (field) {
2638
    var html = field.innerHTML;
2639

2640
    // Invoke prepareContentsHtml on all plugins to prepare html for editing.
2641
    // Make sure this is done before calling this.attachFrame which removes the
2642
    // original element from DOM tree. Plugins may assume that the original
2643
    // element is still in its original position in DOM.
2644
    var styles = {};
2645
    html = this.reduceOp_(
2646
        goog.editor.Plugin.Op.PREPARE_CONTENTS_HTML, html, styles);
2647

2648
    var iframe = this.originalDomHelper.createDom(
2649
        goog.dom.TagName.IFRAME, this.getIframeAttributes());
2650

2651
    // TODO(nicksantos): Figure out if this is ever needed in SAFARI?
2652
    // In IE over HTTPS we need to wait for a load event before we set up the
2653
    // iframe, this is to prevent a security prompt or access is denied
2654
    // errors.
2655
    // NOTE(user): This hasn't been confirmed.  isHttps_ allows a query
2656
    // param, nocheckhttps, which we can use to ascertain if this is actually
2657
    // needed.  It was originally thought to be needed for IE6 SP1, but
2658
    // errors have been seen in IE7 as well.
2659
    if (this.shouldLoadAsynchronously()) {
2660
      // onLoad is the function to call once the iframe is ready to continue
2661
      // loading.
2662
      var onLoad =
2663
          goog.bind(this.iframeFieldLoadHandler, this, iframe, html, styles);
2664

2665
      this.fieldLoadListenerKey_ =
2666
          goog.events.listen(iframe, goog.events.EventType.LOAD, onLoad, true);
2667

2668
      if (opt_iframeSrc) {
2669
        iframe.src = opt_iframeSrc;
2670
      }
2671
    }
2672

2673
    this.attachIframe(iframe);
2674

2675
    // Only continue if its not IE HTTPS in which case we're waiting for load.
2676
    if (!this.shouldLoadAsynchronously()) {
2677
      this.iframeFieldLoadHandler(iframe, html, styles);
2678
    }
2679
  }
2680
};
2681

2682

2683
/**
2684
 * Given the original field element, and the iframe that is destined to
2685
 * become the editable field, styles them appropriately and add the iframe
2686
 * to the dom.
2687
 *
2688
 * @param {HTMLIFrameElement} iframe The iframe element.
2689
 * @protected
2690
 */
2691
goog.editor.Field.prototype.attachIframe = function(iframe) {
2692
  var field = this.getOriginalElement();
2693
  // TODO(user): Why do we do these two lines .. and why whitebox only?
2694
  iframe.className = field.className;
2695
  iframe.id = field.id;
2696
  goog.dom.replaceNode(iframe, field);
2697
};
2698

2699

2700
/**
2701
 * @param {Object} extraStyles A map of extra styles.
2702
 * @return {!goog.editor.icontent.FieldFormatInfo} The FieldFormatInfo
2703
 *     object for this field's configuration.
2704
 * @protected
2705
 */
2706
goog.editor.Field.prototype.getFieldFormatInfo = function(extraStyles) {
2707
  var originalElement = this.getOriginalElement();
2708
  var isStandardsMode = goog.editor.node.isStandardsMode(originalElement);
2709

2710
  return new goog.editor.icontent.FieldFormatInfo(
2711
      this.id, isStandardsMode, false, false, extraStyles);
2712
};
2713

2714

2715
/**
2716
 * Writes the html content into the iframe.  Handles writing any aditional
2717
 * styling as well.
2718
 * @param {HTMLIFrameElement} iframe Iframe to write contents into.
2719
 * @param {string} innerHtml The html content to write into the iframe.
2720
 * @param {Object} extraStyles A map of extra style attributes.
2721
 * @protected
2722
 */
2723
goog.editor.Field.prototype.writeIframeContent = function(
2724
    iframe, innerHtml, extraStyles) {
2725
  var formatInfo = this.getFieldFormatInfo(extraStyles);
2726

2727
  if (this.shouldLoadAsynchronously()) {
2728
    var doc = goog.dom.getFrameContentDocument(iframe);
2729
    goog.editor.icontent.writeHttpsInitialIframe(formatInfo, doc, innerHtml);
2730
  } else {
2731
    var styleInfo = new goog.editor.icontent.FieldStyleInfo(
2732
        this.getElement(), this.cssStyles);
2733
    goog.editor.icontent.writeNormalInitialIframe(
2734
        formatInfo, innerHtml, styleInfo, iframe);
2735
  }
2736
};
2737

2738

2739
/**
2740
 * The function to call when the editable iframe loads.
2741
 *
2742
 * @param {HTMLIFrameElement} iframe Iframe that just loaded.
2743
 * @param {string} innerHtml Html to put inside the body of the iframe.
2744
 * @param {Object} styles Property-value map of CSS styles to install on
2745
 *     editable field.
2746
 * @protected
2747
 */
2748
goog.editor.Field.prototype.iframeFieldLoadHandler = function(
2749
    iframe, innerHtml, styles) {
2750
  this.clearFieldLoadListener_();
2751

2752
  iframe.allowTransparency = 'true';
2753
  this.writeIframeContent(iframe, innerHtml, styles);
2754
  var doc = goog.dom.getFrameContentDocument(iframe);
2755

2756
  // Make sure to get this pointer after the doc.write as the doc.write
2757
  // clobbers all the document contents.
2758
  var body = doc.body;
2759
  this.setupFieldObject(body);
2760

2761
  if (!goog.editor.BrowserFeature.HAS_CONTENT_EDITABLE && this.usesIframe()) {
2762
    this.turnOnDesignModeGecko();
2763
  }
2764

2765
  this.handleFieldLoad();
2766
};
2767

2768

2769
/**
2770
 * Clears fieldLoadListener for a field. Must be called even (especially?) if
2771
 * the field is not yet loaded and therefore not in this.fieldMap_
2772
 * @private
2773
 */
2774
goog.editor.Field.prototype.clearFieldLoadListener_ = function() {
2775
  if (this.fieldLoadListenerKey_) {
2776
    goog.events.unlistenByKey(this.fieldLoadListenerKey_);
2777
    this.fieldLoadListenerKey_ = null;
2778
  }
2779
};
2780

2781

2782
/**
2783
 * @return {!Object} Get the HTML attributes for this field's iframe.
2784
 * @protected
2785
 */
2786
goog.editor.Field.prototype.getIframeAttributes = function() {
2787
  var iframeStyle = 'padding:0;' + this.getOriginalElement().style.cssText;
2788

2789
  if (!goog.string.endsWith(iframeStyle, ';')) {
2790
    iframeStyle += ';';
2791
  }
2792

2793
  iframeStyle += 'background-color:white;';
2794

2795
  // Ensure that the iframe has default overflow styling.  If overflow is
2796
  // set to auto, an IE rendering bug can occur when it tries to render a
2797
  // table at the very bottom of the field, such that the table would cause
2798
  // a scrollbar, that makes the entire field go blank.
2799
  if (goog.userAgent.IE) {
2800
    iframeStyle += 'overflow:visible;';
2801
  }
2802

2803
  return {'frameBorder': 0, 'style': iframeStyle};
2804
};
2805

2806