Внимание! Вышла новая версия hak_tinymce, читать Hak_tinymce 1.0

Плагин hak_tinymce потихоньку развивается и на сайте разработчика постоянно появляются новые версии. Но вставка картинок в этом WYSIWYG редакторе так и не изменилась. Я конечно немного подработал этот плагин для более удобной вставки картинок, но все таки требовалось еще доработать. Потихоньку, в свободное время я дорабатывал hak_tinymce.

На данном этапе вставка картинок выглядит так:

То есть по сравнению с прошлым разом появилась возможность перелистывать картинки по страницам. Эта удобная функция, которая как правило присутствует у всех более менее развитых wysiwyg редакторов.

Хочу сразу отметить недостатки на данном этапе:

Первое и наверное главное это то что при изменении категории или лимита или страницы (смещение с которой необходимо выбирать картинки) ни как не отображается начало и конец операции. То есть когда мы нажимаем кнопку выбора картинки первый раз мы видим картинку которая сигнализирует о начале загрузок картинок.

Второе - это при изменении окна выбора картинок не меняется количество страниц для выбора смещения. Это выглядит плохо, особенно если уменьшать окно выбора картинок. При уменьшении окна числа обозначающие смещение как бы уползают за экран и становятся недоступными.

Вот эти два недостатка я планирую исправить в следующий раз. Возможно кто то из читателей возьмется и исправит это раньше меня, буду только благодарен :)

Теперь о самих изменениях:

Изменились 3 файла из textpattern/tiny_mce/plugins/txpimage/

1. css/txpimage.css

В самом конце добавил описание css стиля для ul:

ul.pagination {margin: 1em 0; padding: 0.4em; text-align: left;}
ul.pagination li {display: inline; padding: 2px; border:none;}
Тут важно отметить CSS параметр padding у HTML тега li. Все дело в том что значение этого параметра участвует в расчетах ширины. И соответственно в формулах при расчете я брал значение 4(по два пикселя с права и лево). Если захотите немного расширить или сузить необходимо это учесть при расчетах. Конечно можно было этот параметр вычислить и передать в форуму, что конечно универсальней, но на мой взгляд излишне.

2. image.htm

<div id="general_panel" class="panel current">
<fieldset id="catselect"></fieldset>
<div id="imagesmax" style="margin:-40px 0 0 200px;"></div>
<div id="image_browse">
<img src="img/loading.gif" width="32" height="32" alt="{#txpimage_dlg.loading}" id="loading" />
</div>
Красным выделена строка которую я добавил. Все просто добавил DIV в котором будут размещаться номера страниц со смещением. Я установил CSS стиль margin, для того что бы сместить этот блок на 200 пикселей влево и на 40 пикселей верх. Необходимо отметить что на некоторых интернет обозревателях возможны этот блок будет смещен не туда куда надо. Я проверял только на Opera 10.53, Firefox 3.6 под системами Windows XP и Linux Mandriva 2010. В этих случаях блок вставал туда куда я и задумывал его поместить.

3. js/txpimage.js

Вот в этом файле произошли наибольшие изменения. Как не трудно догадаться код написан на JavaScript. Надо сказать я небольшой знаток JavaScript и поэтому писал код по аналогии с уже написанным кодом в этом файле. Ну и плюс статьи по JavaScript в интернет.

Изменилась функция prepareCategories:

// Load image categories & limit images (Andrew Lebedev)
txpEndPoint: tinyMCEPopup.editor.documentBaseURI.toAbsolute('textpattern/index.php'),
prepareCategories: function () {
tinymce.util.XHR.send({
url:this.txpEndPoint + '?event=hak_txpcatselect',
type:"GET",
scope: this,
success: function (response) {
tinyMCEPopup.dom.setHTML('catselect', response);
tinymce.dom.Event.add(tinyMCEPopup.dom.get('txpCategory'), 'change', function (e) {
this.loadCountImage(e.target.value, tinyMCEPopup.dom.get('txpLimitimg').value || 10 );
}, this);
tinymce.dom.Event.add(tinyMCEPopup.dom.get('txpLimitimg'), 'change', function (e) {
this.loadCountImage(tinyMCEPopup.dom.get('txpCategory').value || "", e.target.value );
}, this);
this.loadCountImage();
}
});
},

Раньше из этой функции вызывалась функция loadImageBrowser, теперь же вызывается новая функция loadCountImage которой передаются параметры выбранной категории и лимита картинок.

А вот и сама добавленная функция loadCountImage

loadCountImage: function (category1, limimages1) {
var selCat1 = category1 || "";
var limImg1 = limimages1 || 10;

var countWidth = tinyMCEPopup.dom.get('imagesmax').offsetWidth || 160;
var lastWidth = tinyMCEPopup.dom.get('widthlast').offsetWidth || 12;
var charWidth = tinyMCEPopup.dom.get('widthchar').offsetWidth || 12;

tinymce.util.XHR.send({
url:this.txpEndPoint + '?event=hak_txpcountselect' + '&c='+ selCat1 + '&limimg=' + limImg1 + '&limcount=1' + '&width=' + countWidth + '&wl=' + lastWidth + '&wc=' + charWidth,
type: 'GET',
scope: this,
success: function (response) {
tinyMCEPopup.dom.setHTML('imagesmax', response);
this.loadImageBrowser(selCat1, limImg1, 1);
}
});
},
В этой функции мы получаем значения ширины блока imagesmax (тот который мы создали в файле image.htm), а также значение ширины символа "8" и символа  "<". Ширина этих символов немного разная и это придется учитывать при расчете окончательной ширины. Потом все полученные параметры  и параметры которые были переданные нам из функции prepareCategories передаем в сам плагин hak_tinymce, а точнее в новую функцию hak_txpcountselect. Дальше заставляем обновить блок 'imagesmax' и вызываем функцию loadImageBrowser. Из текста функции видно что параметры selCat1 и limImg1 мы передаем без изменения. То есть такими какими мы их получили на входе. Как не трудно догадаться они содержат название выбранной категории и лимита. Третий же параметр равный единице - это параметр смещение.

