|
1 /** |
|
2 * Preview.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /** |
|
12 * Internal class for generating previews styles for formats. |
|
13 * |
|
14 * Example: |
|
15 * Preview.getCssText(editor, 'bold'); |
|
16 * |
|
17 * @class tinymce.fmt.Preview |
|
18 * @private |
|
19 */ |
|
20 define("tinymce/fmt/Preview", [ |
|
21 "tinymce/util/Tools" |
|
22 ], function(Tools) { |
|
23 var each = Tools.each; |
|
24 |
|
25 function getCssText(editor, format) { |
|
26 var name, previewElm, dom = editor.dom; |
|
27 var previewCss = '', parentFontSize, previewStyles; |
|
28 |
|
29 previewStyles = editor.settings.preview_styles; |
|
30 |
|
31 // No preview forced |
|
32 if (previewStyles === false) { |
|
33 return ''; |
|
34 } |
|
35 |
|
36 // Default preview |
|
37 if (!previewStyles) { |
|
38 previewStyles = 'font-family font-size font-weight font-style text-decoration ' + |
|
39 'text-transform color background-color border border-radius outline text-shadow'; |
|
40 } |
|
41 |
|
42 // Removes any variables since these can't be previewed |
|
43 function removeVars(val) { |
|
44 return val.replace(/%(\w+)/g, ''); |
|
45 } |
|
46 |
|
47 // Create block/inline element to use for preview |
|
48 if (typeof format == "string") { |
|
49 format = editor.formatter.get(format); |
|
50 if (!format) { |
|
51 return; |
|
52 } |
|
53 |
|
54 format = format[0]; |
|
55 } |
|
56 |
|
57 name = format.block || format.inline || 'span'; |
|
58 previewElm = dom.create(name); |
|
59 |
|
60 // Add format styles to preview element |
|
61 each(format.styles, function(value, name) { |
|
62 value = removeVars(value); |
|
63 |
|
64 if (value) { |
|
65 dom.setStyle(previewElm, name, value); |
|
66 } |
|
67 }); |
|
68 |
|
69 // Add attributes to preview element |
|
70 each(format.attributes, function(value, name) { |
|
71 value = removeVars(value); |
|
72 |
|
73 if (value) { |
|
74 dom.setAttrib(previewElm, name, value); |
|
75 } |
|
76 }); |
|
77 |
|
78 // Add classes to preview element |
|
79 each(format.classes, function(value) { |
|
80 value = removeVars(value); |
|
81 |
|
82 if (!dom.hasClass(previewElm, value)) { |
|
83 dom.addClass(previewElm, value); |
|
84 } |
|
85 }); |
|
86 |
|
87 editor.fire('PreviewFormats'); |
|
88 |
|
89 // Add the previewElm outside the visual area |
|
90 dom.setStyles(previewElm, {position: 'absolute', left: -0xFFFF}); |
|
91 editor.getBody().appendChild(previewElm); |
|
92 |
|
93 // Get parent container font size so we can compute px values out of em/% for older IE:s |
|
94 parentFontSize = dom.getStyle(editor.getBody(), 'fontSize', true); |
|
95 parentFontSize = /px$/.test(parentFontSize) ? parseInt(parentFontSize, 10) : 0; |
|
96 |
|
97 each(previewStyles.split(' '), function(name) { |
|
98 var value = dom.getStyle(previewElm, name, true); |
|
99 |
|
100 // If background is transparent then check if the body has a background color we can use |
|
101 if (name == 'background-color' && /transparent|rgba\s*\([^)]+,\s*0\)/.test(value)) { |
|
102 value = dom.getStyle(editor.getBody(), name, true); |
|
103 |
|
104 // Ignore white since it's the default color, not the nicest fix |
|
105 // TODO: Fix this by detecting runtime style |
|
106 if (dom.toHex(value).toLowerCase() == '#ffffff') { |
|
107 return; |
|
108 } |
|
109 } |
|
110 |
|
111 if (name == 'color') { |
|
112 // Ignore black since it's the default color, not the nicest fix |
|
113 // TODO: Fix this by detecting runtime style |
|
114 if (dom.toHex(value).toLowerCase() == '#000000') { |
|
115 return; |
|
116 } |
|
117 } |
|
118 |
|
119 // Old IE won't calculate the font size so we need to do that manually |
|
120 if (name == 'font-size') { |
|
121 if (/em|%$/.test(value)) { |
|
122 if (parentFontSize === 0) { |
|
123 return; |
|
124 } |
|
125 |
|
126 // Convert font size from em/% to px |
|
127 value = parseFloat(value, 10) / (/%$/.test(value) ? 100 : 1); |
|
128 value = (value * parentFontSize) + 'px'; |
|
129 } |
|
130 } |
|
131 |
|
132 if (name == "border" && value) { |
|
133 previewCss += 'padding:0 2px;'; |
|
134 } |
|
135 |
|
136 previewCss += name + ':' + value + ';'; |
|
137 }); |
|
138 |
|
139 editor.fire('AfterPreviewFormats'); |
|
140 |
|
141 //previewCss += 'line-height:normal'; |
|
142 |
|
143 dom.remove(previewElm); |
|
144 |
|
145 return previewCss; |
|
146 } |
|
147 |
|
148 return { |
|
149 getCssText: getCssText |
|
150 }; |
|
151 }); |