Commit 565776fb authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic Committed by Robert Lyon

Bug 1813987: block resizing to fit content

should not resize blocks in view mode

in view mode, if the content of the block is static,
then the block dimensions should not change but the
content of the block should be made smaller

expand the height of a block only if the content is dynamic,
like the 'Journal' block

behatnotneeded

Change-Id: Ie8183736580e7e592b24e36f4a16618b96a5bf4e
parent f9295a81
......@@ -551,6 +551,10 @@ EOF;
return $view->get('owner') != null;
}
public static function has_static_content() {
return false;
}
}
function translate_ids_to_tags(array $ids) {
......
......@@ -108,4 +108,8 @@ class PluginBlocktypeComment extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -448,4 +448,7 @@ class PluginBlocktypeProfileinfo extends MaharaCoreBlocktype {
return PluginArtefactInternal::import_create_blockinstance_leap($biconfig, $viewconfig);
}
public static function has_static_content() {
return false;
}
}
......@@ -243,4 +243,8 @@ class PluginBlocktypeSocialprofile extends MaharaCoreBlocktype {
return PluginArtefactInternal::import_create_blockinstance_leap($biconfig, $viewconfig);
}
public static function has_static_content() {
return false;
}
}
......@@ -173,4 +173,8 @@ class PluginBlocktypePeerassessment extends MaharaCoreBlocktype {
$artefacts = get_records_sql_array($sql, $values);
return $artefacts;
}
public static function has_static_content() {
return false;
}
}
......@@ -234,4 +234,8 @@ class PluginBlocktypePlans extends MaharaCoreBlocktype {
}
return $artefacts;
}
public static function has_static_content() {
return false;
}
}
......@@ -174,4 +174,7 @@ class PluginBlocktypeEntireresume extends MaharaCoreBlocktype {
return true;
}
public static function has_static_content() {
return false;
}
}
......@@ -636,4 +636,8 @@ class PluginBlocktypeExternalfeed extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -475,4 +475,8 @@ class PluginBlocktypeGroupViews extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -176,4 +176,8 @@ class PluginBlocktypeInbox extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -778,6 +778,9 @@ EOF;
return !(count($roles) == 1 && $roles[0] == 'peer');
}
public static function has_static_content() {
return true;
}
}
......
......@@ -178,4 +178,8 @@ class PluginBlocktypeMyfriends extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -180,4 +180,8 @@ class PluginBlocktypeMyGroups extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -148,4 +148,8 @@ class PluginBlocktypeMyviews extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -97,4 +97,8 @@ class PluginBlocktypeNewViews extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -240,4 +240,8 @@ class PluginBlocktypeRecentForumPosts extends MaharaCoreBlocktype {
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
......@@ -340,6 +340,10 @@ EOF;
public static function get_artefacts(BlockInstance $instance) {
return array();
}
public static function has_static_content() {
return false;
}
}
class ActivityTypeBlocktypeWallWallpost extends ActivityTypePlugin {
......
......@@ -396,4 +396,8 @@ class PluginBlocktypeWatchlist extends MaharaCoreBlocktype {
return array($views, count($views));
}
public static function has_static_content() {
return false;
}
}
......@@ -83,7 +83,7 @@ $editwindow = group_format_editwindow($group);
$view = group_get_homepage_view($group->id);
if ($newlayout = $view->uses_new_layout()) {
$layoutjs = array('js/lodash/lodash.js', 'js/gridstack/gridstack.js');
$layoutjs = array('js/lodash/lodash.js', 'js/gridstack/gridstack.js', 'js/gridlayout.js');
$blocks = $view->get_blocks();
$blocks = json_encode($blocks);
$blocksjs = <<<EOF
......@@ -99,19 +99,7 @@ if ($newlayout = $view->uses_new_layout()) {
// should add the blocks one by one
var blocks = {$blocks};
$.each(blocks, function(blockid, block) {
grid.addWidget(
$('<div id="block_' + blockid + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>'),
block.positionx,
block.positiony,
block.width,
block.height,
null, null, null, null, null,
blockid);
});
jQuery(document).trigger('blocksloaded');
loadGrid(grid, blocks);
});
EOF;
}
......
......@@ -32,7 +32,7 @@ if ($USER->is_logged_in()) {
$view = $USER->get_view_by_type('dashboard');
$layoutjs = array();
if ($newlayout = $view->uses_new_layout()) {
$layoutjs = array('js/lodash/lodash.js', 'js/gridstack/gridstack.js');
$layoutjs = array('js/lodash/lodash.js', 'js/gridstack/gridstack.js', 'js/gridlayout.js');
}
$javascript = array('paginator');
......@@ -67,19 +67,7 @@ if ($USER->is_logged_in()) {
// should add the blocks one by one
var blocks = {$blocks};
$.each(blocks, function(blockid, block) {
grid.addWidget(
$('<div id="block_' + blockid + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>'),
block.positionx,
block.positiony,
block.width,
block.height,
null, null, null, null, null,
blockid);
});
jQuery(document).trigger('blocksloaded');
loadGrid(grid, blocks);
});
EOF;
}
......
......@@ -41,4 +41,8 @@ jQuery(window).on('blocksloaded', {}, function() {
ajaxBlocks();
window.setTimeout(function(){
$(window).trigger('colresize');
}, 300);
});
/**
* Javascript for the views interface
*
* @package mahara
* @subpackage core
* @author Catalyst IT Ltd
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
* @copyright For copyright information on Mahara, please see the README file distributed with this software.
* @copyright (C) 2013 Mike Kelly UAL m.f.kelly@arts.ac.uk
*
*/
function loadGrid(grid, blocks) {
$.each(blocks, function(blockId, block) {
var blockContent = $('<div id="block_' + blockId + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>');
addNewWidget(blockContent, blockId, block, grid, block.class);
});
jQuery(document).trigger('blocksloaded');
// initialize js function for edit view
if (typeof editViewInit !== "undefined") {
editViewInit();
}
// initialize js function for display view
if (typeof viewmenuInit !== "undefined") {
viewmenuInit();
}
// images need time to load before height can be properly calculated
window.setTimeout(function(){
updateBlockSizes();
}, 300);
}
function updateBlockSizes() {
$.each($('.grid-stack').children(), function(index, element) {
if (!$(element).hasClass('staticblock')) {
$('.grid-stack').data('gridstack').resize(
$('.grid-stack-item')[index],
$($('.grid-stack-item')[index]).attr('data-gs-width'),
Math.ceil(
(
$('.grid-stack-item-content')[index].scrollHeight +
$('.grid-stack').data('gridstack').opts.verticalMargin
)
/
(
$('.grid-stack').data('gridstack').cellHeight() +
$('.grid-stack').data('gridstack').opts.verticalMargin
)
)
);
}
});
}
function addNewWidget(blockContent, blockId, dimensions, grid, blocktypeclass) {
el = grid.addWidget(
blockContent,
dimensions.positionx,
dimensions.positiony,
dimensions.width,
dimensions.height,
null, null, null, null, null,
blockId
);
$(el).addClass(blocktypeclass);
el.on('resizestop', function(event, data) {
var content = $(this).find('.grid-stack-item-content')[0];
var heightpx = Math.max(data.size.height, content.scrollHeight),
widthpx = data.size.width,
heightgrid = Math.ceil((heightpx + grid.opts.verticalMargin) / (grid.cellHeight() + grid.opts.verticalMargin)),
widthgrid = Math.ceil((widthpx + grid.opts.verticalMargin) / (grid.cellWidth() + grid.opts.verticalMargin)); // horizontalMargin doesn't exist in gridstack yet
grid.resize($(this), widthgrid, heightgrid);
// update dimesions in db
var id = this.attributes['data-gs-id'].value,
dimensions = {
newx: this.attributes['data-gs-x'].value,
newy: this.attributes['data-gs-y'].value,
newwidth: widthgrid,
newheight: heightgrid,
}
moveBlock(id, dimensions);
});
// images need time to load before height can be properly calculated
window.setTimeout(function(){
updateBlockSizes();
}, 300);
return false;
}
function moveBlock(id, whereTo) {
var pd = {
'id': $('#viewid').val(),
'change': 1
};
pd['action_moveblockinstance_id_' + id + '_newx_' + whereTo['newx'] + '_newy_' + whereTo['newy'] + '_newheight_' + whereTo['newheight'] + '_newwidth_' + whereTo['newwidth']] = true;
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST');
}
$(window).on('colresize', function() {
updateBlockSizes();
});
......@@ -257,21 +257,8 @@
});
}
ViewManager.init = function(grid, blocks) {
// load blocks for view in edit mode
$.each(blocks, function(blockid, block) {
grid.addWidget(
$('<div id="block_' + blockid + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>'),
block.positionx,
block.positiony,
block.width,
block.height,
null, null, null, null, null,
blockid);
});
ViewManager.init = function() {
// Set private variables
contentEditor = $('[data-role="content-toolbar"]');
......@@ -535,15 +522,18 @@
var div = $('<div>').html(data.data.display.html),
blockinstance = div.find('div.grid-stack-item'),
configureButton = blockinstance.find('.configurebutton'),
blockId = blockinstance.attr('id').substr(6),
dimensions = {
x: blockinstance[0].getAttribute('data-gs-x'),
y: blockinstance[0].getAttribute('data-gs-y'),
positionx: blockinstance[0].getAttribute('data-gs-x'),
positiony: blockinstance[0].getAttribute('data-gs-y'),
}
addBlockCss(data.css);
var grid = $('.grid-stack').data('gridstack');
addNewWidget(blockinstance, grid, dimensions);
dimensions.width = 3;
dimensions.height = 3;
addNewWidget(blockinstance, blockId, dimensions, grid, null);
if (data.data.configure) {
showDock($('#configureblock'), true);
......@@ -659,17 +649,6 @@
});
}
function moveBlock(id, whereTo) {
var pd = {
'id': $('#viewid').val(),
'change': 1
};
pd['action_moveblockinstance_id_' + id + '_newx_' + whereTo['newx'] + '_newy_' + whereTo['newy'] + '_newheight_' + whereTo['newheight'] + '_newwidth_' + whereTo['newwidth']] = true;
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST');
}
/**
* Rewrites cancel button to remove a block
*/
......@@ -981,6 +960,10 @@ function blockConfigSuccess(form, data) {
return ViewManager.blockConfigSuccess(form, data);
}
function editViewInit() {
return ViewManager.init();
}
/**
* Pieform callback method. Just a wrapper around the ViewManager function,
* because Pieforms doesn't like periods in callback method names.
......@@ -995,18 +978,4 @@ function wire_blockoptions() {
return ViewManager.blockOptions();
}
function init(grid, blocks) {
return ViewManager.init(grid, blocks);
}
/* GRIDSTACK functions */
function addNewWidget(blockContent, grid, dimensions) {
var node = {
x: dimensions.x,
y: dimensions.y,
width: 3,
height: 3
};
grid.addWidget(blockContent, node.x, node.y, node.width, node.height);
return false;
}
......@@ -2209,14 +2209,17 @@ class View {
$blockcontent = array();
foreach($this->grid as $blockinstance) {
$block = array();
if ($editing) {
$result = $blockinstance->render_editing();
$result = $result['html'];
}
else {
$result = $blockinstance->render_viewing();
if (call_static_method(generate_class_name('blocktype', $blockinstance->get('blocktype')), 'has_static_content')) {
$block['class'] = 'staticblock';
}
}
$block = array();
$block['content'] = $result;
$block['width'] = $blockinstance->get('width');
$block['height'] = $blockinstance->get('height');
......
/*
Gridstack layout CSS
*/
.gridstackblock.card {
margin-bottom: unset;
overflow: hidden;
}
......@@ -22,6 +22,7 @@
@import "../layout/header";
@import "../layout/profile-block";
@import "../layout/block-comments-details-header";
@import "../layout/gridlayout";
// cards are a very commonly used layout component
@import "../layout/card/card";
......
<div class="bt-{$blocktype}-editor js-blockinstance blockinstance card card-secondary clearfix {if $configure} configure{elseif $retractable} retractable{/if}" data-id="{$id}" id="blockinstance_{$id}{if $configure}_configure{/if}">
<div class="bt-{$blocktype}-editor js-blockinstance blockinstance gridstackblock card card-secondary clearfix {if $configure} configure{elseif $retractable} retractable{/if}" data-id="{$id}" id="blockinstance_{$id}{if $configure}_configure{/if}">
<h3 class="card-header js-heading drag-handle {if !$title}card-header-placeholder{/if}" title="{$strmovetitletexttooltip}">
<span class="icon icon-arrows-alt move-indicator" role="presentation" aria-hidden="true"></span>
<span class="blockinstance-header">
......
<div class="bt-{$blocktype} card card-secondary {$cardicontype} clearfix {if $retractable}collapsible{/if}" id="blockinstance_{$id}">
<div class="bt-{$blocktype} gridstackblock card card-secondary {$cardicontype} clearfix {if $retractable}collapsible{/if}" id="blockinstance_{$id}">
{if !$editing && $blockheader && !$versioning}
{include file='header/block-comments-details-header.tpl' artefactid=$artefactid blockid=$blockid commentcount=$commentcount}
{/if}
......
......@@ -105,7 +105,7 @@ else if ($restrictedview) {
if (!$restrictedview) {
if ($newlayout = $view->uses_new_layout()) {
$layoutjs = array('js/lodash/lodash.js', 'js/gridstack/gridstack.js');
$layoutjs = array('js/lodash/lodash.js', 'js/gridstack/gridstack.js', 'js/gridlayout.js');
$blocks = $view->get_blocks();
$blocks = json_encode($blocks);
$blocksjs = <<<EOF
......@@ -121,19 +121,7 @@ if (!$restrictedview) {
// should add the blocks one by one
var blocks = {$blocks};
$.each(blocks, function(blockid, block) {
grid.addWidget(
$('<div id="block_' + blockid + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>'),
block.positionx,
block.positiony,
block.width,
block.height,
null, null, null, null, null,
blockid);
});
jQuery(document).trigger('blocksloaded');
loadGrid(grid, blocks);
});
EOF;
}
......
......@@ -150,6 +150,7 @@ $javascript = array('views', 'tinymce', 'paginator', 'js/jquery/jquery-ui/js/jqu
'js/lodash/lodash.js',
'js/gridstack/gridstack.js',
'js/gridstack/gridstack.jQueryUI.js',
'js/gridlayout.js',
);
$blocktype_js = $view->get_all_blocktype_javascript();
$javascript = array_merge($javascript, $blocktype_js['jsfiles']);
......@@ -177,7 +178,7 @@ if ($newlayout = $view->uses_new_layout()) {
grid.resizable('.grid-stack-item', true);
// should add the blocks one by one
var blocks = {$blocksencode};
init(grid, blocks);
loadGrid(grid, blocks);
});
";
}
......
......@@ -268,7 +268,8 @@ $javascript = array('paginator', 'viewmenu', 'js/collection-navigation.js',
'js/lodash/lodash.js',
'js/gridstack/gridstack.js',
'js/gridstack/gridstack.jQueryUI.js',
);
'js/gridlayout.js',
);
$blocktype_js = $view->get_all_blocktype_javascript();
$javascript = array_merge($javascript, $blocktype_js['jsfiles']);
if (is_plugin_active('externalvideo', 'blocktype')) {
......@@ -369,19 +370,7 @@ $(function () {
// should add the blocks one by one
var blocks = {$blocks};
$.each(blocks, function(blockid, block) {
grid.addWidget(
$('<div id="block_' + blockid + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>'),
block.positionx,
block.positiony,
block.width,
block.height,
null, null, null, null, null,
blockid);
});
jQuery(document).trigger('blocksloaded');
loadGrid(grid, blocks);
});
EOF;
}
......
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