|
5
|
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 })();
|
