1
// Copyright 2009 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

15
/**
16
 * @fileoverview Utilties for working with the styles of DOM nodes, and
17
 * related to rich text editing.
18
 *
19
 * Many of these are not general enough to go into goog.style, and use
20
 * constructs (like "isContainer") that only really make sense inside
21
 * of an HTML editor.
22
 *
23
 * The API has been optimized for iterating over large, irregular DOM
24
 * structures (with lots of text nodes), and so the API tends to be a bit
25
 * more permissive than the goog.style API should be. For example,
26
 * goog.style.getComputedStyle will throw an exception if you give it a
27
 * text node.
28
 *
29
 * @author [email protected] (Nick Santos)
30
 */
31

32
goog.provide('goog.editor.style');
33

34
goog.require('goog.array');
35
goog.require('goog.asserts');
36
goog.require('goog.dom');
37
goog.require('goog.dom.NodeType');
38
goog.require('goog.dom.TagName');
39
goog.require('goog.editor.BrowserFeature');
40
goog.require('goog.events.EventHandler');
41
goog.require('goog.events.EventType');
42
goog.require('goog.object');
43
goog.require('goog.style');
44
goog.require('goog.userAgent');
45

46

47
/**
48
 * Gets the computed or cascaded style.
49
 *
50
 * This is different than goog.style.getStyle_ because it returns null
51
 * for text nodes (instead of throwing an exception), and never reads
52
 * inline style. These two functions may need to be reconciled.
53
 *
54
 * @param {!Node} node Node to get style of.
55
 * @param {string} stylePropertyName Property to get (must be camelCase,
56
 *     not css-style).
57
 * @return {?string} Style value, or null if this is not an element node.
58
 * @private
59
 */
60
goog.editor.style.getComputedOrCascadedStyle_ = function(
61
    node, stylePropertyName) {
62
  if (node.nodeType != goog.dom.NodeType.ELEMENT) {
63
    // Only element nodes have style.
64
    return null;
65
  }
66
  return goog.userAgent.IE ?
67
      goog.style.getCascadedStyle(
68
          /** @type {!Element} */ (node), stylePropertyName) :
69
      goog.style.getComputedStyle(
70
          /** @type {!Element} */ (node), stylePropertyName);
71
};
72

73

74
/**
75
 * Checks whether the given element inherits display: block.
76
 * @param {!Node} node The Node to check.
77
 * @return {boolean} Whether the element inherits CSS display: block.
78
 */
79
goog.editor.style.isDisplayBlock = function(node) {
80
  return goog.editor.style.getComputedOrCascadedStyle_(node, 'display') ==
81
      'block';
82
};
83

84

85
/**
86
 * Returns true if the element is a container of other non-inline HTML
87
 * Note that span, strong and em tags, being inline can only contain
88
 * other inline elements and are thus, not containers. Containers are elements
89
 * that should not be broken up when wrapping selections with a node of an
90
 * inline block styling.
91
 * @param {Node} element The element to check.
92
 * @return {boolean} Whether the element is a container.
93
 */
94
goog.editor.style.isContainer = function(element) {
95
  var nodeName = element && element.nodeName;
96
  return !!(
97
      element &&
98
      (goog.editor.style.isDisplayBlock(element) ||
99
       nodeName == goog.dom.TagName.TD || nodeName == goog.dom.TagName.TABLE ||
100
       nodeName == goog.dom.TagName.LI));
101
};
102

103

104
/**
105
 * Return the first ancestor of this node that is a container, inclusive.
106
 * @see isContainer
107
 * @param {Node} node Node to find the container of.
108
 * @return {Element} The element which contains node.
109
 */
110
goog.editor.style.getContainer = function(node) {
111
  // We assume that every node must have a container.
112
  return /** @type {Element} */ (
113
      goog.dom.getAncestor(node, goog.editor.style.isContainer, true));
114
};
115

116

117
/**
118
 * Set of input types that should be kept selectable even when their ancestors
119
 * are made unselectable.
120
 * @type {Object}
121
 * @private
122
 */
123
goog.editor.style.SELECTABLE_INPUT_TYPES_ =
124
    goog.object.createSet('text', 'file', 'url');
125

126

127
/**
128
 * Prevent the default action on mousedown events.
129
 * @param {goog.events.Event} e The mouse down event.
130
 * @private
131
 */
