[Sommaire] [Imprimer]

   1  <html style="width: 398; height: 218">
   2  
   3  <head>
   4    <title>Insert Image</title>
   5  
   6  <script type="text/javascript" src="popup.js"></script>
   7  
   8  <script type="text/javascript">
   9  var preview_window = null;
  10  
  11  function Init() {
  12    __dlg_init();
  13    document.getElementById("f_url").focus();
  14  };
  15  
  16  function onOK() {
  17    var required = {
  18      "f_url": "You must enter the URL",
  19      "f_alt": "Please enter the alternate text"
  20    };
  21    for (var i in required) {
  22      var el = document.getElementById(i);
  23      if (!el.value) {
  24        alert(required[i]);
  25        el.focus();
  26        return false;
  27      }
  28    }
  29    // pass data back to the calling window
  30    var fields = ["f_url", "f_alt", "f_align", "f_border",
  31                  "f_horiz", "f_vert"];
  32    var param = new Object();
  33    for (var i in fields) {
  34      var id = fields[i];
  35      var el = document.getElementById(id);
  36      param[id] = el.value;
  37    }
  38    if (preview_window) {
  39      preview_window.close();
  40    }
  41    __dlg_close(param);
  42    return false;
  43  };
  44  
  45  function onCancel() {
  46    if (preview_window) {
  47      preview_window.close();
  48    }
  49    __dlg_close(null);
  50    return false;
  51  };
  52  
  53  function onPreview() {
  54    alert("FIXME: preview needs rewritten:\n  show the image inside this window instead of opening a new one.");
  55    var f_url = document.getElementById("f_url");
  56    var url = f_url.value;
  57    if (!url) {
  58      alert("You have to enter an URL first");
  59      f_url.focus();
  60      return false;
  61    }
  62    var img = new Image();
  63    img.src = url;
  64    var win = null;
  65    if (!document.all) {
  66      win = window.open("about:blank", "ha_imgpreview", "toolbar=no,menubar=no,personalbar=no,innerWidth=100,innerHeight=100,scrollbars=no,resizable=yes");
  67    } else {
  68      win = window.open("about:blank", "ha_imgpreview", "channelmode=no,directories=no,height=100,width=100,location=no,menubar=no,resizable=yes,scrollbars=no,toolbar=no");
  69    }
  70    preview_window = win;
  71    var doc = win.document;
  72    var body = doc.body;
  73    if (body) {
  74      body.innerHTML = "";
  75      body.style.padding = "0px";
  76      body.style.margin = "0px";
  77      var el = doc.createElement("img");
  78      el.src = url;
  79  
  80      var table = doc.createElement("table");
  81      body.appendChild(table);
  82      table.style.width = "100%";
  83      table.style.height = "100%";
  84      var tbody = doc.createElement("tbody");
  85      table.appendChild(tbody);
  86      var tr = doc.createElement("tr");
  87      tbody.appendChild(tr);
  88      var td = doc.createElement("td");
  89      tr.appendChild(td);
  90      td.style.textAlign = "center";
  91  
  92      td.appendChild(el);
  93      win.resizeTo(el.offsetWidth + 30, el.offsetHeight + 30);
  94    }
  95    win.focus();
  96    return false;
  97  };
  98  </script>
  99  
 100  <style type="text/css">
 101  html, body {
 102    background: ButtonFace;
 103    color: ButtonText;
 104    font: 11px Tahoma,Verdana,sans-serif;
 105    margin: 0px;
 106    padding: 0px;
 107  }
 108  body { padding: 5px; }
 109  table {
 110    font: 11px Tahoma,Verdana,sans-serif;
 111  }
 112  form p {
 113    margin-top: 5px;
 114    margin-bottom: 5px;
 115  }
 116  .fl { width: 9em; float: left; padding: 2px 5px; text-align: right; }
 117  .fr { width: 6em; float: left; padding: 2px 5px; text-align: right; }
 118  fieldset { padding: 0px 10px 5px 5px; }
 119  select, input, button { font: 11px Tahoma,Verdana,sans-serif; }
 120  button { width: 70px; }
 121  .space { padding: 2px; }
 122  
 123  .title { background: #ddf; color: #000; font-weight: bold; font-size: 120%; padding: 3px 10px; margin-bottom: 10px;
 124  border-bottom: 1px solid black; letter-spacing: 2px;
 125  }
 126  form { padding: 0px; margin: 0px; }
 127  </style>
 128  
 129  </head>
 130  
 131  <body onload="Init()">
 132  
 133  <div class="title">Insert Image</div>
 134  
 135  <form action="" method="get">
 136  <table border="0" width="100%" style="padding: 0px; margin: 0px">
 137    <tbody>
 138  
 139    <tr>
 140      <td style="width: 7em; text-align: right">Image URL:</td>
 141      <td><input type="text" name="url" id="f_url" style="width:75%"
 142        title="Enter the image URL here" />
 143        <button name="preview" onclick="return onPreview();"
 144        title="Preview the image in a new window">Preview</button>
 145      </td>
 146    </tr>
 147    <tr>
 148      <td style="width: 7em; text-align: right">Alternate text:</td>
 149      <td><input type="text" name="alt" id="f_alt" style="width:100%"
 150        title="For browsers that don't support images" /></td>
 151    </tr>
 152  
 153    </tbody>
 154  </table>
 155  
 156  <p />
 157  
 158  <fieldset style="float: left; margin-left: 5px;">
 159  <legend>Layout</legend>
 160  
 161  <div class="space"></div>
 162  
 163  <div class="fl">Alignment:</div>
 164  <select size="1" name="align" id="f_align"
 165    title="Positioning of this image">
 166    <option value=""                             >Not set</option>
 167    <option value="left"                         >Left</option>
 168    <option value="right"                        >Right</option>
 169    <option value="texttop"                      >Texttop</option>
 170    <option value="absmiddle"                    >Absmiddle</option>
 171    <option value="baseline" selected="1"        >Baseline</option>
 172    <option value="absbottom"                    >Absbottom</option>
 173    <option value="bottom"                       >Bottom</option>
 174    <option value="middle"                       >Middle</option>
 175    <option value="top"                          >Top</option>
 176  </select>
 177  
 178  <p />
 179  
 180  <div class="fl">Border thickness:</div>
 181  <input type="text" name="border" id="f_border" size="5"
 182  title="Leave empty for no border" />
 183  
 184  <div class="space"></div>
 185  
 186  </fieldset>
 187  
 188  <fieldset style="float:right; margin-right: 5px;">
 189  <legend>Spacing</legend>
 190  
 191  <div class="space"></div>
 192  
 193  <div class="fr">Horizontal:</div>
 194  <input type="text" name="horiz" id="f_horiz" size="5"
 195  title="Horizontal padding" />
 196  
 197  <p />
 198  
 199  <div class="fr">Vertical:</div>
 200  <input type="text" name="vert" id="f_vert" size="5"
 201  title="Vertical padding" />
 202  
 203  <div class="space"></div>
 204  
 205  </fieldset>
 206  
 207  <div style="margin-top: 85px; text-align: right;">
 208  <hr />
 209  <button type="button" name="ok" onclick="return onOK();">OK</button>
 210  <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
 211  </div>
 212  
 213  </form>
 214  
 215  </body>
 216  </html>