includes/clientside/tinymce/plugins/table/jscripts/row.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('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
       
     6 
       
     7 	var inst = tinyMCE.selectedInstance;
       
     8 	var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");
       
     9 	var formObj = document.forms[0];
       
    10 	var st = tinyMCE.parseStyle(tinyMCE.getAttrib(trElm, "style"));
       
    11 
       
    12 	// Get table row data
       
    13 	var rowtype = trElm.parentNode.nodeName.toLowerCase();
       
    14 	var align = tinyMCE.getAttrib(trElm, 'align');
       
    15 	var valign = tinyMCE.getAttrib(trElm, 'valign');
       
    16 	var height = trimSize(getStyle(trElm, 'height', 'height'));
       
    17 	var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(trElm, 'class'), false);
       
    18 	var bgcolor = convertRGBToHex(getStyle(trElm, 'bgcolor', 'backgroundColor'));
       
    19 	var backgroundimage = getStyle(trElm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");;
       
    20 	var id = tinyMCE.getAttrib(trElm, 'id');
       
    21 	var lang = tinyMCE.getAttrib(trElm, 'lang');
       
    22 	var dir = tinyMCE.getAttrib(trElm, 'dir');
       
    23 
       
    24 	// Setup form
       
    25 	addClassesToList('class', 'table_row_styles');
       
    26 	formObj.bgcolor.value = bgcolor;
       
    27 	formObj.backgroundimage.value = backgroundimage;
       
    28 	formObj.height.value = height;
       
    29 	formObj.id.value = id;
       
    30 	formObj.lang.value = lang;
       
    31 	formObj.style.value = tinyMCE.serializeStyle(st);
       
    32 	selectByValue(formObj, 'align', align);
       
    33 	selectByValue(formObj, 'valign', valign);
       
    34 	selectByValue(formObj, 'class', className);
       
    35 	selectByValue(formObj, 'rowtype', rowtype);
       
    36 	selectByValue(formObj, 'dir', dir);
       
    37 
       
    38 	// Resize some elements
       
    39 	if (isVisible('backgroundimagebrowser'))
       
    40 		document.getElementById('backgroundimage').style.width = '180px';
       
    41 
       
    42 	updateColor('bgcolor_pick', 'bgcolor');
       
    43 }
       
    44 
       
    45 function updateAction() {
       
    46 	tinyMCEPopup.restoreSelection();
       
    47 
       
    48 	var inst = tinyMCE.selectedInstance;
       
    49 	var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");
       
    50 	var tableElm = tinyMCE.getParentElement(inst.getFocusElement(), "table");
       
    51 	var formObj = document.forms[0];
       
    52 	var action = getSelectValue(formObj, 'action');
       
    53 
       
    54 	inst.execCommand('mceBeginUndoLevel');
       
    55 
       
    56 	switch (action) {
       
    57 		case "row":
       
    58 			updateRow(trElm);
       
    59 			break;
       
    60 
       
    61 		case "all":
       
    62 			var rows = tableElm.getElementsByTagName("tr");
       
    63 
       
    64 			for (var i=0; i<rows.length; i++)
       
    65 				updateRow(rows[i], true);
       
    66 
       
    67 			break;
       
    68 
       
    69 		case "odd":
       
    70 		case "even":
       
    71 			var rows = tableElm.getElementsByTagName("tr");
       
    72 
       
    73 			for (var i=0; i<rows.length; i++) {
       
    74 				if ((i % 2 == 0 && action == "odd") || (i % 2 != 0 && action == "even"))
       
    75 					updateRow(rows[i], true, true);
       
    76 			}
       
    77 
       
    78 			break;
       
    79 	}
       
    80 
       
    81 	tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
       
    82 	tinyMCE.triggerNodeChange();
       
    83 	inst.execCommand('mceEndUndoLevel');
       
    84 	tinyMCEPopup.close();
       
    85 }
       
    86 
       
    87 function updateRow(tr_elm, skip_id, skip_parent) {
       
    88 	var inst = tinyMCE.selectedInstance;
       
    89 	var formObj = document.forms[0];
       
    90 	var curRowType = tr_elm.parentNode.nodeName.toLowerCase();
       
    91 	var rowtype = getSelectValue(formObj, 'rowtype');
       
    92 	var doc = inst.getDoc();
       
    93 
       
    94 	// Update row element
       
    95 	if (!skip_id)
       
    96 		tr_elm.setAttribute('id', formObj.id.value);
       
    97 
       
    98 	tr_elm.setAttribute('align', getSelectValue(formObj, 'align'));
       
    99 	tr_elm.setAttribute('vAlign', getSelectValue(formObj, 'valign'));
       
   100 	tr_elm.setAttribute('lang', formObj.lang.value);
       
   101 	tr_elm.setAttribute('dir', getSelectValue(formObj, 'dir'));
       
   102 	tr_elm.setAttribute('style', tinyMCE.serializeStyle(tinyMCE.parseStyle(formObj.style.value)));
       
   103 	tinyMCE.setAttrib(tr_elm, 'class', getSelectValue(formObj, 'class'));
       
   104 
       
   105 	// Clear deprecated attributes
       
   106 	tr_elm.setAttribute('background', '');
       
   107 	tr_elm.setAttribute('bgColor', '');
       
   108 	tr_elm.setAttribute('height', '');
       
   109 
       
   110 	// Set styles
       
   111 	tr_elm.style.height = getCSSSize(formObj.height.value);
       
   112 	tr_elm.style.backgroundColor = formObj.bgcolor.value;
       
   113 
       
   114 	if (formObj.backgroundimage.value != "")
       
   115 		tr_elm.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
       
   116 	else
       
   117 		tr_elm.style.backgroundImage = '';
       
   118 
       
   119 	// Setup new rowtype
       
   120 	if (curRowType != rowtype && !skip_parent) {
       
   121 		// first, clone the node we are working on
       
   122 		var newRow = tr_elm.cloneNode(1);
       
   123 
       
   124 		// next, find the parent of its new destination (creating it if necessary)
       
   125 		var theTable = tinyMCE.getParentElement(tr_elm, "table");
       
   126 		var dest = rowtype;
       
   127 		var newParent = null;
       
   128 		for (var i = 0; i < theTable.childNodes.length; i++) {
       
   129 			if (theTable.childNodes[i].nodeName.toLowerCase() == dest)
       
   130 				newParent = theTable.childNodes[i];
       
   131 		}
       
   132 
       
   133 		if (newParent == null) {
       
   134 			newParent = doc.createElement(dest);
       
   135 
       
   136 			if (dest == "thead")
       
   137 				theTable.insertBefore(newParent, theTable.firstChild);
       
   138 			else
       
   139 				theTable.appendChild(newParent);
       
   140 		}
       
   141 
       
   142 		// append the row to the new parent
       
   143 		newParent.appendChild(newRow);
       
   144 
       
   145 		// remove the original
       
   146 		tr_elm.parentNode.removeChild(tr_elm);
       
   147 
       
   148 		// set tr_elm to the new node
       
   149 		tr_elm = newRow;
       
   150 	}
       
   151 }
       
   152 
       
   153 function changedBackgroundImage() {
       
   154 	var formObj = document.forms[0];
       
   155 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   156 
       
   157 	st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
       
   158 
       
   159 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   160 }
       
   161 
       
   162 function changedStyle() {
       
   163 	var formObj = document.forms[0];
       
   164 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   165 
       
   166 	if (st['background-image'])
       
   167 		formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
       
   168 	else
       
   169 		formObj.backgroundimage.value = '';
       
   170 
       
   171 	if (st['height'])
       
   172 		formObj.height.value = trimSize(st['height']);
       
   173 
       
   174 	if (st['background-color']) {
       
   175 		formObj.bgcolor.value = st['background-color'];
       
   176 		updateColor('bgcolor_pick','bgcolor');
       
   177 	}
       
   178 }
       
   179 
       
   180 function changedSize() {
       
   181 	var formObj = document.forms[0];
       
   182 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   183 
       
   184 	var height = formObj.height.value;
       
   185 	if (height != "")
       
   186 		st['height'] = getCSSSize(height);
       
   187 	else
       
   188 		st['height'] = "";
       
   189 
       
   190 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   191 }
       
   192 
       
   193 function changedColor() {
       
   194 	var formObj = document.forms[0];
       
   195 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   196 
       
   197 	st['background-color'] = formObj.bgcolor.value;
       
   198 
       
   199 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   200 }