Joomla 1.5: Создание плагина smilies - Создание плагина Joomla стр.3

Теперь опишу алгоритм работы панели админа: скрипт smiliestoolbar.php - получает сериализованный массив из файла collation.txt, десериализует его, и если в нём есть элементы, то он заполняет ими динамическую таблицу, если данных в массиве нет, то выводим таблицу с единственной, пустой строкой. В файле smiliestoolbar.php пропишем следующий код:

$smiles = array();
$smiles = unserialize( file_get_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt') );

Далее нам потребуется Javascript, который предоставит нам функционал по добавлению/удалению строк таблицы:

<script type="text/javascript">
<!-- 
//добавить строку:
function addrow(index) {
	
	var htmlTable   = document.getElementById("smiletable");
	
	htmlTable.insertRow(index + 1);
	htmlTable.rows[index + 1].insertCell(0);
	htmlTable.rows[index + 1].insertCell(1);
	htmlTable.rows[index + 1].insertCell(2);

	htmlTable.rows[index + 1].cells[0].innerHTML = '<input size="5" name="smile[ch][]" value="" />';	
	
	//Здесь сделано так, из-за косяков с id - при данном раскладе он получается одинаковым и это вызывает
	// ошибку в IE.
	htmlTable.rows[index + 1].cells[1].innerHTML = "<?php echo addslashes( images('smile[im][]','zzz'))?>";
	htmlTable.rows[index + 1].cells[1].innerHTML = htmlTable.rows[index + 1].cells[1].innerHTML.replace(/zzz/gm,'img_' + index);
	
	htmlTable.rows[index + 1].cells[2].innerHTML = '<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />&nbsp;' + 
		                                           '<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />';
}
//удалить строку:
function delrow(index) {
	var htmlTable = document.getElementById("smiletable"),
		rowCount = htmlTable.rows.length;
    // Это проверка для того, что бы пользователь не мог удалить
    // последнюю строку.
	if(rowCount > 2) {
        htmlTable.deleteRow(index);
    } else {
        return false;   
    } 
}
//-->
</script>

В листинге выше мы наблюдаем вставку php кода, использующую функцию images('smile[im][]','zzz') код этой функции выводит выпадающий список файлов картинок из директории /images/ и взят из метода класса JHTMLList::image()

Можно было бы использовать и стандарный функционал:

JHTML::_('list.images', $name, $active, ... );

Но он не позволяет передавать id для тега картинки, он формирует его из параметра $name, а так, как строки у нас формируются динамически, а имя элементов выпадающих списков для картинок - у нас одинаковое smile[im][] ( да кстати, и имена текстовых полей для символов смайлов тоже smile[ch][] ) формирующее в итоге массив $_POST['smile']:

Array  (

    [ch] => Array
        (
            [0] => :)
            [1] => :(
            [2] => :P
            [3] => :@
        )

    [im] => Array
        (
            [0] => articles.jpg
            [1] => clock.jpg
            [2] => ext_com.png
            [3] => ext_com.png
        )
)

то и id в таком случае получается одинаковым, и IE нам этого не прощает. Поэтому я взял код метода класса JHTMLList::image() и чуть - чуть его подправил, так, что бы можно было указывать id для тега картинки и попросту вынес его в отдельную функцию:

// Функция взята из класса JHTMLList::image() и переделана из-за того что в стандартной нельзя
// Задать id картинке
function images( $name, $idtag, $active = NULL, $directory = NULL, $extensions =  "bmp|gif|jpg|png" )
{
  	if ( !$directory ) {
  		$directory = '/images/';
  	}
  
  	jimport( 'joomla.filesystem.folder' );
  	$imageFiles = JFolder::files( JPATH_SITE.DS.$directory );
  	$images 	= array(  JHTML::_('select.option',  '', '- '. JText::_( 'Select Image' ) .' -' ) );
  	foreach ( $imageFiles as $file ) {
  	   if ( preg_match( "#$extensions#i", $file ) ) {
  			$images[] = JHTML::_('select.option',  $file );
  		}
  	}
  	$images = JHTML::_('select.genericlist',  $images, $name, 'class="inputbox" size="1" '. $javascript, 'value', 'text', $active, $idtag );
  
  	return $images;
}

А вот код, который формирует саму html - таблицу, согласно алгоритму:

<form name="smileconfig" method="post" action="">

  <table id="smiletable" width="350px" cellpadding="1" cellspacing="1">
    <thead>
      <tr>
        <th>Символ</th>
        <th>Картинка</th>
        <th>&nbsp;</th>
      </tr>  
    </thead>
    <tbody>
      <?php if(count($smiles['ch']) < 1 ):?>
      <tr>
        <td style="width:76px"><input size="5" name="smile[ch][]" value="" /></td>
        <td>
			<?php echo JHTML::_('list.images', 'smile[im][]')?>
		</td>
		<td>
			<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
			<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" /> 
		</td>
      </tr>
      <?php else : for( $i = 0; $i < count($smiles['ch']); $i++) : ?>
      <tr>
        <td style="width:76px"><input size="5" name="smile[ch][]" value="<?php echo trim($smiles['ch'][$i])?>" /></td>
        <td>
			<?php echo images('smile[im][]','img_'.$i, trim($smiles['im'][$i] ))?>
		</td>
		<td>
			<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
			<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" /> 
		</td>
      </tr>
      <?php endfor; endif; ?>
    </tbody>
  </table>
  
<input type="submit" name="send" value="сохранить" /> 

</form>

А вот полный листинг файла smiliestoolbar.php (это самый объёмный файл в плагине.)

<?php
header('Content-type: text/html; charset=utf-8');

// Инициализация движка ----------------------------
define('_JEXEC',1);
define('DS',DIRECTORY_SEPARATOR);
define('JPATH_BASE', realpath('..'.DS.'..'.DS.'..'.DS));

require_once(JPATH_BASE.DS.'includes'.DS.'defines.php');
require_once(JPATH_BASE.DS.'includes'.DS.'framework.php');

$mainframe = JFactory::getApplication('administrator');
//---------------------------------------------------

if( isset($_POST['smile']) && is_array($_POST['smile']) ) 
{
  $saved = serialize( $_POST['smile'] );
  file_put_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt', $saved );
}

$smiles = array();
$smiles = unserialize(file_get_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt'));

JHTMLList::image();
  
// Функция взята из класса JHTMLList::image() и переделана из-за того что в стандартной нельзя
// Задать id картинке
function images( $name, $idtag, $active = NULL, $directory = NULL, $extensions =  "bmp|gif|jpg|png" )
{
  if ( !$directory ) {
    $directory = '/images/';
  }

  jimport( 'joomla.filesystem.folder' );
  $imageFiles = JFolder::files( JPATH_SITE.DS.$directory );
  $images 	= array(  JHTML::_('select.option',  '', '- '. JText::_( 'Select Image' ) .' -' ) );
  foreach ( $imageFiles as $file ) {
     if ( preg_match( "#$extensions#i", $file ) ) {
      $images[] = JHTML::_('select.option',  $file );
    }
  }
  $images = JHTML::_('select.genericlist',  $images, $name, 'class="inputbox" size="1" '. $javascript, 'value', 'text', $active, $idtag );

  return $images;
}

?>

<script type="text/javascript">
<!-- 
//добавить строку:
function addrow(index) {
	
	var htmlTable   = document.getElementById("smiletable");
	
	htmlTable.insertRow(index + 1);
	htmlTable.rows[index + 1].insertCell(0);
	htmlTable.rows[index + 1].insertCell(1);
	htmlTable.rows[index + 1].insertCell(2);

	htmlTable.rows[index + 1].cells[0].innerHTML = '<input size="5" name="smile[ch][]" value="" />';	
	
	//Здесь сделано так, из-за косяков с id - при данном раскладе он получается одинаковым и это вызывает
	// ошибку в IE.
	htmlTable.rows[index + 1].cells[1].innerHTML = "<?php echo addslashes( images('smile[im][]','zzz'))?>";
	htmlTable.rows[index + 1].cells[1].innerHTML = htmlTable.rows[index + 1].cells[1].innerHTML.replace(/zzz/gm,'img_' + index);
	
	htmlTable.rows[index + 1].cells[2].innerHTML = '<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />&nbsp;' + 
		                                           '<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />';
}
//удалить строку:
function delrow(index) {
	var htmlTable = document.getElementById("smiletable"),
		rowCount = htmlTable.rows.length;
    // Это проверка для того, что бы пользователь не мог удалить
    // последнюю строку.
	if(rowCount > 2) {
        htmlTable.deleteRow(index);
    } else {
        return false;   
    } 
}
//-->
</script>

<style>
<!--
table#smiletable tr td{text-align:center}
//-->
</style>

<form name="smileconfig" method="post" action="">

  <table id="smiletable" width="350px" cellpadding="1" cellspacing="1">
    <thead>
      <tr>
        <th>Символ</th>
        <th>Картинка</th>
        <th>&nbsp;</th>
      </tr>  
    </thead>
    <tbody>
      <?php if(count($smiles['ch']) < 1 ):?>
      <tr>
        <td style="width:76px"><input size="5" name="smile[ch][]" value="" /></td>
        <td>
			<?php echo JHTML::_('list.images', 'smile[im][]')?>
		</td>
		<td>
			<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
			<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" /> 
		</td>
      </tr>
      <?php else : for( $i = 0; $i < count($smiles['ch']); $i++) : ?>
      <tr>
        <td style="width:76px"><input size="5" name="smile[ch][]" value="<?php echo trim($smiles['ch'][$i])?>" /></td>
        <td>
			<?php echo images('smile[im][]','img_'.$i, trim($smiles['im'][$i] ))?>
		</td>
		<td>
			<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
			<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" /> 
		</td>
      </tr>
      <?php endfor; endif; ?>
    </tbody>
  </table>
  
<input type="submit" name="send" value="сохранить" /> 

</form>

Тут есть один тонкий момент: Когда мы настраиваем сопоставление символы - картинка, сохранить наши настройки мы сможем только той кнопкой "сохранить" которая выводится снизу нашей таблицы, а не стандарной кнопкой движка Joomla 1.5 - это плата за использование настолько нестандарного подхода к разработке панели админа.

Нам осталось лишь дописать код замены в файле smilies.php Замену будем производить, как во вводном тексте, так и полном тексте статьи, при помощи фунций str_replace - ей мы передадим массивы, полученные из десериализованного массива из файла collation.txt. Полный код основного файла плагина smilies.php

<?php 

defined('JPATH_BASE') or die ('Restricted access');

jimport( 'joomla.plugin.plugin' );

class plgContentSmilies extends JPlugin
{
	function onPrepareContent( &$article, &$params, $limitstart)
	{		
        $smiles = array();
        // Получаем, десериализуем массив из файла:
        $smiles = unserialize(file_get_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt'));
        // В массиве $smiles['im'] у нас только имена файлов, нужно что бы были 
        // полноценные html теги картинок:
        foreach($smiles['im'] AS &$pic)
        {
          $pic = '<img class="smilies-pic" src="images/'.$pic.'" />';
        }
        
        // Замена во вводном тексте:
    	$article->introtext = str_replace($smiles['ch'], $smiles['im'], $article->introtext);
        // Замена в основном тексте: 
    	$article->text = str_replace($smiles['ch'], $smiles['im'], $article->text);
    	return true;
	}
}

На данный момент мы должны иметь следующие файлы:

smilies.php
smilies.xml
smilies/smiliesframe.php
smilies/smiliestoolbar.php
smilies/collation.txt
smilies/index.html

Теперь можно залить картинки смайлов в папку images, настроить сопоставление символ - картинка и всё! В итоге мы получили механизм, коорый позволяет нам заменять некий набор символов в статье, на соответствующую картинку, причём и наборы символов и картинки можно добавлять в неограниченном количестве. Если что то не понятно спрашиваем в комментариях. Вот ссылка на готовый