php, Битрикс

Добавляем поддержку автосохранения на примере модуля комментариев

В сегодняшнем обновлении модуля комментариев мы реализовали поддержку автосохранения для формы добавления комментария.
Минимум комментариев, максимум кода 🙂
В основном все сводится к copy/paste и сменой нескольких параметров.

1. Создаем класс для поддержки автосохранения

< ? IncludeModuleLangFile(__FILE__); class aCommentsAutosave { private static $instance; private static $as; public function __construct() { $this->as = new CAutoSave();
}

public static function GetInstance()
{
if (!$GLOBALS[‘USER’]->IsAuthorized())
return false;
if (COption::GetOptionString(«altasib.comments», «USE_AUTOSAVE», «Y») === «N»)
return false;

if (!isset(self::$instance))
{
$c = __CLASS__;
self::$instance = new $c;
}

return self::$instance;
}

public function LoadScript($arParams)
{
if (!is_array($arParams))
$arParams = array(«formID» => $arParams);
if (!isset($arParams[‘recoverMessage’]))
$arParams[‘recoverMessage’] = GetMessage(‘ALTASIB_COMMENTS_MESSAGE_RECOVER’);

$jsParams = CUtil::PhpToJSObject($arParams);
$id = $this->as->GetID();
ob_start();
?>

< ? ob_end_flush(); } public function Init() { return $this->as->Init(false);
}

public function Reset()
{
return $this->as->Reset();
}
}
?>

Что меняем:
— Название класса
— Привязку к модулю altasib.comments на ваш
— Путь до js скрипта обработки «/bitrix/js/altasib.comments/autosave.js» а также имя функции aCommentsFormAutosave которая будет в нем
— Сообщение ALTASIB_COMMENTS_MESSAGE_RECOVER по желанию 🙂

2. Создаем файл autosave.js

