[Summary view] [Print] [Text view]

   1  /**
   2   * ICME image browser integration
   3   * 
   4   * @author Dave Hall <info@davehall.com.au>
   5   * 
   6   * @internal loosely based on the IMCE API docs - see http://ufku.com/drupal/imce/api
   7   * and the YUI editor img_upload plugin
   8   */
   9  
  10  /**
  11   * @var object IMCEPopup Global reference to IMCE popup
  12   */
  13  var imcePopup;
  14  
  15  /**
  16   * IMCE integration bootstrapper
  17   * 
  18   * This function integrates IMCE into the YUI image insertion dialog box
  19   * 
  20   * @return void
  21   */
  22  function yui_editor_img_browser() {
  23      var myEditor, config;
  24      for ( var e in YAHOO.Drupal.editors) {
  25          myEditor = YAHOO.Drupal.editors[e].editor;
  26          config = YAHOO.Drupal.editors[e].config;
  27  
  28          if (config.img_browser == 1) {
  29              yui_editor_img_browser_attach(myEditor);
  30          }
  31      }
  32  };
  33  
  34  /**
  35   * Attach the event listeners so the IMCE popup works
  36   * 
  37   * @param object rte YUI Editor to attach events to
  38   * 
  39   * @return void
  40   */
  41  function yui_editor_img_browser_attach(rte) {
  42      rte.addListener('toolbarLoaded',function() {
  43          rte.toolbar.addListener('insertimageClick',function(o) {
  44              var imgPanel = new YAHOO.util.Element('yui-editor-panel');
  45              imgPanel.on('contentReady', function() {
  46                  var Dom = YAHOO.util.Dom,
  47                      urlInput = Dom.get('insertimage_url'),
  48                      urlW = yui_editor_img_browser_pasreWidth(Dom.getStyle(urlInput, 'width')),
  49                      imceTrigger = new YAHOO.widget.Button(
  50                      {
  51                          id : 'imceTrigger',
  52                          label : 'Browse',
  53                          container : urlInput.parentNode,
  54                          onclick : {fn : yui_editor_img_browser_show}
  55                      }),
  56                      btnW = yui_editor_img_browser_pasreWidth(Dom.getStyle('imceTrigger', 'width'));
  57  
  58                  Dom.setStyle(urlInput, 'width', (urlW.val - (btnW.val * 1.1)) + urlW.unit);
  59              });
  60          });
  61      });
  62  };
  63  
  64  /*
  65   * Parse a CSS width value
  66   * 
  67   * @param string w the width to parse
  68   * 
  69   * @return object the value (val) and the unit of measure (unit) 
  70   */
  71  function yui_editor_img_browser_pasreWidth(w) {
  72      var l = w.length,
  73          c = l - 2,
  74          r = {val: 0, unit: ''};
  75      return {val : w.substr(0, c), unit : w.substr(c, 2)};
  76  };
  77  
  78  /**
  79   * onClick handler which displays the IMCE popup window
  80   * 
  81   * @return void
  82   */
  83  function yui_editor_img_browser_show() {
  84      if (typeof imcePopup == 'undefined' || imcePopup.closed) {
  85          imcePopup = window.open('?q=imce', '',
  86                  'width=760,height=560,resizable=1');
  87  
  88          imcePopup['imceOnLoad'] = function(win) {
  89              win.imce.setSendTo('Update fields', yui_editor_img_browser_finish);
  90          };
  91      }
  92      imcePopup.focus();
  93  };
  94  
  95  /**
  96   * Event handler for populating the YUI image insert dialog
  97   * 
  98   * @param object file the selected file
  99   * @param object win the popup window
 100   * 
 101   * @return void
 102   */
 103  function yui_editor_img_browser_finish(file, win) {
 104      var Dom = YAHOO.util.Dom;
 105      Dom.get('insertimage_url').value = file.url;
 106      Dom.get('insertimage_width').value = file.width;
 107      Dom.get('insertimage_height').value = file.height;
 108  
 109      win.blur();
 110  };
 111  
 112  YAHOO.Drupal.yui_editor_load.subscribe(yui_editor_img_browser);