Commit 66c08ce0 authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic Committed by Robert Lyon

Bug 1813987: Making magic block work with gridstack layout

In view edit mode, dragging the button '+' on the
right top menu, will add a block in the page
with dimensions height=3 and width=4

behatnotneeded

Change-Id: I5f4334886f6685bd047cb5bfbf0d59dd3880109a
parent 15bca1e7
...@@ -311,6 +311,8 @@ ...@@ -311,6 +311,8 @@
}; };
$('.grid-stack').on('change', function(event, items) { $('.grid-stack').on('change', function(event, items) {
event.stopPropagation();
event.preventDefault();
serializeWidgetMap(items); serializeWidgetMap(items);
}) })
...@@ -445,22 +447,36 @@ ...@@ -445,22 +447,36 @@
$('.blocktype-drag').draggable({ $('.blocktype-drag').draggable({
start: function(event, ui) { start: function(event, ui) {
$(this).attr('data-gs-width', 4);
$(this).attr('data-gs-height', 3);
}, },
helper: function(event) { helper: function(event) {
var original = $(this), var original = $(this),
helper = $("<div />").append(original.clone()); helper = $("<div />").append(original.clone());
helper.find('label span').removeClass('hidden'); helper.find('label span').removeClass('hidden');
helper.children().each(function(index) { helper.children().each(function(index) {
// Set helper cell sizes to match at least the original sizes // Set helper cell sizes to match at least the original sizes
$(this).css('min-width', '200px'); $(this).css('min-width', '200px');
}); });
return helper; // show dotted line with correct dimensions when dragging placeholder block
var node = {width: 4, height: 3};
$(this).data('_gridstack_node', node);
return helper;
}, },
connectToSortable: '.js-col-row .column .column-content', connectToSortable: '.grid-stack',
stop: function(event, ui) { stop: function(event, ui) {
var placeholder = $('.grid-stack').children().last(),
x = placeholder.attr('data-gs-x'),
y = placeholder.attr('data-gs-y');
$(placeholder).remove();
$('.grid-stack .blocktype-drag').removeClass('btn btn-primary');
addNewBlock({'positionx': x, 'positiony': y}, 'placeholder');
}, },
appendTo: 'body' appendTo: 'body',
}); });
$('.blocktype-drag').off('click keydown'); // remove old event handlers $('.blocktype-drag').off('click keydown'); // remove old event handlers
...@@ -477,26 +493,26 @@ ...@@ -477,26 +493,26 @@
var addblockstarted = false; // To stop the double clicking of add block button causing multiple saving problem var addblockstarted = false; // To stop the double clicking of add block button causing multiple saving problem
function startAddBlock(element) { function startAddBlock(element) {
var addblockdialog = $('#addblock'); var addblockdialog = $('#addblock');
addblockdialog.modal('show'); addblockdialog.modal('show');
if (!addblockstarted) { if (!addblockstarted) {
addblockstarted = true; addblockstarted = true;
addblockdialog.one('dialog.end', function(event, options) { addblockdialog.one('dialog.end', function(event, options) {
if (options.saved) { if (options.saved) {
addNewBlock(options.position, element.find('.blocktype-radio').val()); addNewBlock(options.position, element.find('.blocktype-radio').val());
} }
else { else {
element.trigger("focus"); element.trigger("focus");
} }
}); });
addblockdialog.find('h4.modal-title').text(get_string('addnewblock', 'view', element.text())); addblockdialog.find('h4.modal-title').text(get_string('addnewblock', 'view', element.text()));
addblockdialog.find('.block-inner').removeClass('d-none'); addblockdialog.find('.block-inner').removeClass('d-none');
addblockdialog.find('.deletebutton').trigger("focus"); addblockdialog.find('.deletebutton').trigger("focus");
keytabbinginadialog(addblockdialog, addblockdialog.find('.deletebutton'), addblockdialog.find('.cancel')); keytabbinginadialog(addblockdialog, addblockdialog.find('.deletebutton'), addblockdialog.find('.cancel'));
}
} }
}
function addNewBlock(whereTo, blocktype) { function addNewBlock(whereTo, blocktype) {
addblockstarted = false; addblockstarted = false;
...@@ -516,8 +532,16 @@ ...@@ -516,8 +532,16 @@
var grid = $('.grid-stack').data('gridstack'); var grid = $('.grid-stack').data('gridstack');
pd['positiony'] = grid.grid.getGridHeight(); pd['positiony'] = grid.grid.getGridHeight();
} }
else {
if (typeof(whereTo['positionx']) !== 'undefined') {
pd['positionx'] = whereTo['positionx'];
}
if (typeof(whereTo['positiony']) !== 'undefined') {
pd['positiony'] = whereTo['positiony'];
}
}
pd['action_addblocktype_positionx_' + pd['positionx'] + '_positiony_' + pd['positiony'] + '_width_' + '3'+ '_height_' + '3'] = true; pd['action_addblocktype_positionx_' + pd['positionx'] + '_positiony_' + pd['positiony'] + '_width_' + '4'+ '_height_' + '3'] = true;
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) { sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) {
var div = $('<div>').html(data.data.display.html), var div = $('<div>').html(data.data.display.html),
blockinstance = div.find('div.grid-stack-item'), blockinstance = div.find('div.grid-stack-item'),
...@@ -531,7 +555,7 @@ ...@@ -531,7 +555,7 @@
addBlockCss(data.css); addBlockCss(data.css);
var grid = $('.grid-stack').data('gridstack'); var grid = $('.grid-stack').data('gridstack');
dimensions.width = 3; dimensions.width = 4;
dimensions.height = 3; dimensions.height = 3;
addNewWidget(blockinstance, blockId, dimensions, grid, null); addNewWidget(blockinstance, blockId, dimensions, grid, null);
......
...@@ -2584,9 +2584,6 @@ class View { ...@@ -2584,9 +2584,6 @@ class View {
'title' => $newtitle, 'title' => $newtitle,
'view' => $this->get('id'), 'view' => $this->get('id'),
'view_obj' => $this, 'view_obj' => $this,
'row' => $currentblock->row,
'column' => $currentblock->column,
'order' => $currentblock->order,
) )
); );
$result = array('blockid' => $currentblock->id, $result = array('blockid' => $currentblock->id,
...@@ -2651,9 +2648,6 @@ class View { ...@@ -2651,9 +2648,6 @@ class View {
'title' => $oldtitle, 'title' => $oldtitle,
'view' => $this->get('id'), 'view' => $this->get('id'),
'view_obj' => $this, 'view_obj' => $this,
'row' => $currentblock->row,
'column' => $currentblock->column,
'order' => $currentblock->order,
) )
); );
$result = array('blockid' => $currentblock->id, $result = array('blockid' => $currentblock->id,
......
...@@ -1629,7 +1629,7 @@ JS; ...@@ -1629,7 +1629,7 @@ JS;
public function i_should_see_images_block($blocktitle) { public function i_should_see_images_block($blocktitle) {
// Find the block. // Find the block.
$blocktitleliteral = $this->escaper->escapeLiteral($blocktitle); $blocktitleliteral = $this->escaper->escapeLiteral($blocktitle);
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' column-content ')]" . $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' grid-stack-item-content ')]" .
"/div[contains(@id,'blockinstance_')" . "/div[contains(@id,'blockinstance_')" .
" and contains(h3, " . $blocktitleliteral . ")]//img"; " and contains(h3, " . $blocktitleliteral . ")]//img";
// Wait until it finds the text inside the block title. // Wait until it finds the text inside the block title.
...@@ -1689,7 +1689,7 @@ JS; ...@@ -1689,7 +1689,7 @@ JS;
// Find the block. // Find the block.
$blocktitleliteral = $this->escaper->escapeLiteral($blocktitle); $blocktitleliteral = $this->escaper->escapeLiteral($blocktitle);
$textliteral = $this->escaper->escapeLiteral($text); $textliteral = $this->escaper->escapeLiteral($text);
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' column-content ')]" . $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' grid-stack-item-content ')]" .
"/div[contains(@id,'blockinstance_')" . "/div[contains(@id,'blockinstance_')" .
" and contains(h3, " . $blocktitleliteral . ")]" . " and contains(h3, " . $blocktitleliteral . ")]" .
"//div[contains(normalize-space(.), " . $textliteral . ")]"; "//div[contains(normalize-space(.), " . $textliteral . ")]";
...@@ -1732,7 +1732,7 @@ JS; ...@@ -1732,7 +1732,7 @@ JS;
public function i_should_not_see_images_block($blocktitle) { public function i_should_not_see_images_block($blocktitle) {
// Find the block. // Find the block.
$blocktitleliteral = $this->escaper->escapeLiteral($blocktitle); $blocktitleliteral = $this->escaper->escapeLiteral($blocktitle);
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' column-content ')]" . $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' grid-stack-item-content ')]" .
"/div[contains(@id,'blockinstance_')" . "/div[contains(@id,'blockinstance_')" .
" and contains(h3, " . $blocktitleliteral . ")]" . " and contains(h3, " . $blocktitleliteral . ")]" .
"[count(descendant::img) = 0]"; "[count(descendant::img) = 0]";
...@@ -1776,7 +1776,7 @@ JS; ...@@ -1776,7 +1776,7 @@ JS;
// Find the block. // Find the block.
$blocktitleliteral = $this->escaper->escapeLiteral($blocktitle); $blocktitleliteral = $this->escaper->escapeLiteral($blocktitle);
$textliteral = $this->escaper->escapeLiteral($text); $textliteral = $this->escaper->escapeLiteral($text);
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' column-content ')]" . $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' grid-stack-item-content ')]" .
"/div[contains(@id,'blockinstance_')" . "/div[contains(@id,'blockinstance_')" .
" and contains(h3, " . $blocktitleliteral . ")]" . " and contains(h3, " . $blocktitleliteral . ")]" .
"//div[count(descendant::*[contains(normalize-space(.), " . $textliteral . ")]) = 0]"; "//div[count(descendant::*[contains(normalize-space(.), " . $textliteral . ")]) = 0]";
......
...@@ -171,6 +171,7 @@ if ($newlayout = $view->uses_new_layout()) { ...@@ -171,6 +171,7 @@ if ($newlayout = $view->uses_new_layout()) {
verticalMargin: 10, verticalMargin: 10,
float: true, //to place a block in any part of the page and the position will remain fixed float: true, //to place a block in any part of the page and the position will remain fixed
resizable: false, resizable: false,
acceptWidgets: '.blocktype-drag',
}; };
var grid = $('.grid-stack'); var grid = $('.grid-stack');
grid.gridstack(options); grid.gridstack(options);
......
...@@ -59,6 +59,7 @@ Background: ...@@ -59,6 +59,7 @@ Background:
And I press "Add" And I press "Add"
And I click on "Show more" And I click on "Show more"
And I click on "Show more" And I click on "Show more"
And I click on "Show more"
And I click on "Sign-off" in the "Content types" property And I click on "Sign-off" in the "Content types" property
And I enable the switch "Verify" And I enable the switch "Verify"
And I press "Save" And I press "Save"
...@@ -71,6 +72,7 @@ Background: ...@@ -71,6 +72,7 @@ Background:
And I press "Add" And I press "Add"
And I click on "Show more" And I click on "Show more"
And I click on "Show more" And I click on "Show more"
And I click on "Show more"
And I click on "Sign-off" in the "Content types" property And I click on "Sign-off" in the "Content types" property
And I enable the switch "Verify" And I enable the switch "Verify"
And I press "Save" And I press "Save"
...@@ -84,6 +86,7 @@ Background: ...@@ -84,6 +86,7 @@ Background:
And I press "Add" And I press "Add"
And I click on "Show more" And I click on "Show more"
And I click on "Show more" And I click on "Show more"
And I click on "Show more"
And I click on "Sign-off" in the "Content types" property And I click on "Sign-off" in the "Content types" property
And I enable the switch "Verify" And I enable the switch "Verify"
And I press "Save" And I press "Save"
......
...@@ -29,6 +29,8 @@ Scenario: ...@@ -29,6 +29,8 @@ Scenario:
And I follow "File" And I follow "File"
And I attach the file "test_html.html" to "File" And I attach the file "test_html.html" to "File"
And I press "Save" And I press "Save"
#give time for the block to resize
And I wait "1" seconds
And I display the page And I display the page
#check content of HTML block shows content, but not html tags #check content of HTML block shows content, but not html tags
And I should see "Mahara does HTML" And I should see "Mahara does HTML"
......
...@@ -18,8 +18,6 @@ Scenario: Create and delete text block ...@@ -18,8 +18,6 @@ Scenario: Create and delete text block
And I choose "Pages and collections" in "Create" from main menu And I choose "Pages and collections" in "Create" from main menu
And I click on "Edit" in "Page UserA_01" card menu And I click on "Edit" in "Page UserA_01" card menu
When I follow "Add a new block" in the "blocktype sidebar" property When I follow "Add a new block" in the "blocktype sidebar" property
# Confirm modal window has a Legend of "Cell" just above the grey blocks (Bug 1482471)
Then I should see "Cell" in the "legend" element
When I press "Add" When I press "Add"
And I click on "Text" in the "Content types" property And I click on "Text" in the "Content types" property
And I set the field "Block title" to "Text block 1" And I set the field "Block title" to "Text block 1"
......
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