includes/clientside/tinymce/plugins/table/jscripts/cell.js
changeset 335 67bd3121a12e
parent 334 c72b545f1304
child 336 bfa2e9c23f03
equal deleted inserted replaced
334:c72b545f1304 335:67bd3121a12e
     1 function init() {
       
     2 	tinyMCEPopup.resizeToInnerSize();
       
     3 
       
     4 	document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
       
     5 	document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
       
     6 	document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor')
       
     7 
       
     8 	var inst = tinyMCE.selectedInstance;
       
     9 	var tdElm = tinyMCE.getParentElement(inst.getFocusElement(), "td,th");
       
    10 	var formObj = document.forms[0];
       
    11 	var st = tinyMCE.parseStyle(tinyMCE.getAttrib(tdElm, "style"));
       
    12 
       
    13 	// Get table cell data
       
    14 	var celltype = tdElm.nodeName.toLowerCase();
       
    15 	var align = tinyMCE.getAttrib(tdElm, 'align');
       
    16 	var valign = tinyMCE.getAttrib(tdElm, 'valign');
       
    17 	var width = trimSize(getStyle(tdElm, 'width', 'width'));
       
    18 	var height = trimSize(getStyle(tdElm, 'height', 'height'));
       
    19 	var bordercolor = convertRGBToHex(getStyle(tdElm, 'bordercolor', 'borderLeftColor'));
       
    20 	var bgcolor = convertRGBToHex(getStyle(tdElm, 'bgcolor', 'backgroundColor'));
       
    21 	var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(tdElm, 'class'), false);
       
    22 	var backgroundimage = getStyle(tdElm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");;
       
    23 	var id = tinyMCE.getAttrib(tdElm, 'id');
       
    24 	var lang = tinyMCE.getAttrib(tdElm, 'lang');
       
    25 	var dir = tinyMCE.getAttrib(tdElm, 'dir');
       
    26 	var scope = tinyMCE.getAttrib(tdElm, 'scope');
       
    27 
       
    28 	// Setup form
       
    29 	addClassesToList('class', 'table_cell_styles');
       
    30 	formObj.bordercolor.value = bordercolor;
       
    31 	formObj.bgcolor.value = bgcolor;
       
    32 	formObj.backgroundimage.value = backgroundimage;
       
    33 	formObj.width.value = width;
       
    34 	formObj.height.value = height;
       
    35 	formObj.id.value = id;
       
    36 	formObj.lang.value = lang;
       
    37 	formObj.style.value = tinyMCE.serializeStyle(st);
       
    38 	selectByValue(formObj, 'align', align);
       
    39 	selectByValue(formObj, 'valign', valign);
       
    40 	selectByValue(formObj, 'class', className);
       
    41 	selectByValue(formObj, 'celltype', celltype);
       
    42 	selectByValue(formObj, 'dir', dir);
       
    43 	selectByValue(formObj, 'scope', scope);
       
    44 
       
    45 	// Resize some elements
       
    46 	if (isVisible('backgroundimagebrowser'))
       
    47 		document.getElementById('backgroundimage').style.width = '180px';
       
    48 
       
    49 	updateColor('bordercolor_pick', 'bordercolor');
       
    50 	updateColor('bgcolor_pick', 'bgcolor');
       
    51 }
       
    52 
       
    53 function updateAction() {
       
    54 	tinyMCEPopup.restoreSelection();
       
    55 
       
    56 	var inst = tinyMCE.selectedInstance;
       
    57 	var tdElm = tinyMCE.getParentElement(inst.getFocusElement(), "td,th");
       
    58 	var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");
       
    59 	var tableElm = tinyMCE.getParentElement(inst.getFocusElement(), "table");
       
    60 	var formObj = document.forms[0];
       
    61 
       
    62 	inst.execCommand('mceBeginUndoLevel');
       
    63 
       
    64 	switch (getSelectValue(formObj, 'action')) {
       
    65 		case "cell":
       
    66 			var celltype = getSelectValue(formObj, 'celltype');
       
    67 			var scope = getSelectValue(formObj, 'scope');
       
    68 
       
    69 			if (tinyMCE.getParam("accessibility_warnings")) {
       
    70 				if (celltype == "th" && scope == "")
       
    71 					var answer = confirm(tinyMCE.getLang('lang_table_missing_scope', '', true));
       
    72 				else
       
    73 					var answer = true;
       
    74 
       
    75 				if (!answer)
       
    76 					return;
       
    77 			}
       
    78 
       
    79 			updateCell(tdElm);
       
    80 			break;
       
    81 
       
    82 		case "row":
       
    83 			var cell = trElm.firstChild;
       
    84 
       
    85 			if (cell.nodeName != "TD" && cell.nodeName != "TH")
       
    86 				cell = nextCell(cell);
       
    87 
       
    88 			do {
       
    89 				cell = updateCell(cell, true);
       
    90 			} while ((cell = nextCell(cell)) != null);
       
    91 
       
    92 			break;
       
    93 
       
    94 		case "all":
       
    95 			var rows = tableElm.getElementsByTagName("tr");
       
    96 
       
    97 			for (var i=0; i<rows.length; i++) {
       
    98 				var cell = rows[i].firstChild;
       
    99 
       
   100 				if (cell.nodeName != "TD" && cell.nodeName != "TH")
       
   101 					cell = nextCell(cell);
       
   102 
       
   103 				do {
       
   104 					cell = updateCell(cell, true);
       
   105 				} while ((cell = nextCell(cell)) != null);
       
   106 			}
       
   107 
       
   108 			break;
       
   109 	}
       
   110 
       
   111 	tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
       
   112 	tinyMCE.triggerNodeChange();
       
   113 	inst.execCommand('mceEndUndoLevel');
       
   114 	tinyMCEPopup.close();
       
   115 }
       
   116 
       
   117 function nextCell(elm) {
       
   118 	while ((elm = elm.nextSibling) != null) {
       
   119 		if (elm.nodeName == "TD" || elm.nodeName == "TH")
       
   120 			return elm;
       
   121 	}
       
   122 
       
   123 	return null;
       
   124 }
       
   125 
       
   126 function updateCell(td, skip_id) {
       
   127 	var inst = tinyMCE.selectedInstance;
       
   128 	var formObj = document.forms[0];
       
   129 	var curCellType = td.nodeName.toLowerCase();
       
   130 	var celltype = getSelectValue(formObj, 'celltype');
       
   131 	var doc = inst.getDoc();
       
   132 
       
   133 	if (!skip_id)
       
   134 		td.setAttribute('id', formObj.id.value);
       
   135 
       
   136 	td.setAttribute('align', formObj.align.value);
       
   137 	td.setAttribute('vAlign', formObj.valign.value);
       
   138 	td.setAttribute('lang', formObj.lang.value);
       
   139 	td.setAttribute('dir', getSelectValue(formObj, 'dir'));
       
   140 	td.setAttribute('style', tinyMCE.serializeStyle(tinyMCE.parseStyle(formObj.style.value)));
       
   141 	td.setAttribute('scope', formObj.scope.value);
       
   142 	tinyMCE.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
       
   143 
       
   144 	// Clear deprecated attributes
       
   145 	tinyMCE.setAttrib(td, 'width', '');
       
   146 	tinyMCE.setAttrib(td, 'height', '');
       
   147 	tinyMCE.setAttrib(td, 'bgColor', '');
       
   148 	tinyMCE.setAttrib(td, 'borderColor', '');
       
   149 	tinyMCE.setAttrib(td, 'background', '');
       
   150 
       
   151 	// Set styles
       
   152 	td.style.width = getCSSSize(formObj.width.value);
       
   153 	td.style.height = getCSSSize(formObj.height.value);
       
   154 	if (formObj.bordercolor.value != "") {
       
   155 		td.style.borderColor = formObj.bordercolor.value;
       
   156 		td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
       
   157 		td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
       
   158 	} else
       
   159 		td.style.borderColor = '';
       
   160 
       
   161 	td.style.backgroundColor = formObj.bgcolor.value;
       
   162 
       
   163 	if (formObj.backgroundimage.value != "")
       
   164 		td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
       
   165 	else
       
   166 		td.style.backgroundImage = '';
       
   167 
       
   168 	if (curCellType != celltype) {
       
   169 		// changing to a different node type
       
   170 		var newCell = doc.createElement(celltype);
       
   171 
       
   172 		for (var c=0; c<td.childNodes.length; c++)
       
   173 			newCell.appendChild(td.childNodes[c].cloneNode(1));
       
   174 
       
   175 		for (var a=0; a<td.attributes.length; a++) {
       
   176 			var attr = td.attributes[a];
       
   177 			newCell.setAttribute(attr.name, attr.value);
       
   178 		}
       
   179 
       
   180 		td.parentNode.replaceChild(newCell, td);
       
   181 		td = newCell;
       
   182 	}
       
   183 
       
   184 	return td;
       
   185 }
       
   186 
       
   187 function changedBackgroundImage() {
       
   188 	var formObj = document.forms[0];
       
   189 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   190 
       
   191 	st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
       
   192 
       
   193 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   194 }
       
   195 
       
   196 function changedSize() {
       
   197 	var formObj = document.forms[0];
       
   198 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   199 
       
   200 	var width = formObj.width.value;
       
   201 	if (width != "")
       
   202 		st['width'] = getCSSSize(width);
       
   203 	else
       
   204 		st['width'] = "";
       
   205 
       
   206 	var height = formObj.height.value;
       
   207 	if (height != "")
       
   208 		st['height'] = getCSSSize(height);
       
   209 	else
       
   210 		st['height'] = "";
       
   211 
       
   212 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   213 }
       
   214 
       
   215 function changedColor() {
       
   216 	var formObj = document.forms[0];
       
   217 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   218 
       
   219 	st['background-color'] = formObj.bgcolor.value;
       
   220 	st['border-color'] = formObj.bordercolor.value;
       
   221 
       
   222 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   223 }
       
   224 
       
   225 function changedStyle() {
       
   226 	var formObj = document.forms[0];
       
   227 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   228 
       
   229 	if (st['background-image'])
       
   230 		formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
       
   231 	else
       
   232 		formObj.backgroundimage.value = '';
       
   233 
       
   234 	if (st['width'])
       
   235 		formObj.width.value = trimSize(st['width']);
       
   236 
       
   237 	if (st['height'])
       
   238 		formObj.height.value = trimSize(st['height']);
       
   239 
       
   240 	if (st['background-color']) {
       
   241 		formObj.bgcolor.value = st['background-color'];
       
   242 		updateColor('bgcolor_pick','bgcolor');
       
   243 	}
       
   244 
       
   245 	if (st['border-color']) {
       
   246 		formObj.bordercolor.value = st['border-color'];
       
   247 		updateColor('bordercolor_pick','bordercolor');
       
   248 	}
       
   249 }