Доработка блоков - возможность группировать вкладки

engine/lib/internal/template/js/blocks.js

@@ -11,19 +11,19 @@ ls.blocks = (function ($) {
 		active: 'active',
 		loader: DIR_STATIC_SKIN + '/images/loader.gif',
 		type: {
-			block_stream_item_comment: {
+			stream_comment: {
 				url: aRouter['ajax']+'stream/comment/'
 			},
-			block_stream_item_topic: {
+			stream_topic: {
 				url: aRouter['ajax']+'stream/topic/'
 			},
-			block_blogs_item_top: {
+			blogs_top: {
 				url: aRouter['ajax']+'blogs/top/'
 			},
-			block_blogs_item_join: {
+			blogs_join: {
 				url: aRouter['ajax']+'blogs/join/'
 			},
-			block_blogs_item_self: {
+			blogs_self: {
 				url: aRouter['ajax']+'blogs/self/'
 			}
 		}
@@ -33,21 +33,22 @@ ls.blocks = (function ($) {
 	* Метод загрузки содержимого блока
 	*/
 	this.load = function(obj, block, params){
-		var id = $(obj).attr('id');
+		var type = $(obj).data('type');
 		'*loadBefore*'; '*/loadBefore*';
 		
-		if(!id) return;
+		if(!type) return;
+		type=block+'_'+type;
 		
-		params=$.extend(true,{},this.options.type[id].params || {},params || {});
+		params=$.extend(true,{},this.options.type[type].params || {},params || {});
 		
-		var content = $('#'+block+'_content');
+		var content = $('.js-block-'+block+'-content');
 		this.showProgress(content);
 
-		$('[id^="'+block+'_item"]').removeClass(this.options.active);
+		$('.js-block-'+block+'-item').removeClass(this.options.active);
 		$(obj).addClass(this.options.active);
 
-		ls.ajax(this.options.type[id].url, params, function(result){
+		ls.ajax(this.options.type[type].url, params, function(result){
-			var args = [content,id,result];
+			var args = [content,result];
 			'*onLoadBefore*'; '*/onLoadBefore*';
 			this.onLoad.apply(this,args);
 		}.bind(this));
@@ -59,13 +60,34 @@ ls.blocks = (function ($) {
 	 * @param block
 	 */
 	this.switchTab = function(obj, block) {
-		$('[id^="'+block+'_item"]').removeClass(this.options.active);
+		/**
+		 * Если вкладку передаем как строчку - значение data-type
+		 */
+		if (typeof(obj)=='string') {
+			$('.js-block-'+block+'-item').each(function(k,v){
+				if ($(v).data('type')==obj) {
+					obj=v;
+					return;
+				}
+			});
+		}
+		/**
+		 * Если не нашли такой вкладки
+		 */
+		if (typeof(obj)=='string') {
+			return false;
+		}
+
+		$('.js-block-'+block+'-item').removeClass(this.options.active);
 		$(obj).addClass(this.options.active);
 
-		$('[id^="'+block+'_content"]').hide();
+		$('.js-block-'+block+'-content').hide();
-		var id = $(obj).attr('id');
+		$('.js-block-'+block+'-content').each(function(k,v){
-		var idContent=$(obj).attr('id').replace(block+'_item_',block+'_content_');
+			if ($(v).data('type')==$(obj).data('type')) {
-		$('#'+idContent).show();
+				$(v).show();
+			}
+		});
+		return true;
 	};
 
 	/**
@@ -78,7 +100,7 @@ ls.blocks = (function ($) {
 	/**
 	* Обработка результатов загрузки
 	*/
-	this.onLoad = function(content,id,result) {
+	this.onLoad = function(content,result) {
 		$(this).trigger('loadSuccessful',arguments);
 		content.empty();
 		if (result.bStateError) {
@@ -89,5 +111,73 @@ ls.blocks = (function ($) {
 		}
 	};
 
+	this.getCurrentItem = function(block) {
+		if ($('.js-block-'+block+'-nav').is(':visible')) {
+			return $('.js-block-'+block+'-nav').find('.js-block-'+block+'-item.'+this.options.active);
+		} else {
+			return $('.js-block-'+block+'-dropdown-items').find('.js-block-'+block+'-item.'+this.options.active);
+		}
+	};
+
+	this.initSwitch = function(block) {
+		$('.js-block-'+block+'-item').click(function(){
+			ls.blocks.switchTab(this, block);
+			return false;
+		});
+	};
+
+	this.init = function(block,params) {
+		params=params || {};
+		$('.js-block-'+block+'-item').click(function(){
+			ls.blocks.load(this, block);
+			return false;
+		});
+		if (params.group_items) {
+			this.initNavigation(block,params.group_min);
+		}
+
+		var $this=this;
+		$('.js-block-'+block+'-update').click(function(){
+			$(this).addClass('active');
+			ls.blocks.load($this.getCurrentItem(block), block);
+			setTimeout( function() { $(this).removeClass('active'); }.bind(this), 600 );
+		});
+	};
+
+	this.initNavigation = function(block,count) {
+		count=count || 3;
+		if ($('.js-block-'+block+'-nav').find('li').length >= count) {
+			$('.js-block-'+block+'-nav').hide();
+			$('.js-block-'+block+'-dropdown').show();
+			// Dropdown
+			var trigger = $('.js-block-'+block+'-dropdown-trigger');
+			var menu 	= $('.js-block-'+block+'-dropdown-items');
+			var pos 	= trigger.offset();
+
+			menu.appendTo('body').css({ 'left': pos.left, 'top': pos.top + 30, 'display': 'none' });
+			trigger.click(function(){
+				menu.slideToggle();
+				$(this).toggleClass('opened');
+				return false;
+			});
+			menu.find('a').click(function(){
+				trigger.removeClass('opened').find('a').text( $(this).text() );
+				menu.slideToggle();
+			});
+			// Hide menu
+			$(document).click(function(){
+				trigger.removeClass('opened');
+				menu.slideUp();
+			});
+			$('body').on('click', '.js-block-'+block+'-dropdown-trigger, .js-block-'+block+'-dropdown-items', function(e) {
+				e.stopPropagation();
+			});
+		} else {
+			// Transform nav to dropdown
+			$('.js-block-'+block+'-nav').show();
+			$('.js-block-'+block+'-dropdown').hide();
+		}
+	};
+
 	return this;
 }).call(ls.blocks || {},jQuery);

engine/modules/viewer/plugs/function.hook.php

@@ -32,9 +32,16 @@ function smarty_function_hook($aParams,&$oSmarty) {
 	$sHookName='template_'.strtolower($aParams['run']);
 	unset($aParams['run']);
 	$aResultHook=Engine::getInstance()->Hook_Run($sHookName,$aParams);
+
+	$sReturn='';
 	if (array_key_exists('template_result',$aResultHook)) {
-		return join('',$aResultHook['template_result']);
+		$sReturn=join('',$aResultHook['template_result']);
+	}
+
+	if (!empty($aParams['assign'])) {
+		$oSmarty->assign($aParams['assign'], $sReturn);
+	} else {
+		return $sReturn;
 	}
-	return '';
 }
 ?>

templates/skin/developer-jquery/blocks/block.blogs.tpl

@@ -1,20 +1,21 @@
 <div class="block" id="block_blogs">
 	<header class="block-header">
 		<h3>{$aLang.block_blogs}</h3>
+		<div class="block-update js-block-blogs-update"></div>
 	</header>
 	
 	
 	<div class="block-content">
-		<ul class="nav nav-pills">
+		<ul class="nav nav-pills js-block-blogs-nav">
-			<li id="block_blogs_item_top" class="active"><a href="#">{$aLang.block_blogs_top}</a></li>
+			<li class="active js-block-blogs-item" data-type="top"><a href="#">{$aLang.block_blogs_top}</a></li>
 			{if $oUserCurrent}
-				<li id="block_blogs_item_join"><a href="#">{$aLang.block_blogs_join}</a></li>
+				<li class="js-block-blogs-item" data-type="join"><a href="#">{$aLang.block_blogs_join}</a></li>
-				<li id="block_blogs_item_self"><a href="#">{$aLang.block_blogs_self}</a></li>
+				<li class="js-block-blogs-item" data-type="self"><a href="#">{$aLang.block_blogs_self}</a></li>
 			{/if}
 		</ul>
 		
 		
-		<div id="block_blogs_content">
+		<div class="js-block-blogs-content">
 			{$sBlogsTop}
 		</div>
 

templates/skin/developer-jquery/blocks/block.stream.tpl

@@ -1,79 +1,30 @@
-<script type="text/javascript">
+<section class="block block-type-stream">
-	jQuery(function($){
-		if ($('#block-stream-nav').find('li').length > 2) {
-			// Transform nav to dropdown
-			$('#block-stream-nav').hide();
-			$('#block-stream-nav-dropdown').show();
-		
-		
-			// Dropdown
-			var trigger = $('#dropdown-stream-trigger');
-			var menu 	= $('#dropdown-stream-menu');
-			var pos 	= trigger.offset();
-			
-			
-			menu.appendTo('body').css({ 'left': pos.left, 'top': pos.top + 30, 'display': 'none' });
-		
-			trigger.click(function(){
-				menu.slideToggle();
-				$(this).toggleClass('opened');
-				return false;
-			});
-			
-			menu.find('a').click(function(){
-				trigger.removeClass('opened').find('a').text( $(this).text() );
-				menu.slideToggle();
-			});
-			
-			
-			// Hide menu
-			$(document).click(function(){
-				trigger.removeClass('opened');
-				menu.slideUp();
-			});
-		
-			$('body').on("click", "#dropdown-stream-trigger, #dropdown-stream-menu", function(e) {
-				e.stopPropagation();
-			});
-		}
-			
-			
-		// Update stream
-		$('#stream-update').click(function(){
-			$(this).addClass('active');
-			ls.blocks.load($('#block_stream_item_comment'), 'block_stream');
-			setTimeout( function() { $('#stream-update').removeClass('active'); }, 600 );
-		});
-	});
-</script>
-
-
-<section class="block block-type-stream" id="block_stream">
 	<header class="block-header">
 		<h3><a href="{router page='comments'}" title="{$aLang.block_stream_comments_all}">{$aLang.block_stream}</a></h3>
-		<div class="stream-update" id="stream-update"></div>
+		<div class="block-update js-block-stream-update"></div>
 	</header>
 
+	{hook run='block_stream_nav_item' assign="sItemsHook"}
 	
 	<div class="block-content">
-		<ul class="nav nav-pills" id="block-stream-nav">						
+		<ul class="nav nav-pills js-block-stream-nav" {if $sItemsHook}style="display: none;"{/if}>
-			<li id="block_stream_item_comment" class="active"><a href="#">{$aLang.block_stream_comments}</a></li>
+			<li class="active js-block-stream-item" data-type="comment"><a href="#">{$aLang.block_stream_comments}</a></li>
-			<li id="block_stream_item_topic"><a href="#">{$aLang.block_stream_topics}</a></li>
+			<li class="js-block-stream-item" data-type="topic"><a href="#">{$aLang.block_stream_topics}</a></li>
-			{hook run='block_stream_nav_item'}
+			{$sItemsHook}
 		</ul>
 		
-		<ul class="nav nav-pills" id="block-stream-nav-dropdown" style="display: none">
+		<ul class="nav nav-pills js-block-stream-dropdown" {if !$sItemsHook}style="display: none;"{/if}>
-			<li class="dropdown active" id="dropdown-stream-trigger"><a href="#">{$aLang.block_stream_comments}</a> <i class="arrow"></i>
+			<li class="dropdown active js-block-stream-dropdown-trigger"><a href="#">{$aLang.block_stream_comments}</a> <i class="arrow"></i>
-				<ul class="dropdown-menu" id="dropdown-stream-menu">
+				<ul class="dropdown-menu js-block-stream-dropdown-items">
-					<li id="block_stream_item_comment" class="active"><a href="#">{$aLang.block_stream_comments}</a></li>
+					<li class="active js-block-stream-item" data-type="comment"><a href="#">{$aLang.block_stream_comments}</a></li>
-					<li id="block_stream_item_topic"><a href="#">{$aLang.block_stream_topics}</a></li>
+					<li class="js-block-stream-item" data-type="topic"><a href="#">{$aLang.block_stream_topics}</a></li>
-					{hook run='block_stream_nav_item'}
+					{$sItemsHook}
 				</ul>
 			</li>
 		</ul>
 		
 		
-		<div id="block_stream_content">
+		<div class="js-block-stream-content">
 			{$sStreamComments}
 		</div>
 	</div>

templates/skin/developer-jquery/blocks/block.tags.tpl

@@ -6,9 +6,9 @@
 	
 	<div class="block-content">
 		<ul class="nav nav-pills">
-			<li id="block_tags_item_all" class="active"><a href="#">{$aLang.topic_favourite_tags_block_all}</a></li>
+			<li class="active js-block-tags-item" data-type="all"><a href="#">{$aLang.topic_favourite_tags_block_all}</a></li>
 			{if $oUserCurrent}
-				<li id="block_tags_item_user"><a href="#">{$aLang.topic_favourite_tags_block_user}</a></li>
+				<li class="js-block-tags-item" data-type="user"><a href="#">{$aLang.topic_favourite_tags_block_user}</a></li>
 			{/if}
 
 			{hook run='block_tags_nav_item'}
@@ -18,7 +18,7 @@
 			<input type="text" name="tag" placeholder="Поиск тегов" value="" class="input-text input-width-full autocomplete-tags js-tag-search" />
 		</form>
 
-		<div id="block_tags_content_all">
+		<div class="js-block-tags-content" data-type="all">
 			{if $aTags}
 				<ul class="tag-cloud">
 					{foreach from=$aTags item=oTag}
@@ -31,7 +31,7 @@
 		</div>
 
 		{if $oUserCurrent}
-			<div id="block_tags_content_user" style="display: none;">
+			<div class="js-block-tags-content" data-type="user" style="display: none;">
 				{if $aTagsUser}
 					<ul class="tag-cloud">
 						{foreach from=$aTagsUser item=oTag}

templates/skin/developer-jquery/blocks/block.tagsFavouriteTopic.tpl

@@ -6,14 +6,14 @@
 	
 	<div class="block-content" id="block_favourite_topic_content">
 		<ul class="nav nav-pills">
-			<li id="block_favourite_topic_tags_item_all" class="active"><a href="#">{$aLang.topic_favourite_tags_block_all}</a></li>
+			<li class="active js-block-favourite-topic-tags-item" data-type="all"><a href="#">{$aLang.topic_favourite_tags_block_all}</a></li>
-			<li id="block_favourite_topic_tags_item_user"><a href="#">{$aLang.topic_favourite_tags_block_user}</a></li>
+			<li class="js-block-favourite-topic-tags-item" data-type="user"><a href="#">{$aLang.topic_favourite_tags_block_user}</a></li>
 
 			{hook run='block_favourite_topic_tags_nav_item'}
 		</ul>
 		
 		
-		<div id="block_favourite_topic_tags_content_all">
+		<div class="js-block-favourite-topic-tags-content" data-type="all">
 			{if $aFavouriteTopicTags}
 				<ul class="tag-cloud">
 					{foreach from=$aFavouriteTopicTags item=oTag}
@@ -25,7 +25,7 @@
 			{/if}
 		</div>
 		
-		<div id="block_favourite_topic_tags_content_user" style="display: none;">
+		<div class="js-block-favourite-topic-tags-content" data-type="user" style="display: none;">
 			{if $aFavouriteTopicUserTags}
 				<ul class="tag-cloud">
 					{foreach from=$aFavouriteTopicUserTags item=oTag}

templates/skin/developer-jquery/css/blocks.css

@@ -17,8 +17,8 @@
 
 
 /* Block Type - Stream */
-.block.block-type-stream .stream-update 		{ position: absolute; top: 13px; right: 15px; width: 16px; height: 16px; background: url(../images/update.gif) no-repeat; cursor: pointer; }
+.block .block-update 		{ position: absolute; top: 13px; right: 15px; width: 16px; height: 16px; background: url(../images/update.gif) no-repeat; cursor: pointer; }
-.block.block-type-stream .stream-update.active 	{ background-position: -16px 0; }
+.block .block-update.active 	{ background-position: -16px 0; }
 
 
 /* Block Type - Activity Settings */

templates/skin/developer-jquery/js/developer-jquery.js

@@ -18,23 +18,21 @@ jQuery(document).ready(function($){
 	$('#avatar-resize').jqm();
 
 	$('.js-registration-form-show').click(function(){
-		if ($('#block_popup_login_item_registration').length) {
+		if (ls.blocks.switchTab('registration','popup-login')) {
 			$('#window_login_form').jqmShow();
-			$('#block_popup_login_item_registration').trigger('click');
-			return false;
 		} else {
 			window.location=aRouter.registration;
 		}
+		return false;
 	});
 
 	$('.js-login-form-show').click(function(){
-		if ($('#block_popup_login_item_login').length) {
+		if (ls.blocks.switchTab('login','popup-login')) {
 			$('#window_login_form').jqmShow();
-			$('#block_popup_login_item_login').trigger('click');
-			return false;
 		} else {
 			window.location=aRouter.login;
 		}
+		return false;
 	});
 	
 	// Datepicker
@@ -140,35 +138,13 @@ jQuery(document).ready(function($){
  * Подключаем действующие блоки
  */
 jQuery(function($){
-	$('[id^="block_stream_item"]').click(function(){
+	ls.blocks.init('stream',{group_items: true, group_min: 3});
-		ls.blocks.load(this, 'block_stream');
+	ls.blocks.init('blogs');
-		return false;
-	});
 
-	$('[id^="block_blogs_item"]').click(function(){
+	ls.blocks.initSwitch('tags');
-		ls.blocks.load(this, 'block_blogs');
+	ls.blocks.initSwitch('upload-img');
-		return false;
+	ls.blocks.initSwitch('favourite-topic-tags');
-	});
+	ls.blocks.initSwitch('popup-login');
-
-	$('[id^="block_favourite_topic_tags_item"]').click(function(){
-		ls.blocks.switchTab(this, 'block_favourite_topic_tags');
-		return false;
-	});
-
-	$('[id^="block_tags_item"]').click(function(){
-		ls.blocks.switchTab(this, 'block_tags');
-		return false;
-	});
-
-	$('[id^="block_upload_img_item"]').click(function(){
-		ls.blocks.switchTab(this, 'block_upload_img');
-		return false;
-	});
-
-	$('[id^="block_popup_login_item"]').click(function(){
-		ls.blocks.switchTab(this, 'block_popup_login');
-		return false;
-	});
 });
 
 

templates/skin/developer-jquery/window_load_img.tpl

@@ -6,11 +6,11 @@
 	
 	<div class="modal-content">
 		<ul class="nav nav-pills nav-pills-tabs">
-			<li class="active" id="block_upload_img_item_pc"><a href="#">{$aLang.uploadimg_from_pc}</a></li>
+			<li class="active js-block-upload-img-item" data-type="pc"><a href="#">{$aLang.uploadimg_from_pc}</a></li>
-			<li id="block_upload_img_item_link"><a href="#">{$aLang.uploadimg_from_link}</a></li>
+			<li class="js-block-upload-img-item" data-type="link"><a href="#">{$aLang.uploadimg_from_link}</a></li>
 		</ul>
 	
-		<form method="POST" action="" enctype="multipart/form-data" id="block_upload_img_content_pc" onsubmit="return false;" class="tab-content">
+		<form method="POST" action="" enctype="multipart/form-data" id="block_upload_img_content_pc" onsubmit="return false;" class="tab-content js-block-upload-img-content" data-type="pc">
 			<p><label for="img_file">{$aLang.uploadimg_file}:</label>
 			<input type="file" name="img_file" id="img_file" value="" class="input-text input-width-full" /></p>
 			
@@ -36,7 +36,7 @@
 		</form>
 		
 		
-		<form method="POST" action="" enctype="multipart/form-data" id="block_upload_img_content_link" onsubmit="return false;" style="display: none;" class="tab-content">
+		<form method="POST" action="" enctype="multipart/form-data" id="block_upload_img_content_link" onsubmit="return false;" style="display: none;" class="tab-content js-block-upload-img-content" data-type="link">
 			<p><label for="img_file">{$aLang.uploadimg_url}:</label>
 			<input type="text" name="img_url" id="img_url" value="http://" class="input-text input-width-full" /></p>
 

templates/skin/developer-jquery/window_login.tpl

@@ -18,17 +18,17 @@
 		
 		<div class="modal-content">
 			<ul class="nav nav-pills nav-pills-tabs">
-				<li class="active" id="block_popup_login_item_login"><a href="#">{$aLang.user_login_submit}</a></li>
+				<li class="active js-block-popup-login-item" data-type="login"><a href="#">{$aLang.user_login_submit}</a></li>
 				{if !$oConfig->GetValue('general.reg.invite')}
-					<li id="block_popup_login_item_registration"><a href="#">{$aLang.registration}</a></li>
+					<li class="js-block-popup-login-item" data-type="registration"><a href="#">{$aLang.registration}</a></li>
 				{else}
 					<li><a href="{router page='registration'}">{$aLang.registration}</a></li>
 				{/if}
-				<li id="block_popup_login_item_reminder"><a href="#">{$aLang.password_reminder}</a></li>
+				<li class="js-block-popup-login-item" data-type="reminder"><a href="#">{$aLang.password_reminder}</a></li>
 			</ul>
 			
 			
-			<div id="block_popup_login_content_login" class="tab-content">
+			<div class="tab-content js-block-popup-login-content" data-type="login">
 				{hook run='login_popup_begin'}
 				<form action="{router page='login'}" method="post" id="popup-login-form">
 					{hook run='form_login_popup_begin'}
@@ -52,7 +52,7 @@
 
 
 			{if !$oConfig->GetValue('general.reg.invite')}
-			<div id="block_popup_login_content_registration" class="tab-content" style="display:none;">
+			<div data-type="registration" class="tab-content js-block-popup-login-content" style="display:none;">
 				<script type="text/javascript">
 					jQuery(document).ready(function($){
 						$('#popup-registration-form').find('input.js-ajax-validate').blur(function(e){
@@ -122,7 +122,7 @@
 			{/if}
 			
 			
-			<div id="block_popup_login_content_reminder" class="tab-content" style="display:none;">
+			<div data-type="reminder" class="tab-content js-block-popup-login-content" style="display:none;">
 				<script type="text/javascript">
 					jQuery(document).ready(function($){
 						$('#popup-reminder-form').bind('submit',function(){