/BlogEngine/BlogEngine.NET/editors/tiny_mce_3_4_3_1/plugins/table/js/table.js

  1tinyMCEPopup.requireLangPack();
  2
  3var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom;
  4
  5function insertTable() {
  6	var formObj = document.forms[0];
  7	var inst = tinyMCEPopup.editor, dom = inst.dom;
  8	var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules;
  9	var html = '', capEl, elm;
 10	var cellLimit, rowLimit, colLimit;
 11
 12	tinyMCEPopup.restoreSelection();
 13
 14	if (!AutoValidator.validate(formObj)) {
 15		tinyMCEPopup.alert(AutoValidator.getErrorMessages(formObj).join('. ') + '.');
 16		return false;
 17	}
 18
 19	elm = dom.getParent(inst.selection.getNode(), 'table');
 20
 21	// Get form data
 22	cols = formObj.elements['cols'].value;
 23	rows = formObj.elements['rows'].value;
 24	border = formObj.elements['border'].value != "" ? formObj.elements['border'].value : 0;
 25	cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : "";
 26	cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : "";
 27	align = getSelectValue(formObj, "align");
 28	frame = getSelectValue(formObj, "tframe");
 29	rules = getSelectValue(formObj, "rules");
 30	width = formObj.elements['width'].value;
 31	height = formObj.elements['height'].value;
 32	bordercolor = formObj.elements['bordercolor'].value;
 33	bgcolor = formObj.elements['bgcolor'].value;
 34	className = getSelectValue(formObj, "class");
 35	id = formObj.elements['id'].value;
 36	summary = formObj.elements['summary'].value;
 37	style = formObj.elements['style'].value;
 38	dir = formObj.elements['dir'].value;
 39	lang = formObj.elements['lang'].value;
 40	background = formObj.elements['backgroundimage'].value;
 41	caption = formObj.elements['caption'].checked;
 42
 43	cellLimit = tinyMCEPopup.getParam('table_cell_limit', false);
 44	rowLimit = tinyMCEPopup.getParam('table_row_limit', false);
 45	colLimit = tinyMCEPopup.getParam('table_col_limit', false);
 46
 47	// Validate table size
 48	if (colLimit && cols > colLimit) {
 49		tinyMCEPopup.alert(inst.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit));
 50		return false;
 51	} else if (rowLimit && rows > rowLimit) {
 52		tinyMCEPopup.alert(inst.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit));
 53		return false;
 54	} else if (cellLimit && cols * rows > cellLimit) {
 55		tinyMCEPopup.alert(inst.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit));
 56		return false;
 57	}
 58
 59	// Update table
 60	if (action == "update") {
 61		dom.setAttrib(elm, 'cellPadding', cellpadding, true);
 62		dom.setAttrib(elm, 'cellSpacing', cellspacing, true);
 63		dom.setAttrib(elm, 'border', border);
 64		dom.setAttrib(elm, 'align', align);
 65		dom.setAttrib(elm, 'frame', frame);
 66		dom.setAttrib(elm, 'rules', rules);
 67		dom.setAttrib(elm, 'class', className);
 68		dom.setAttrib(elm, 'style', style);
 69		dom.setAttrib(elm, 'id', id);
 70		dom.setAttrib(elm, 'summary', summary);
 71		dom.setAttrib(elm, 'dir', dir);
 72		dom.setAttrib(elm, 'lang', lang);
 73
 74		capEl = inst.dom.select('caption', elm)[0];
 75
 76		if (capEl && !caption)
 77			capEl.parentNode.removeChild(capEl);
 78
 79		if (!capEl && caption) {
 80			capEl = elm.ownerDocument.createElement('caption');
 81
 82			if (!tinymce.isIE)
 83				capEl.innerHTML = '<br data-mce-bogus="1"/>';
 84
 85			elm.insertBefore(capEl, elm.firstChild);
 86		}
 87
 88		if (width && inst.settings.inline_styles) {
 89			dom.setStyle(elm, 'width', width);
 90			dom.setAttrib(elm, 'width', '');
 91		} else {
 92			dom.setAttrib(elm, 'width', width, true);
 93			dom.setStyle(elm, 'width', '');
 94		}
 95
 96		// Remove these since they are not valid XHTML
 97		dom.setAttrib(elm, 'borderColor', '');
 98		dom.setAttrib(elm, 'bgColor', '');
 99		dom.setAttrib(elm, 'background', '');
100
101		if (height && inst.settings.inline_styles) {
102			dom.setStyle(elm, 'height', height);
103			dom.setAttrib(elm, 'height', '');
104		} else {
105			dom.setAttrib(elm, 'height', height, true);
106			dom.setStyle(elm, 'height', '');
107 		}
108
109		if (background != '')
110			elm.style.backgroundImage = "url('" + background + "')";
111		else
112			elm.style.backgroundImage = '';
113
114/*		if (tinyMCEPopup.getParam("inline_styles")) {
115			if (width != '')
116				elm.style.width = getCSSSize(width);
117		}*/
118
119		if (bordercolor != "") {
120			elm.style.borderColor = bordercolor;
121			elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle;
122			elm.style.borderWidth = border == "" ? "1px" : border;
123		} else
124			elm.style.borderColor = '';
125
126		elm.style.backgroundColor = bgcolor;
127		elm.style.height = getCSSSize(height);
128
129		inst.addVisual();
130
131		// Fix for stange MSIE align bug
132		//elm.outerHTML = elm.outerHTML;
133
134		inst.nodeChanged();
135		inst.execCommand('mceEndUndoLevel');
136
137		// Repaint if dimensions changed
138		if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight)
139			inst.execCommand('mceRepaint');
140
141		tinyMCEPopup.close();
142		return true;
143	}
144
145	// Create new table
146	html += '<table';
147
148	html += makeAttrib('id', id);
149	html += makeAttrib('border', border);
150	html += makeAttrib('cellpadding', cellpadding);
151	html += makeAttrib('cellspacing', cellspacing);
152	html += makeAttrib('data-mce-new', '1');
153
154	if (width && inst.settings.inline_styles) {
155		if (style)
156			style += '; ';
157
158		// Force px
159		if (/^[0-9\.]+$/.test(width))
160			width += 'px';
161
162		style += 'width: ' + width;
163	} else
164		html += makeAttrib('width', width);
165
166/*	if (height) {
167		if (style)
168			style += '; ';
169
170		style += 'height: ' + height;
171	}*/
172
173	//html += makeAttrib('height', height);
174	//html += makeAttrib('bordercolor', bordercolor);
175	//html += makeAttrib('bgcolor', bgcolor);
176	html += makeAttrib('align', align);
177	html += makeAttrib('frame', frame);
178	html += makeAttrib('rules', rules);
179	html += makeAttrib('class', className);
180	html += makeAttrib('style', style);
181	html += makeAttrib('summary', summary);
182	html += makeAttrib('dir', dir);
183	html += makeAttrib('lang', lang);
184	html += '>';
185
186	if (caption) {
187		if (!tinymce.isIE)
188			html += '<caption><br data-mce-bogus="1"/></caption>';
189		else
190			html += '<caption></caption>';
191	}
192
193	for (var y=0; y<rows; y++) {
194		html += "<tr>";
195
196		for (var x=0; x<cols; x++) {
197			if (!tinymce.isIE)
198				html += '<td><br data-mce-bogus="1"/></td>';
199			else
200				html += '<td></td>';
201		}
202
203		html += "</tr>";
204	}
205
206	html += "</table>";
207
208	// Move table
209	if (inst.settings.fix_table_elements) {
210		var patt = '';
211
212		inst.focus();
213		inst.selection.setContent('<br class="_mce_marker" />');
214
215		tinymce.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n) {
216			if (patt)
217				patt += ',';
218
219			patt += n + ' ._mce_marker';
220		});
221
222		tinymce.each(inst.dom.select(patt), function(n) {
223			inst.dom.split(inst.dom.getParent(n, 'h1,h2,h3,h4,h5,h6,p'), n);
224		});
225
226		dom.setOuterHTML(dom.select('br._mce_marker')[0], html);
227	} else
228		inst.execCommand('mceInsertContent', false, html);
229
230	tinymce.each(dom.select('table[data-mce-new]'), function(node) {
231		var td = dom.select('td', node);
232
233		try {
234			// IE9 might fail to do this selection
235			inst.selection.select(td[0], true);
236			inst.selection.collapse();
237		} catch (ex) {
238			// Ignore
239		}
240
241		dom.setAttrib(node, 'data-mce-new', '');
242	});
243
244	inst.addVisual();
245	inst.execCommand('mceEndUndoLevel');
246
247	tinyMCEPopup.close();
248}
249
250function makeAttrib(attrib, value) {
251	var formObj = document.forms[0];
252	var valueElm = formObj.elements[attrib];
253
254	if (typeof(value) == "undefined" || value == null) {
255		value = "";
256
257		if (valueElm)
258			value = valueElm.value;
259	}
260
261	if (value == "")
262		return "";
263
264	// XML encode it
265	value = value.replace(/&/g, '&amp;');
266	value = value.replace(/\"/g, '&quot;');
267	value = value.replace(/</g, '&lt;');
268	value = value.replace(/>/g, '&gt;');
269
270	return ' ' + attrib + '="' + value + '"';
271}
272
273function init() {
274	tinyMCEPopup.resizeToInnerSize();
275
276	document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
277	document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
278	document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
279	document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
280
281	var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', '');
282	var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = "";
283	var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules = "", frame = "";
284	var inst = tinyMCEPopup.editor, dom = inst.dom;
285	var formObj = document.forms[0];
286	var elm = dom.getParent(inst.selection.getNode(), "table");
287
288	action = tinyMCEPopup.getWindowArg('action');
289
290	if (!action)
291		action = elm ? "update" : "insert";
292
293	if (elm && action != "insert") {
294		var rowsAr = elm.rows;
295		var cols = 0;
296		for (var i=0; i<rowsAr.length; i++)
297			if (rowsAr[i].cells.length > cols)
298				cols = rowsAr[i].cells.length;
299
300		cols = cols;
301		rows = rowsAr.length;
302
303		st = dom.parseStyle(dom.getAttrib(elm, "style"));
304		border = trimSize(getStyle(elm, 'border', 'borderWidth'));
305		cellpadding = dom.getAttrib(elm, 'cellpadding', "");
306		cellspacing = dom.getAttrib(elm, 'cellspacing', "");
307		width = trimSize(getStyle(elm, 'width', 'width'));
308		height = trimSize(getStyle(elm, 'height', 'height'));
309		bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor'));
310		bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor'));
311		align = dom.getAttrib(elm, 'align', align);
312		frame = dom.getAttrib(elm, 'frame');
313		rules = dom.getAttrib(elm, 'rules');
314		className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, ''));
315		id = dom.getAttrib(elm, 'id');
316		summary = dom.getAttrib(elm, 'summary');
317		style = dom.serializeStyle(st);
318		dir = dom.getAttrib(elm, 'dir');
319		lang = dom.getAttrib(elm, 'lang');
320		background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
321		formObj.caption.checked = elm.getElementsByTagName('caption').length > 0;
322
323		orgTableWidth = width;
324		orgTableHeight = height;
325
326		action = "update";
327		formObj.insert.value = inst.getLang('update');
328	}
329
330	addClassesToList('class', "table_styles");
331	TinyMCE_EditableSelects.init();
332
333	// Update form
334	selectByValue(formObj, 'align', align);
335	selectByValue(formObj, 'tframe', frame);
336	selectByValue(formObj, 'rules', rules);
337	selectByValue(formObj, 'class', className, true, true);
338	formObj.cols.value = cols;
339	formObj.rows.value = rows;
340	formObj.border.value = border;
341	formObj.cellpadding.value = cellpadding;
342	formObj.cellspacing.value = cellspacing;
343	formObj.width.value = width;
344	formObj.height.value = height;
345	formObj.bordercolor.value = bordercolor;
346	formObj.bgcolor.value = bgcolor;
347	formObj.id.value = id;
348	formObj.summary.value = summary;
349	formObj.style.value = style;
350	formObj.dir.value = dir;
351	formObj.lang.value = lang;
352	formObj.backgroundimage.value = background;
353
354	updateColor('bordercolor_pick', 'bordercolor');
355	updateColor('bgcolor_pick', 'bgcolor');
356
357	// Resize some elements
358	if (isVisible('backgroundimagebrowser'))
359		document.getElementById('backgroundimage').style.width = '180px';
360
361	// Disable some fields in update mode
362	if (action == "update") {
363		formObj.cols.disabled = true;
364		formObj.rows.disabled = true;
365	}
366}
367
368function changedSize() {
369	var formObj = document.forms[0];
370	var st = dom.parseStyle(formObj.style.value);
371
372/*	var width = formObj.width.value;
373	if (width != "")
374		st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : "";
375	else
376		st['width'] = "";*/
377
378	var height = formObj.height.value;
379	if (height != "")
380		st['height'] = getCSSSize(height);
381	else
382		st['height'] = "";
383
384	formObj.style.value = dom.serializeStyle(st);
385}
386
387function changedBackgroundImage() {
388	var formObj = document.forms[0];
389	var st = dom.parseStyle(formObj.style.value);
390
391	st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
392
393	formObj.style.value = dom.serializeStyle(st);
394}
395
396function changedBorder() {
397	var formObj = document.forms[0];
398	var st = dom.parseStyle(formObj.style.value);
399
400	// Update border width if the element has a color
401	if (formObj.border.value != "" && formObj.bordercolor.value != "")
402		st['border-width'] = formObj.border.value + "px";
403
404	formObj.style.value = dom.serializeStyle(st);
405}
406
407function changedColor() {
408	var formObj = document.forms[0];
409	var st = dom.parseStyle(formObj.style.value);
410
411	st['background-color'] = formObj.bgcolor.value;
412
413	if (formObj.bordercolor.value != "") {
414		st['border-color'] = formObj.bordercolor.value;
415
416		// Add border-width if it's missing
417		if (!st['border-width'])
418			st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px";
419	}
420
421	formObj.style.value = dom.serializeStyle(st);
422}
423
424function changedStyle() {
425	var formObj = document.forms[0];
426	var st = dom.parseStyle(formObj.style.value);
427
428	if (st['background-image'])
429		formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
430	else
431		formObj.backgroundimage.value = '';
432
433	if (st['width'])
434		formObj.width.value = trimSize(st['width']);
435
436	if (st['height'])
437		formObj.height.value = trimSize(st['height']);
438
439	if (st['background-color']) {
440		formObj.bgcolor.value = st['background-color'];
441		updateColor('bgcolor_pick','bgcolor');
442	}
443
444	if (st['border-color']) {
445		formObj.bordercolor.value = st['border-color'];
446		updateColor('bordercolor_pick','bordercolor');
447	}
448}
449
450tinyMCEPopup.onInit.add(init);