[Sommaire] [Imprimer]

   1  /* Functions for the advimage plugin popup */

   2  
   3  var preloadImg = null;
   4  var orgImageWidth, orgImageHeight;
   5  
   6  function preinit() {
   7      // Initialize

   8      tinyMCE.setWindowArg('mce_windowresize', false);
   9  
  10      // Import external list url javascript

  11      var url = tinyMCE.getParam("external_image_list_url");
  12      if (url != null) {
  13          // Fix relative

  14          if (url.charAt(0) != '/' && url.indexOf('://') == -1)
  15              url = tinyMCE.documentBasePath + "/" + url;
  16  
  17          document.write('<sc'+'ript language="javascript" type="text/javascript" src="' + url + '"></sc'+'ript>');
  18      }
  19  }
  20  
  21  function convertURL(url, node, on_save) {
  22      return eval("tinyMCEPopup.windowOpener." + tinyMCE.settings['urlconverter_callback'] + "(url, node, on_save);");
  23  }
  24  
  25  function getImageSrc(str) {
  26      var pos = -1;
  27  
  28      if (!str)
  29          return "";
  30  
  31      if ((pos = str.indexOf('this.src=')) != -1) {
  32          var src = str.substring(pos + 10);
  33  
  34          src = src.substring(0, src.indexOf('\''));
  35  
  36          if (tinyMCE.getParam('convert_urls'))
  37              src = convertURL(src, null, true);
  38  
  39          return src;
  40      }
  41  
  42      return "";
  43  }
  44  
  45  function init() {
  46      tinyMCEPopup.resizeToInnerSize();
  47  
  48      var formObj = document.forms[0];
  49      var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
  50      var elm = inst.getFocusElement();
  51      var action = "insert";
  52      var html = "";
  53  
  54      // Image list src

  55      html = getImageListHTML('imagelistsrc','src','onSelectMainImage');
  56      if (html == "")
  57          document.getElementById("imagelistsrcrow").style.display = 'none';
  58      else
  59          document.getElementById("imagelistsrccontainer").innerHTML = html;
  60  
  61      // Image list oversrc

  62      html = getImageListHTML('imagelistover','onmouseoversrc');
  63      if (html == "")
  64          document.getElementById("imagelistoverrow").style.display = 'none';
  65      else
  66          document.getElementById("imagelistovercontainer").innerHTML = html;
  67  
  68      // Image list outsrc

  69      html = getImageListHTML('imagelistout','onmouseoutsrc');
  70      if (html == "")
  71          document.getElementById("imagelistoutrow").style.display = 'none';
  72      else
  73          document.getElementById("imagelistoutcontainer").innerHTML = html;
  74  
  75      // Src browser

  76      html = getBrowserHTML('srcbrowser','src','image','advimage');
  77      document.getElementById("srcbrowsercontainer").innerHTML = html;
  78  
  79      // Over browser

  80      html = getBrowserHTML('oversrcbrowser','onmouseoversrc','image','advimage');
  81      document.getElementById("onmouseoversrccontainer").innerHTML = html;
  82  
  83      // Out browser

  84      html = getBrowserHTML('outsrcbrowser','onmouseoutsrc','image','advimage');
  85      document.getElementById("onmouseoutsrccontainer").innerHTML = html;
  86  
  87      // Longdesc browser

  88      html = getBrowserHTML('longdescbrowser','longdesc','file','advimage');
  89      document.getElementById("longdesccontainer").innerHTML = html;
  90  
  91      // Resize some elements

  92      if (isVisible('srcbrowser'))
  93          document.getElementById('src').style.width = '260px';
  94  
  95      if (isVisible('oversrcbrowser'))
  96          document.getElementById('onmouseoversrc').style.width = '260px';
  97  
  98      if (isVisible('outsrcbrowser'))
  99          document.getElementById('onmouseoutsrc').style.width = '260px';
 100  
 101      if (isVisible('longdescbrowser'))
 102          document.getElementById('longdesc').style.width = '180px';
 103  
 104      // Check action

 105      if (elm != null && elm.nodeName == "IMG")
 106          action = "update";
 107  
 108      formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true); 
 109  
 110      if (action == "update") {
 111          var src = tinyMCE.getAttrib(elm, 'src');
 112          var onmouseoversrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseover')));
 113          var onmouseoutsrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseout')));
 114  
 115          src = convertURL(src, elm, true);
 116  
 117          // Use mce_src if found

 118          var mceRealSrc = tinyMCE.getAttrib(elm, 'mce_src');
 119          if (mceRealSrc != "") {
 120              src = mceRealSrc;
 121  
 122              if (tinyMCE.getParam('convert_urls'))
 123                  src = convertURL(src, elm, true);
 124          }
 125  
 126          if (onmouseoversrc != "" && tinyMCE.getParam('convert_urls'))
 127              onmouseoversrc = convertURL(onmouseoversrc, elm, true);
 128  
 129          if (onmouseoutsrc != "" && tinyMCE.getParam('convert_urls'))
 130              onmouseoutsrc = convertURL(onmouseoutsrc, elm, true);
 131  
 132          // Setup form data

 133          var style = tinyMCE.parseStyle(tinyMCE.getAttrib(elm, "style"));
 134  
 135          // Store away old size

 136          orgImageWidth = trimSize(getStyle(elm, 'width'))
 137          orgImageHeight = trimSize(getStyle(elm, 'height'));
 138  
 139          formObj.src.value    = src;
 140          formObj.alt.value    = tinyMCE.getAttrib(elm, 'alt');
 141          formObj.title.value  = tinyMCE.getAttrib(elm, 'title');
 142          formObj.border.value = trimSize(getStyle(elm, 'border', 'borderWidth'));
 143          formObj.vspace.value = tinyMCE.getAttrib(elm, 'vspace');
 144          formObj.hspace.value = tinyMCE.getAttrib(elm, 'hspace');
 145          formObj.width.value  = orgImageWidth;
 146          formObj.height.value = orgImageHeight;
 147          formObj.onmouseoversrc.value = onmouseoversrc;
 148          formObj.onmouseoutsrc.value  = onmouseoutsrc;
 149          formObj.id.value  = tinyMCE.getAttrib(elm, 'id');
 150          formObj.dir.value  = tinyMCE.getAttrib(elm, 'dir');
 151          formObj.lang.value  = tinyMCE.getAttrib(elm, 'lang');
 152          formObj.longdesc.value  = tinyMCE.getAttrib(elm, 'longdesc');
 153          formObj.usemap.value  = tinyMCE.getAttrib(elm, 'usemap');
 154          formObj.style.value  = tinyMCE.serializeStyle(style);
 155  
 156          // Select by the values

 157          if (tinyMCE.isMSIE)
 158              selectByValue(formObj, 'align', getStyle(elm, 'align', 'styleFloat'));
 159          else
 160              selectByValue(formObj, 'align', getStyle(elm, 'align', 'cssFloat'));
 161  
 162          addClassesToList('classlist', 'advimage_styles');
 163  
 164          selectByValue(formObj, 'classlist', tinyMCE.getAttrib(elm, 'class'));
 165          selectByValue(formObj, 'imagelistsrc', src);
 166          selectByValue(formObj, 'imagelistover', onmouseoversrc);
 167          selectByValue(formObj, 'imagelistout', onmouseoutsrc);
 168  
 169          updateStyle();
 170          showPreviewImage(src, true);
 171          changeAppearance();
 172  
 173          window.focus();
 174      } else
 175          addClassesToList('classlist', 'advimage_styles');
 176  
 177      // If option enabled default contrain proportions to checked

 178      if (tinyMCE.getParam("advimage_constrain_proportions", true))
 179          formObj.constrain.checked = true;
 180  
 181      // Check swap image if valid data

 182      if (formObj.onmouseoversrc.value != "" || formObj.onmouseoutsrc.value != "")
 183          setSwapImageDisabled(false);
 184      else
 185          setSwapImageDisabled(true);
 186  }
 187  
 188  function setSwapImageDisabled(state) {
 189      var formObj = document.forms[0];
 190  
 191      formObj.onmousemovecheck.checked = !state;
 192  
 193      setBrowserDisabled('overbrowser', state);
 194      setBrowserDisabled('outbrowser', state);
 195  
 196      if (formObj.imagelistover)
 197          formObj.imagelistover.disabled = state;
 198  
 199      if (formObj.imagelistout)
 200          formObj.imagelistout.disabled = state;
 201  
 202      formObj.onmouseoversrc.disabled = state;
 203      formObj.onmouseoutsrc.disabled  = state;
 204  }
 205  
 206  function setAttrib(elm, attrib, value) {
 207      var formObj = document.forms[0];
 208      var valueElm = formObj.elements[attrib];
 209  
 210      if (typeof(value) == "undefined" || value == null) {
 211          value = "";
 212  
 213          if (valueElm)
 214              value = valueElm.value;
 215      }
 216  
 217      if (value != "") {
 218          elm.setAttribute(attrib, value);
 219  
 220          if (attrib == "style")
 221              attrib = "style.cssText";
 222  
 223          if (attrib == "longdesc")
 224              attrib = "longDesc";
 225  
 226          if (attrib == "width") {
 227              attrib = "style.width";
 228              value = value + "px";
 229          }
 230  
 231          if (attrib == "height") {
 232              attrib = "style.height";
 233              value = value + "px";
 234          }
 235  
 236          if (attrib == "class")
 237              attrib = "className";
 238  
 239          eval('elm.' + attrib + "=value;");
 240      } else
 241          elm.removeAttribute(attrib);
 242  }
 243  
 244  function makeAttrib(attrib, value) {
 245      var formObj = document.forms[0];
 246      var valueElm = formObj.elements[attrib];
 247  
 248      if (typeof(value) == "undefined" || value == null) {
 249          value = "";
 250  
 251          if (valueElm)
 252              value = valueElm.value;
 253      }
 254  
 255      if (value == "")
 256          return "";
 257  
 258      // XML encode it

 259      value = value.replace(/&/g, '&amp;');
 260      value = value.replace(/\"/g, '&quot;');
 261      value = value.replace(/</g, '&lt;');
 262      value = value.replace(/>/g, '&gt;');
 263  
 264      return ' ' + attrib + '="' + value + '"';
 265  }
 266  
 267  function insertAction() {
 268      var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
 269      var elm = inst.getFocusElement();
 270      var formObj = document.forms[0];
 271      var src = formObj.src.value;
 272      var onmouseoversrc = formObj.onmouseoversrc.value;
 273      var onmouseoutsrc = formObj.onmouseoutsrc.value;
 274  
 275      if (tinyMCE.getParam("accessibility_warnings")) {
 276          if (formObj.alt.value == "") {
 277              var answer = confirm(tinyMCE.getLang('lang_advimage_missing_alt', '', true));
 278              if (answer == true) {
 279                  formObj.alt.value = " ";
 280              }
 281          } else {
 282              var answer = true;
 283          }
 284  
 285          if (!answer)
 286              return;
 287      }
 288  
 289      if (onmouseoversrc && onmouseoversrc != "")
 290          onmouseoversrc = "this.src='" + convertURL(onmouseoversrc, tinyMCE.imgElement) + "';";
 291  
 292      if (onmouseoutsrc && onmouseoutsrc != "")
 293          onmouseoutsrc = "this.src='" + convertURL(onmouseoutsrc, tinyMCE.imgElement) + "';";
 294  
 295      if (elm != null && elm.nodeName == "IMG") {
 296          setAttrib(elm, 'src', convertURL(src, tinyMCE.imgElement));
 297          setAttrib(elm, 'mce_src', src);
 298          setAttrib(elm, 'alt');
 299          setAttrib(elm, 'title');
 300          setAttrib(elm, 'border');
 301          setAttrib(elm, 'vspace');
 302          setAttrib(elm, 'hspace');
 303          setAttrib(elm, 'width');
 304          setAttrib(elm, 'height');
 305          setAttrib(elm, 'onmouseover', onmouseoversrc);
 306          setAttrib(elm, 'onmouseout', onmouseoutsrc);
 307          setAttrib(elm, 'id');
 308          setAttrib(elm, 'dir');
 309          setAttrib(elm, 'lang');
 310          setAttrib(elm, 'longdesc');
 311          setAttrib(elm, 'usemap');
 312          setAttrib(elm, 'style');
 313          setAttrib(elm, 'class', getSelectValue(formObj, 'classlist'));
 314          setAttrib(elm, 'align', getSelectValue(formObj, 'align'));
 315  
 316          //tinyMCEPopup.execCommand("mceRepaint");

 317  
 318          // Repaint if dimensions changed

 319          if (formObj.width.value != orgImageWidth || formObj.height.value != orgImageHeight)
 320              inst.repaint();
 321  
 322          // Refresh in old MSIE

 323          if (tinyMCE.isMSIE5)
 324              elm.outerHTML = elm.outerHTML;
 325      } else {
 326          var html = "<img";
 327  
 328          html += makeAttrib('src', convertURL(src, tinyMCE.imgElement));
 329          html += makeAttrib('mce_src', src);
 330          html += makeAttrib('alt');
 331          html += makeAttrib('title');
 332          html += makeAttrib('border');
 333          html += makeAttrib('vspace');
 334          html += makeAttrib('hspace');
 335          html += makeAttrib('width');
 336          html += makeAttrib('height');
 337          html += makeAttrib('onmouseover', onmouseoversrc);
 338          html += makeAttrib('onmouseout', onmouseoutsrc);
 339          html += makeAttrib('id');
 340          html += makeAttrib('dir');
 341          html += makeAttrib('lang');
 342          html += makeAttrib('longdesc');
 343          html += makeAttrib('usemap');
 344          html += makeAttrib('style');
 345          html += makeAttrib('class', getSelectValue(formObj, 'classlist'));
 346          html += makeAttrib('align', getSelectValue(formObj, 'align'));
 347          html += " />";
 348  
 349          tinyMCEPopup.execCommand("mceInsertContent", false, html);
 350      }
 351  
 352      tinyMCE._setEventsEnabled(inst.getBody(), false);
 353      tinyMCEPopup.close();
 354  }
 355  
 356  function cancelAction() {
 357      tinyMCEPopup.close();
 358  }
 359  
 360  function changeAppearance() {
 361      var formObj = document.forms[0];
 362      var img = document.getElementById('alignSampleImg');
 363  
 364      if (img) {
 365          img.align = formObj.align.value;
 366          img.border = formObj.border.value;
 367          img.hspace = formObj.hspace.value;
 368          img.vspace = formObj.vspace.value;
 369      }
 370  }
 371  
 372  function changeMouseMove() {
 373      var formObj = document.forms[0];
 374  
 375      setSwapImageDisabled(!formObj.onmousemovecheck.checked);
 376  }
 377  
 378  function updateStyle() {
 379      var formObj = document.forms[0];
 380      var st = tinyMCE.parseStyle(formObj.style.value);
 381  
 382      if (tinyMCE.getParam('inline_styles', false)) {
 383          st['width'] = formObj.width.value == '' ? '' : formObj.width.value + "px";
 384          st['height'] = formObj.height.value == '' ? '' : formObj.height.value + "px";
 385          st['border-width'] = formObj.border.value == '' ? '' : formObj.border.value + "px";
 386          st['margin-top'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";
 387          st['margin-bottom'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";
 388          st['margin-left'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";
 389          st['margin-right'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";
 390      } else {
 391          st['width'] = st['height'] = st['border-width'] = null;
 392  
 393          if (st['margin-top'] == st['margin-bottom'])
 394              st['margin-top'] = st['margin-bottom'] = null;
 395  
 396          if (st['margin-left'] == st['margin-right'])
 397              st['margin-left'] = st['margin-right'] = null;
 398      }
 399  
 400      formObj.style.value = tinyMCE.serializeStyle(st);
 401  }
 402  
 403  function styleUpdated() {
 404      var formObj = document.forms[0];
 405      var st = tinyMCE.parseStyle(formObj.style.value);
 406  
 407      if (st['width'])
 408          formObj.width.value = st['width'].replace('px', '');
 409  
 410      if (st['height'])
 411          formObj.height.value = st['height'].replace('px', '');
 412  
 413      if (st['margin-top'] && st['margin-top'] == st['margin-bottom'])
 414          formObj.vspace.value = st['margin-top'].replace('px', '');
 415  
 416      if (st['margin-left'] && st['margin-left'] == st['margin-right'])
 417          formObj.hspace.value = st['margin-left'].replace('px', '');
 418  
 419      if (st['border-width'])
 420          formObj.border.value = st['border-width'].replace('px', '');
 421  }
 422  
 423  function changeHeight() {
 424      var formObj = document.forms[0];
 425  
 426      if (!formObj.constrain.checked || !preloadImg) {
 427          updateStyle();
 428          return;
 429      }
 430  
 431      if (formObj.width.value == "" || formObj.height.value == "")
 432          return;
 433  
 434      var temp = (formObj.width.value / preloadImg.width) * preloadImg.height;
 435      formObj.height.value = temp.toFixed(0);
 436      updateStyle();
 437  }
 438  
 439  function changeWidth() {
 440      var formObj = document.forms[0];
 441  
 442      if (!formObj.constrain.checked || !preloadImg) {
 443          updateStyle();
 444          return;
 445      }
 446  
 447      if (formObj.width.value == "" || formObj.height.value == "")
 448          return;
 449  
 450      var temp = (formObj.height.value / preloadImg.height) * preloadImg.width;
 451      formObj.width.value = temp.toFixed(0);
 452      updateStyle();
 453  }
 454  
 455  function onSelectMainImage(target_form_element, name, value) {
 456      var formObj = document.forms[0];
 457  
 458      formObj.alt.value = name;
 459      formObj.title.value = name;
 460  
 461      resetImageData();
 462      showPreviewImage(formObj.elements[target_form_element].value, false);
 463  }
 464  
 465  function showPreviewImage(src, start) {
 466      var formObj = document.forms[0];
 467  
 468      selectByValue(document.forms[0], 'imagelistsrc', src);
 469  
 470      var elm = document.getElementById('prev');
 471      var src = src == "" ? src : tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], src);
 472  
 473      if (!start && tinyMCE.getParam("advimage_update_dimensions_onchange", true))
 474          resetImageData();
 475  
 476      if (src == "")
 477          elm.innerHTML = "";
 478      else
 479          elm.innerHTML = '<img src="' + src + '" border="0" />'
 480  
 481      getImageData(src);
 482  }
 483  
 484  function getImageData(src) {
 485      preloadImg = new Image();
 486  
 487      tinyMCE.addEvent(preloadImg, "load", updateImageData);
 488      tinyMCE.addEvent(preloadImg, "error", resetImageData);
 489  
 490      preloadImg.src = src;
 491  }
 492  
 493  function updateImageData() {
 494      var formObj = document.forms[0];
 495  
 496      if (formObj.width.value == "")
 497          formObj.width.value = preloadImg.width;
 498  
 499      if (formObj.height.value == "")
 500          formObj.height.value = preloadImg.height;
 501  
 502      updateStyle();
 503  }
 504  
 505  function resetImageData() {
 506      var formObj = document.forms[0];
 507      formObj.width.value = formObj.height.value = "";    
 508  }
 509  
 510  function getSelectValue(form_obj, field_name) {
 511      var elm = form_obj.elements[field_name];
 512  
 513      if (elm == null || elm.options == null)
 514          return "";
 515  
 516      return elm.options[elm.selectedIndex].value;
 517  }
 518  
 519  function getImageListHTML(elm_id, target_form_element, onchange_func) {
 520      if (typeof(tinyMCEImageList) == "undefined" || tinyMCEImageList.length == 0)
 521          return "";
 522  
 523      var html = "";
 524  
 525      html += '<select id="' + elm_id + '" name="' + elm_id + '"';
 526      html += ' class="mceImageList" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.' + target_form_element + '.value=';
 527      html += 'this.options[this.selectedIndex].value;';
 528  
 529      if (typeof(onchange_func) != "undefined")
 530          html += onchange_func + '(\'' + target_form_element + '\',this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);';
 531  
 532      html += '"><option value="">---</option>';
 533  
 534      for (var i=0; i<tinyMCEImageList.length; i++)
 535          html += '<option value="' + tinyMCEImageList[i][1] + '">' + tinyMCEImageList[i][0] + '</option>';
 536  
 537      html += '</select>';
 538  
 539      return html;
 540  
 541      // tinyMCE.debug('-- image list start --', html, '-- image list end --');

 542  }
 543  
 544  // While loading

 545  preinit();