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

Bug 1813987: Remove edit layout section

- also remove the layout pieform
and the custom layout javascript code

behatnotneeded

Change-Id: I3e2e2b3f09106dd2a341a40d178feca693194e64
parent ca51ed79
//self executing function for namespacing code
(function( CustomLayoutManager, $, undefined ) {
// Public Methods
CustomLayoutManager.customlayout_add_row = function(pieformname) {
var numrows = parseInt($('#' + pieformname + '_customlayoutnumrows').val(), 10);
if ((numrows < get_max_custom_rows()) && (numrows >= 1)) {
var newid;
var newrow = $('#customrow_' + numrows).clone();
var currentncols = $('#customrow_' + numrows).find('#selectnumcolsrow_' + numrows).val();
var currentcollayout = $('#customrow_' + numrows).find('#selectcollayoutrow_' + numrows).val();
var labelValue = "<span class='sr-only'>" + get_string("Row", "view") + " " + (numrows + 1) + ": </span>" + get_string_ajax("numberofcolumns", "view");
var labelValue2 = "<span class='sr-only'>" + get_string("Row", "view") + " " + (numrows + 1) + ": </span>" + get_string_ajax('columnlayout', 'view');
newrow.find('.customrowtitle').html('<strong>' + get_string('rownr', 'view', numrows + 1) + '</strong>');
newrow.attr('id', 'customrow_' + (numrows + 1));
newid = 'selectnumcolsrow_' + (numrows + 1);
newrow.find('#selectnumcolsrow_' + numrows).val(currentncols);
newrow.find('#selectnumcolsrow_' + numrows).attr('id', newid);
newrow.find('label[for="selectnumcolsrow_' + numrows + '"]').attr('for', newid).html(labelValue);
newid = 'selectcollayoutrow_' + (numrows + 1);
newrow.find('#selectcollayoutrow_' + numrows).val(currentcollayout);
newrow.find('#selectcollayoutrow_' + numrows).attr('id', 'selectcollayoutrow_' + (numrows + 1));
newrow.find('label[for="selectcollayoutrow_' + numrows + '"]').attr('for', newid).html(labelValue2);
if ((oldremovebutton = $(newrow).find('button')).length != 0) {
oldremovebutton.attr('class', 'float-left btn btn-sm btn-secondary removecustomrow_' + (numrows + 1));
}
else {
// warning: classes are modified above for any subsequent button instances
newrow.append('<button name="removerow" class="float-left btn btn-sm btn-secondary removecustomrow_' + (numrows + 1) + '" onclick="CustomLayoutManager.customlayout_remove_row(\'' + pieformname + '\', this)"><span class="icon icon-lg icon-trash-alt text-danger"></span><span class="d-none d-md-inline-block"> ' + get_string('removethisrow', 'view') + '</span></button>');
}
$('#customrow_' + numrows).after(newrow);
$('#' + pieformname + '_customlayoutnumrows').val(numrows + 1);
customlayout_change_layout(pieformname);
newrow.find('select').first().trigger("focus");
}
if (parseInt($('#' + pieformname + '_customlayoutnumrows').val(), 10) >= get_max_custom_rows()) {
$('#addrow').attr('disabled', 'disabled');
}
};
CustomLayoutManager.customlayout_remove_row = function(pieformname, row) {
var numrows = parseInt($('#' + pieformname + '_customlayoutnumrows').val(), 10);
$(row).closest('.customrow').remove();
$('#' + pieformname + '_customlayoutnumrows').val(numrows - 1);
var inc = 1;
$('#customrows .customrow').each(function() {
$(this).find('.customrowtitle').html('<strong>' + get_string('rownr', 'view', inc) + '</strong>');
$(this).attr('id', 'customrow_' + inc);
$(this).find('.selectnumcols').attr('id', 'selectnumcolsrow_' + inc);
$(this).find('input').attr('class', 'removecustomrow_' + inc);
$(this).find('.selectcollayout').attr('id', 'selectcollayoutrow_' + inc++);
});
customlayout_change_layout(pieformname);
if (parseInt($('#' + pieformname + '_customlayoutnumrows').val(), 10) < get_max_custom_rows()) {
$('#addrow').prop('disabled', false);
}
};
CustomLayoutManager.customlayout_change_numcolumns = function(pieformname, columnoptions) {
var currentrow = $(columnoptions).attr('id').substr($(columnoptions).attr('id').lastIndexOf('_') + 1);
var numcols = parseInt(columnoptions.options[columnoptions.selectedIndex].value, 10);
// reverse in order to select the first option
$.each($('#selectcollayoutrow_' + currentrow + ' > option').get().reverse(), function() {
if (this.text.split('-').length != numcols) {
$(this).prop('disabled', true);
$(this).prop('selected', false);
}
else {
$(this).prop('disabled', false);
$(this).prop('selected', true);
}
});
customlayout_change_layout(pieformname);
};
CustomLayoutManager.customlayout_change_column_layout = function(pieformname) {
customlayout_change_layout(pieformname);
};
CustomLayoutManager.customlayout_submit_layout = function(pieformname) {
var numrows = parseInt($('#' + pieformname + '_customlayoutnumrows').val(), 10);
var collayouts = '';
for (i=0; i<numrows; i++) {
collayouts += '_row' + [i+1] + '_' + $('#selectcollayoutrow_' + (i+1)).val();
}
if (typeof formchangemanager !== 'undefined') {
formchangemanager.setFormState($('#' + pieformname), FORM_CHANGED);
}
var pd = {
'id': $('#' + pieformname + '_id').val(),
'change': 1
}
pd['action_addcustomlayout_numrows_' + numrows + collayouts] = 1;
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) {
var layoutid = data.data.layoutid;
if (data.data.newlayout) {
// insert new layout
// clone and tweak
var clone = $('.advancedlayoutselect input[type=radio]:first').parent().parent().clone();
var id = '' + pieformname + '_advancedlayoutselect' + unique_timestamp();
$('label', clone).attr('for', id).text(data.data.text);
$('input', clone).attr('id', id).val(layoutid);
$('svg', clone).replaceWith(data.data.layoutpreview);
//insert into appropriate row
var rowcontainer = $('#' + pieformname + '_advancedlayoutselect_row'+numrows);
if (rowcontainer.length) {
$(rowcontainer).append(clone);
}
else {
// make a row for it
var rowtitlediv = $('<h3>').attr('class', 'title');
rowtitlediv.html('<strong>' + get_string('nrrows', 'view', numrows) + '</strong>');
var rowcontainer = $('<div>').attr({
'id': '' + pieformname + '_advancedlayoutselect_row' + numrows,
'class': 'layoutoptions-container'
});
var hr = $('<hr>').attr('class', 'cb');
$(rowcontainer).append(clone);
$('#' + pieformname + '_advancedlayoutselect_container').append(rowtitlediv);
$('#' + pieformname + '_advancedlayoutselect_container').append(rowcontainer);
$('#' + pieformname + '_advancedlayoutselect_container').append(hr);
}
}
$('#' + pieformname + '_advancedlayoutselect_container').collapse('show');
// select and highlight layout
var radio = $('.advancedlayoutselect :radio[value=' + layoutid +']');
$(radio).attr("checked","checked");
$('#' + pieformname + '_currentlayoutselect').val(layoutid);
highlight_layout($(radio).parent());
link_thumbs_to_radio_buttons();
$(radio).trigger("focus");
});
};
// Private Methods
////////////////////
function unique_timestamp() {
var time = new Date().getTime();
while (time == new Date().getTime());
return new Date().getTime();
}
function highlight_layout (element) {
$(element).css('background', '#555');
$(element).animate({backgroundColor:'#EEE'}, 3000);
}
function customlayout_change_layout(pieformname) {
var numrows = parseInt($('#' + pieformname + '_customlayoutnumrows').val(), 10);
var collayouts = '';
for (i=0; i<numrows; i++) {
collayouts += '_row' + [i+1] + '_' + $('#selectcollayoutrow_' + (i+1)).val();
}
var pd = {
'id': $('#' + pieformname + '_id').val(),
'change': 1
}
pd['action_updatecustomlayoutpreview_numrows_' + numrows + collayouts] = 1;
sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) {
$('#custompreview').html(data.data);
});
if (typeof formchangemanager !== 'undefined') {
formchangemanager.setFormState($('#' + pieformname), FORM_CHANGED);
}
}
}( window.CustomLayoutManager = window.CustomLayoutManager || {}, jQuery ));
function init(pieformname) {
$('#' + pieformname + '_basic_container legend a, ' +
'#' + pieformname + '_layout_container legend a, ' +
'#' + pieformname + '_skin_container legend a'
).on("click", function(event) {
var layoutselected = $('#' + pieformname + '_currentlayoutselect').val();
var layoutfallback = $('#' + pieformname + '_layoutfallback').val();
if ($('.advancedlayoutselect :radio[value=' + layoutselected +']').length ) {
$('.advancedlayoutselect :radio[value=' + layoutselected +']').attr("checked","checked");
}
else {
$('.advancedlayoutselect :radio[value=' + layoutfallback + ']').attr("checked","checked");
$('#' + pieformname + '_currentlayoutselect').val(layoutfallback);
}
});
$("input[name='layoutselect']").on("change", function(event) {
$('#' + pieformname + '_currentlayoutselect').val($(this).val());
});
$("input[name='advancedlayoutselect']").on("change", function(event) {
$('#' + pieformname + '_currentlayoutselect').val($(this).val());
});
link_thumbs_to_radio_buttons(pieformname);
}
function link_thumbs_to_radio_buttons(pieformname) {
$('.layoutoption > .thumbnail').each(function(event) {
$(this).on("click", function(e) {
$(this).find(':radio').prop('checked', true);
$('#' + pieformname + '_currentlayoutselect').val( $(this).find(':radio').val() );
});
});
}
......@@ -348,22 +348,11 @@ $string['removethisblock1'] = 'Remove this block (ID %s)';
$string['blocktitle'] = 'Block title';
$string['celltitle'] = 'Cell';
$string['changemyviewlayout'] = 'Change my page layout';
$string['createcustomlayout'] = 'Create custom layout';
$string['createnewlayout'] = 'Create new layout';
$string['basicoptions'] = 'Basic options';
$string['advancedoptions'] = 'Advanced options';
$string['viewcolumnspagedescription'] = 'First, select the number of columns in your page. In the next step, you will be able to change the widths of the columns.';
$string['viewlayoutpagedescription'] = 'Select how you would like your page to be laid out.';
$string['changeviewlayout'] = 'Change my page\'s column layout';
$string['numberofcolumns'] = 'Number of columns';
$string['changecolumnlayoutfailed'] = 'Could not change the column layout. Someone else may have been editing the layout at the same time. Please try again later.';
$string['changerowlayoutfailed'] = 'Could not change the row layout. Someone else may have been editing the layout at the same time. Please try again later.';
$string['Row'] = 'Row';
$string['addarow'] = 'Add a row';
$string['removethisrow'] = 'Remove this row';
$string['columnlayout'] = 'Column layout';
$string['layoutpreview'] = 'Layout preview';
$string['layoutpreviewimage'] = 'Layout preview image';
$string['Help'] = 'Help';
$string['blockhelp'] = 'Block help';
......@@ -379,19 +368,6 @@ $string['column'] = 'column';
$string['row'] = 'row';
$string['columns'] = 'columns';
$string['rows'] = 'rows';
$string['100'] = '100';
$string['50,50'] = '50-50';
$string['33,33,33'] = '33-33-33';
$string['25,25,25,25'] = '25-25-25-25';
$string['20,20,20,20,20'] = '20-20-20-20-20';
$string['67,33'] = '67-33';
$string['33,67'] = '33-67';
$string['25,25,50'] = '25-25-50';
$string['50,25,25'] = '50-25-25';
$string['25,50,25'] = '25-50-25';
$string['15,70,15'] = '15-70-15';
$string['20,30,30,20'] = '20-30-30-20';
$string['noviewlayouts'] = 'There are no layouts for a %s column page.';
$string['cantaddcolumn'] = 'You cannot add any more columns to this page.';
$string['cantremovecolumn'] = 'You cannot remove the last column from this page.';
......
<?php
/**
*
* @package mahara
* @subpackage form-element
* @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.
*
*/
/**
* Provides
* - radio button input field to select from all page layouts`
* - custom layout creation field
*
* @param Pieform $form The form to render the element for
* @param array $element The element to render
* @return string The HTML for the element
*/
function pieform_element_layout(Pieform $form, $element) {
$output = '<div id="' . $form->get_property('name') . '_advancedlayoutselect_container" class="advancedlayoutselect">';
for ($row = 0; $row < $element['maxrows']; $row++) {
$output .= '<h4 class="title">' . ($row + 1) . ' ';
$output .= get_string('row', 'view');
$output .= '</h4>';
$output .= '<div class="layoutoptions-container" id="' . $form->get_property('name') . '_advancedlayoutselect_row' . ($row + 1) . '">';
foreach ($element['options'] as $value => $data) {
if ($data['rows'] == $row+1) {
$description = (isset($data['description'])) ? $data['description'] : '';
$text = Pieform::hsc($data['columns']);
$output .= '<div class="layoutoption"><div class="thumbnail text-center">'
. '<label class="accessible-hidden sr-only" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. ($description != '' ? '<div class="radio-description">' . $description . '</div>' : '')
. '<div class="layoutthumb">' . $data['layout'] . '</div>'
. '<input type="radio" name="advancedlayoutselect" id="advancedlayout_' . Pieform::hsc($value) . '"'
. ' value="' . Pieform::hsc($value) . '"'
. (($element['currentlayout'] == $value) ? ' checked="checked"' : '') . '>'
. '</div></div>';
}
}
$output .= '</div>';
}
$output .= '</div>';
//******** Custom layout
$output .= '<div id="' . $form->get_property('name') . '_createcustomlayout_container" class="createcustomlayout">';
// custom layout design options
if (!isset($element['clnumcolumnsoptions']) || !is_array($element['clnumcolumnsoptions']) || count($element['clnumcolumnsoptions']) < 1 || !isset($element['columnlayoutoptions']) || !is_array($element['columnlayoutoptions']) || count($element['columnlayoutoptions']) < 1) {
throw new PieformException('Custom layouts need a set of possible layout options.');
}
$output .= '<h4 class="title">';
$output .= get_string('createcustomlayout', 'view');
$output .= '</h4>';
$output .= '<div id="createcustomlayoutpane" class="row col-static">'
. '<div class="col-xs-12 col-sm-2">'
. '<div class="layoutthumb preview"><div id="custompreview">' . $element['customlayout'] . '</div><p class="metadata text-center">' . get_string('layoutpreview', 'view') .'</p></div>'
. '</div>'
. '<div id="customrows" class="col-xs-12 col-sm-10">'
. '<div id="customrow_1" class="customrow form-group five-across multi-label clearfix" style="border-bottom: 0px !important;">'
. '<div class="customrowtitle float-left field"><strong>' . get_string('Row', 'view') . ' 1</strong></div>'
. '<div class="float-left field field-selectnumcols">'
. '<label for="selectnumcolsrow_1"><span class="sr-only">' . get_string('Row', 'view') . ' 1: </span>' . get_string('numberofcolumns', 'view') . '</label>'
. '<select name="selectnumcols" id="selectnumcolsrow_1" class="selectnumcols input-sm" onchange="CustomLayoutManager.customlayout_change_numcolumns(\'' . $form->get_property('name') . '\', this)">';
foreach ($element['clnumcolumnsoptions'] as $value => $data) {
$output .= '<option value="' . $value . '" ' . (($element['clnumcolumnsdefault'] == $value)? 'selected="selected"' : '') . '>' . $data . '</option>';
}
$output .= '</select></div>'
. '<div class="float-left field">'
. '<label for="selectcollayoutrow_1"><span class="sr-only">' . get_string('Row', 'view') . ' 1: </span>' . get_string('columnlayout', 'view') . '</label>'
. '<select name="selectcollayout" id="selectcollayoutrow_1" class="selectcollayout input-sm" onchange="CustomLayoutManager.customlayout_change_column_layout(\'' . $form->get_property('name') . '\')">';
foreach ($element['columnlayoutoptions'] as $value => $data) {
$numcols = count(explode('-', $data));
$selectionstring = 'disabled';
if ($value == $element['customlayoutid']) {
$selectionstring = 'selected="selected"';
}
else if ($numcols == $element['clnumcolumnsdefault']) {
$selectionstring = '';
}
$output .= '<option value="' . $value . '" ' . $selectionstring . '>' . $data . '</option>';
}
$output .= '</select>'
. '</div>'
. '</div>'; //closing customrow_1
// 'Add row' button
$output .='<button type="button" name="addrow" class="btn btn-sm btn-secondary" id="addrow" onclick="CustomLayoutManager.customlayout_add_row(\'' . $form->get_property('name') . '\')">'
.'<span class="icon icon-lg icon-plus-circle left" role="presentation" aria-hidden="true"></span>'
. get_string('addarow', 'view')
.'</button>'
. '</div>';// closing customrows
// close 'createcustomlayoutpane'
$output .= '</div>';
// preview pane
$output .= '<div id="previewcustomlayoutpane">'
. '<button type="button" name="submitlayout" id="addlayout" class="btn btn-secondary" onclick="CustomLayoutManager.customlayout_submit_layout(\'' . $form->get_property('name') . '\')">'
. '<span class="icon icon-lg icon-check left" role="presentation" aria-hidden="true"></span>'
. get_string('createnewlayout', 'view')
. '</button>'
. '</div>';
// close 'createcustomlayout_container' container
$output .= '</div>';
$output .= '<script>
$( window ).on( "load", function() {
init(\'' . $form->get_property('name') . '\');
});</script>';
return $output;
}
function pieform_element_layout_get_headdata($element) {
$result = '<script src="' . get_config('wwwroot') . 'js/customlayout.js?v=' . get_config('cacheversion', 0) . '"></script>';
return array($result);
}
......@@ -1236,53 +1236,6 @@ class View {
db_commit();
}
/* Returns preview image for creation of custom layout
*
* @param array
* @return string SVG preview image
*/
public function updatecustomlayoutpreview($values) {
require_once(get_config('libroot') . 'layoutpreviewimage.php');
$require = array('numrows');
foreach ($require as $require) {
if (!array_key_exists($require, $values) || empty($values[$require])) {
throw new ParamOutOfRangeException(get_string('missingparam' . $require, 'error'));
}
}
$numrows = $values['numrows'];
$collayouts = array();
for ($i=0; $i<$numrows; $i++) {
if (array_key_exists('row'. ($i+1), $values)) {
$collayouts['row' . ($i+1)] = $values['row' . ($i+1)];
}
}
$alttext = '';
$customlayout = array();
for ($i=0; $i<$numrows; $i++) {
$id = $collayouts['row' . ($i+1)];
$widths = get_field('view_layout_columns', 'widths', 'id', $id);
$customlayout[$i+1] = $widths;
$hyphenatedwidths = str_replace(',', '-', $widths);
$alttext .= $hyphenatedwidths;
if ($i != $numrows - 1) {
$alttext .= ' / ';
}
}
// Generate thumbnail images.
$data = array();
$data['layout'] = $customlayout;
$data['text'] = $alttext;
$previewlayoutimage = new LayoutPreviewImage($data);
$previewimage = $previewlayoutimage->create_preview();
return $previewimage;
}
/*
* Adds custom layout records to database and returns an array
* with layout id and image preview.
......@@ -2112,8 +2065,6 @@ class View {
case 'addcolumn': // requires action_addcolumn_\d_row_\d_before_\d
case 'removecolumn': // requires action_removecolumn_\d_row_\d_column_\d
case 'changetheme':
case 'updatecustomlayoutpreview':
case 'addcustomlayout':
break;
default:
throw new InvalidArgumentException(get_string('noviewcontrolaction', 'error', $action));
......
......@@ -71,47 +71,6 @@
z-index: 1;
}
.layoutthumb {
rect.layout1 {
fill: scale-color($card-bg, $lightness: -10%);
stroke: $card-border-color;
}
rect.layout0 {
fill: scale-color($card-bg, $lightness: -5.25%);
stroke: $card-border-color;
}
svg {
@include media-breakpoint-down(md) {
zoom: 0.8;
}
}
}
// Show that layout thumbnails can be clicked (Bug 1543358)
.layoutoption > .thumbnail {
cursor: pointer;
// Add border around layout thumbnails
display: block;
padding: 4px;
margin-bottom: 21px;
line-height: $line-height-base;
background-color: transparent;
border: 1px solid $card-border-color;
border-radius: $border-radius-sm;
transition: border .2s ease-in-out;
}
#createcustomlayoutpane .layoutthumb {
border: 1px solid $card-border-color;
border-radius: $border-radius-sm;
padding: 4px;
display: table;
overflow: hidden;
position: relative;
}
.blocktype-radio {
display: none;
}
......@@ -347,11 +306,6 @@
}
// Choose skin
.layoutoptions-container {
@extend .clearfix;
margin-top: 15px;
}
.layoutoption,
.skin {
float: left;
margin-bottom: 10px;
......
......@@ -64,9 +64,6 @@
.btn {
vertical-align: baseline;
.customrow & {
margin-top: 25px; // layout builder button alignment
}
input {
margin-top: 0;
}
......@@ -77,11 +74,6 @@
}
}
.customrow + .btn {
margin-top: 10px;
margin-bottom: 5px;
}
// Used on pending friends page
.btn-toggle.card-footer {
padding:0;
......
......@@ -360,21 +360,10 @@
margin-left: 0; // padding provided by label instead
}
&.multi-label {
&.customrow {
padding: 5px 0;
}
> .field {
width: 167px;
&.field-selectnumcols {
width: 123px;
}
.selectnumcols {
width: 107px;
}
select {
max-width: 90%;
}
......@@ -383,14 +372,6 @@
font-size: 0.8em;
color: $theme-text-midtone-color;
}
&.customrowtitle {
width: 70px;
margin-top: 28px;
@include media-breakpoint-down(sm) {
width: 100%;
margin-top: 15px;
}
}
}
}
}
......
......@@ -108,7 +108,7 @@ list($form, $inlinejavascript) = create_settings_pieform();
$javascript = array('jquery','js/jquery/jquery-ui/js/jquery-ui.min.js');
$stylesheets[] = '<link rel="stylesheet" type="text/css" href="' . append_version_number(get_config('wwwroot') . 'js/jquery/jquery-ui/css/smoothness/jquery-ui.min.css') . '">';
$smarty = smarty($javascript, $stylesheets, array('view' => array('Row', 'removethisrow', 'rownr', 'nrrows')), array('sidebars' => false));
$smarty = smarty($javascript, $stylesheets, array('view' => array('Row', 'rownr')), array('sidebars' => false));
$smarty->assign('INLINEJAVASCRIPT', $inlinejavascript);
$smarty->assign('form', $form);
......@@ -138,20 +138,16 @@ function create_settings_pieform() {
$advancedelements = get_advanced_elements();
}
list($layoutelements, $hiddenlayoutelements, $inlinejs) = get_layout_elements();
$inlinejavascript .= $inlinejs;
if ($canuseskins) {
list($skinelements, $hiddenskinelements, $inlinejs) = get_skin_elements();
$inlinejavascript .= $inlinejs;
$layoutclasslast = '';
$advancedclasslast = '';
}
else {
$layoutclasslast = 'last';
$advancedclasslast = 'last';
}