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