function pwa_admin_configuration_manifest in Progressive Web App 7.2

Same name and namespace in other branches

1. 7 pwa.admin.inc \pwa_admin_configuration_manifest()

Configure PWA settings for manifest.json

1 call to pwa_admin_configuration_manifest()

pwa_admin_configuration in ./pwa.admin.inc

Main configuration page for PWA.

1 string reference to 'pwa_admin_configuration_manifest'

pwa_menu in ./pwa.module

Implements hook_menu().

File

./pwa.admin.inc, line 109

PWA administration forms.

Code

function pwa_admin_configuration_manifest() {
  $form = [];
  $form['pwa_short_name'] = [
    '#type' => 'textfield',
    '#title' => t('Short name'),
    '#description' => t('Name of the shortcut created on the device. Should be like an app name (one short word or an acronym).'),
    '#size' => 10,
    '#default_value' => variable_get('pwa_short_name', variable_get('site_name')),
    '#required' => TRUE,
  ];
  $form['pwa_name'] = [
    '#type' => 'textfield',
    '#title' => t('Name'),
    '#description' => t('Usually appears as the name on the splash screen during launch.'),
    '#size' => 30,
    '#default_value' => variable_get('pwa_name', variable_get('site_name')),
    '#required' => TRUE,
  ];
  $form['pwa_description'] = [
    '#type' => 'textfield',
    '#title' => t('Description'),
    '#description' => t('A short description of the Progressive Web App. Answer the question "Why do I need this app?"'),
    '#default_value' => variable_get('pwa_description', ''),
  ];
  $form['pwa_background_color'] = [
    '#type' => 'textfield',
    '#title' => t('Background color'),
    '#description' => t('Color of the browser UI when launching from home screen.'),
    '#size' => 8,
    '#default_value' => variable_get('pwa_background_color', '#F6F6F2'),
  ];
  $form['pwa_theme_color'] = [
    '#type' => 'textfield',
    '#title' => t('Theme color'),
    '#description' => t('Color of the background splash page when launching from home screen.'),
    '#size' => 8,
    '#default_value' => variable_get('pwa_theme_color', '#53B0EB'),
  ];
  if (module_exists('color')) {
    $form['pwa_background_color']['#value_callback'] = 'color_palette_color_value';
    $form['pwa_theme_color']['#value_callback'] = 'color_palette_color_value';
  }
  $form['pwa_start_url'] = [
    '#type' => 'textfield',
    '#title' => t('Start URL'),
    '#description' => t('Home page when launched from home screen. You can append a query string for analytics. For example <code>/home?startfrom=manifest</code>.'),
    '#default_value' => variable_get('pwa_start_url', '/?source=pwa'),
  ];
  $form['pwa_orientation'] = [
    '#type' => 'select',
    '#title' => t('Orientation'),
    '#options' => [
      'portrait' => t('Portrait'),
      'landscape' => t('Landscape'),
    ],
    '#default_value' => variable_get('pwa_orientation', 'portrait'),
  ];
  $form['pwa_display'] = [
    '#type' => 'select',
    '#title' => t('Display'),
    '#options' => [
      'fullscreen' => t('Full screen'),
      'standalone' => t('Standalone'),
      'minimal-ui' => t('Minimal UI'),
      'browser' => t('Browser'),
    ],
    '#description' => t('Determines whether the PWA will behave like a web page or a native app. <a href="@mdn-display" target="_blank" rel="noopener">Read more at MDN</a>.', [
      '@mdn-display' => 'https://developer.mozilla.org/en-US/docs/Web/Manifest#display',
    ]),
    '#default_value' => variable_get('pwa_display', 'standalone'),
  ];
  $form['pwa_icons'] = [
    '#type' => 'fieldset',
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#title' => t('Branding icons'),
    '#description' => t('Use <code>hook_pwa_manifest_alter()</code> to configure custom icons. <a href="@manifest-example" target="_blank" rel="noopener">See official example</a>.', [
      '@manifest-example' => 'https://git.drupalcode.org/project/pwa/-/blob/7.x-2.x/pwa.api.php#L33',
    ]),
  ];
  $form['#attached']['css'][] = drupal_get_path('module', 'pwa') . '/css/icons.css';

  // Define the SVG mask showing the safe zone.
  $svg = '<svg viewBox="0 0 100 100" style="width:0px;height:0px;" xmlns="http://www.w3.org/2000/svg"><defs><mask id="pwa-maskcircle"><rect fill="white" width="100%" height="100%"/><circle cx="50" cy="50" r="40" fill="black"/></mask><rect id="pwa-mask" fill="red" opacity="0.5" width="100%" height="100%" mask="url(#pwa-maskcircle)"/></defs></svg>';
  $svg_mask = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pwa-mask"/></svg>';
  $maskable = FALSE;
  $rows = [];
  foreach (_pwa_manifest_file()['icons'] as $i => $icon) {
    $mask = strpos($icon['purpose'], 'maskable') !== FALSE;
    if ($mask) {
      $maskable = TRUE;
    }
    $rows[] = [
      '<pre>' . check_plain(str_replace('\\/', '/', json_encode($icon, JSON_PRETTY_PRINT))) . '</pre>',
      '<span class="pwa-maskable"><img src="' . $icon['src'] . '">' . ($mask ? $svg_mask : '') . '</span>',
    ];
  }
  $form['pwa_icons']['details'] = [
    '#type' => 'item',
    '#markup' => $svg . theme('table', [
      'header' => [
        t('Properties'),
        t('Image'),
      ],
      'rows' => $rows,
      'attributes' => [
        'id' => 'mytable-order',
      ],
    ]),
    '#description' => !$maskable ? '' : t('For maskable icons the circle inside the red area is the <a href="@maskable-spec" target="_blank" rel="noopener">safe zone</a>.', [
      '@maskable-spec' => 'https://w3c.github.io/manifest/#icon-masks',
    ]),
  ];
  $form = system_settings_form($form);

  // Wait for all the values to be saved before refreshing cache.
  $form['#submit'][] = 'pwa_admin_clear_cache';
  return $form;
}