webcit/tiny_mce/plugins/table/jscripts/row.js

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