Логика здесь такая: При изменении категории или лимита картинок смещение сбрасывается и картинки отображаются с самых новых. Конечно, можно было усложнить функцию и учитывать видимые картинки, но JavaScript код увеличился бы тогда значительно. По моим скромным подсчетом очень значительно. Хотя я не большой знаток JavaScript и возможно ошибаюсь. Также у меня стоял вопрос: при изменении категории сбрасывать параметр ЛИМИТ на значение по умолчанию или нет? Я остановился на том что бы параметр ЛИМИТ не сбрасывать при изменении категории. Хотя пробовал и сбрасывать. Код от этого не сильно усложнялся. Просто мне показалось что так логичнее. При не сбрасывании параметра ЛИМИТ на значение возможна неприятная ситуация. Это когда ЛИМИТ выбран "All" и выбрали новую категорию в которой очень много картинок.

Теперь рассмотрим изменившуюся функцию loadImageBrowser.

loadImageBrowser: function (category, limimages, limcount ) {
var selCat = category || "";
var limImg = limimages || 10;
var limC = limcount || 1;

var src = tinyMCEPopup.dom.get('src').value || '';

var maxCount = document.getElementById('count_images').value || 0;
if ( maxCount > 10 ) {
tinyMCEPopup.dom.get('txpLimitimages').style.visibility = 'visible';
if ( limImg == 'All' ) { tinyMCEPopup.dom.get('txpLimitCount').style.visibility = 'hidden'; }
else { tinyMCEPopup.dom.get('txpLimitCount').style.visibility = 'visible'; }
}
else {
tinyMCEPopup.dom.get('txpLimitimages').style.visibility = 'hidden';
tinyMCEPopup.dom.get('txpLimitCount').style.visibility = 'hidden';
}
tinymce.util.XHR.send({
url:this.txpEndPoint + '?event=hak_txpimage&src='+ src + '&c='+ selCat + '&limimg=' + limImg + '&limcount=' + limC,
type: 'GET',
success: function (response) {
tinyMCEPopup.dom.setHTML("image_browse", response);
}
});
},

В этот функции мы добавили функционал по управлению видимости выбора лимита и строки с выбором смещения. Если общее число отображаемых картинок меньше 10, то с помощью изменения CSS стиля делаем не видимым выбор ЛИМИТА и СМЕЩЕНИЯ. Я рассудил так что при таком количестве картинок дополнительные кнопочки и рюшечки не нужны. Будут только отвлекать. Тоже самое с параметром смещение, если выбрано отображать все картинки, то не стоит отображать страницы со смещением. Надо отметить что с помощью CSS управляю именно видимостью - параметр visibility. Потому как если управлять видимость с помощью параметра display то будут возникать артефакты при изменении этого параметра у блока txpLimitCount. Так как при установки CSS свойства display в none, место занимаемое объектом освобождается. При изменении же свойства CSS  visibility просто скрывается с экрана, но сам объект  как занимал место так и занимает. Да при этом имеет ширину, которая нам необходима для расчетов.

Еще добавленная функция loadCountImage2.

loadCountImage2: function (category2, limimages2, limcount2) {
var selCat2 = category2 || "";
var limImg2 = limimages2 || 10;
var limC2 = limcount2 || 1;

var countWidth = tinyMCEPopup.dom.get('imagesmax').offsetWidth || 160;
var lastWidth = tinyMCEPopup.dom.get('widthlast').offsetWidth || 12;
var charWidth = tinyMCEPopup.dom.get('widthchar').offsetWidth || 12;

tinymce.util.XHR.send({
url:this.txpEndPoint + '?event=hak_txpcountselect' + '&c='+ selCat2 + '&limimg=' + limImg2 + '&limcount=' + limC2 + '&width=' + countWidth + '&wl=' + lastWidth + '&wc=' + charWidth,
type: 'GET',
scope: this,
success: function (response) {
tinyMCEPopup.dom.setHTML('imagesmax', response);
this.loadImageBrowser(selCat2, limImg2, limC2 );
}
});
},

Эта функция почти идентична  loadCountImage. Только добавился третий параметр, который как раз передает смещение. В принципе можно было обойтись одной функцией loadCountImage. В ней можно было передать и третий и четвертый параметр который бы принимал значение 0 или 1 в зависимости от того кто вызвал эту функцию. Просто так мне наглядней, возможно в конечном варианте я оставлю одну функцию loadCountImage. Хотя loadCountImage2 и добавляет размер файла txpimage.js, но не много. С другой стороны если оставить одну функцию loadCountImage, то потребуется еще одна проверка (if - else). Тогда получиться код на крохотную долю будет более ресурсоемкий.

Продолжение следует. Далее я опишу изменение сделанные в самом плагине hak_tinymce. Сам плагин написан на PHP. PHP не такой уж трудный язык, и тем не менее  я столкнулся с трудностями в реализации.

Внимание! Вышла новая версия hak_tinymce, читать Hak_tinymce 1.0

Вы можете скачать архив(tar) всех измененных файлов. Не забудьте сохранить свои файлы перед изменением!

Скачать: txpimage

Скачать: hak_tinymce.txt

Весь код доступен под лицензиями BSD, GPL2, GPL3, LGPL. Если Вам необходимо получить код под любой другой свободной лицензией прошу обращаться по адресу redduck@solo-line.ru.