1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
// Copyright 2009 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview Utilties for working with the styles of DOM nodes, and
* related to rich text editing.
*
* Many of these are not general enough to go into goog.style, and use
* constructs (like "isContainer") that only really make sense inside
* of an HTML editor.
*
* The API has been optimized for iterating over large, irregular DOM
* structures (with lots of text nodes), and so the API tends to be a bit
* more permissive than the goog.style API should be. For example,
* goog.style.getComputedStyle will throw an exception if you give it a
* text node.
*
*/
goog.provide('goog.editor.style');
goog.require('goog.dom');
goog.require('goog.dom.NodeType');
goog.require('goog.editor.BrowserFeature');
goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('goog.style');
goog.require('goog.userAgent');
/**
* Gets the computed or cascaded style.
*
* This is different than goog.style.getStyle_ because it returns null
* for text nodes (instead of throwing an exception), and never reads
* inline style. These two functions may need to be reconciled.
*
* @param {Node} node Node to get style of.
* @param {string} stylePropertyName Property to get (must be camelCase,
* not css-style).
* @return {?string} Style value, or null if this is not an element node.
* @private
*/
goog.editor.style.getComputedOrCascadedStyle_ = function(
node, stylePropertyName) {
if (node.nodeType != goog.dom.NodeType.ELEMENT) {
// Only element nodes have style.
return null;
}
return goog.userAgent.IE ?
goog.style.getCascadedStyle(/** @type {Element} */ (node),
stylePropertyName) :
goog.style.getComputedStyle(/** @type {Element} */ (node),
stylePropertyName);
};
/**
* Checks whether the given element inherits display: block.
* @param {Node} node The Node to check.
* @return {boolean} Whether the element inherits CSS display: block.
*/
goog.editor.style.isDisplayBlock = function(node) {
return goog.editor.style.getComputedOrCascadedStyle_(
node, 'display') == 'block';
};
/**
* Returns true if the element is a container of other non-inline HTML
* Note that span, strong and em tags, being inline can only contain
* other inline elements and are thus, not containers. Containers are elements
* that should not be broken up when wrapping selections with a node of an
* inline block styling.
* @param {Node} element The element to check.
* @return {boolean} Whether the element is a container.
*/
goog.editor.style.isContainer = function(element) {
var nodeName = element && element.nodeName.toLowerCase();
return !!(element &&
(goog.editor.style.isDisplayBlock(element) ||
nodeName == 'td' ||
nodeName == 'table' ||
nodeName == 'li'));
};
/**
* Return the first ancestor of this node that is a container, inclusive.
* @see isContainer
* @param {Node} node Node to find the container of.
* @return {Element} The element which contains node.
*/
goog.editor.style.getContainer = function(node) {
// We assume that every node must have a container.
return /** @type {Element} */ (
goog.dom.getAncestor(node, goog.editor.style.isContainer, true));
};
/**
* Set of input types that should be kept selectable even when their ancestors
* are made unselectable.
* @type {Object}
* @private
*/
goog.editor.style.SELECTABLE_INPUT_TYPES_ = goog.object.createSet(
'text', 'file', 'url');
/**
* Prevent the default action on mousedown events.
* @param {goog.events.Event} e The mouse down event.
* @private
*/
goog.editor.style.cancelMouseDownHelper_ = function(e) {
var targetTagName = e.target.tagName;
if (targetTagName != goog.dom.TagName.TEXTAREA &&
targetTagName != goog.dom.TagName.INPUT) {
e.preventDefault();
}
};
/**
* Makes the given element unselectable, as well as all of its children, except
* for text areas, text, file and url inputs.
* @param {Element} element The element to make unselectable.
* @param {goog.events.EventHandler} eventHandler An EventHandler to register
* the event with. Assumes when the node is destroyed, the eventHandler's
* listeners are destroyed as well.
*/
goog.editor.style.makeUnselectable = function(element, eventHandler) {
if (goog.editor.BrowserFeature.HAS_UNSELECTABLE_STYLE) {
// The mousing down on a node should not blur the focused node.
// This is consistent with how IE works.
// TODO: Consider using just the mousedown handler and not the css property.
eventHandler.listen(element, goog.events.EventType.MOUSEDOWN,
goog.editor.style.cancelMouseDownHelper_, true);
}
goog.style.setUnselectable(element, true);
// Make inputs and text areas selectable.
var inputs = element.getElementsByTagName(goog.dom.TagName.INPUT);
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i];
if (input.type in goog.editor.style.SELECTABLE_INPUT_TYPES_) {
goog.editor.style.makeSelectable(input);
}
}
goog.array.forEach(element.getElementsByTagName(goog.dom.TagName.TEXTAREA),
goog.editor.style.makeSelectable);
};
/**
* Make the given element selectable.
*
* For IE this simply turns off the "unselectable" property.
*
* Under FF no descendent of an unselectable node can be selectable:
*
* https://bugzilla.mozilla.org/show_bug.cgi?id=203291
*
* So we make each ancestor of node selectable, while trying to preserve the
* unselectability of other nodes along that path
*
* This may cause certain text nodes which should be unselectable, to become
* selectable. For example:
*
* <div id=div1 style="-moz-user-select: none">
* Text1
* <span id=span1>Text2</span>
* </div>
*
* If we call makeSelectable on span1, then it will cause "Text1" to become
* selectable, since it had to make div1 selectable in order for span1 to be
* selectable.
*
* If "Text1" were enclosed within a <p> or <span>, then this problem would
* not arise. Text nodes do not have styles, so its style can't be set to
* unselectable.
*
* @param {Element} element The element to make selectable.
*/
goog.editor.style.makeSelectable = function(element) {
goog.style.setUnselectable(element, false);
if (goog.editor.BrowserFeature.HAS_UNSELECTABLE_STYLE) {
// Go up ancestor chain, searching for nodes that are unselectable.
// If such a node exists, mark it as selectable but mark its other children
// as unselectable so the minimum set of nodes is changed.
var child = element;
var current = /** @type {Element} */ (element.parentNode);
while (current && current.tagName != goog.dom.TagName.HTML) {
if (goog.style.isUnselectable(current)) {
goog.style.setUnselectable(current, false, true);
for (var i = 0, len = current.childNodes.length; i < len; i++) {
var node = current.childNodes[i];
if (node != child && node.nodeType == goog.dom.NodeType.ELEMENT) {
goog.style.setUnselectable(current.childNodes[i], true);
}
}
}
child = current;
current = /** @type {Element} */ (current.parentNode);
}
}
};
|
