Merge pull request #579 from marc1706/ticket/578

[ticket/578] Correctly assign classes to elements upon deleting/moving modules
This commit is contained in:
Marc Alexander
2015-06-06 23:03:20 +02:00
3 changed files with 104 additions and 50 deletions

View File

@@ -13,33 +13,39 @@ phpbb.addAjaxCallback('b3p_move_module_up', function(res) {
return;
}
var el = $(this).parents('tr:first'),
trSwap = el.prev(),
elClass = trSwap.attr('class'),
trSwapClass = el.attr('class');
var $bottomRow = $(this).parents('tr:first'),
$topRow = $bottomRow.prev(),
topRowClass = $topRow.attr('class'),
bottomRowClass = $bottomRow.attr('class');
el.insertBefore(trSwap);
el.attr('class', elClass);
trSwap.attr('class', trSwapClass);
$bottomRow.insertBefore($topRow);
if (bottomRowClass !== 'row3' && topRowClass !== 'row3') {
$bottomRow.attr('class', topRowClass);
$topRow.attr('class', bottomRowClass);
} else if (bottomRowClass === 'row3') {
$topRow.attr('class', (topRowClass === 'row1') ? 'row2' : 'row1');
} else if (topRowClass === 'row3') {
$bottomRow.attr('class', (bottomRowClass === 'row1') ? 'row2' : 'row1');
}
// Swap images if swap element is first row
var swapIsFirstRow = trSwap.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible');
var swapIsFirstRow = $topRow.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible');
if (swapIsFirstRow) {
trSwap.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
trSwap.find('img[src*="icon_up."]').parents('span:first').toggle();
el.find('img[src*="icon_up."]').parents('span:first').toggle();
el.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
$topRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
$topRow.find('img[src*="icon_up."]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_up."]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
}
// Swap images if move element is last row
var elIsLastRow = el.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible');
var elIsLastRow = $bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible');
if (elIsLastRow) {
trSwap.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
trSwap.find('img[src*="icon_down."]').parents('span:first').toggle();
el.find('img[src*="icon_down."]').parents('span:first').toggle();
el.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
$topRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
$topRow.find('img[src*="icon_down."]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_down."]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
}
});
@@ -48,33 +54,39 @@ phpbb.addAjaxCallback('b3p_move_module_down', function(res) {
return;
}
var el = $(this).parents('tr:first'),
trSwap = el.next(),
elClass = trSwap.attr('class'),
trSwapClass = el.attr('class');
var $topRow = $(this).parents('tr:first'),
$bottomRow = $topRow.next(),
bottomRowClass = $bottomRow.attr('class'),
topRowClass = $topRow.attr('class');
el.insertAfter(trSwap);
el.attr('class', elClass);
trSwap.attr('class', trSwapClass);
$topRow.insertAfter($bottomRow);
if (bottomRowClass !== 'row3' && topRowClass !== 'row3') {
$bottomRow.attr('class', topRowClass);
$topRow.attr('class', bottomRowClass);
} else if (bottomRowClass === 'row3') {
$topRow.attr('class', (topRowClass === 'row1') ? 'row2' : 'row1');
} else if (topRowClass === 'row3') {
$bottomRow.attr('class', (bottomRowClass === 'row1') ? 'row2' : 'row1');
}
// Swap images if swap element is last row
var swapIsLastRow = trSwap.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible');
var swapIsLastRow = $bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible');
if (swapIsLastRow) {
trSwap.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
trSwap.find('img[src*="icon_down."]').parents('span:first').toggle();
el.find('img[src*="icon_down."]').parents('span:first').toggle();
el.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_down."]').parents('span:first').toggle();
$topRow.find('img[src*="icon_down."]').parents('span:first').toggle();
$topRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle();
}
// Swap images if move element is first row
var elIsFirstRow = el.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible');
var elIsFirstRow = $topRow.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible');
if (elIsFirstRow) {
trSwap.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
trSwap.find('img[src*="icon_up."]').parents('span:first').toggle();
el.find('img[src*="icon_up."]').parents('span:first').toggle();
el.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
$bottomRow.find('img[src*="icon_up."]').parents('span:first').toggle();
$topRow.find('img[src*="icon_up."]').parents('span:first').toggle();
$topRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle();
}
});
@@ -83,16 +95,20 @@ phpbb.addAjaxCallback('b3p_delete_module', function(res) {
return;
}
var el = $(this).parents('tr:first'),
nextEl = el.next();
var $deletedRow = $(this).parents('tr:first'),
$nextRow = $deletedRow.next();
el.remove();
$deletedRow.remove();
// Fix classes of next elements
while (nextEl !== undefined && nextEl.is('tr')) {
var nextElClass = (nextEl.attr('class') === 'row1') ? 'row2' : 'row1';
nextEl.attr('class', nextElClass);
nextEl = nextEl.next();
while ($nextRow !== undefined && $nextRow.is('tr')) {
var nextRowClass = ($nextRow.attr('class') === 'row1') ? 'row2' : 'row1';
if ($nextRow.attr('class') !== 'row3') {
$nextRow.attr('class', nextRowClass);
}
$nextRow = $nextRow.next();
}
});

