Julian/phpbb_board3-portal_tlw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[ticket/102] Ajaxify moving modules up and down

Browse Source 
The complete moving process for moving a module up or down now works with
AJAX. Images are properly changing as one would expect.

B3P-102
This commit is contained in:
Marc Alexander
2014-04-08 12:38:40 +02:00
parent 6692d4f71e
commit c603e32b19
2 changed files with 101 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
adm/style/portal/acp_portal_modules.html
View File

@@ -57,8 +57,10 @@
<td colspan="3">
{modules_top.MODULE_IMAGE} {modules_top.MODULE_NAME}<br />
<br />
<!-- IF modules_top.S_FIRST_ROW -->{ICON_MOVE_UP_DISABLED}<!-- ELSE --><a href="{modules_top.U_MOVE_UP}">{ICON_MOVE_UP}</a><!-- ENDIF -->&nbsp;
<!-- IF modules_top.S_LAST_ROW -->{ICON_MOVE_DOWN_DISABLED}<!-- ELSE --><a href="{modules_top.U_MOVE_DOWN}">{ICON_MOVE_DOWN}</a><!-- ENDIF -->&nbsp;
<span<!-- IF not modules_top.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_UP_DISABLED}&nbsp;</span>
<span<!-- IF modules_top.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_top.U_MOVE_UP}" data-ajax="b3p_move_module_up">{ICON_MOVE_UP}</a>&nbsp;</span>
<span<!-- IF not modules_top.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_DOWN_DISABLED}&nbsp;</span>
<span<!-- IF modules_top.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_top.U_MOVE_DOWN}" data-ajax="b3p_move_module_down">{ICON_MOVE_DOWN}</a>&nbsp;</span>
<a href="{modules_top.U_EDIT}">{ICON_EDIT}</a> <a href="{modules_top.U_DELETE}">{ICON_DELETE}</a>
</td>
</tr>
@@ -84,11 +86,13 @@
<td>
{modules_left.MODULE_IMAGE} {modules_left.MODULE_NAME}<br />
<br />
<!-- IF modules_left.S_FIRST_ROW -->{ICON_MOVE_UP_DISABLED}<!-- ELSE --><a href="{modules_left.U_MOVE_UP}">{ICON_MOVE_UP}</a><!-- ENDIF -->&nbsp;
<span<!-- IF not modules_left.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_UP_DISABLED}&nbsp;</span>
<span<!-- IF modules_left.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_left.U_MOVE_UP}" data-ajax="b3p_move_module_up">{ICON_MOVE_UP}</a>&nbsp;</span>
<!-- IF modules_left.U_MOVE_RIGHT --><a href="{modules_left.U_MOVE_RIGHT}"><!-- IF S_CONTENT_DIRECTION eq 'rtl' -->{ICON_MOVE_LEFT}<!-- ELSE -->{ICON_MOVE_RIGHT}<!-- ENDIF --></a><!-- ELSE --><!-- IF S_CONTENT_DIRECTION eq 'rtl' -->{ICON_MOVE_LEFT_DISABLED}<!-- ELSE -->{ICON_MOVE_RIGHT_DISABLED}<!-- ENDIF --><!-- ENDIF -->&nbsp;
<a href="{modules_left.U_EDIT}">{ICON_EDIT}</a> <a href="{modules_left.U_DELETE}">{ICON_DELETE}</a><br />
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->{ICON_MOVE_RIGHT_DISABLED}<!-- ELSE -->{ICON_MOVE_LEFT_DISABLED}<!-- ENDIF -->&nbsp;
<!-- IF modules_left.S_LAST_ROW -->{ICON_MOVE_DOWN_DISABLED}<!-- ELSE --><a href="{modules_left.U_MOVE_DOWN}">{ICON_MOVE_DOWN}</a><!-- ENDIF -->
<span<!-- IF not modules_left.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_DOWN_DISABLED}&nbsp;</span>
<span<!-- IF modules_left.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_left.U_MOVE_DOWN}" data-ajax="b3p_move_module_down">{ICON_MOVE_DOWN}</a></span>
</td>
</tr>
<!-- BEGINELSE -->
@@ -111,11 +115,13 @@
<td>
{modules_center.MODULE_IMAGE} {modules_center.MODULE_NAME}<br />
<br />
<!-- IF modules_center.S_FIRST_ROW -->{ICON_MOVE_UP_DISABLED}<!-- ELSE --><a href="{modules_center.U_MOVE_UP}" data-ajax="b3p_move_module_up">{ICON_MOVE_UP}</a><!-- ENDIF -->&nbsp;
<span<!-- IF not modules_center.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_UP_DISABLED}&nbsp;</span>
<span<!-- IF modules_center.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_center.U_MOVE_UP}" data-ajax="b3p_move_module_up">{ICON_MOVE_UP}</a>&nbsp;</span>
<!-- IF modules_center.U_MOVE_RIGHT --><a href="{modules_center.U_MOVE_RIGHT}">{ICON_MOVE_RIGHT}</a><!-- ELSE -->{ICON_MOVE_RIGHT_DISABLED}<!-- ENDIF -->&nbsp;
<a href="{modules_center.U_EDIT}">{ICON_EDIT}</a> <a href="{modules_center.U_DELETE}">{ICON_DELETE}</a><br />
<!-- IF modules_center.U_MOVE_LEFT --><a href="{modules_center.U_MOVE_LEFT}">{ICON_MOVE_LEFT}</a><!-- ELSE -->{ICON_MOVE_LEFT_DISABLED}<!-- ENDIF -->&nbsp;
<!-- IF modules_center.S_LAST_ROW -->{ICON_MOVE_DOWN_DISABLED}<!-- ELSE --><a href="{modules_center.U_MOVE_DOWN}">{ICON_MOVE_DOWN}</a><!-- ENDIF -->
<span<!-- IF not modules_center.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_DOWN_DISABLED}&nbsp;</span>
<span<!-- IF modules_center.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_center.U_MOVE_DOWN}" data-ajax="b3p_move_module_down">{ICON_MOVE_DOWN}</a></span>
</td>
</tr>
<!-- BEGINELSE -->
@@ -138,11 +144,13 @@
<td>
{modules_right.MODULE_IMAGE} {modules_right.MODULE_NAME}<br />
<br />
<!-- IF modules_right.S_FIRST_ROW -->{ICON_MOVE_UP_DISABLED}<!-- ELSE --><a href="{modules_right.U_MOVE_UP}">{ICON_MOVE_UP}</a><!-- ENDIF -->&nbsp;
<span<!-- IF not modules_right.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_UP_DISABLED}&nbsp;</span>
<span<!-- IF modules_right.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_right.U_MOVE_UP}" data-ajax="b3p_move_module_up">{ICON_MOVE_UP}</a>&nbsp;</span>
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->{ICON_MOVE_LEFT_DISABLED}<!-- ELSE -->{ICON_MOVE_RIGHT_DISABLED}<!-- ENDIF -->&nbsp;
<a href="{modules_right.U_EDIT}">{ICON_EDIT}</a> <a href="{modules_right.U_DELETE}">{ICON_DELETE}</a><br />
<!-- IF modules_right.U_MOVE_LEFT --><a href="{modules_right.U_MOVE_LEFT}"><!-- IF S_CONTENT_DIRECTION eq 'rtl' -->{ICON_MOVE_RIGHT}<!-- ELSE -->{ICON_MOVE_LEFT}<!-- ENDIF --></a><!-- ELSE --><!-- IF S_CONTENT_DIRECTION eq 'rtl' -->{ICON_MOVE_RIGHT_DISABLED}<!-- ELSE -->{ICON_MOVE_LEFT_DISABLED}<!-- ENDIF --><!-- ENDIF -->&nbsp;
<!-- IF modules_right.S_LAST_ROW -->{ICON_MOVE_DOWN_DISABLED}<!-- ELSE --><a href="{modules_right.U_MOVE_DOWN}">{ICON_MOVE_DOWN}</a><!-- ENDIF -->
<span<!-- IF not modules_right.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_DOWN_DISABLED}&nbsp;</span>
<span<!-- IF modules_right.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_right.U_MOVE_DOWN}" data-ajax="b3p_move_module_down">{ICON_MOVE_DOWN}</a></span>
</td>
</tr>
<!-- BEGINELSE -->
@@ -168,8 +176,10 @@
<td colspan="3">
{modules_bottom.MODULE_IMAGE} {modules_bottom.MODULE_NAME}<br />
<br />
<!-- IF modules_bottom.S_FIRST_ROW -->{ICON_MOVE_UP_DISABLED}<!-- ELSE --><a href="{modules_bottom.U_MOVE_UP}">{ICON_MOVE_UP}</a><!-- ENDIF -->&nbsp;
<!-- IF modules_bottom.S_LAST_ROW -->{ICON_MOVE_DOWN_DISABLED}<!-- ELSE --><a href="{modules_bottom.U_MOVE_DOWN}">{ICON_MOVE_DOWN}</a><!-- ENDIF -->&nbsp;
<span<!-- IF not modules_bottom.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_UP_DISABLED}&nbsp;</span>
<span<!-- IF modules_bottom.S_FIRST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_bottom.U_MOVE_UP}" data-ajax="b3p_move_module_up">{ICON_MOVE_UP}</a>&nbsp;</span>
<span<!-- IF not modules_bottom.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->>{ICON_MOVE_DOWN_DISABLED}&nbsp;</span>
<span<!-- IF modules_bottom.S_LAST_ROW --> style="display: none;"<!-- ENDIF -->><a href="{modules_bottom.U_MOVE_DOWN}" data-ajax="b3p_move_module_down">{ICON_MOVE_DOWN}</a>&nbsp;</span>
<a href="{modules_bottom.U_EDIT}">{ICON_EDIT}</a> <a href="{modules_bottom.U_DELETE}">{ICON_DELETE}</a>
</td>
</tr>

