include/javascript/tiny_mce/plugins/table/js/row.js

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