Плагин для предпросмотра изображений

// Плагин предпросмотра для изображений.
// Реагирует на событие OnDocFormRender

$e = & $modx->Event;
if ($e->name == 'OnDocFormRender')
{

  //  Код текущего элемента
  $id = $_REQUEST['id'];
  
  // Узнаем код его шаблона
  $doc=&$modx->getDocument($id,'*');   
  $tpl=$doc['template'];
  
  // Получим значения всех его дополнительных переменных, которые имеют тип "image"
  $strSQL='select tv.name '.
          'from '.$modx->getFullTableName('site_tmplvars').' tv, '.$modx->getFullTableName('site_tmplvar_templates').' tp '.
          'where tv.id=tp.tmplvarid and tv.type="image" and tp.templateid='.$tpl;
          
         
  $output='';
  if ($result=$modx->dbQuery($strSQL))
  {

// Для каждого элемента списка подготовить JavaScript

      while( $row = $modx->db->getRow( $result ))
      {
            $script='<script type="text/javascript"> '.
            
            // Функция, возвращающая название превьюшки по названию картинки
            'function getPreview(_imgName) '.
            '{ '.
            '    var previewimg=""; '.
            '    if (_imgName.length!=0) '.
            '    { '.
            '       var len=_imgName.length; '.
            '       var li=_imgName.lastIndexOf("/"); '.
            '       previewimg=_imgName.substring(0,li+1)+".thumb_"+_imgName.substring(li+1); '.
            '    }; '.
            '    return previewimg; '.
            '};'.
            
           // узнать ячейку таблицы в админке, где находится данный элемент управления
            'var imgtext=$("tv'.$row['name'].'"); '.           
            'var imgparent=imgtext.parentNode; '.
            
           // Добавить в родительскую ячейку элемент - изображение
            'var div=document.createElement("div"); '.
            'div.id="preview_'.$row['name'].'"; '.
            'div.innerHTML="<img id=\"image_'.$row['name'].'\" src=\"/"+getPreview(imgtext.value)+"\">"; '.
            'imgparent.appendChild(div); '.
            
            // Вычислить ID кнопки добавления картинки
            'var dlgbutton; '.
            
            'var oItem = imgparent.childNodes; '.
            'if (oItem!=null) { '.
            '    for (var i=0; i<oItem.length; i++) '.
            '        if ((oItem.item(i).tagName=="INPUT") && (oItem.item(i).type=="button")) '.
            '            dlgbutton=oItem.item(i); '.
            '}; '.
            
            // Обновление изображения по таймеру            
            'var TimerID; '.
            
            'function UpdateImage(var_name){ '.
            '    var newInnerHTML="<img id=\"image_"+var_name+"\" src=\"/"+getPreview($("tv"+var_name).value)+"\">"; '.
            '    var pdiv=$("preview_"+var_name); '.
            '    if (newInnerHTML!=$("preview_"+var_name).innerHTML){ '.
            '       $("preview_"+var_name).innerHTML=newInnerHTML; '.
            '       clearInterval(TimerID); '.
            '    } '.             
            '}; '.

            // При нажатии на кнопку добавления активируем таймер, который будет отслеживать, 
            // изменился ли текст в строке
            'dlgbutton.addEvent("click",function(){ '.
            '    TimerID=setInterval("UpdateImage(\"'.$row['name'].'\")",1000); '.
            '});   '. 
            
            // Обрабатывать ввод названия картинки с клавиатуры
            'imgtext.addEvent("keyup",function(){ '.
            '  var img0=$("tv'.$row['name'].'").value;  '.
            '  var len=img0.length; '.
            '  var li=img0.lastIndexOf("/"); '.
            '  var previewimg=img0.substring(0,li+1)+".thumb_"+img0.substring(li+1); '.
            '  $("preview_'.$row['name'].'").innerHTML="<img id=\"image_'.$row['name'].'\" src=\"/"+previewimg+"\">"; '.
            '}); '.
            '</script>';
        $output.=$script;
      }
   };
   
   
  $e->output($output);
     
};