Added extra up/down buttons for Grid and File Grid to easily move a row up or down by Yulyaswan · Pull Request #5210 · ExpressionEngine/ExpressionEngine · GitHub
Skip to content

Added extra up/down buttons for Grid and File Grid to easily move a row up or down #5210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yulyaswan wants to merge 1 commit into
base: 7.dev
Choose a base branch
from
Open

Added extra up/down buttons for Grid and File Grid to easily move a row up or down #5210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions cp-styles/app/styles/components/_grid-field.scss
View file
Open in desktop
16 changes: 16 additions & 0 deletions system/ee/ExpressionEngine/View/_shared/table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,16 @@ class="grid-field <?php if (isset($vertical_layout)) {
<span class="sr-only"><?=lang('collapse')?></span>
<i class="fal fa-caret-square-up fa-fw"></i>
</a>
<?php if ($reorder): ?>
<button type="button" class="grid-field__item-tool js-grid-move-up" title="<?=lang('move_row_up')?>">
<span class="sr-only"><?=lang('move_row_up')?></span>
<i class="fal fa-arrow-up fa-fw"></i>
</button>
<button type="button" class="grid-field__item-tool js-grid-move-down" title="<?=lang('move_row_down')?>">
<span class="sr-only"><?=lang('move_row_down')?></span>
<i class="fal fa-arrow-down fa-fw"></i>
</button>
<?php endif ?>

<button type="button" data-dropdown-offset="0px, -30px" data-dropdown-pos="bottom-end" class="grid-field__item-tool js-dropdown-toggle"><i class="fal fa-fw fa-cog"></i></button>

Expand Down Expand Up @@ -503,6 +513,12 @@ class="grid-field <?php if (isset($vertical_layout)) {
<button type="button" class="button button--small button--default cursor-move js-grid-reorder-handle">
<span class="grid-field__column-tool"><i class="fal fa-fw fa-arrows-alt"></i></span>
</button>
<button type="button" class="button button--small button--default js-grid-move-up" title="<?=lang('move_row_up')?>">
<span class="grid-field__column-tool" title="<?=lang('move_row_up')?>"><i class="fal fa-fw fa-arrow-up"><span class="hidden"><?=lang('move_row_up')?></span></i></span>
</button>
<button type="button" class="button button--small button--default js-grid-move-down" title="<?=lang('move_row_down')?>">
<span class="grid-field__column-tool" title="<?=lang('move_row_down')?>"><i class="fal fa-fw fa-arrow-down"><span class="hidden"><?=lang('move_row_down')?></span></i></span>
</button>
<?php endif ?>
<button type="button" rel="remove_row" class="button button--small button--default">
<span class="grid-field__column-tool danger-link" title="<?=lang('remove_row')?>"><i class="fal fa-fw fa-trash-alt"><span class="hidden"><?=lang('remove_row')?></span></i></span>
Expand Down
4 changes: 4 additions & 0 deletions system/ee/language/english/content_lang.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -861,6 +861,10 @@

'expand_all' => 'Expand All',

'move_row_up' => 'Move row up',

'move_row_down' => 'Move row down',

'creating_new_in_rel' => 'Creating new entry in <b>#to_channel#</b> for a relationship with <b>#from_channel#</b>',

'creating_member_in_rel' => 'Creating new member for a relationship with <b>#from_channel#</b>',
Expand Down
114 changes: 114 additions & 0 deletions themes/ee/asset/javascript/src/cp/grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1048,6 +1048,60 @@ EE.grid_settings = function(root, settings) {
return new Grid.Settings(root, settings);
};

function getGridMovableRows($tbody) {
return $tbody.children('tr')
.not('.grid-blank-row')
.not('.no-results')
.not('.tbl-action')
.not('.hidden');
}

function updateGridMoveButtons($scope) {
var $tbodies;

if (! $scope || $scope.length === 0) {
$tbodies = $('.grid-field .grid-field__table > tbody');
} else if ($scope.is('tbody')) {
$tbodies = $scope;
} else if ($scope.is('.grid-field')) {
$tbodies = $scope.find('.grid-field__table > tbody');
} else {
$tbodies = $scope.find('.grid-field__table > tbody');
}

$tbodies.each(function() {
var $rows = getGridMovableRows($(this));

$rows.find('.js-grid-move-up, .js-grid-move-down')
.prop('disabled', false)
.attr('aria-disabled', 'false');

if ($rows.length === 0) {
return;
}

$rows.first().find('.js-grid-move-up')
.prop('disabled', true)
.attr('aria-disabled', 'true');

$rows.last().find('.js-grid-move-down')
.prop('disabled', true)
.attr('aria-disabled', 'true');
});
}

function applyGridMoveRow($tbody) {
var $grid = $tbody.closest('.grid-field');
var gridInstance = $grid.data('GridInstance');

if (gridInstance && typeof(gridInstance._updateRowCounter) === 'function') {
gridInstance._updateRowCounter();
}

$(document).trigger('entry:preview');
updateGridMoveButtons($tbody);
}

if (typeof _ !== 'undefined' && EE.grid_cache !== 'undefined') {
_.each(EE.grid_cache, function(args) {
Grid.bind.apply(Grid, args);
Expand All @@ -1057,6 +1111,7 @@ if (typeof _ !== 'undefined' && EE.grid_cache !== 'undefined') {
$(document).ready(function () {
FluidField.on('grid', 'add', function(el) {
EE.grid($('div', el));
updateGridMoveButtons($('div', el));
});

// Toggle grid item
Expand Down Expand Up @@ -1086,6 +1141,7 @@ $(document).ready(function () {

// Hide the dropdown menu
$('.js-dropdown-toggle.dropdown-open').trigger('click');
updateGridMoveButtons($(this).parents('tbody'));

return false;
});
Expand All @@ -1100,9 +1156,67 @@ $(document).ready(function () {

// Hide the dropdown menu
$('.js-dropdown-toggle.dropdown-open').trigger('click');
updateGridMoveButtons($(this).parents('tbody'));

return false;
});

// Move row up
$('body').on('click', '.grid-field .js-grid-move-up', function(event) {
event.preventDefault();

var $row = $(this).closest('tr');
var $tbody = $row.closest('tbody');
var $rows = getGridMovableRows($tbody);
var currentIndex = $rows.index($row);

if (currentIndex <= 0) {
return false;
}

$row.insertBefore($rows.eq(currentIndex - 1));
applyGridMoveRow($tbody);

return false;
});

// Move row down
$('body').on('click', '.grid-field .js-grid-move-down', function(event) {
event.preventDefault();

var $row = $(this).closest('tr');
var $tbody = $row.closest('tbody');
var $rows = getGridMovableRows($tbody);
var currentIndex = $rows.index($row);

if (currentIndex === -1 || currentIndex >= ($rows.length - 1)) {
return false;
}

$row.insertAfter($rows.eq(currentIndex + 1));
applyGridMoveRow($tbody);

return false;
});

// Keep button state in sync when rows are added/removed/sorted
$('body').on('grid:addRow', '.grid-field', function() {
updateGridMoveButtons($(this));
});

$('body').on('click', '.grid-field [rel="remove_row"]', function() {
var $tbody = $(this).closest('tbody');

window.setTimeout(function() {
updateGridMoveButtons($tbody);
}, 0);
});

$('body').on('sortstop', '.grid-field .grid-field__table > tbody', function() {
updateGridMoveButtons($(this));
});

updateGridMoveButtons($('.grid-field'));
});

function checkGridWidthForResize() {
Expand Down
29 changes: 24 additions & 5 deletions themes/ee/cp/css/common.min.css
View file
Open in desktop
Loading