responsive_preview.module

<?php

/**
 * @file
 * Provides a component that previews the a page in various device dimensions.
 */

use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Core\Url;
use Drupal\responsive_preview\Entity\Device;

/**
 * Implements hook_help().
 */
function responsive_preview_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.responsive_preview':
      $output = '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('The Responsive Preview module provides a quick way to preview a page on your site within the dimensions of many popular device and screen sizes.') . '</p>';
      $output .= '<h3>' . t('Uses') . '</h3>';
      $output .= '<p>' . t('To launch a preview, first click the toolbar tab with the small device icon. The tab has the title "Preview page layout". A list of devices will appear. Selecting a device name will launch a preview of the current page within the dimensions of that device.') . '</p>';
      $output .= '<p>' . t('To close the preview, click the close button signified visually by an x.') . '</p>';
      return $output;
  }
}

/**
 * Implements hook_toolbar().
 */
function responsive_preview_toolbar() {
  $device_definition = \Drupal::entityTypeManager()->getDefinition('responsive_preview_device');

  $items['responsive_preview'] = [
    '#cache' => [
      'tags' => $device_definition->getListCacheTags(),
      'contexts' => ['user.permissions', 'route.is_admin'],
    ],
  ];

  $admin_route = \Drupal::service('router.admin_context')->isAdminRoute();
  $preview_access = \Drupal::currentUser()->hasPermission('access responsive preview');

  if ($preview_access && !$admin_route) {
    $items['responsive_preview'] += [
      '#type' => 'toolbar_item',
      '#weight' => 50,
      'tab' => [
        'trigger' => [
          '#type' => 'html_tag',
          '#tag' => 'button',
          '#value' => t('<span class="visually-hidden">Layout preview</span>'),
          '#attributes' => [
            'title' => t('Preview page layout'),
            'class' => [
              'responsive-preview-icon',
              'responsive-preview-icon-responsive-preview',
              'responsive-preview-trigger',
            ],
          ],
        ],
        'device_options' => responsive_preview_renderable_devices_list(),
      ],
      '#wrapper_attributes' => [
        'id' => 'responsive-preview-toolbar-tab',
        'class' => ['toolbar-tab-responsive-preview'],
      ],
      '#attached' => [
        'library' => ['responsive_preview/drupal.responsive-preview'],
      ],
    ];
  }

  return $items;
}

/**
 * Returns an array of enabled devices, suitable for rendering.
 *
 * @return array
 *   A render array of enabled devices.
 */
function responsive_preview_renderable_devices_list() {
  $links = [];

  $devices = \Drupal::entityTypeManager()
    ->getStorage('responsive_preview_device')
    ->loadByProperties(['status' => 1]);

  uasort($devices, [Device::class, 'sort']);

  foreach ($devices as $name => $entity) {
    $dimensions = $entity->getDimensions();
    $links[$name] = [
      '#type' => 'html_tag',
      '#tag' => 'button',
      '#value' => $entity->label(),
      '#attributes' => [
        'data-responsive-preview-name' => $name,
        'data-responsive-preview-width' => $dimensions['width'],
        'data-responsive-preview-height' => $dimensions['height'],
        'data-responsive-preview-dppx' => $dimensions['dppx'],
        'class' => [
          'responsive-preview-device',
          'responsive-preview-icon',
          'responsive-preview-icon-active'
        ],
      ],
    ];
  }

  // Add a configuration link.
  $links['configure_link'] = [
    '#type' => 'link',
    '#title' => t('Configure devices'),
    '#url' => Url::fromRoute('entity.responsive_preview_device.collection'),
    '#access' => \Drupal::currentUser()->hasPermission('administer responsive preview'),
    '#attributes' => [
      'class' => ['responsive-preview-configure'],
    ],
  ];

  return [
    '#theme' => 'item_list__responsive_preview',
    '#items' => $links,
    '#attributes' => [
      'class' => ['responsive-preview-options'],
    ],
    '#theme_wrappers' => [
      'container' => [
        '#attributes' => [
          'class' => ['responsive-preview-item-list']
        ],
      ],
    ],
  ];
}