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

   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.getStart(), "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         TinyMCE_EditableSelects.init();
  36
  37         if (!ed.dom.hasClass(tdElm, 'mceSelected')) {
  38                 formObj.bordercolor.value = bordercolor;
  39                 formObj.bgcolor.value = bgcolor;
  40                 formObj.backgroundimage.value = backgroundimage;
  41                 formObj.width.value = width;
  42                 formObj.height.value = height;
  43                 formObj.id.value = id;
  44                 formObj.lang.value = lang;
  45                 formObj.style.value = ed.dom.serializeStyle(st);
  46                 selectByValue(formObj, 'align', align);
  47                 selectByValue(formObj, 'valign', valign);
  48                 selectByValue(formObj, 'class', className, true, true);
  49                 selectByValue(formObj, 'celltype', celltype);
  50                 selectByValue(formObj, 'dir', dir);
  51                 selectByValue(formObj, 'scope', scope);
  52
  53                 // Resize some elements
  54                 if (isVisible('backgroundimagebrowser'))
  55                         document.getElementById('backgroundimage').style.width = '180px';
  56
  57                 updateColor('bordercolor_pick', 'bordercolor');
  58                 updateColor('bgcolor_pick', 'bgcolor');
  59         } else
  60                 tinyMCEPopup.dom.hide('action');
  61 }
  62
  63 function updateAction() {
  64         var el, inst = ed, tdElm, trElm, tableElm, formObj = document.forms[0];
  65
  66         tinyMCEPopup.restoreSelection();
  67         el = ed.selection.getStart();
  68         tdElm = ed.dom.getParent(el, "td,th");
  69         trElm = ed.dom.getParent(el, "tr");
  70         tableElm = ed.dom.getParent(el, "table");
  71
  72         // Cell is selected
  73         if (ed.dom.hasClass(tdElm, 'mceSelected')) {
  74                 // Update all selected sells
  75                 tinymce.each(ed.dom.select('td.mceSelected,th.mceSelected'), function(td) {
  76                         updateCell(td);
  77                 });
  78
  79                 ed.addVisual();
  80                 ed.nodeChanged();
  81                 inst.execCommand('mceEndUndoLevel');
  82                 tinyMCEPopup.close();
  83                 return;
  84         }
  85
  86         switch (getSelectValue(formObj, 'action')) {
  87                 case "cell":
  88                         var celltype = getSelectValue(formObj, 'celltype');
  89                         var scope = getSelectValue(formObj, 'scope');
  90
  91                         function doUpdate(s) {
  92                                 if (s) {
  93                                         updateCell(tdElm);
  94
  95                                         ed.addVisual();
  96                                         ed.nodeChanged();
  97                                         inst.execCommand('mceEndUndoLevel');
  98                                         tinyMCEPopup.close();
  99                                 }
 100                         };
 101
 102                         if (ed.getParam("accessibility_warnings", 1)) {
 103                                 if (celltype == "th" && scope == "")
 104                                         tinyMCEPopup.confirm(ed.getLang('table_dlg.missing_scope', '', true), doUpdate);
 105                                 else
 106                                         doUpdate(1);
 107
 108                                 return;
 109                         }
 110
 111                         updateCell(tdElm);
 112                         break;
 113
 114                 case "row":
 115                         var cell = trElm.firstChild;
 116
 117                         if (cell.nodeName != "TD" && cell.nodeName != "TH")
 118                                 cell = nextCell(cell);
 119
 120                         do {
 121                                 cell = updateCell(cell, true);
 122                         } while ((cell = nextCell(cell)) != null);
 123
 124                         break;
 125
 126                 case "all":
 127                         var rows = tableElm.getElementsByTagName("tr");
 128
 129                         for (var i=0; i<rows.length; i++) {
 130                                 var cell = rows[i].firstChild;
 131
 132                                 if (cell.nodeName != "TD" && cell.nodeName != "TH")
 133                                         cell = nextCell(cell);
 134
 135                                 do {
 136                                         cell = updateCell(cell, true);
 137                                 } while ((cell = nextCell(cell)) != null);
 138                         }
 139
 140                         break;
 141         }
 142
 143         ed.addVisual();
 144         ed.nodeChanged();
 145         inst.execCommand('mceEndUndoLevel');
 146         tinyMCEPopup.close();
 147 }
 148
 149 function nextCell(elm) {
 150         while ((elm = elm.nextSibling) != null) {
 151                 if (elm.nodeName == "TD" || elm.nodeName == "TH")
 152                         return elm;
 153         }
 154
 155         return null;
 156 }
 157
 158 function updateCell(td, skip_id) {
 159         var inst = ed;
 160         var formObj = document.forms[0];
 161         var curCellType = td.nodeName.toLowerCase();
 162         var celltype = getSelectValue(formObj, 'celltype');
 163         var doc = inst.getDoc();
 164         var dom = ed.dom;
 165
 166         if (!skip_id)
 167                 dom.setAttrib(td, 'id', formObj.id.value);
 168
 169         dom.setAttrib(td, 'align', formObj.align.value);
 170         dom.setAttrib(td, 'vAlign', formObj.valign.value);
 171         dom.setAttrib(td, 'lang', formObj.lang.value);
 172         dom.setAttrib(td, 'dir', getSelectValue(formObj, 'dir'));
 173         dom.setAttrib(td, 'style', ed.dom.serializeStyle(ed.dom.parseStyle(formObj.style.value)));
 174         dom.setAttrib(td, 'scope', formObj.scope.value);
 175         dom.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
 176
 177         // Clear deprecated attributes
 178         ed.dom.setAttrib(td, 'width', '');
 179         ed.dom.setAttrib(td, 'height', '');
 180         ed.dom.setAttrib(td, 'bgColor', '');
 181         ed.dom.setAttrib(td, 'borderColor', '');
 182         ed.dom.setAttrib(td, 'background', '');
 183
 184         // Set styles
 185         td.style.width = getCSSSize(formObj.width.value);
 186         td.style.height = getCSSSize(formObj.height.value);
 187         if (formObj.bordercolor.value != "") {
 188                 td.style.borderColor = formObj.bordercolor.value;
 189                 td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
 190                 td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
 191         } else
 192                 td.style.borderColor = '';
 193
 194         td.style.backgroundColor = formObj.bgcolor.value;
 195
 196         if (formObj.backgroundimage.value != "")
 197                 td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
 198         else
 199                 td.style.backgroundImage = '';
 200
 201         if (curCellType != celltype) {
 202                 // changing to a different node type
 203                 var newCell = doc.createElement(celltype);
 204
 205                 for (var c=0; c<td.childNodes.length; c++)
 206                         newCell.appendChild(td.childNodes[c].cloneNode(1));
 207
 208                 for (var a=0; a<td.attributes.length; a++)
 209                         ed.dom.setAttrib(newCell, td.attributes[a].name, ed.dom.getAttrib(td, td.attributes[a].name));
 210
 211                 td.parentNode.replaceChild(newCell, td);
 212                 td = newCell;
 213         }
 214
 215         dom.setAttrib(td, 'style', dom.serializeStyle(dom.parseStyle(td.style.cssText)));
 216
 217         return td;
 218 }
 219
 220 function changedBackgroundImage() {
 221         var formObj = document.forms[0];
 222         var st = ed.dom.parseStyle(formObj.style.value);
 223
 224         st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
 225
 226         formObj.style.value = ed.dom.serializeStyle(st);
 227 }
 228
 229 function changedSize() {
 230         var formObj = document.forms[0];
 231         var st = ed.dom.parseStyle(formObj.style.value);
 232
 233         var width = formObj.width.value;
 234         if (width != "")
 235                 st['width'] = getCSSSize(width);
 236         else
 237                 st['width'] = "";
 238
 239         var height = formObj.height.value;
 240         if (height != "")
 241                 st['height'] = getCSSSize(height);
 242         else
 243                 st['height'] = "";
 244
 245         formObj.style.value = ed.dom.serializeStyle(st);
 246 }
 247
 248 function changedColor() {
 249         var formObj = document.forms[0];
 250         var st = ed.dom.parseStyle(formObj.style.value);
 251
 252         st['background-color'] = formObj.bgcolor.value;
 253         st['border-color'] = formObj.bordercolor.value;
 254
 255         formObj.style.value = ed.dom.serializeStyle(st);
 256 }
 257
 258 function changedStyle() {
 259         var formObj = document.forms[0];
 260         var st = ed.dom.parseStyle(formObj.style.value);
 261
 262         if (st['background-image'])
 263                 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 264         else
 265                 formObj.backgroundimage.value = '';
 266
 267         if (st['width'])
 268                 formObj.width.value = trimSize(st['width']);
 269
 270         if (st['height'])
 271                 formObj.height.value = trimSize(st['height']);
 272
 273         if (st['background-color']) {
 274                 formObj.bgcolor.value = st['background-color'];
 275                 updateColor('bgcolor_pick','bgcolor');
 276         }
 277
 278         if (st['border-color']) {
 279                 formObj.bordercolor.value = st['border-color'];
 280                 updateColor('bordercolor_pick','bordercolor');
 281         }
 282 }
 283
 284 tinyMCEPopup.onInit.add(init);