132
goog.editor.style.cancelMouseDownHelper_ = function(e) {
133
  var targetTagName = e.target.tagName;
134
  if (targetTagName != goog.dom.TagName.TEXTAREA &&
135
      targetTagName != goog.dom.TagName.INPUT) {
136
    e.preventDefault();
137
  }
138
};
139

140

141
/**
142
 * Makes the given element unselectable, as well as all of its children, except
143
 * for text areas, text, file and url inputs.
144
 * @param {Element} element The element to make unselectable.
145
 * @param {goog.events.EventHandler} eventHandler An EventHandler to register
146
 *     the event with. Assumes when the node is destroyed, the eventHandler's
147
 *     listeners are destroyed as well.
148
 */
149
goog.editor.style.makeUnselectable = function(element, eventHandler) {
150
  if (goog.editor.BrowserFeature.HAS_UNSELECTABLE_STYLE) {
151
    // The mousing down on a node should not blur the focused node.
152
    // This is consistent with how IE works.
153
    // TODO: Consider using just the mousedown handler and not the css property.
154
    eventHandler.listen(
155
        element, goog.events.EventType.MOUSEDOWN,
156
        goog.editor.style.cancelMouseDownHelper_, true);
157
  }
158

159
  goog.style.setUnselectable(element, true);
160

161
  // Make inputs and text areas selectable.
162
  var inputs = goog.dom.getElementsByTagName(
163
      goog.dom.TagName.INPUT, goog.asserts.assert(element));
164
  for (var i = 0, len = inputs.length; i < len; i++) {
165
    var input = inputs[i];
166
    if (input.type in goog.editor.style.SELECTABLE_INPUT_TYPES_) {
167
      goog.editor.style.makeSelectable(input);
168
    }
169
  }
170
  goog.array.forEach(
171
      goog.dom.getElementsByTagName(
172
          goog.dom.TagName.TEXTAREA, goog.asserts.assert(element)),
173
      goog.editor.style.makeSelectable);
174
};
175

176

177
/**
178
 * Make the given element selectable.
179
 *
180
 * For IE this simply turns off the "unselectable" property.
181
 *
182
 * Under FF no descendent of an unselectable node can be selectable:
183
 *
184
 * https://bugzilla.mozilla.org/show_bug.cgi?id=203291
185
 *
186
 * So we make each ancestor of node selectable, while trying to preserve the
187
 * unselectability of other nodes along that path
188
 *
189
 * This may cause certain text nodes which should be unselectable, to become
190
 * selectable. For example:
191
 *
192
 *    <div id=div1 style="-moz-user-select: none">
193
 *      Text1
194
 *      <span id=span1>Text2</span>
195
 *    </div>
196
 *
197
 * If we call makeSelectable on span1, then it will cause "Text1" to become
198
 * selectable, since it had to make div1 selectable in order for span1 to be
199
 * selectable.
200
 *
201
 * If "Text1" were enclosed within a `<p>` or `<span>`, then this problem would
202
 * not arise.  Text nodes do not have styles, so its style can't be set to
203
 * unselectable.
204
 *
205
 * @param {!Element} element The element to make selectable.
206
 */
207
goog.editor.style.makeSelectable = function(element) {
208
  goog.style.setUnselectable(element, false);
209
  if (goog.editor.BrowserFeature.HAS_UNSELECTABLE_STYLE) {
210
    // Go up ancestor chain, searching for nodes that are unselectable.
211
    // If such a node exists, mark it as selectable but mark its other children
212
    // as unselectable so the minimum set of nodes is changed.
213
    var child = element;
214
    var current = /** @type {Element} */ (element.parentNode);
215
    while (current && current.tagName != goog.dom.TagName.HTML) {
216
      if (goog.style.isUnselectable(current)) {
217
        goog.style.setUnselectable(current, false, true);
218

219
        for (var i = 0, len = current.childNodes.length; i < len; i++) {
220
          var node = current.childNodes[i];
221
          if (node != child && node.nodeType == goog.dom.NodeType.ELEMENT) {
222
            goog.style.setUnselectable(
223
                /** @type {!Element} */ (current.childNodes[i]), true);
224
          }
225
        }
226
      }
227

228
      child = current;
229
      current = /** @type {Element} */ (current.parentNode);
230
    }
231
  }
232
};
233

234