| 1 |
lars |
1 |
/**
|
|
|
2 |
* fullpage.js
|
|
|
3 |
*
|
|
|
4 |
* Copyright 2009, Moxiecode Systems AB
|
|
|
5 |
* Released under LGPL License.
|
|
|
6 |
*
|
|
|
7 |
* License: http://tinymce.moxiecode.com/license
|
|
|
8 |
* Contributing: http://tinymce.moxiecode.com/contributing
|
|
|
9 |
*/
|
|
|
10 |
|
|
|
11 |
(function() {
|
|
|
12 |
tinyMCEPopup.requireLangPack();
|
|
|
13 |
|
|
|
14 |
var defaultDocTypes =
|
|
|
15 |
'XHTML 1.0 Transitional=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,' +
|
|
|
16 |
'XHTML 1.0 Frameset=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">,' +
|
|
|
17 |
'XHTML 1.0 Strict=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,' +
|
|
|
18 |
'XHTML 1.1=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,' +
|
|
|
19 |
'HTML 4.01 Transitional=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,' +
|
|
|
20 |
'HTML 4.01 Strict=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,' +
|
|
|
21 |
'HTML 4.01 Frameset=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">';
|
|
|
22 |
|
|
|
23 |
var defaultEncodings =
|
|
|
24 |
'Western european (iso-8859-1)=iso-8859-1,' +
|
|
|
25 |
'Central European (iso-8859-2)=iso-8859-2,' +
|
|
|
26 |
'Unicode (UTF-8)=utf-8,' +
|
|
|
27 |
'Chinese traditional (Big5)=big5,' +
|
|
|
28 |
'Cyrillic (iso-8859-5)=iso-8859-5,' +
|
|
|
29 |
'Japanese (iso-2022-jp)=iso-2022-jp,' +
|
|
|
30 |
'Greek (iso-8859-7)=iso-8859-7,' +
|
|
|
31 |
'Korean (iso-2022-kr)=iso-2022-kr,' +
|
|
|
32 |
'ASCII (us-ascii)=us-ascii';
|
|
|
33 |
|
|
|
34 |
var defaultFontNames = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;WingDings=wingdings';
|
|
|
35 |
var defaultFontSizes = '10px,11px,12px,13px,14px,15px,16px';
|
|
|
36 |
|
|
|
37 |
function setVal(id, value) {
|
|
|
38 |
var elm = document.getElementById(id);
|
|
|
39 |
|
|
|
40 |
if (elm) {
|
|
|
41 |
value = value || '';
|
|
|
42 |
|
|
|
43 |
if (elm.nodeName == "SELECT")
|
|
|
44 |
selectByValue(document.forms[0], id, value);
|
|
|
45 |
else if (elm.type == "checkbox")
|
|
|
46 |
elm.checked = !!value;
|
|
|
47 |
else
|
|
|
48 |
elm.value = value;
|
|
|
49 |
}
|
|
|
50 |
};
|
|
|
51 |
|
|
|
52 |
function getVal(id) {
|
|
|
53 |
var elm = document.getElementById(id);
|
|
|
54 |
|
|
|
55 |
if (elm.nodeName == "SELECT")
|
|
|
56 |
return elm.options[elm.selectedIndex].value;
|
|
|
57 |
|
|
|
58 |
if (elm.type == "checkbox")
|
|
|
59 |
return elm.checked;
|
|
|
60 |
|
|
|
61 |
return elm.value;
|
|
|
62 |
};
|
|
|
63 |
|
|
|
64 |
window.FullPageDialog = {
|
|
|
65 |
changedStyle : function() {
|
|
|
66 |
var val, styles = tinyMCEPopup.editor.dom.parseStyle(getVal('style'));
|
|
|
67 |
|
|
|
68 |
setVal('fontface', styles['font-face']);
|
|
|
69 |
setVal('fontsize', styles['font-size']);
|
|
|
70 |
setVal('textcolor', styles['color']);
|
|
|
71 |
|
|
|
72 |
if (val = styles['background-image'])
|
|
|
73 |
setVal('bgimage', val.replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"));
|
|
|
74 |
else
|
|
|
75 |
setVal('bgimage', '');
|
|
|
76 |
|
|
|
77 |
setVal('bgcolor', styles['background-color']);
|
|
|
78 |
|
|
|
79 |
// Reset margin form elements
|
|
|
80 |
setVal('topmargin', '');
|
|
|
81 |
setVal('rightmargin', '');
|
|
|
82 |
setVal('bottommargin', '');
|
|
|
83 |
setVal('leftmargin', '');
|
|
|
84 |
|
|
|
85 |
// Expand margin
|
|
|
86 |
if (val = styles['margin']) {
|
|
|
87 |
val = val.split(' ');
|
|
|
88 |
styles['margin-top'] = val[0] || '';
|
|
|
89 |
styles['margin-right'] = val[1] || val[0] || '';
|
|
|
90 |
styles['margin-bottom'] = val[2] || val[0] || '';
|
|
|
91 |
styles['margin-left'] = val[3] || val[0] || '';
|
|
|
92 |
}
|
|
|
93 |
|
|
|
94 |
if (val = styles['margin-top'])
|
|
|
95 |
setVal('topmargin', val.replace(/px/, ''));
|
|
|
96 |
|
|
|
97 |
if (val = styles['margin-right'])
|
|
|
98 |
setVal('rightmargin', val.replace(/px/, ''));
|
|
|
99 |
|
|
|
100 |
if (val = styles['margin-bottom'])
|
|
|
101 |
setVal('bottommargin', val.replace(/px/, ''));
|
|
|
102 |
|
|
|
103 |
if (val = styles['margin-left'])
|
|
|
104 |
setVal('leftmargin', val.replace(/px/, ''));
|
|
|
105 |
|
|
|
106 |
updateColor('bgcolor_pick', 'bgcolor');
|
|
|
107 |
updateColor('textcolor_pick', 'textcolor');
|
|
|
108 |
},
|
|
|
109 |
|
|
|
110 |
changedStyleProp : function() {
|
|
|
111 |
var val, dom = tinyMCEPopup.editor.dom, styles = dom.parseStyle(getVal('style'));
|
|
|
112 |
|
|
|
113 |
styles['font-face'] = getVal('fontface');
|
|
|
114 |
styles['font-size'] = getVal('fontsize');
|
|
|
115 |
styles['color'] = getVal('textcolor');
|
|
|
116 |
styles['background-color'] = getVal('bgcolor');
|
|
|
117 |
|
|
|
118 |
if (val = getVal('bgimage'))
|
|
|
119 |
styles['background-image'] = "url('" + val + "')";
|
|
|
120 |
else
|
|
|
121 |
styles['background-image'] = '';
|
|
|
122 |
|
|
|
123 |
delete styles['margin'];
|
|
|
124 |
|
|
|
125 |
if (val = getVal('topmargin'))
|
|
|
126 |
styles['margin-top'] = val + "px";
|
|
|
127 |
else
|
|
|
128 |
styles['margin-top'] = '';
|
|
|
129 |
|
|
|
130 |
if (val = getVal('rightmargin'))
|
|
|
131 |
styles['margin-right'] = val + "px";
|
|
|
132 |
else
|
|
|
133 |
styles['margin-right'] = '';
|
|
|
134 |
|
|
|
135 |
if (val = getVal('bottommargin'))
|
|
|
136 |
styles['margin-bottom'] = val + "px";
|
|
|
137 |
else
|
|
|
138 |
styles['margin-bottom'] = '';
|
|
|
139 |
|
|
|
140 |
if (val = getVal('leftmargin'))
|
|
|
141 |
styles['margin-left'] = val + "px";
|
|
|
142 |
else
|
|
|
143 |
styles['margin-left'] = '';
|
|
|
144 |
|
|
|
145 |
// Serialize, parse and reserialize this will compress redundant styles
|
|
|
146 |
setVal('style', dom.serializeStyle(dom.parseStyle(dom.serializeStyle(styles))));
|
|
|
147 |
this.changedStyle();
|
|
|
148 |
},
|
|
|
149 |
|
|
|
150 |
update : function() {
|
|
|
151 |
var data = {};
|
|
|
152 |
|
|
|
153 |
tinymce.each(tinyMCEPopup.dom.select('select,input,textarea'), function(node) {
|
|
|
154 |
data[node.id] = getVal(node.id);
|
|
|
155 |
});
|
|
|
156 |
|
|
|
157 |
tinyMCEPopup.editor.plugins.fullpage._dataToHtml(data);
|
|
|
158 |
tinyMCEPopup.close();
|
|
|
159 |
}
|
|
|
160 |
};
|
|
|
161 |
|
|
|
162 |
function init() {
|
|
|
163 |
var form = document.forms[0], i, item, list, editor = tinyMCEPopup.editor;
|
|
|
164 |
|
|
|
165 |
// Setup doctype select box
|
|
|
166 |
list = editor.getParam("fullpage_doctypes", defaultDocTypes).split(',');
|
|
|
167 |
for (i = 0; i < list.length; i++) {
|
|
|
168 |
item = list[i].split('=');
|
|
|
169 |
|
|
|
170 |
if (item.length > 1)
|
|
|
171 |
addSelectValue(form, 'doctype', item[0], item[1]);
|
|
|
172 |
}
|
|
|
173 |
|
|
|
174 |
// Setup fonts select box
|
|
|
175 |
list = editor.getParam("fullpage_fonts", defaultFontNames).split(';');
|
|
|
176 |
for (i = 0; i < list.length; i++) {
|
|
|
177 |
item = list[i].split('=');
|
|
|
178 |
|
|
|
179 |
if (item.length > 1)
|
|
|
180 |
addSelectValue(form, 'fontface', item[0], item[1]);
|
|
|
181 |
}
|
|
|
182 |
|
|
|
183 |
// Setup fontsize select box
|
|
|
184 |
list = editor.getParam("fullpage_fontsizes", defaultFontSizes).split(',');
|
|
|
185 |
for (i = 0; i < list.length; i++)
|
|
|
186 |
addSelectValue(form, 'fontsize', list[i], list[i]);
|
|
|
187 |
|
|
|
188 |
// Setup encodings select box
|
|
|
189 |
list = editor.getParam("fullpage_encodings", defaultEncodings).split(',');
|
|
|
190 |
for (i = 0; i < list.length; i++) {
|
|
|
191 |
item = list[i].split('=');
|
|
|
192 |
|
|
|
193 |
if (item.length > 1)
|
|
|
194 |
addSelectValue(form, 'docencoding', item[0], item[1]);
|
|
|
195 |
}
|
|
|
196 |
|
|
|
197 |
// Setup color pickers
|
|
|
198 |
document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
|
|
|
199 |
document.getElementById('link_color_pickcontainer').innerHTML = getColorPickerHTML('link_color_pick','link_color');
|
|
|
200 |
document.getElementById('visited_color_pickcontainer').innerHTML = getColorPickerHTML('visited_color_pick','visited_color');
|
|
|
201 |
document.getElementById('active_color_pickcontainer').innerHTML = getColorPickerHTML('active_color_pick','active_color');
|
|
|
202 |
document.getElementById('textcolor_pickcontainer').innerHTML = getColorPickerHTML('textcolor_pick','textcolor');
|
|
|
203 |
document.getElementById('stylesheet_browsercontainer').innerHTML = getBrowserHTML('stylesheetbrowser','stylesheet','file','fullpage');
|
|
|
204 |
document.getElementById('bgimage_pickcontainer').innerHTML = getBrowserHTML('bgimage_browser','bgimage','image','fullpage');
|
|
|
205 |
|
|
|
206 |
// Resize some elements
|
|
|
207 |
if (isVisible('stylesheetbrowser'))
|
|
|
208 |
document.getElementById('stylesheet').style.width = '220px';
|
|
|
209 |
|
|
|
210 |
if (isVisible('link_href_browser'))
|
|
|
211 |
document.getElementById('element_link_href').style.width = '230px';
|
|
|
212 |
|
|
|
213 |
if (isVisible('bgimage_browser'))
|
|
|
214 |
document.getElementById('bgimage').style.width = '210px';
|
|
|
215 |
|
|
|
216 |
// Update form
|
|
|
217 |
tinymce.each(tinyMCEPopup.getWindowArg('data'), function(value, key) {
|
|
|
218 |
setVal(key, value);
|
|
|
219 |
});
|
|
|
220 |
|
|
|
221 |
FullPageDialog.changedStyle();
|
|
|
222 |
|
|
|
223 |
// Update colors
|
|
|
224 |
updateColor('textcolor_pick', 'textcolor');
|
|
|
225 |
updateColor('bgcolor_pick', 'bgcolor');
|
|
|
226 |
updateColor('visited_color_pick', 'visited_color');
|
|
|
227 |
updateColor('active_color_pick', 'active_color');
|
|
|
228 |
updateColor('link_color_pick', 'link_color');
|
|
|
229 |
};
|
|
|
230 |
|
|
|
231 |
tinyMCEPopup.onInit.add(init);
|
|
|
232 |
})();
|