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