protected function GridStackForm::getDescription in GridStack 8.2

Returns form item description.

3 calls to GridStackForm::getDescription()

GridStackForm::optionsForm in modules/gridstack_ui/src/Form/GridStackForm.php

Sets up the options form.

GridStackForm::previewForm in modules/gridstack_ui/src/Form/GridStackForm.php

Sets up the preview form.

GridStackForm::settingsForm in modules/gridstack_ui/src/Form/GridStackForm.php

Sets up the settings form.

File

modules/gridstack_ui/src/Form/GridStackForm.php, line 34

Class

GridStackForm

Extends base form for gridstack instance configuration form.

Namespace

Drupal\gridstack_ui\Form

Code

protected function getDescription($key) {
  $url1 = Url::fromRoute('gridstack.settings')
    ->toString();
  $url2 = 'https://gridstackjs.com/demo/float.html';
  $url3 = 'https://gridstackjs.com/demo/rtl.html';
  $description = [
    'use_framework' => $this
      ->t("If you don't clone the provided Bootstrap/Foundation default, be sure to save the form first before working to set things up correctly. Check to enable static grid framework (Bootstrap/Foundation). Uncheck to use native CSS Grid, or JS layout. 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 previews 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>Layout Builder, 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' => $url1,
    ]),
    'settings' => $this
      ->t('This only affects GridStack JS and native CSS Grid, not Bootstrap/ Foundation. Only few are applicable for native Grid: Min width, Cell height, margins, and columns.'),
    'auto' => $this
      ->t("If unchecked, gridstack will not initialize existing items, means broken."),
    'cellHeight' => $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."),
    'float' => $this
      ->t("Enable floating widgets. See <a href=':url'>float sample</a>. Default FALSE.", [
      ':url' => $url2,
    ]),
    'minWidth' => $this
      ->t('If window width is less, grid will be shown in one-column mode, with added class: <strong>grid-stack-1</strong>. Recommended the same as or less than XS below, if provided. Default 768.'),
    'main_column' => $this
      ->t('The amount of columns. <strong>Important!</strong> This desktop column is overridden and ignored by LG/XL below if provided.'),
    'maxRow' => $this
      ->t("Maximum rows amount. Default is <strong>0</strong> which means no maximum rows."),
    'rtl' => $this
      ->t("If <strong>true</strong> turns grid to RTL. Possible values are <strong>true</strong>, <strong>false</strong>, <strong>auto</strong> -- default. See <a href=':url'>RTL</a>.", [
      ':url' => $url3,
    ]),
    'verticalMargin' => $this
      ->t("Vertical gap size. Default 20."),
    'noMargin' => $this
      ->t('If checked, be sure to put 0 for Vertical margin to avoid improper spaces.'),
    'breakpoints' => $this
      ->t('Responsive multi-breakpoint grids<small><span class="visible-js">XS is expected for disabled state defined by <strong>Min width</strong>.<br>The column will be updated at the given breakpoint. <br>Fooled not by incorrect aspect ratios. Trust the numbers in dark.</span><span class="visible-css"><strong>Note!</strong> If using static Bootstrap/ Foundation grid, this is a normal min-width, or mobile first layout. <br>Height is determined by the actual content. Here is just illustration to make nice icon.</span><br>If the layout is messed up for some reason, simply save and edit it back. It should re-arrange and correct the indices after saving. <br>Input relevant breakpoint value for the <b>Width</b> option below to make it editable, empty means disabled (non-editable).</small>'),
    'column' => $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. Avoid odd number, else headaches. Column is the best way to make <b>native CSS Grid</b> responsive.'),
    'column_icon' => $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.'),
    'lg' => $this
      ->t('<small><span class="visible-js">Grids are managed at the topmost settings. </span>This breakpoint is to generate icon. Best with total rows at maximum 16.</small>'),
    'sm' => $this
      ->t('<small>Grids are in one column mode here, disabled. Best height is 1x1 or 1x2 at most, else absurd.</small>'),
    'width' => $this
      ->t('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.<ul><li>For GridStack JS, the minimum value must be <strong>&gt;= Min width</strong> above.</li><li>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. Input relevant breakpoint value to make it editable.'),
  ];
  return isset($description[$key]) ? $description[$key] : NULL;
}