openwysiwyg/popups/create_table.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   2
   3 <html>
   4         <head>
   5                 <title>openWYSIWYG | Create or Modify Table</title>
   6
   7                 <style type="text/css">
   8                         body, td {
   9                                 font-family: arial, verdana, helvetica;
  10                                 font-size: 11px;
  11                         }
  12
  13                         select, input, button {
  14                                 font-size: 10px;
  15                         }
  16
  17                         .table-settings {
  18                                 background-color: #F7F7F7;
  19                                 border: 2px solid #FFFFFF;
  20                                 padding: 5px;
  21                         }
  22                 </style>
  23
  24         </head>
  25         <script type="text/javascript" src="../scripts/wysiwyg-popup.js"></script>
  26         <script type="text/javascript" src="../scripts/wysiwyg-color.js"></script>
  27
  28         <script type="text/javascript">
  29         var n = WYSIWYG_Popup.getParam('wysiwyg');
  30
  31         // add stylesheet file
  32         if(n) document.write('<link rel="stylesheet" type="text/css" href="../' + WYSIWYG.config[n].CSSFile +'">\n');
  33
  34         /* ---------------------------------------------------------------------- *\
  35           Function    : buildTable()
  36           Description : Builds a table and inserts it into the WYSIWYG.
  37         \* ---------------------------------------------------------------------- */
  38         function buildTable() {
  39
  40                 var WYSIWYG_Table = window.opener.WYSIWYG_Table;
  41                 var doc = WYSIWYG.getEditorWindow(n).document;
  42                 // create a table object
  43                 var table = doc.createElement("TABLE");
  44                 // set cols and rows
  45                 WYSIWYG_Core.setAttribute(table, "tmpcols", document.getElementById("cols").value);
  46                 WYSIWYG_Core.setAttribute(table, "tmprows", document.getElementById("rows").value);
  47                 // alignment
  48                 if(document.getElementById("alignment").value != "")
  49                         WYSIWYG_Core.setAttribute(table, "align", document.getElementById("alignment").value);
  50
  51                 // style attributes
  52                 var style = "";
  53                 // padding
  54                 style += "padding:" + document.getElementById("padding").value + "px;";
  55                 // width
  56                 style += "width:" + document.getElementById("width").value + document.getElementById("widthType").value + ";";
  57                 // border
  58                 style += "border:" + document.getElementById("border").value + "px;";
  59                 // borderstyle
  60                 if(document.getElementById("borderstyle").value != "none")
  61                         style += "border-style:" + document.getElementById("borderstyle").value + ";";
  62                 // border-color
  63                 if(document.getElementById("bordercolor").value != "none")
  64                         style += "border-color:" + document.getElementById("bordercolor").value + ";";
  65                 // border-collapse
  66                 var collapse = document.getElementById("bordercollapse").checked ? "true" : "separate";
  67                 style += "border-collapse:" + collapse + ";";
  68                 // background-color
  69                 if(document.getElementById("backgroundcolor").value != "none")
  70                         style += "background-color:" + document.getElementById("backgroundcolor").value + ";";
  71
  72                 WYSIWYG_Core.setAttribute(table, "style", style);
  73
  74
  75                 WYSIWYG_Table.create(n, table);
  76                 window.close();
  77                 return;
  78
  79                 // Checks if the table border will use the BORDER-COLLAPSE CSS attribute
  80                 var collapse;
  81                 if (document.getElementById('borderCollapse').checked == true) {
  82                         collapse = document.getElementById('borderCollapse').value;
  83                 }
  84                 else {
  85                         collapse = "separate";
  86                 }
  87
  88                 // Builds a table based on the data input into the form
  89                 var table = '<table border="0" cellpadding="0" cellspacing="0" style="';
  90                 table += 'BORDER-COLLAPSE: ' + collapse + ';';
  91                 table += ' border: ' + document.getElementById('borderWidth').value + ' ' +  document.getElementById('borderStyle').value + ' ' +  document.getElementById('borderColor').value + ';';
  92                 table += ' width: ' + document.getElementById('tableWidth').value + document.getElementById('widthType').value + ';';
  93                 table += ' background-color: ' + document.getElementById('shadingColor').value + ';"';
  94                 table += ' alignment="' + document.getElementById('alignment').value + '">\n';
  95
  96                 // Creates the number of rows and cols the table will have
  97                 for (var i = 0; i < document.getElementById('rows').value; i++) {
  98                         table += '<tr>\n';
  99                         for (var j = 0; j < document.getElementById('cols').value; j++) {
 100                                 table += '<td style="border: ' + document.getElementById('borderWidth').value + ' ' +  document.getElementById('borderStyle').value + ' ' +  document.getElementById('borderColor').value + '; padding: ' + document.getElementById('padding').value + ';">&nbsp;</td>\n';
 101                         }
 102                         table += '</tr>\n';
 103                 }
 104                 table += '</table>\n';
 105
 106
 107                 // Inserts the table code into the WYSIWYG editor
 108                 WYSIWYG.insertHTML(table, n);
 109                 window.close();
 110         }
 111         </script>
 112
 113         <body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onload="WYSIWYG_ColorInst.init();">
 114
 115                 <table border="0" cellpadding="0" cellspacing="0" style="width:100%;padding: 10px;">
 116                         <tr>
 117                                 <td>
 118                                         <span style=" font-weight: bold;">Table Properties:</span>
 119
 120                                         <table style="width:100%;" border="0" cellpadding="1" cellspacing="0"
 121                                                 class="table-settings">
 122                                                 <tr>
 123                                                         <td style="width: 20%;">
 124                                                                 Rows:
 125                                                         </td>
 126                                                         <td style="width: 25%;">
 127                                                                 <input type="text" size="4" id="rows" name="rows" value="2" style="width: 50px;">
 128                                                         </td>
 129                                                         <td style="width: 25%;">
 130                                                                 Width:
 131                                                         </td>
 132                                                         <td style="width: 30%;">
 133                                                                 <input type="text" name="width" id="width" value="100" size="10" style="width: 50px;">
 134                                                                 <select name="widthType" id="widthType"
 135                                                                         style="margin-right: 10px; font-size: 10px;">
 136                                                                         <option value="%">%</option>
 137                                                                         <option value="px">px</option>
 138                                                                 </select>
 139                                                         </td>
 140                                                 </tr>
 141                                                 <tr>
 142                                                         <td>
 143                                                                 Cols:
 144                                                         </td>
 145                                                         <td>
 146                                                                 <input type="text" size="4" id="cols" name="cols" value="2"     style="width: 50px;">
 147                                                         </td>
 148                                                         <td>
 149                                                                 Alignment:
 150                                                         </td>
 151                                                         <td>
 152                                                                 <select name="alignment" id="alignment" style="margin-right: 10px; width: 95px;">
 153                                                                         <option value="">Not Set</option>
 154                                                                         <option value="left">Left</option>
 155                                                                         <option value="right">Right</option>
 156                                                                         <option value="center">Center</option>
 157                                                                 </select>
 158                                                         </td>
 159                                                 </tr>
 160                                                 <tr>
 161                                                         <td>
 162                                                                 Padding:
 163                                                         </td>
 164                                                         <td>
 165                                                                 <input type="text" id="padding" name="padding" value="2" style="width: 50px;">
 166                                                         </td>
 167                                                         <td>
 168                                                                 Background-Color:
 169                                                         </td>
 170                                                         <td>
 171                                                                 <table border="0" cellpadding="0" cellspacing="0">
 172                                                                         <tr>
 173                                                                                 <td width="25">
 174                                                                                         <table border="0" cellpadding="0" cellspacing="0">
 175                                                                                                 <tr>
 176                                                                                                         <td>
 177                                                                                                                 <input type="text" name="backgroundcolor" id="backgroundcolor" value="none" style="width:50px;">
 178                                                                                                         </td>
 179                                                                                                 </tr>
 180                                                                                         </table>
 181                                                                                 </td>
 182                                                                                 <td>
 183                                                                                         <button style="margin-left: 2px;" onClick="WYSIWYG_ColorInst.choose('backgroundcolor');">
 184                                                                                                 Choose
 185                                                                                         </button>
 186                                                                                 </td>
 187                                                                         </tr>
 188                                                                 </table>
 189                                                         </td>
 190                                                 </tr>
 191                                                 <tr>
 192                                                 <td>
 193                                                         Border-Size:
 194                                                 </td>
 195                                                 <td>
 196                                                         <input type="text" size="4" id="border" name="border" value="0" style="width: 50px;">
 197                                                 </td>
 198                                                 <td>
 199                                                         Border-Color:
 200                                                 </td>
 201                                                 <td>
 202                                                         <table border="0" cellpadding="0" cellspacing="0">
 203                                                                 <tr>
 204                                                                         <td width="25">
 205                                                                                 <table border="0" cellpadding="0" cellspacing="0">
 206                                                                                         <tr>
 207                                                                                                 <td>
 208                                                                                                         <input type="text" name="bordercolor" id="bordercolor" value="none" style="width:50px;">
 209                                                                                                 </td>
 210                                                                                         </tr>
 211                                                                                 </table>
 212                                                                         </td>
 213                                                                         <td>
 214                                                                                 <button style="margin-left: 2px;" onClick="WYSIWYG_ColorInst.choose('bordercolor');">
 215                                                                                         Choose
 216                                                                                 </button>
 217                                                                         </td>
 218                                                                 </tr>
 219                                                         </table>
 220                                                 </td>
 221                                         </tr>
 222                                         <tr>
 223                                                 <td>
 224                                                         Border-Style:
 225                                                 </td>
 226                                                 <td>
 227                                                         <select id="borderstyle" name="borderstyle" style="width: 80px;">
 228                                                                 <option value="none">none</option>
 229                                                                 <option value="solid">solid</option>
 230                                                                 <option value="double">double</option>
 231                                                                 <option value="dotted">dotted</option>
 232                                                                 <option value="dashed">dashed</option>
 233                                                                 <option value="groove">groove</option>
 234                                                                 <option value="ridge">ridge</option>
 235                                                                 <option value="inset">inset</option>
 236                                                                 <option value="outset">outset</option>
 237                                                         </select>
 238                                                 </td>
 239                                                 <td>
 240                                                         Border-Collapse:
 241                                                 </td>
 242                                                 <td>
 243                                                         <input type="checkbox" name="bordercollapse" id="bordercollapse">
 244                                                 </td>
 245                                         </tr>
 246                                 </table>
 247                         </td>
 248                 </tr>
 249                 </table>
 250                         <div align="right">
 251                                 <input type="submit" value="  Submit  " onClick="buildTable();"
 252                                         style="font-size: 12px;">
 253                                 &nbsp;
 254                                 <input type="submit" value="  Cancel  " onClick="window.close();"
 255                                         style="font-size: 12px; margin-right: 15px;">
 256                         </div>
 257                                 </td>
 258                         </tr>
 259                 </table>
 260         </div>
 261         </body>
 262 </html>