Skip to content

GitLab

Commit 6cee4292 authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic Committed by Robert Lyon
Browse files

Bug 1813987: allow to choose add block to bottom/top of the grid 

- Also removed code in the pop-up for adding a new block to a page:
The js functions that update the select to choose the position
of a new block inside a column were removed.

behatnotneeded

Change-Id: Ie20f7bbfc98c6b9f4a61f291fcaf23d368d077e0
parent 2c861ec1
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 177 deletions
htdocs/js/views.js
View file @ 6cee4292
......@@ -291,7 +291,7 @@
});
var serializeWidgetMap = function(items) {
// conseguir el id del bloque
// get the block id
// json call to update new position and/or dimension
var i;
if (typeof(items) != 'undefined') {
......@@ -470,54 +470,67 @@
if (isHit(e) && !$('#addblock').hasClass('in')) {
e.stopPropagation();
e.preventDefault();
if (!addblockstarted) {
addblockstarted = true;
addNewBlock($(this).find('.blocktype-radio').val());
}
startAddBlock($(this));
}
});
}
function cellChanged() {
$(this).closest('.js-cell-chooser').find('.active').removeClass('active');
$(this).parent().addClass('active');
var position = $(this).val().split('-'),
element = workspace.find('.js-col-row').eq(parseInt(position[0], 10) - 1).find('.column').eq(parseInt(position[1], 10) - 1),
options = [get_string('blockordertopcell')],
selectbox = $('#newblock_position');
element.find('.column-content .blockinstance .blockinstance-header').each(function() {
options.push(get_string('blockorderafter', 'view', $(this).html()));
});
var addblockstarted = false; // To stop the double clicking of add block button causing multiple saving problem
function startAddBlock(element) {
var addblockdialog = $('#addblock');
addblockdialog.modal('show');
if (!addblockstarted) {
addblockstarted = true;
addblockdialog.one('dialog.end', function(event, options) {
if (options.saved) {
addNewBlock(options.position, element.find('.blocktype-radio').val());
}
else {
element.trigger("focus");
}
});
addblockdialog.find('h4.modal-title').text(get_string('addnewblock', 'view', element.text()));
addblockdialog.find('.block-inner').removeClass('d-none');
selectbox.html('<option>' + options.join('</option><option>') + '</option>');
}
addblockdialog.find('.deletebutton').trigger("focus");
keytabbinginadialog(addblockdialog, addblockdialog.find('.deletebutton'), addblockdialog.find('.cancel'));
}
}
var addblockstarted = false; // To stop the double clicking of add block button causing multiple saving problem
function addNewBlock(blocktype) {
function addNewBlock(whereTo, blocktype) {
addblockstarted = false;
var pd = {
'id': $('#viewid').val(),
'change': 1,
'blocktype': blocktype
'blocktype': blocktype,
'positionx': 0,
'positiony': 0,
};
if (config.blockeditormaxwidth) {
pd['cfheight'] = $(window).height() - 100;
}
pd['action_addblocktype_positionx_0_positiony_0_width_3_height_3'] = true;// The default 3x3 block at position 0,0
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) {
if (whereTo == 'bottom') {
var grid = $('.grid-stack').data('gridstack');
pd['positiony'] = grid.grid.getGridHeight();
}
pd['action_addblocktype_positionx_' + pd['positionx'] + '_positiony_' + pd['positiony'] + '_width_' + '3'+ '_height_' + '3'] = true;
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) {
var div = $('<div>').html(data.data.display.html),
blockinstance = div.find('div.grid-stack-item'),
configureButton = blockinstance.find('.configurebutton');
configureButton = blockinstance.find('.configurebutton'),
dimensions = {
x: blockinstance[0].getAttribute('data-gs-x'),
y: blockinstance[0].getAttribute('data-gs-y'),
}
addBlockCss(data.css);
var grid = $('.grid-stack').data('gridstack');
addNewWidget(blockinstance, grid);
addNewWidget(blockinstance, grid, dimensions);
if (data.data.configure) {
showDock($('#configureblock'), true);
......@@ -527,12 +540,10 @@
rewriteDeleteButton(blockinstance.find('.deletebutton'));
blockinstance.find('.deletebutton').trigger("focus");
}
addblockstarted = false;
},
function() {
// On error callback we need to reset the Dock
hideDock();
addblockstarted = false;
});
}
......@@ -635,71 +646,6 @@
});
}
function computeColumnInputs(dialog) {
var inputcontainer = dialog.find('.blockinstance-content #newblock_cellchooser_container'),
result = $('<div>').addClass('cell-chooser js-cell-chooser'),
firstcell,
rows = workspace.find('.js-col-row'),
i,
j,
row,
cols,
radios,
label,
value,
radio;
for(i = 0; i < rows.length; i = i + 1){
row = $('<div class="cell-row">');
cols = $(rows[i]).find('.column');
radios = [];
for(j = 0; j < cols.length; j = j + 1){
value = (i + 1) + '-' + (j + 1); //rowNumber-colNumber
radio = $('<input>').attr({
'type': 'radio',
'style': $(cols[j]).attr('style'),
'id': 'cellchooser_' + value,
'name': 'cellchooser',
'value': value
});
label = $('<label>').addClass('cell').attr('for', 'cellchooser_' + value).attr('style', $(cols[j]).attr('style'));
label.append(radio)
.append($('<span>').addClass('pseudolabel mll').html(get_string('cellposition', 'view', i + 1, j + 1)));
row.append(label);
radio.on('change', cellChanged);
radio.on('focus', function() {
$(this).parent().addClass('focused');
});
radio.on('blur', function() {
$(this).parent().removeClass('focused');
});
}
result.append(row);
}
dialog.find('.dock-loading').remove();
inputcontainer.html('').append(result);
firstcell = inputcontainer.find('input').first();
firstcell.prop('checked', true);
cellChanged.call(firstcell);
}
function moveBlock(id, whereTo) {
var pd = {
'id': $('#viewid').val(),
......@@ -759,26 +705,11 @@
$('#newblock .submit').on('click keydown', function(e) {
if (isHit(e)) {
var position = $('#newblock .cell-chooser input:checked').val().split('-'),
order = $('#newblock_position').prop('selectedIndex') + 1;
closePositionBlockDialog(e, {
'saved': true,
'row': position[0], 'column': position[1], 'order': order
});
}
});
// To allow for pushing enter button when on selecting the 'cell' column line
$('#newblock').on('keydown', function(e) {
if (e.keyCode == 13) {
var position = $('#newblock .cell-chooser input:checked').val().split('-'),
order = $('#newblock_position').prop('selectedIndex') + 1;
var position = $('#newblock_position').prop('selectedIndex');
closePositionBlockDialog(e, {
'saved': true,
'row': position[0], 'column': position[1], 'order': order
'position': (position == 0 ? 'top' : 'bottom'),
});
}
});
......@@ -1053,10 +984,10 @@ function wire_blockoptions() {
}
/* GRIDSTACK functions */
function addNewWidget(blockContent, grid) {
function addNewWidget(blockContent, grid, dimensions) {
var node = {
x: 0,
y: 0,
x: dimensions.x,
y: dimensions.y,
width: 3,
height: 3
};
......
htdocs/lang/en.utf8/view.php
View file @ 6cee4292
......@@ -311,10 +311,7 @@ $string['blockchangedbackerror'] = "Changing block back to placeholder block fai
$string['addblock'] = 'Add block: %s';
$string['blockcell'] = 'Cell';
$string['cellposition'] = 'Row %s Column %s';
$string['blockorder'] = 'Position';
$string['blockordertopcell'] = 'Top of cell';
$string['blockorderafter'] = 'After "%s"';
$string['rownr'] = 'Row %s';
$string['nrrows'] = array(
'%s row',
......@@ -514,3 +511,7 @@ $string['versionnumber'] = 'Version %s';
$string['gotonextversion'] = 'Go to the next version ';
$string['gotopreviousversion'] = 'Go to the previous version';
$string['loadingtimelinecontent'] = 'Loading timeline for "%s". If the page has many versions, this may take a while.';
// layout
$string['bottom'] = 'Bottom';
$string['top'] = 'Top';
htdocs/theme/raw/sass/components/_cells.scss
View file @ 6cee4292
......@@ -10,44 +10,3 @@
padding-top: 0;
}
}
#addblock_cellchooser_container {
padding-top: 0;
}
.cell-chooser {
.cell-row {
min-width: 0;
width: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
padding: 5px 0;
.cell {
min-width: 0;
float: left;
background-color: $gray-100;
border: 1px solid scale-color($gray-100, $lightness: -5.5%);
margin: 2% 2% 0 0;
&.active {
background-color: scale-color($gray-100, $lightness: -10.5%);
}
input {
display: inline;
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
min-width: 0;
}
&:last-of-type {
margin-right: 0;
}
}
.pseudolabel {
@extend .sr-only;
}
}
}
htdocs/view/blocks.php
View file @ 6cee4292
......@@ -184,25 +184,10 @@ $addform = pieform(array(
'autofocus' => false,
'class' => 'cell-radios',
'elements' => array(
'blocklegend' => array(
'type' => 'fieldset',
'elements' => array(
'celltitle' => array(
'type' => 'markup',
'value'=> '<legend>' . get_string('celltitle', 'view') . '</legend>',
),
'cellchooser' => array(
'type' => 'radio',
'class' => 'fullwidth',
'rowsize' => 2,
'options' => array('R1C1', 'R1C2', 'R2C1'),
),
),
),
'position' => array(
'type' => 'select',
'title' => get_string('blockorder', 'view'),
'options' => array('Top', 'After 1', 'After 2'),
'options' => array(get_string('top', 'view'), get_string('bottom', 'view')),
),
'submit' => array(
'type' => 'submitcancel',
......@@ -231,9 +216,6 @@ if ($placeholderblock) {
$smarty = smarty($javascript, $stylesheets, array(
'view' => array(
'addnewblock',
'cellposition',
'blockordertopcell',
'blockorderafter',
'moveblock',
),
), $extraconfig);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment