Skip to content

Commit 6ab72a5

Browse files
larynlaryn
committed
Latest work on reflowing and removing P blocks.
1 parent 823b4cd commit 6ab72a5

File tree

6 files changed

+435
-231
lines changed

6 files changed

+435
-231
lines changed

‎modules/layout_paragraphs/css/layout_paragraphs.css‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
--layout-paragraph-template-width: 90px;
44
}
55

6+
.layout-icon {
7+
width: 60px;
8+
height: 75px;
9+
}
10+
11+
.layout-info {
12+
display: flex;
13+
gap: 1rem;
14+
}
15+
616
.form-type-radios.form-item-layout-paragraphs-templates {
717
.form-radios {
818
display: flex;
@@ -104,7 +114,7 @@
104114

105115
.layout--paragraphs {
106116
.l-region--sub-content {
107-
padding: 0;
117+
padding-inline-end: 0;
108118
}
109119
}
110120

@@ -115,6 +125,51 @@
115125
}
116126
}
117127

128+
.layout-paragraphs--template-options {
129+
text-align: end;
130+
margin-block: 1rem;
131+
132+
&:has(.layout-paragraphs--save-now) {
133+
display: flex;
134+
justify-content: flex-end;
135+
136+
.description p {
137+
margin-block: 0;
138+
margin-inline: 1rem;
139+
}
140+
}
141+
142+
a {
143+
margin-inline-end: 1rem;
144+
}
145+
146+
.description {
147+
text-align: left;
148+
}
149+
}
150+
151+
.layout-paragraphs-dialog {
152+
max-width: min(95vw, 48em);
153+
154+
.ui-dialog-content:has(#layout-paragraphs-select-template-form) {
155+
+ .ui-dialog-buttonpane {
156+
opacity: .5;
157+
pointer-events: none;
158+
}
159+
160+
&:has(.layout-options input:checked) {
161+
+ .ui-dialog-buttonpane {
162+
opacity: 1;
163+
pointer-events: auto;
164+
}
165+
}
166+
}
167+
168+
.ui-button {
169+
border: 1px solid transparent;
170+
}
171+
}
172+
118173
/** Temporary CSS **/
119174
/*
120175
.layout-paragraphs--wrapper {

‎modules/layout_paragraphs/layout_paragraphs.admin.inc‎

Lines changed: 114 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,44 @@
66
/**
77
* Add an interface to select a Layout Paragraphs template from the options.
88
*/
9-
function layout_paragraphs_select_template(&$form, &$form_state, $field, $instance, $template_options, $default = 'default') {
9+
function layout_paragraphs_select_template_form($form, &$form_state, $layout) {
1010
$build = [];
11-
$build['#field'] = $field;
12-
$build['#attached']['js'][] = backdrop_get_path('module', 'layout') . '/js/layout.admin.js';
13-
$build['#attached']['css'][] = backdrop_get_path('module', 'layout') . '/css/layout.admin.css';
14-
15-
if (!isset($template_options[$default])) {
16-
$default = 'default';
17-
}
11+
$template_options = _layout_paragraphs_layout_get_available_templates($layout->name);
1812

1913
$build['#attributes'] = array(
2014
'class' => array('layout-paragraphs-settings-form'),
2115
);
2216

17+
$build['intro'] = array(
18+
'#markup' => t(
19+
'<p class="description">The currently selected layout template is "@template". You may select a different layout template from the options below. Existing content within the current layout will need to be shifted around to fit into the new template. If you have unsaved content in fields that are outside of the layout, you may wish to close this dialog and save first to ensure you do not lose those changes.</p>',
20+
array('@template' => $template_options['active']->title)
21+
),
22+
);
23+
$build['layout_paragraphs_layout_name'] = array(
24+
'#type' => 'hidden',
25+
'#value' => $layout->name,
26+
);
2327
$build['layout_paragraphs_templates'] = array(
24-
'#title' => t('Layout template'),
28+
'#title' => t('Other available layout templates'),
2529
'#type' => 'radios',
26-
'#default_value' => $default,
30+
'#default_value' => '',
2731
'#options' => array(),
2832
'#wrapper_attributes' => array(
2933
'class' => array('clearfix', 'layout-options'),
3034
),
31-
'#after_build' => array(
32-
'layout_paragraphs_select_template_after_build',
33-
),
3435
'#required' => TRUE,
3536
);
3637

37-
foreach ($template_options as $template_name => $template_info) {
38+
foreach ($template_options['available'] as $template_name => $template_info) {
3839
$build['layout_paragraphs_templates']['#options'][$template_name] = $template_info->title;
3940
$build['layout_paragraphs_templates'][$template_name]['#description'] = $template_info->preview;
4041
}
41-
42-
$build['layout_paragraphs_templates']['submit'] = array(
42+
$build['actions'] = array(
43+
'#type' => 'actions',
44+
'#attributes' => array('class' => array('form-actions')),
45+
);
46+
$build['actions']['submit'] = array(
4347
'#type' => 'container',
4448
'#attributes' => array(
4549
'class' => array('layout-paragraphs-templates-select'),
@@ -49,9 +53,7 @@ function layout_paragraphs_select_template(&$form, &$form_state, $field, $instan
4953
'#value' => t('Change layout template'),
5054
'#limit_validation_errors' => array(),
5155
'#ajax' => array(
52-
'callback' => 'layout_paragraphs_select_template_change_ajax',
53-
'wrapper' => 'ajax-layout-paragraphs-templates',
54-
'effect' => 'fade',
56+
'callback' => 'layout_paragraphs_template_change_ajax_callback',
5557
),
5658
'#submit' => array(
5759
'layout_paragraphs_select_template_change_submit',
@@ -60,27 +62,102 @@ function layout_paragraphs_select_template(&$form, &$form_state, $field, $instan
6062
'#weight' => 100,
6163
);
6264

63-
$form['layout_paragraphs']['select_template'] = $build;
65+
return $build;
6466
}
6567

6668
/**
67-
*
69+
* Add an interface to reset the tempstore for Layout Paragraphs layout to what
70+
* is saved in the database.
71+
*/
72+
function layout_paragraphs_reset_template_form($form, &$form_state, $layout) {
73+
$build = [];
74+
$build['#attributes'] = array(
75+
'class' => array('layout-paragraphs-settings-form'),
76+
);
77+
78+
$build['intro'] = array(
79+
'#markup' => '<p class="description">' . t(
80+
'If you wish to reset the layout to the last saved state and lose all unsaved changes, click below.'
81+
) . '</p>',
82+
);
83+
$build['layout_paragraphs_layout_name'] = array(
84+
'#type' => 'hidden',
85+
'#value' => $layout->name,
86+
);
87+
$build['actions'] = array(
88+
'#type' => 'actions',
89+
'#attributes' => array('class' => array('form-actions')),
90+
);
91+
$build['actions']['submit'] = array(
92+
'#type' => 'container',
93+
'#attributes' => array(
94+
'class' => array('layout-paragraphs-templates-select'),
95+
),
96+
'button' => array(
97+
'#type' => 'submit',
98+
'#value' => t('Reset'),
99+
'#limit_validation_errors' => array(),
100+
'#ajax' => array(
101+
'callback' => 'layout_paragraphs_template_change_ajax_callback',
102+
),
103+
'#submit' => array(
104+
'layout_paragraphs_reset_template_change_submit',
105+
),
106+
),
107+
'#weight' => 100,
108+
);
109+
110+
return $build;
111+
}
112+
113+
/**
114+
* Submit handler for layout_paragraphs_select_template_form().
68115
*/
69116
function layout_paragraphs_select_template_change_submit(&$form, &$form_state) {
70-
$form_state['rebuild'] = TRUE;
71117
$new_template_name = $form_state['input']['layout_paragraphs_templates'];
72-
$layout = layout_paragraphs_get_layout_tempstore($form['layout_paragraphs']['layout']['#layout']->name);
118+
$layout_paragraphs_layout_name = $form_state['input']['layout_paragraphs_layout_name'];
119+
list($entity_type, $bundle, $field_name, $entity_id) = explode('.', $layout_paragraphs_layout_name);
120+
$layout = layout_paragraphs_get_layout_tempstore($layout_paragraphs_layout_name);
73121
$layout->setLayoutTemplate($new_template_name);
74122
layout_paragraphs_set_layout_tempstore($layout);
75-
// Update the $form positions to reflect the new template.
76-
$form['layout_paragraphs']['layout']['#layout'] = $layout;
77-
$form['layout_paragraphs']['layout']['content']['positions'] = [];
78-
$form_state['values']['content']['positions'] = [];
79-
foreach ($layout->positions as $region_name => $region_info) {
80-
$form['layout_paragraphs']['layout']['content']['positions'][$region_name] = [];
81-
$form_state['values']['content']['positions'][$region_name] = '';
123+
}
124+
125+
/**
126+
* Submit handler for layout_paragraphs_reset_template_form().
127+
*/
128+
function layout_paragraphs_reset_template_change_submit(&$form, &$form_state) {
129+
$layout_paragraphs_layout_name = $form_state['input']['layout_paragraphs_layout_name'];
130+
$layout = layout_paragraphs_layout_load($layout_paragraphs_layout_name, TRUE, 'database');
131+
layout_paragraphs_set_layout_tempstore($layout);
132+
}
133+
134+
/**
135+
* Ajax callback for layout_paragraphs_select_template_form() to close the modal
136+
* and redirect back to the entity edit form.
137+
*/
138+
function layout_paragraphs_template_change_ajax_callback(&$form, &$form_state) {
139+
$layout_name = $form_state['input']['layout_paragraphs_layout_name'];
140+
$edit_path = tempstore_get('layout_paragraphs:edit_path', $layout_name);
141+
// Determine the entity edit form to reload based on the layout name.
142+
list($entity_type, $bundle, $field_name, $entity_id) = explode('.', $layout_name);
143+
144+
switch ($form_state['triggering_element']['#value']) {
145+
case t('Change layout template'):
146+
backdrop_set_message(t('The layout template has been changed. Please review the positions of all content within the layout, and save to make the changes permanent.'));
147+
break;
148+
149+
case t('Reset'):
150+
backdrop_set_message(t('The layout has been reset to the last saved state.'));
151+
break;
82152
}
83-
return $form;
153+
154+
$commands = array(
155+
'#type' => 'ajax',
156+
'#commands' => array(),
157+
);
158+
$commands['#commands'][] = ajax_command_close_modal_dialog();
159+
$commands['#commands'][] = ajax_command_redirect($edit_path);
160+
return $commands;
84161
}
85162

86163
/**
@@ -148,71 +225,16 @@ function layout_paragraphs_configure_region_page_submit($form, &$form_state) {
148225
}
149226

150227
/**
151-
* After build function to mark default option, which is used by CSS to hide
152-
* the submit button, if the default value continues to be selected.
153-
*
154-
* @param [type] $form
155-
* @param [type] $form_state
156-
* @return void
157-
*/
158-
function layout_paragraphs_select_template_after_build($element, $form_state) {
159-
$default_template = $element['#default_value'];
160-
$element[$default_template]['#attributes']['data-default'] = 'true';
161-
return $element;
162-
}
163-
164-
/**
165-
* Ajax handler for layout_paragraphs_select_template() to change the active
166-
* Layout Paragraphs template.
228+
* Ajax callback for layout_paragraphs_select_template_form() to return the
229+
* updated (hidden) form value for the Layout Paragraphs template.
167230
*
168231
* @param array $form
169232
* @param array $form_state
170233
*
171234
* @return void
172235
*/
173236
function layout_paragraphs_select_template_change_ajax(&$form, &$form_state) {
174-
$new_template_name = $form_state['values']['layout_paragraphs_templates'];
175-
$form_element = $form['layout_paragraphs'];
176-
$templates = &$form_element['select_template']['layout_paragraphs_templates'];
177-
$templates['#default_value'] = $new_template_name;
178-
foreach (element_children($templates) as $template_name) {
179-
if ($template_name == $new_template_name) {
180-
$templates[$template_name]['#attributes']['data-default'] = 'true';
181-
}
182-
else {
183-
unset($templates[$template_name]['#attributes']['data-default']);
184-
}
185-
}
186-
$entity = $form_state[$form['#entity_type']] ?? NULL;
187-
if (empty($entity) && $form['#entity_type'] == 'taxonomy_term' && !empty($form['#term'])) {
188-
// Special case due to mismatch between entity type and form key.
189-
$entity = $form_state['term'];
190-
}
191-
$entity_id = $entity->id() ?? $form_state['layout_paragraphs']['tempstore_id'];
192-
$layout_name = _layout_paragraphs_get_layout_name($form['layout_paragraphs']['#instance'], $entity_id);
193-
$config = array(
194-
'is_new' => TRUE,
195-
'layout_template' => $new_template_name,
196-
'layout_template_type' => 'paragraphs',
197-
'is_full_page' => FALSE,
198-
'name' => $layout_name,
199-
);
200-
$new_layout = new Layout($config);
201-
$new_layout->setContexts('paragraphs', layout_paragraphs_context());
202-
$layout_form = $layout_form_state = [];
203-
$form_element['layout'] = layout_paragraphs_content_form($layout_form, $layout_form_state, $new_layout, 'paragraphs_editor');
204-
$form_element['layout']['#layout']->renderer_name = 'paragraphs_editor';
205-
206-
$layout = $form_element['layout']['#layout'];
207-
_layout_paragraphs_add_paragraphs_to_layout($layout, 'tempstore');
208-
$form['layout_paragraphs']['layout']['#layout'] = $layout;
209-
$form_state['values']['content']['positions'] = [];
210-
foreach ($layout->positions as $region => $blocks) {
211-
$form_state['values']['content']['positions'][$region] = implode(',', $blocks);
212-
}
213-
// layout_paragraphs_set_layout_tempstore($layout);
214-
$form_state['rebuild'] = TRUE;
215-
return $form_element;
237+
return $form['layout_paragraphs']['select_template']['layout_paragraphs_template'];
216238
}
217239

218240
/**
@@ -384,20 +406,6 @@ function layout_paragraphs_template_listing_page($form, &$form_state) {
384406
}
385407
}
386408

387-
$form['#attached']['css'][] = backdrop_get_path('module', 'layout') . '/css/layout.admin.css';
388-
// Empty table header for enable/disable is confusing (below); converted to
389-
// standard table for now.
390-
/*
391-
$form['templates'] = array(
392-
'#type' => 'tableselect',
393-
'#js_select' => FALSE,
394-
'#header' => $header,
395-
'#options' => $rows,
396-
'#empty' => t('There are no Layout Paragraphs templates.'),
397-
'#default_value' => $default,
398-
'#attributes' => array('class' => array('layout-list')),
399-
);
400-
*/
401409
$form['templates'] = array(
402410
'#theme' => 'table',
403411
'#header' => $header,
@@ -1324,7 +1332,7 @@ function layout_paragraphs_template_edit_row_ajax($form, $form_state) {
13241332
$html .= theme('status_messages');
13251333
$html .= backdrop_render($form);
13261334
$title = isset($form['#title']) ? $form['#title'] : backdrop_get_title();
1327-
$commands[] = ajax_command_open_modal_dialog($title, $html, array('dialogClass' => 'layout-dialog'));
1335+
$commands[] = ajax_command_open_modal_dialog($title, $html, array('dialogClass' => 'layout-paragraphs-dialog'));
13281336
}
13291337
else {
13301338
$commands[] = ajax_command_close_modal_dialog();
@@ -1623,7 +1631,7 @@ function layout_paragraphs_block_add_page(Layout $layout, $renderer_name, $regio
16231631
'attributes' => array(
16241632
'class' => array('use-ajax block-item'),
16251633
'data-dialog' => TRUE,
1626-
'data-dialog-options' => json_encode(array('dialogClass' => 'layout-dialog')),
1634+
'data-dialog-options' => json_encode(array('dialogClass' => 'layout-paragraphs-dialog')),
16271635
),
16281636
)
16291637
),
@@ -1886,7 +1894,7 @@ function layout_paragraphs_block_configure_ajax_update($form, &$form_state) {
18861894
$html .= theme('status_messages');
18871895
$html .= backdrop_render($form);
18881896
$title = isset($form['#title']) ? $form['#title'] : backdrop_get_title();
1889-
$commands[] = ajax_command_open_modal_dialog($title, $html, array('dialogClass' => 'layout-dialog'));
1897+
$commands[] = ajax_command_open_modal_dialog($title, $html, array('dialogClass' => 'layout-paragraphs-dialog'));
18901898
}
18911899
// If a new block, add to the bottom of the region.
18921900
elseif ($added_to_region) {

0 commit comments

Comments
 (0)