1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-07-01 05:55:02 +03:00

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

This commit is contained in:
Mzhelskiy Maxim 2012-04-22 22:00:59 +04:00
parent 03d9228e0c
commit 7fe2e57df7
10 changed files with 169 additions and 144 deletions

View file

@ -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){
var args = [content,id,result];
ls.ajax(this.options.type[type].url, params, function(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();
var id = $(obj).attr('id');
var idContent=$(obj).attr('id').replace(block+'_item_',block+'_content_');
$('#'+idContent).show();
$('.js-block-'+block+'-content').hide();
$('.js-block-'+block+'-content').each(function(k,v){
if ($(v).data('type')==$(obj).data('type')) {
$(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);

View file

@ -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']);
}
return '';
$sReturn=join('',$aResultHook['template_result']);
}
if (!empty($aParams['assign'])) {
$oSmarty->assign($aParams['assign'], $sReturn);
} else {
return $sReturn;
}
}
?>

View file

@ -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">
<li id="block_blogs_item_top" class="active"><a href="#">{$aLang.block_blogs_top}</a></li>
<ul class="nav nav-pills js-block-blogs-nav">
<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 id="block_blogs_item_self"><a href="#">{$aLang.block_blogs_self}</a></li>
<li class="js-block-blogs-item" data-type="join"><a href="#">{$aLang.block_blogs_join}</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>

View file

@ -1,79 +1,30 @@
<script type="text/javascript">
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">
<section class="block block-type-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">
<li id="block_stream_item_comment" class="active"><a href="#">{$aLang.block_stream_comments}</a></li>
<li id="block_stream_item_topic"><a href="#">{$aLang.block_stream_topics}</a></li>
{hook run='block_stream_nav_item'}
<ul class="nav nav-pills js-block-stream-nav" {if $sItemsHook}style="display: none;"{/if}>
<li class="active js-block-stream-item" data-type="comment"><a href="#">{$aLang.block_stream_comments}</a></li>
<li class="js-block-stream-item" data-type="topic"><a href="#">{$aLang.block_stream_topics}</a></li>
{$sItemsHook}
</ul>
<ul class="nav nav-pills" id="block-stream-nav-dropdown" style="display: none">
<li class="dropdown active" id="dropdown-stream-trigger"><a href="#">{$aLang.block_stream_comments}</a> <i class="arrow"></i>
<ul class="dropdown-menu" id="dropdown-stream-menu">
<li id="block_stream_item_comment" class="active"><a href="#">{$aLang.block_stream_comments}</a></li>
<li id="block_stream_item_topic"><a href="#">{$aLang.block_stream_topics}</a></li>
{hook run='block_stream_nav_item'}
<ul class="nav nav-pills js-block-stream-dropdown" {if !$sItemsHook}style="display: none;"{/if}>
<li class="dropdown active js-block-stream-dropdown-trigger"><a href="#">{$aLang.block_stream_comments}</a> <i class="arrow"></i>
<ul class="dropdown-menu js-block-stream-dropdown-items">
<li class="active js-block-stream-item" data-type="comment"><a href="#">{$aLang.block_stream_comments}</a></li>
<li class="js-block-stream-item" data-type="topic"><a href="#">{$aLang.block_stream_topics}</a></li>
{$sItemsHook}
</ul>
</li>
</ul>
<div id="block_stream_content">
<div class="js-block-stream-content">
{$sStreamComments}
</div>
</div>

View file

@ -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}

View file

@ -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 id="block_favourite_topic_tags_item_user"><a href="#">{$aLang.topic_favourite_tags_block_user}</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 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}

View file

@ -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-type-stream .stream-update.active { background-position: -16px 0; }
.block .block-update { position: absolute; top: 13px; right: 15px; width: 16px; height: 16px; background: url(../images/update.gif) no-repeat; cursor: pointer; }
.block .block-update.active { background-position: -16px 0; }
/* Block Type - Activity Settings */

View file

@ -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.load(this, 'block_stream');
return false;
});
ls.blocks.init('stream',{group_items: true, group_min: 3});
ls.blocks.init('blogs');
$('[id^="block_blogs_item"]').click(function(){
ls.blocks.load(this, 'block_blogs');
return false;
});
$('[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;
});
ls.blocks.initSwitch('tags');
ls.blocks.initSwitch('upload-img');
ls.blocks.initSwitch('favourite-topic-tags');
ls.blocks.initSwitch('popup-login');
});

View file

@ -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 id="block_upload_img_item_link"><a href="#">{$aLang.uploadimg_from_link}</a></li>
<li class="active js-block-upload-img-item" data-type="pc"><a href="#">{$aLang.uploadimg_from_pc}</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>

View file

@ -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(){