aCommentsFormAutosave = function (params) {
var formID = params.formID || null;
if (!formID) return;

var form = BX(formID);
if (!form) return;

var controlID = params.controlID || «POST_MESSAGE»;
var iconClass = params.iconClass || «postFormAutosave»;
var actionClass = params.actionClass || «postFormAutorestore»;
var actionText = params.actionText || BX.message(‘AUTOSAVE_R’);
var recoverMessage = params.recoverMessage || »;
var recoverNotify = null;

var auto_lnk = BX.create(‘A’, {
‘attr’: {‘href’: ‘javascript:void(0)’},
‘props’: {
‘className’: iconClass+’ bx-core-autosave bx-core-autosave-ready’,
‘title’: BX.message(‘AUTOSAVE_T’)
}
});
var restore_lnk = null;

formHeader = BX.findChild(form, {‘className’: /textarea_block_alx_comment/ }, true);
if (!!formHeader)
formHeader.insertBefore(auto_lnk, formHeader.children[0]);
else
form.insertBefore(auto_lnk, form.children[0]);

var bindLHEEvents = function(_ob)
{
if (window.oLHE)
{
window.oLHE.fAutosave = _ob;
BX.bind(window.oLHE.pEditorDocument, ‘keydown’, BX.proxy(_ob.Init, _ob));
BX.bind(window.oLHE.pTextarea, ‘keydown’, BX.proxy(_ob.Init, _ob));
}
}

BX.addCustomEvent(form, ‘onAutoSavePrepare’, function (ob, h) {
ob.DISABLE_STANDARD_NOTIFY = true;
BX.bind(auto_lnk, ‘click’, BX.proxy(ob.Save, ob));
_ob=ob;
setTimeout(function() { bindLHEEvents(_ob) },1500);
});
BX.addCustomEvent(form, ‘onAutoSave’, function(ob, form_data) {
BX.removeClass(auto_lnk,’bx-core-autosave-edited’);
BX.removeClass(auto_lnk,’bx-core-autosave-ready’);
BX.addClass(auto_lnk,’bx-core-autosave-saving’);

if (! window.oLHE) return;

form_data[controlID+’_type’] = window.oLHE.sEditorMode;
var text = «»;
if (window.oLHE.sEditorMode == ‘code’)
text = window.oLHE.GetCodeEditorContent();
else
text = window.oLHE.GetEditorContent();
form_data[controlID] = text;
});

BX.addCustomEvent(form, ‘onAutoSaveFinished’, function(ob, t) {
t = parseInt(t);
if (!isNaN(t))
{
setTimeout(function() {
BX.removeClass(auto_lnk,’bx-core-autosave-saving’);
BX.addClass(auto_lnk,’bx-core-autosave-ready’);
}, 1000);
auto_lnk.title = BX.message(‘AUTOSAVE_L’).replace(‘#DATE#’, BX.formatDate(new Date(t * 1000)));
}
});
BX.addCustomEvent(form, ‘onAutoSaveInit’, function() {
BX.removeClass(auto_lnk,’bx-core-autosave-ready’);
BX.addClass(auto_lnk,’bx-core-autosave-edited’);
});

BX.addCustomEvent(form, ‘onAutoSaveRestoreFound’, function(ob, data) {
if (BX.util.trim(data[controlID]).length < 1) return; _ob = ob; var id = form.name || Math.random(); recoverNotify = BX.create('DIV', { 'props': { 'className': 'alx-comment-notify-bar' }, 'children': [ BX.create('DIV', { 'props': { 'className': 'alx-comment-notify-close' }, 'children': [ BX.create('A', { 'events':{ 'click': function() { if (!! recoverNotify) BX.remove(recoverNotify); return false; } } }) ] }), BX.create('DIV', { 'props': { 'className': 'alx-comment-notify-text' }, 'children': [ BX.create('SPAN', { 'text': recoverMessage }), BX.create('A', { 'attr': {'href': 'javascript:void(0)'}, 'props': {'className': actionClass}, 'text': actionText, 'events':{ 'click': function() { _ob.Restore(); return false;} } }) ] }) ] }); form.insertBefore(recoverNotify, form.children[1]); }); BX.addCustomEvent(form, 'onAutoSaveRestore', function(ob, data) { if (!window.oLHE || !data[controlID]) return; window.oLHE.SetView(data[controlID+'_type']); if (!!window.oLHE.sourseBut) window.oLHE.sourseBut.Check((data[controlID+'_type'] == 'code')); if (data[controlID+'_type'] == 'code') window.oLHE.SetContent(data[controlID]); else window.oLHE.SetEditorContent(data[controlID]); bindLHEEvents(ob); }); BX.addCustomEvent(form, 'onAutoSaveRestoreFinished', function(ob, data) { if (!! recoverNotify) BX.remove(recoverNotify); }); }

Что меняем:
— Название функции, которую мы установиши выше
— ID textarea с которого будут браться значения и устанавливаться в нее — POST_MESSAGE
— Имя класса textarea_block_alx_comment до которого будет выведен текст восстановления и иконка статуса сохранения
— Имя классов alx-comment-* (используются для оформления текста выводимого при восстановлении и показа иконки)

3. Переходим в component.php
В начало добавляем

$arParams[«AUTOSAVE»] = aCommentsAutosave::GetInstance();

также добавляем очистку после успешного добавления комментария, после кода
условие может отличатся от вашего

if ($_SERVER[«REQUEST_METHOD»] == «POST» …. )

if($COMMENT_ID = $Comment->Add($arMessage,false))
{
if($arParams[«AUTOSAVE»])
$arParams[«AUTOSAVE»]->Reset();
}

4. Переходим к шаблону template.php
после

добавляем код

< ? if ($arParams['AUTOSAVE']) $arParams['AUTOSAVE']->Init();
?>

В конце шаблона добавляем код

< ? if ($arParams['AUTOSAVE']) { $arParams['AUTOSAVE']->LoadScript(CUtil::JSEscape(«ТУТ ID ФОРМЫ»));
}
?>

5. Переходим к стилям шаблона style.css
добавляем и не забываем изменить имена классов, на те которые установили выше.

/* autosave */
a.postFormAutosave {
float: right;
display:block;
width:18px;
height:18px;
margin:0 -4px 0 0;
position:relative;
z-index:2;
}
.alx-comment-notify-bar {
width: 100%;
height: 2em;
margin-top:-8px;
position:relative;
}
.alx-comment-notify-close {
display: block !important;
height: 12px !important;
margin: 3px 6px 0 0;
padding: 0 !important;
position: absolute !important;
right: 5px !important;
top: 5px !important;
width: 12px !important;
}
.alx-comment-notify-close a {
background: url(«/bitrix/js/main/core/images/panel/sprite03.png») no-repeat scroll -268px -243px transparent !important;
display: block !important;
height: 12px !important;
width: 12px !important;
cursor:pointer;
}
.alx-comment-notify-text {
color: #000000 !important;
margin: 0 !important;
padding: 3px 20px 5px !important;
text-align: center !important;
}
.alx-comment-notify-text a.postFormAutorestore {
position:relative;
color: #ff0000;
cursor:pointer;
text-decoration:underline;
margin-right: 9px;
margin-top: 5px;
z-index:2;
}

Код был подсмотрен в модуле форума 🙂

Enjoy!

Tagged ,

Добавить комментарий