public function GridStackForm::form in GridStack 8
Same name and namespace in other branches
- 8.2 modules/gridstack_ui/src/Form/GridStackForm.php \Drupal\gridstack_ui\Form\GridStackForm::form()
Gets the actual form array to be built.
Overrides EntityForm::form
See also
\Drupal\Core\Entity\EntityForm::processForm()
\Drupal\Core\Entity\EntityForm::afterBuild()
File
- modules/
gridstack_ui/ src/ Form/ GridStackForm.php, line 75
Class
- GridStackForm
- Extends base form for gridstack instance configuration form.
Namespace
Drupal\gridstack_ui\FormCode
public function form(array $form, FormStateInterface $form_state) {
$form = parent::form($form, $form_state);
// Change page title for the duplicate operation.
if ($this->operation == 'duplicate') {
$form['#title'] = $this
->t('<em>Duplicate gridstack optionset</em>: @label', [
'@label' => $this->entity
->label(),
]);
$this->entity = $this->entity
->createDuplicate();
}
// Change page title for the edit operation.
if ($this->operation == 'edit') {
$form['#title'] = $this
->t('<em>Edit gridstack optionset</em>: @label', [
'@label' => $this->entity
->label(),
]);
}
$entity = $this->entity;
$tooltip = [
'class' => [
'is-tooltip',
],
];
$default = GridStack::load('default');
$is_default = $entity
->id() == 'default';
$options = $entity
->getOptions();
$settings = $entity
->getOptions('settings');
$grids = $entity
->getEndBreakpointGrids();
$manager = $this->manager;
$admin_css = $manager
->configLoad('admin_css', 'blazy.settings');
$framework = $manager
->configLoad('framework', 'gridstack.settings');
$classes = [
'gridstack',
'slick',
'optionset',
'gridstack--ui',
];
foreach ($classes as $class) {
$form['#attributes']['class'][] = 'form--' . $class;
}
if (!$entity
->isNew()) {
$form['#attributes']['class'][] = 'form--optionset--' . str_replace('_', '-', $entity
->id());
}
$form['#attached']['library'][] = 'gridstack/admin';
$form['#attached']['drupalSettings']['gridstack'] = $default
->getOptions('settings');
if ($admin_css) {
$form['#attached']['library'][] = 'blazy/admin';
}
// Load all grids to get live preview going.
foreach (range(1, 11) as $key) {
$form['#attached']['library'][] = 'gridstack/gridstack.' . $key;
}
$active_settings = $entity
->getOptions('settings');
$framework_settings = $default
->getOptions('settings');
$framework_settings['cellHeight'] = 60;
$framework_settings['isNested'] = TRUE;
$framework_settings['minWidth'] = 0;
$framework_settings['verticalMargin'] = 15;
$framework_settings['width'] = 12;
$framework_enabled = FALSE;
if (!empty($framework)) {
$form['#attributes']['class'][] = 'form--framework';
$use_framework = $entity
->getOption('use_framework');
if (!empty($use_framework)) {
if (strpos($framework, 'bootstrap') !== FALSE) {
$form['#attributes']['class'][] = 'form--bs';
}
$form['#attributes']['class'][] = 'form--' . $framework;
$active_settings = $framework_settings;
$framework_enabled = TRUE;
}
}
if (!$framework_enabled) {
$form['#attributes']['class'][] = 'form--gridstack-js';
}
// @todo: Refine for Foundation.
$foundation = $framework_enabled && $framework == 'foundation';
$bootstrap = $framework_enabled && strpos($framework, 'bootstrap') !== FALSE;
$icon_breakpoint = $foundation || $framework == 'bootstrap3' ? 'lg' : 'xl';
$form['#attributes']['data-icon'] = $icon_breakpoint;
$form['label'] = [
'#type' => 'textfield',
'#title' => $this
->t('Label'),
'#default_value' => $entity
->label(),
'#maxlength' => 255,
'#required' => TRUE,
'#description' => $this
->t("Label for the GridStack optionset."),
'#attributes' => $tooltip,
'#prefix' => '<div class="form__header form__half form__half--first has-tooltip clearfix">',
];
// Keep the legacy CTools ID, i.e.: name as ID.
$form['name'] = [
'#type' => 'machine_name',
'#default_value' => $entity
->id(),
'#maxlength' => EntityTypeInterface::BUNDLE_MAX_LENGTH,
'#machine_name' => [
'source' => [
'label',
],
'exists' => '\\Drupal\\gridstack\\Entity\\GridStack::load',
],
'#attributes' => $tooltip,
'#disabled' => !$entity
->isNew(),
'#suffix' => '</div>',
];
$form['screenshot'] = [
'#type' => 'container',
'#attributes' => [
'class' => 'gridstack-screenshot',
'id' => 'gridstack-screenshot',
],
];
$form['canvas'] = [
'#markup' => '<canvas id="gridstack-canvas"></canvas>',
'#allowed_tags' => [
'canvas',
],
];
$data_config = $this
->jsonify($active_settings, TRUE);
$data_config_framework = $this
->jsonify($framework_settings, TRUE);
$js_settings = [
'lazy' => '',
'blazy' => FALSE,
'background' => FALSE,
'breakpoint' => 'lg',
'optionset' => $entity
->id(),
'_admin' => TRUE,
'use_js' => FALSE,
];
// Dummy template.
$image_style_box = [
'#type' => 'select',
'#options' => image_style_options(TRUE),
'#empty_option' => $this
->t('- IMG style -'),
'#attributes' => [
'class' => [
'form-select--image-style',
'form-select--original',
],
'data-imageid' => '',
'id' => '',
],
'#wrapper_attributes' => [
'class' => [
'form-item--image-style',
],
],
];
$form['template'] = [
'#type' => 'container',
'#attributes' => [
'id' => 'gridstack-template',
'class' => [
'visually-hidden',
],
],
'#dummies' => TRUE,
'#theme' => [
'gridstack_dummy',
],
'#image_style' => $image_style_box,
];
// Preview template.
$settings['root'] = TRUE;
$settings['display'] = 'main';
$settings['storage'] = '';
$settings['use_framework'] = FALSE;
$settings['config'] = $data_config;
$entity
->gridsJsonToArray($settings);
$js_settings = array_merge($js_settings, $settings);
$form['json'] = [
'#type' => 'container',
'#tree' => TRUE,
'#attributes' => [
'class' => [
'gridstack-json',
'visually-hidden',
],
],
];
$form['json']['grids'] = [
'#type' => 'container',
];
$form['json']['breakpoints'] = [
'#type' => 'hidden',
'#default_value' => $entity
->getJson('breakpoints'),
];
$form['json']['settings'] = [
'#type' => 'hidden',
'#default_value' => $entity
->getJson('settings'),
];
$form['options'] = [
'#type' => 'container',
'#tree' => TRUE,
'#title' => $this
->t('Options'),
'#title_display' => 'invisible',
'#attributes' => [
'class' => [
'details--settings',
'has-tooltip',
],
],
'#access' => $entity
->id() == 'default' ? FALSE : TRUE,
];
$form['options']['icon'] = [
'#type' => 'hidden',
'#default_value' => isset($options['icon']) ? $options['icon'] : '',
'#attributes' => [
'id' => 'gridstack-icon',
'data-url' => $entity
->getIconUrl(TRUE),
],
];
$form['options']['use_framework'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Use static <span>@framework</span> grid', [
'@framework' => $framework,
]),
'#default_value' => $entity
->getOption('use_framework'),
'#description' => $this
->t("Check to enable static grid framework. Must enable the support <a href=':url'>here</a> first. This requires basic comprehension on how a static grid like Bootstrap, or Foundation, works. And GridStack preview limitation. Basically on how columns and rows build up the grid system. Failing to understand it may result in broken grids (this is no issue if using GridStack JS, unchecked).<br>If checked: <ul><li>No GridStack JS/ CSS assets are loaded at front-end.</li><li>Must have a theme, or module, that loads Bootstrap/ Foundation CSS for you.</li><li>No fixed height, just auto height. Repeat, height is ignored.</li><li>Boxes are floating like normal CSS floats, no longer absolutely positioned. The above preview may trick you, bear with it.</li><li>No longer a fixed-height magazine layout. Just a normal floating CSS grid layout.</li><li>This layout is only available for core <strong>Field Layout, DS, Panelizer, or Widget</strong> modules. Leave it unchecked if not using them, else useless for GridStack alone.</li></ul>Clone an existing Default Bootstrap/ Foundation optionset to begin with. Limitation: pull, push classes are not supported, yet.", [
':url' => Url::fromRoute('gridstack.settings')
->toString(),
]),
'#wrapper_attributes' => [
'class' => [
'use-framework',
'form-item--tooltip-bottom',
],
],
'#disabled' => $framework_enabled,
];
$form['options']['type'] = [
'#type' => 'select',
'#title' => $this
->t('Type'),
'#options' => [
'full' => $this
->t('Full'),
'partial' => $this
->t('Partial'),
'page' => $this
->t('Page'),
],
'#empty_option' => $this
->t('- None -'),
'#default_value' => isset($options['type']) ? $options['type'] : '',
'#description' => $this
->t('TODO! Non-functional yet. Defines how the layout will be used in a page. This will also be used for layout Category. Can be one of: <ul><li><strong>full</strong>: The layout is used for an entire page, not just the main content.</li><li><strong>page</strong>: The layout is used for just the main page response (i.e., whatever is returned by the controller).</li><li><strong>partial:</strong> A partial layout that can be used for sub-regions -- roughly analogous to Mini Panels in Drupal 7.</li></ul>'),
'#wrapper_attributes' => [
'class' => [
'visually-hidden',
],
],
];
if ($admin_css) {
$form['options']['use_framework']['#field_suffix'] = ' ';
$form['options']['use_framework']['#title_display'] = 'before';
}
// Main JS options.
$form['options']['settings'] = [
'#type' => 'details',
'#tree' => TRUE,
'#open' => FALSE,
'#title' => $this
->t('GridStack JS Settings'),
'#description' => $this
->t('This only affects GridStack JS, not Bootstrap/ Foundation.'),
'#attributes' => [
'class' => [
'form-wrapper--gridstack-settings',
],
],
];
$form['options']['settings']['auto'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Auto'),
'#description' => $this
->t("If unchecked, gridstack will not initialize existing items, means broken."),
];
$form['options']['settings']['cellHeight'] = [
'#type' => 'textfield',
'#title' => $this
->t('Cell height'),
'#description' => $this
->t("One cell height. <strong>0</strong> means the library will not generate styles for rows. Everything must be defined in CSS files. <strong>auto (-1)</strong> means height will be calculated from cell width. Default 60. Be aware, auto has issues with responsive displays. Put <strong>-1</strong> if you want <strong>auto</strong> as this is an integer type."),
];
$form['options']['settings']['float'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Float'),
'#description' => $this
->t("Enable floating widgets. See http://troolee.github.io/gridstack.js/demo/float.html. Default FALSE."),
];
$form['options']['settings']['minWidth'] = [
'#type' => 'textfield',
'#title' => $this
->t('Min width'),
'#field_suffix' => 'px',
'#description' => $this
->t('If window width is less, grid will be shown in one-column mode, with added class: <strong>gridstack--disabled</strong>. Recommended the same as or less than XS below, if provided. Default 768.'),
];
$form['options']['settings']['width'] = [
'#type' => 'select',
'#title' => $this
->t('Amount of columns'),
'#options' => $this
->getColumnOptions(),
'#attributes' => [
'class' => [
'form-select--column',
],
'data-target' => '.gridstack--' . $icon_breakpoint,
],
'#description' => $this
->t('The amount of columns. <strong>Important!</strong> This desktop column is overridden and ignored by LG below if provided.'),
];
$form['options']['settings']['height'] = [
'#type' => 'textfield',
'#title' => $this
->t('Maximum rows'),
'#field_suffix' => 'px',
'#description' => $this
->t("Maximum rows amount. Default is <strong>0</strong> which means no maximum rows."),
];
$form['options']['settings']['rtl'] = [
'#type' => 'checkbox',
'#title' => $this
->t('RTL'),
'#description' => $this
->t("If <strong>true</strong> turns grid to RTL. Possible values are <strong>true</strong>, <strong>false</strong>, <strong>auto</strong> -- default. See http://troolee.github.io/gridstack.js/demo/rtl.html."),
];
$form['options']['settings']['verticalMargin'] = [
'#type' => 'textfield',
'#title' => $this
->t('Vertical margin'),
'#field_suffix' => 'px',
'#description' => $this
->t("Vertical gap size. Default 20."),
];
$form['options']['settings']['noMargin'] = [
'#type' => 'checkbox',
'#title' => $this
->t('No horizontal margin'),
'#description' => $this
->t('If checked, be sure to put 0 for Vertical margin to avoid improper spaces.'),
];
$form['options']['settings']['staticGrid'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Static grid'),
'#description' => $this
->t("Makes grid static. If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable. A CSS class <strong>grid-stack-static</strong> is also added to the container. CHECK this to have static HTML at front end."),
'#prefix' => '<h2 class="form__title">' . $this
->t('jQuery UI related options. <small>It does not affect Admin preview. Manage global options <a href=":url" target="_blank">here</a>.</small>', [
':url' => Url::fromRoute('gridstack.settings')
->toString(),
]) . '</h2>',
];
// Admin UI related options.
$form['options']['settings']['draggable'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Draggable'),
'#description' => $this
->t('Allows to override jQuery UI draggable options. UNCHECK this to have static HTML at front end.'),
];
$form['options']['settings']['resizable'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Resizable'),
'#description' => $this
->t('Allows to override jQuery UI resizable options. UNCHECK this to have static HTML at front end.'),
];
$form['options']['settings']['disableDrag'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Disable drag'),
'#description' => $this
->t('Disallows dragging of widgets. CHECK this to have static HTML at front end.'),
];
$form['options']['settings']['disableResize'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Disable resize'),
'#description' => $this
->t('Disallows resizing of widgets. CHECK this to have static HTML at front end.'),
];
$form['options']['settings']['alwaysShowResizeHandle'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Show resize handle'),
'#description' => $this
->t('UNCHECK this to have static HTML at front end.'),
];
$available_breakpoints = $entity::getConstantBreakpoints();
// Foundation only supports SM, MD, LG, not XL.
if ($foundation || $framework == 'bootstrap3') {
array_pop($available_breakpoints);
}
if ($is_default) {
$available_breakpoints = [
'lg',
];
}
$definition['settings'] = $options;
$definition['breakpoints'] = $available_breakpoints;
$breakpoint_elements = $this->blazyAdmin
->breakpointElements($definition);
$form['options']['breakpoints'] = [
'#type' => 'vertical_tabs',
'#tree' => TRUE,
'#group' => 'breakpoints',
'#parents' => [
'breakpoints',
],
'#default_tab' => 'edit-options-breakpoints-' . $icon_breakpoint,
'#prefix' => '<h2 class="form__title form__title--responsive">' . $this
->t('Responsive multi-breakpoint grids<small><span class="visible-js">XS is expected for disabled state defined by <strong>Min width</strong>.<br>Image styles will be forced uniformly, if provided. The column will be updated at the given breakpoint.</span><br>Be sure to follow the natural order keyed by index if trouble<span class="visible-js"> with multiple breakpoint image styles</span>. <br><strong>Note!</strong> If using static Bootstrap/ Foundation grid, this is a normal min-width, or mobile first layout.</small>') . '</h2>',
];
$js_settings['use_framework'] = $entity
->getOption('use_framework');
$js_settings['is_framework'] = !empty($js_settings['use_framework']);
$js_settings['_admin'] = TRUE;
$js_settings['optionset'] = $entity
->isNew() ? 'default' : $entity
->id();
foreach ($breakpoint_elements as $column => $elements) {
$storage = 'edit-options-breakpoints-' . $column . '-grids';
$nested_storage = 'edit-options-breakpoints-' . $column . '-nested';
$columns = isset($options['breakpoints']) && isset($options['breakpoints'][$column]) ? $options['breakpoints'][$column] : [];
$current_column = isset($columns['column']) ? $columns['column'] : 12;
$current_width = isset($columns['width']) ? $columns['width'] : '';
$current_column === -1 ? 'auto' : $current_column;
if ($framework_enabled) {
$current_column = 12;
}
// Details.
$form[$column]['#type'] = $is_default ? 'container' : 'details';
$form[$column]['#tree'] = TRUE;
$form[$column]['#open'] = TRUE;
$form[$column]['#group'] = 'breakpoints';
$form[$column]['#parents'] = [
'options',
'breakpoints',
$column,
];
$form[$column]['#title'] = $column;
// Settings.
$js_settings['breakpoint'] = $column;
$js_settings['display'] = 'responsive';
$js_settings['storage'] = $storage;
$js_settings['nested_storage'] = $nested_storage;
$js_settings['icon_breakpoint'] = $icon_breakpoint;
$js_settings['breakpoint_width'] = $current_width;
$entity
->gridsJsonToArray($js_settings);
// Fallback for totally empty before any string inserted.
$main_grids = $entity
->getEndBreakpointGrids();
$nested_grids = $entity
->getEndBreakpointGrids('nested');
$column_grids_json = empty($columns['grids']) ? Json::encode($main_grids) : $columns['grids'];
$column_grids = is_string($column_grids_json) ? Json::decode($column_grids_json) : $column_grids_json;
$nested_check = array_filter($nested_grids);
$nested_grids_end = empty($nested_check) ? '' : Json::encode($nested_grids);
$nested_grids_json = empty($columns['nested']) ? $nested_grids_end : $columns['nested'];
// Fallback for not so empty when json grids deleted leaving to string.
if (empty($column_grids)) {
$column_grids_json = Json::encode($grids);
$column_grids = $grids;
}
// Preview.
$preview = [];
if (in_array($column, [
'xs',
]) && !$bootstrap) {
$lg = $this
->t('<small>Grids and image styles are managed at the topmost display.</small>');
$sm = $this
->t('<small>Grids are in one column mode here.</small>');
$small = $column == 'xs' ? $sm : $lg;
$preview = [
'#markup' => '<h3 class="form__title">' . $column . $small . '</h3>',
'#attributes' => [
'class' => [
'form-item--center',
],
],
];
}
else {
$preview['#theme'] = 'gridstack_admin';
$preview['#items'] = [];
$preview['#settings'] = $js_settings;
$preview['#weight'] = -10;
$preview['#content_attributes'] = [
'class' => [
'gridstack--root',
'gridstack--' . $column,
$js_settings['icon_breakpoint'] == $js_settings['breakpoint'] ? 'gridstack--main' : 'gridstack--sub',
],
'data-breakpoint' => $column,
'data-config' => $data_config,
'data-config-framework' => $data_config_framework,
'data-framework' => $framework_enabled ? 1 : 0,
'data-index' => 1,
'data-preview-grids' => $column_grids_json,
'data-nested-grids' => $nested_grids_json,
'data-storage' => $storage,
'data-nested-storage' => $nested_storage,
'data-current-column' => $current_column,
'data-responsive-width' => $current_width,
];
}
// Build preview.
$form[$column]['preview'] = $preview;
// Breakpoint elements.
foreach ($elements as $key => $element) {
// Elements.
$form[$column][$key] = $element;
$form[$column][$key]['#title_display'] = 'before';
$form[$column][$key]['#wrapper_attributes']['class'][] = 'form-item--' . str_replace('_', '-', $key);
$form[$column]['breakpoint']['#wrapper_attributes']['class'][] = 'visually-hidden';
// Overrides base.
$form[$column]['width']['#weight'] = 10;
$form[$column]['width']['#title'] = $this
->t('@breakpoint width', [
'@breakpoint' => $column,
]);
$form[$column]['width']['#field_suffix'] = 'px';
$form[$column]['width']['#attributes']['data-target'] = '.gridstack--' . $column;
$form[$column]['width']['#description'] = $this
->t('<ul><li>For GridStack JS, the minimum value must be <strong>>= Min width</strong> above.</li><li>For static Bootstrap/Foundation, it only affects this very admin page for preview. The actual breakpoint is already defined by their CSS. Adjust it for correct preview. EM to PX conversion is based on 16px base font-size:<br>Bootstrap 3:<br><strong>SM >= 768px, MD >= 992px, LG >= 1200px</strong><br>Bootstrap 4: <br><strong>XS < 576px, SM >= 576px, MD >= 768px, LG >= 992px, XL >= 1200px</strong><br>Foundation:<br><strong>SM >= 0px, MD >= 641px (40.063em), LG >= 1025px (64.063em)</strong></li></ul>Leave it empty to disable/ ignore this breakpoint. <br><strong>Tips:</strong> Temporarily increase this to 768+ if trouble to expand shrinked boxes.');
$form[$column]['image_style']['#description'] = $this
->t('This will use uniform image style as a fallback if provided. To refine each image style for each box, use the image style within each box.');
$form[$column]['image_style']['#weight'] = 10;
$default_value = isset($columns[$key]) ? $columns[$key] : '';
$form[$column][$key]['#default_value'] = $default_value;
$form[$column]['column'] = [
'#type' => 'select',
'#title' => $this
->t('Column'),
'#options' => $this
->getColumnOptions(),
'#empty_option' => $this
->t('- None -'),
'#default_value' => $current_column,
'#weight' => 11,
'#attributes' => [
'class' => [
'form-select--column',
],
'data-target' => '.gridstack--' . $column,
],
'#description' => $this
->t('The minimum column for this breakpoint. Try changing this if some grid/box is accidentally hidden to bring them back into the viewport. <br><strong>Important!</strong> This must be 12 if using static Bootstrap/ Foundation.'),
'#wrapper_attributes' => [
'class' => [
'form-item--column',
],
],
];
if ($column == $icon_breakpoint) {
$form[$column]['column']['#description'] .= ' ' . $this
->t('Once provided, this will override the <strong>Amount of columns</strong> option above. Update the <strong>Amount of columns</strong> to match this new value if confused.');
}
// The actual grid elements which store the settings.
// @todo: Support XS for Bootstrap 4?
$form[$column]['grids'] = [
'#type' => 'hidden',
'#default_value' => $column_grids_json,
'#weight' => 20,
'#wrapper_attributes' => [
'class' => [
'visually-hidden',
],
],
];
$form[$column]['nested'] = [
'#type' => 'hidden',
'#default_value' => empty($columns['nested']) ? '' : $columns['nested'],
'#weight' => 20,
'#wrapper_attributes' => [
'class' => [
'visually-hidden',
],
],
];
if ($is_default) {
$form[$column][$key]['#wrapper_attributes'] = [
'class' => [
'visually-hidden',
],
];
$form[$column][$key]['#description'] = '';
$form[$column]['column']['#type'] = 'hidden';
$form[$column]['column']['#default_value'] = 12;
$form[$column]['width']['#default_value'] = 1200;
}
}
}
$excludes = [
'container',
'details',
'item',
'hidden',
'submit',
];
foreach ($default
->getOptions('settings') as $name => $value) {
if (!isset($form['options']['settings'][$name])) {
continue;
}
if (in_array($form['options']['settings'][$name]['#type'], $excludes) && !isset($form['options']['settings'][$name])) {
continue;
}
if ($admin_css) {
if ($form['options']['settings'][$name]['#type'] == 'checkbox') {
$form['options']['settings'][$name]['#field_suffix'] = ' ';
$form['options']['settings'][$name]['#title_display'] = 'before';
}
}
if (!isset($form['options']['settings'][$name]['#default_value'])) {
$form['options']['settings'][$name]['#default_value'] = isset($settings[$name]) ? $settings[$name] : $value;
}
}
return $form;
}