Добавление панелей задач

Объявление класса панели задач

Для объявления класса панели задач необходимо придерживаться стандартных правил описания классов в JavaScript. Учитывая тот факт, что в синтаксисе языка JavaScript не предусмотрено специального синтаксиса для описания классов, для этих целей используются функции.
В теле описываемой функции, используя синтаксис объявления функциональных литералов, определяются методы класса, как свойства объекта prototype.

Для обеспечения взаимодействия с API визуального редактора, при объявлении класса можно использовать:

• обработчики стандартных событий
• свойства класса-родителя
• методы класса-родителя

Объявление обработчики стандартных событий, возникающих при взаимодействии пользователя с визуальным редактором и определяемой панелью задач, позволяет соответствующим образом реагировать на действия пользователя и системные события.

Обработчики стандартных событий

CustomTaskbar.prototype.UnParseElement = function(node)
{
	if (node.arAttributes["__bxtagname"] == '__customtag1')
		return '<?MyPHPFunction(0)?>'
	if (node.arAttributes["__bxtagname"] == '__customtag1')
		return '<?MyPHPFunction(1)?>'
	if (node.arAttributes["__bxtagname"] == '__customtag2')
		return '<?MyPHPFunction(2)?>'

	return false;
}

Свойства и методы класса-родителя

Для использования свойств и методов класса-родителя в теле функции, описывающей класс панели задач, необходимо объявить переменную уровня функции и присвоить ей значение this. В дальнейшем, для обращения к предопределённым методам и свойствам нужно использовать эту переменную.

function CustomTaskbar()
{
	var oTaskbar = this;
	CustomTaskbar.prototype.OnTaskbarCreate = function ()
	{		
		var pDataCell = oTaskbar.CreateScrollableArea(oTaskbar.pDataCell);
		//......
	}
	//....
}

Свойства класса-родителя

Методы класса-родителя

Использование других методов и средств API

Добавление обработчика элементов для панели свойств

Добавление панели задач

Для добавления обявленной панели задач в визуальный редактор необходимо вызвать метод addTaskBar глобального объекта oBXEditorUtils:

Описание:

void
oBXEditorUtils.addTaskBar(
	string className,
	int taskbarSetPos,
	string taskbarTitle,
	array params
);

Пример добавления панели задач в редактор

<script>

function CustomTaskbar()
{
	var pDataCell;
	var oTaskbar = this;
	
	CustomTaskbar.prototype.OnTaskbarCreate = function ()
	{
		//Создание прокручиваемой области
		pDataCell = oTaskbar.CreateScrollableArea(oTaskbar.pDataCell);
		//Добавление обработчика панели свойств для элемента "_customtag2"
		oBXEditorUtils.addPropertyBarHandler('_customtag2',this.ShowProperties);
		//Отображение списка элементов
		this.DisplayTree();
	}
	
	CustomTaskbar.prototype.DisplayTree = function()
	{
		//Создание массива элементов
		var arElements = [];
		var _arElement = [];
		_arElement['name'] = 'group1';
		_arElement['title'] = 'Group 1';
		_arElement['tagname'] = '';
		_arElement['icon'] = '';
		_arElement['isGroup'] = true;
		_arElement['params'] = [];	
		_arElement['childElements'] = [];
			var __arElement = [];
			__arElement['name'] = 'el_1_1';
			__arElement['title'] = 'Element 1.1';
			__arElement['tagname'] = '_customtag';
			__arElement['icon'] = '/images/icon1.gif';
			__arElement['isGroup'] = false;
			__arElement['params'] = [];
			__arElement['childElements'] = [];
			_arElement['childElements'].push(__arElement);
			
			__arElement = [];
			__arElement['name'] = 'el_1_2';
			__arElement['title'] = 'Element 1.2';
			__arElement['tagname'] = '_customtag2';
			__arElement['icon'] = '/images/icon2.gif';
			__arElement['isGroup'] = false;
			
				___arPar = [];
				___arPar[0] = {name:'param0',title:'Параметр0',value:'value0'};
				___arPar[1] = {name:'param1',title:'Параметр1',value:'value1'};
				___arPar[2] = {name:'param2',title:'Параметр2',value:'value2'};			
			__arElement['params'] = ___arPar;
			__arElement['childElements'] = [];			
			
			_arElement['childElements'].push(__arElement);
			
		arElements.push(_arElement);
		
		_arElement = [];
		_arElement['name'] = 'el_2';
		_arElement['title'] = 'Element 2';
		_arElement['tagname'] = '_customtag';
		_arElement['icon'] = '/images/icon3.gif';
		_arElement['params'] = [];
		_arElement['isGroup'] = false;
		_arElement['childElements'] = [];
		arElements.push(_arElement);
		
		//Добавление списка элементов к прокручиваемой области
		oTaskbar.DisplayElementList(arElements,pDataCell);
	}
	
	//Обработчик панели свойств для элемента _customtag2
	CustomTaskbar.prototype.ShowProperties = function(_bNew, _pTaskbar, _pElement)
	{
		// _pTaskbar.pCellProps - прокручиваемая область панели свойств	
		var arParams = oBXEditorUtils.getCustomNodeParams(_pElement);
		var _input,_div;
		var __saveParams = function(e)
		{
			for (var _i=0; _i<arParams.length;_i++)
			{
				_input = document.getElementById('__param_'+arParams[_i].name);				
				arParams[_i].value = _input.value;
			}
			
			//oBXEditorUtils.setCustomNodeParams(_pElement,arParams);
		}
		
		if (_bNew)
		{
			oBXEditorUtils.BXRemoveAllChild(_pTaskbar.pCellProps);
			for (var _i=0;_i<arParams.length;_i++)
			{		
				_input = document.createElement('INPUT');
				_input.type = 'text';
				_input.id = '__param_'+arParams[_i].name;
				_input.value = arParams[_i].value;
				_input.onblur = __saveParams;
				
				_div = document.createElement('DIV');
				_div.id = '__vd_'+arParams[_i].name;
				_div.innerHTML = arParams[_i].title;				
				_div.appendChild(_input);
				_pTaskbar.pCellProps.appendChild(_div);
			}
		}
		else
		{
			for (var _i=0;_i<arParams.length;_i++)
			{	
				_input = document.createElement('INPUT');
				_input.type = 'text';
				_input.id = '__param_'+arParams[_i].name;
				_input.value = arParams[_i].value;
				_input.onblur = __saveParams;
				
				_div = document.getElementById('__vd_'+arParams[_i].name);
				_div.innerHTML = arParams[_i].title;				
				_div.appendChild(_input);
			}
		}
	}
	
	CustomTaskbar.prototype.UnParseElement = function(node)
	{
		if (node.arAttributes["__bxtagname"] == '_customtag')
			return '<?SomeSuperFunction(3)?>'
		if (node.arAttributes["__bxtagname"] == '_customtag2')
			return '<?SomeSuperFunction(1)?>'
	
		return false;
	}
	
	CustomTaskbar.prototype.OnElementDragEnd = function(oEl)
	{
		if (oEl.getAttribute('__bxtagname') == '_customtag')
		{
			oEl.parentNode.removeChild(oEl);
			oTaskbar.insertHTML('snippet');
			alert('Был вставлен произвольный элемент');
		}
		else if(oEl.getAttribute('__bxtagname') == '_customtag2')
			alert('Был вставлен другой произвольный элемент');

	}
}

//Добавление панели задач
oBXEditorUtils.addTaskBar('CustomTaskbar',2,"Help",[]);

</script>