81
adm/style/portal/ajax.js Normal file
View File

@@ -0,0 +1,81 @@
(function($) { // Avoid conflicts with other libraries
"use strict";
/**
* The following callbacks are for reording items. row_down
* is triggered when an item is moved down, and row_up is triggered when
* an item is moved up. It moves the row up or down, and deactivates /
* activates any up / down icons that require it (the ones at the top or bottom).
*/
phpbb.addAjaxCallback('b3p_move_module_up', function(res) {
if (typeof res.success === 'undefined' || !res.success) {
return;
}
var el = $(this).parents('tr:first'),
trSwap = el.prev(),
elClass = trSwap.attr('class'),
trSwapClass = el.attr('class');
el.insertBefore(trSwap);
el.attr('class', elClass);
trSwap.attr('class', trSwapClass);
// Swap images if swap element is first row
var swapIsFirstRow = trSwap.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();
}
// Swap images if move element is last row
var elIsLastRow = el.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();
}
});
phpbb.addAjaxCallback('b3p_move_module_down', function(res) {
if (typeof res.success === 'undefined' || !res.success) {
return;
}
var el = $(this).parents('tr:first'),
trSwap = el.next(),
elClass = trSwap.attr('class'),
trSwapClass = el.attr('class');
el.insertAfter(trSwap);
el.attr('class', elClass);
trSwap.attr('class', trSwapClass);
// Swap images if swap element is last row
var swapIsLastRow = trSwap.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();
}
// Swap images if move element is first row
var elIsFirstRow = el.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();
}
});
})(jQuery); // Avoid conflicts with other libraries