View File

@@ -18,31 +18,69 @@ var portal_right_width;
* the center column but rather right after the last module of the left column.
*/
phpbb.b3p_fix_right_column_margin = function() {
var width = $(window).width();
var $portal_right = $('#portal-right');
var $portal_left = $('#portal-left');
var $portal_center = $('#portal-center');
var width = $(window).width(),
$portal_right = $('#portal-right'),
$portal_left = $('#portal-left'),
$portal_center = $('#portal-center'),
marginLeft = 'margin-left',
marginRight = 'margin-right';
if ($('body').hasClass('rtl')) {
marginLeft = marginRight;
marginRight = 'margin-left';
}
if (width <= (895 - $.getScrollbarWidth())) {
// Get correct margin-left for portal-right and add 10px for padding
if ($portal_left.width() > 0) {
$portal_right.css('margin-left', - ($portal_right.width() + 1));
if (!$portal_center.length && $portal_left.length) {
$portal_right.css(marginLeft, 5);
$portal_left.css(marginRight, 0);
} else {
$portal_right.css(marginLeft, - ($portal_right.width() + 1));
}
$portal_right.css('margin-top', $portal_center.height() + 'px');
$portal_left.css('margin-top', $portal_center.height() + 'px');
} else {
$portal_right.css('margin-left', 0);
$portal_right.css(marginLeft, 0);
$portal_right.css('margin-top', 0);
}
} else {
$portal_right.css('margin-top', '0px');
$portal_right.css('margin-left', -portal_right_width);
if (!$portal_center.length && $portal_left.length) {
$portal_right.css(marginLeft, 0);
} else {
$portal_right.css(marginLeft, -portal_right_width);
}
$portal_right.width(portal_right_width);
$portal_left.css('margin-top', 0);
phpbb.b3pFixLeftColumnMargin();
}
};
/**
* Correctly align left column if center column does not exist
*/
phpbb.b3pFixLeftColumnMargin = function() {
var $portalLeft = $('#portal-left'),
marginLeft = 'margin-left',
marginRight = 'margin-right';
if ($('body').hasClass('rtl')) {
marginLeft = marginRight;
marginRight = 'margin-left';
}
if ($portalLeft.length && !$('#portal-center').length) {
$portalLeft.css(marginLeft, '0');
$portalLeft.css(marginRight, 10);
}
};
$(document).ready(function() {
portal_right_width = $('#portal-right').width();
portal_right_width = $('#portal-right').attr('data-width');
phpbb.b3pFixLeftColumnMargin();
phpbb.b3p_fix_right_column_margin();
$(window).resize(function() {
phpbb.b3p_fix_right_column_margin();

View File

@@ -71,7 +71,7 @@
<!-- [+] right module area -->
<!-- IF S_RIGHT_COLUMN -->
<div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: -{S_PORTAL_RIGHT_COLUMN}px;" role="gridcell">
<div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: -{S_PORTAL_RIGHT_COLUMN}px;" data-width="{S_PORTAL_RIGHT_COLUMN}" role="gridcell">
<!-- BEGIN modules_right -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->