Размеры для flash-баннера в процентах

Материал из Umicms
Перейти к:навигация, поиск

Актуально для версии 2.9.6

Задача: Реализовать возможность указания для flash-баннера его ширины и высоты в процентах.

Реализация:
В модуле "Шаблоны данных" для типа данных "Баннер с флешкой" добавим группу полей с названием "Размеры в процентах". В эту группе полей добавим два поля типа "Число" с названиями "Ширина" и "Высота", и идентификаторами "width_procent" и "height_procent" соответственно.

Для того, чтобы изменить размеры баннера, на те которые указаны в процентах, будем отправлять ajax запрос для получения данных о этих величинах и с помощью jQuery изменять соответствующие атрибуты у элемента embed баннера.

В файл \classes\modules\custom.php добавим код метода getBannerWidthAndHeight(), который по id баннера будет возвращать его ширину и высоту в процентах:

public function getBannerWidthAndHeight( $banner_id )
{
   $banner_id = ( $banner_id ? $banner_id : getRequest('param0') );
   $banner = umiObjectsCollection::getInstance()->getObject( $banner_id );
   
   $banner_width_procent = 0;
   $banner_height_procent = 0;
   
   if ( $banner instanceof iumiObject ) 
   {
	   $banner_width_procent =  (int) $banner->getValue('width_procent');
	   $banner_height_procent = (int) $banner->getValue('height_procent');
   }
   return array('width_procent' => $banner_width_procent,
	          'height_procent' => $banner_height_procent);
}

Вызов макроса %banners fastInsert()% поместим в блочный элемент с id = "flash_banner":

<div class="flash_banner">
     %banners fastInsert('идентификатор_рекламного_места')%
</div>

После этих строк добавим JavaScript код отправки ajax запроса и обработки полученных данных:

<script type="text/javascript">
	$('document').ready(function(){
		$('.flash_banner > object').ready(function(){
			var $bannerObject = $('.flash_banner > object');
			if ( !$bannerObject  )
				return false;
			var bannerId = $bannerObject.attr('id');
			var urlToGetData = "/udata://custom/getBannerWidthAndHeight/"+ bannerId +"/.json";
			$.ajax({
				type: "POST",
				url: urlToGetData,
				dataType: 'json'
			  })
				.done(function( result ) {
					var widthProcent = result.width_procent;
					var heightProcent = result.height_procent;
					var bannerObjectEmbed = $('.flash_banner > object > embed');
					if ( !!widthProcent && !!heightProcent )
					{
						bannerObjectEmbed.attr('width', widthProcent + '%');
						bannerObjectEmbed.attr('height', heightProcent + '%');
					}
				});
		});
	});
</script>