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