on_the_web.module

<?php
/**
 * @file
 * Adds a block with a series of icons which link off-site to other web presences.
 */

// Pull in the list of services.
module_load_include('inc', 'on_the_web', 'on_the_web.services');

/**
 * Implements hook_config_info().
 */
function on_the_web_config_info() {
  $prefixes['on_the_web.settings'] = array(
    'label' => t('On The Web Settings'),
    'group' => t('Configuration'),
  );

  return $prefixes;
}

/**
 * Implements hook_block_info().
 */
function on_the_web_menu() {
  $items['admin/config/services/on_the_web'] = array(
    'title' => 'On The Web Settings',
    'page callback' => 'backdrop_get_form',
    'page arguments' => array('on_the_web_settings_form'),
    'access arguments' => array('administer blocks'),
    'type' => MENU_NORMAL_ITEM,
    'file' => 'on_the_web.admin.inc',
  );

  return $items;
}

/**
 * Implements hook_icon_info().
 */
function on_the_web_icon_info() {

  $icons['otw-bluesky'] = array(
    'name' => 'bluesky',
  );
  $icons['otw-bluesky-square'] = array(
    'name' => 'bluesky-square',
  );
  $icons['otw-delicious'] = array(
    'name' => 'delicious',
  );
  $icons['otw-envelope-square'] = array(
    'name' => 'envelope-square',
  );
  $icons['otw-envelope'] = array(
    'name' => 'envelope',
  );
  $icons['otw-facebook-f'] = array(
    'name' => 'facebook-f',
  );
  $icons['otw-facebook-square'] = array(
    'name' => 'facebook-square',
  );
  $icons['otw-flickr'] = array(
    'name' => 'flickr',
  );
  $icons['otw-github-square'] = array(
    'name' => 'github-square',
  );
  $icons['otw-github'] = array(
    'name' => 'github',
  );
  $icons['otw-instagram-square'] = array(
    'name' => 'instagram-square',
  );
  $icons['otw-instagram'] = array(
    'name' => 'instagram',
  );
  $icons['otw-lastfm-square'] = array(
    'name' => 'lastfm-square',
  );
  $icons['otw-lastfm'] = array(
    'name' => 'lastfm',
  );
  $icons['otw-linkedin-in'] = array(
    'name' => 'linkedin-in',
  );
  $icons['otw-linkedin-square'] = array(
    'name' => 'linkedin-square',
  );
  $icons['otw-mastodon'] = array(
    'name' => 'mastodon',
  );
  $icons['otw-pinterest-square'] = array(
    'name' => 'pinterest-square',
  );
  $icons['otw-pinterest'] = array(
    'name' => 'pinterest',
  );
  $icons['otw-podcast'] = array(
    'name' => 'podcast',
  );
  $icons['otw-rss-square'] = array(
    'name' => 'rss-square',
  );
  $icons['otw-rss'] = array(
    'name' => 'rss',
  );
  $icons['otw-soundcloud'] = array(
    'name' => 'soundcloud',
  );
  $icons['otw-tiktok'] = array(
    'name' => 'tiktok',
  );
  $icons['otw-twitter-square'] = array(
    'name' => 'twitter-square',
  );
  $icons['otw-twitter'] = array(
    'name' => 'twitter',
  );
  $icons['otw-youtube-square'] = array(
    'name' => 'youtube-square',
  );
  $icons['otw-youtube'] = array(
    'name' => 'youtube',
  );

  return $icons;
}

/**
 * Implements hook_block_info().
 */
function on_the_web_block_info() {
  $blocks['social_links'] = array(
    'info' => t('Social Media Icons'),
    'description' => t('Icons that link to your social media presence On The Web.'),
  );

  return $blocks;
}

/**
 * Implements hook_block_configure().
 */
function on_the_web_block_configure($delta = 'social_links', $settings = array()) {
  $form = array();
  if ($delta == 'social_links') {

    $form['services'] = array(
      '#type' => 'fieldset',
      '#title' => t('Display icons for the following services:'),
      '#description' => t('The URL for each service must be entered on the OTW
        <a href="!url">settings page</a>.', array('!url' => url('admin/config/services/on_the_web'))),
    );

    $form['services']['display'] = array(
      '#type' => 'radios',
      '#title' => t('Icon display'),
      '#options' => array(
        'auto' => t('Automatic'),
        'manual' => t('Explicit'),
      ),
      '#default_value' => (isset($settings['display'])) ? $settings['display'] : 'auto',
    );

    // Add descriptions to the radio buttons.
    $form['services']['display']['auto'] = array(
      '#description' => t('Show all icons that have corresponding links entered.'),
    );
    $form['services']['display']['manual'] = array(
      '#description' => t('Explicity choose icons here.'),
    );

    $services = on_the_web_get_services();
    $options = array();
    $defaults = array();
    $config = config('on_the_web.settings');
    foreach ($services as $service => $info) {
      $info['page'] = $config->get($service . '_page');

      // If the service has a URL provided...
      if ($info['page'] != '') {
        // Add the option
        $options[$service] = $info;
        // Check the box by default.
        $defaults[$service] = $service;
        // Get the weight so we can sort.
        $info['weight'] = $config->get($service . '_weight');
      }
    }

    // Sort the options on the block form to match weight.
    backdrop_sort($options);
    $sorted_options = array();
    foreach ($options as $service => $info) {
      $sorted_options[$service] = $info['name'];
    }

    if (!empty($options)) {
      $form['services']['enabled'] = array(
        '#type' => 'checkboxes',
        '#title' => t('Icons'),
        '#options' => $sorted_options,
        '#default_value' => (isset($settings['enabled'])) ? $settings['enabled'] : $defaults,
        '#description' => t('Please select the icons you would like displayed in this block.'),
        '#states' => array(
          'visible' => array(
            ':input[name="block_settings[services][display]"]' => array('value' => 'manual'),
          ),
        ),
      );
    }
    else {
      $form['services']['none'] = array(
        '#markup' => '<p class="warning">' . t('No services have been configured yet.') . '</p>',
      );
    }
  }

  return $form;
}

/**
 * Implements hook_block_view().
 */
function on_the_web_block_view($delta = 'social_links', $settings = array(), $contexts = array()) {
  $block = array(
    'subject' => NULL,
    'content' => on_the_web_display_block($delta, $settings, $contexts),
  );

  return $block;
}

/**
 * Block Display
 *
 * @return
 *    Content for block.
 */
function on_the_web_display_block($delta, $settings = array(), $contexts = array()) {
  $config = config('on_the_web.settings');
  $type = $config->get('type');
  $size = $config->get('size');
  $square = $config->get('square');
  $output = '';

  // Get the appropriate name to use in links.
  if ($config->get('sitename') == 1) {
    $name = config_get('system.core', 'site_name');
  }
  elseif ($config->get('sitename') == 0) {
    $name = t('us');
  }
  elseif ($config->get('sitename') == 2) {
    $name = t('me');
  }

  // Get the display style.
  $display = $settings['services']['display'];
  if ($display == 'manual') {
    $enabled = $settings['services']['enabled'];
  }

  // Get all active services.
  $services = on_the_web_get_services();

  $links = array();
  foreach ($services as $service => $info) {
    $link = $config->get($service . '_page');

    if (($display == 'auto' && ($link != '')) ||
        ($display == 'manual' && array_key_exists($service, $enabled) && $enabled[$service] === $service)) {

      if ($service != 'rss') {
        $title = t('Find !us on !service', array('!us' => $name, '!service' => $info['name']));
      }
      else {
        if ($config->get('sitename') == 1) {
          $rss_name = $name;
        }
        elseif ($config->get('sitename') == 0) {
          $rss_name = t('Our');
        }
        elseif ($config->get('sitename') == 2) {
          $rss_name = t('My');
        }
        $title = t('!us RSS feed', array('!us' => $rss_name));
      }

      $classes = array('on-the-web', 'otw-' . $type, 'otw-' . $service);

      $icon = FALSE;
      $icon_classes = array('otw-' . $size);

      // Load item data by type.
      switch ($type) {
        case 'font':
          if (isset($info['fa-icon'])) {
            $icon = $info['fa-icon'];
          }

          // Only add the v5 styles if we are using v5 or above.
          if ($config->get('version') == '5.x.x') {
            if (isset($info['v5style'])) {
              $icon_classes[] = $info['v5style'];
            }
          }

          // Only use a square icon if it exists.
          if ($square == TRUE && isset($info['fa-icon-square'])) {
            $icon = $info['fa-icon-square'];

            if ($config->get('version') == '5.x.x' && $service == 'linkedin') {
              // Exception for LinkedIn whicn uses a non-square icon in v5.
              $icon = $info['fa-icon'];
            }
          }
          break;

        case 'anchor':
          if ($square == TRUE && isset($info['svg-square'])) {
            $img_path = $info['svg-square'];
          }
          else {
            $img_path = $info['svg']; 
          }
          $path = backdrop_get_path('module', 'on_the_web');
          $icon = base_path() . $path . '/images/svgs/' . $img_path;
          break;

        case 'icon':
          $icon = $info['icon'];
          break;
      }

      $theme_function = 'on_the_web_item';
      if ($type == 'icon') {
        $theme_function .= '__icon';
      }

      $links[] = array(
        '#theme' => $theme_function,
        '#service' => $service,
        '#link' => $link,
        '#icon' => $icon,
        '#size' => $size,
        '#square' => $square,
        '#target' => $config->get('target'),
        '#title' => $title,
        '#classes' => $classes,
        '#icon_classes' => $icon_classes,
        '#weight' => $config->get($service . '_weight'),
      );
    }
  }

  // Add the assets.
  if ($type == 'anchor' || $type == 'icon') {
    $links['#attached']['css'][] = backdrop_get_path('module', 'on_the_web') . '/css/on_the_web.css';
  }

  elseif ($type == 'font') {
    if (!module_exists('font_awesome')) {

      $version = $config->get('version');
      switch ($version) {
        case '4.7.0':
          $font_url = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
          break;
        case '1.2.0':
          $font_url = 'https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css';
          break;
        case '5.x.x':
          $hash = $config->get('kit_hash');
          if (!empty($hash)) {
            $font_js_url = 'https://kit.fontawesome.com/' . $hash . '.js';
            $links['#attached']['js'][$font_js_url] = array('type' => 'external');
          }
          break;
      }

      if (isset($font_url)) {
        $links['#attached']['css'][$font_url] = array('type' => 'external');
      }
    }
  }

  // Add an alter here.
  backdrop_alter('on_the_web_links', $links);

  return backdrop_render($links);
}

/**
 * Implements hook_theme().
 */
function on_the_web_theme($existing, $type, $theme, $path) {
  return array(
    'on_the_web_item' => array(
      'variables' => array(
        'service' => NULL,
        'link' => NULL,
        'icon' => 'fa-fort-awesome',
        'size' => 'sm',
        'square' => FALSE,
        'title' => NULL,
        'classes' => array(),
        'icon_classes' => array(),
      ),
      'file' => 'on_the_web.theme.inc',
    ),
    // Why is this necessary?
    'on_the_web_item__icon' => array(
      'variables' => array(
        'service' => NULL,
        'link' => NULL,
        'icon' => 'phosphor-logo',
        'size' => 'sm',
        'square' => FALSE,
        'title' => NULL,
        'classes' => array(),
        'icon_classes' => array(),
      ),
      'file' => 'on_the_web.theme.inc',
    ),

    // Administration form.
    'on_the_web_settings_form' => array(
      'render element' => 'form',
      'file' => 'on_the_web.theme.inc',
    ),
  );
}

/*******************************************************************************
 * Untilty functions.
*******************************************************************************/

/**
 * Builds the appropriate icon using OTW settings and service information.
 *
 * @param string $icon
 *   Name of the icon being rendered.
 *
 * @param array $settings
 *   OTW settings used to render the icon.
 *   - 'icon_classes' - classes to add to the SVG tag.
 *   - 'alt' - Alternate tag for the SVG element.
 *   - 'size' - ('sm' or 'lg') requested size for the SVG.
 *   - 'square' (bool) = whether the icon should be rendered in a square or not.
 *
 * @return string
 *   rendered SVG tag.
 */
function otw_build_svg($icon, $settings) {
  $icon_classes = $settings['icon_classes'];
  $alt = $settings['alt'];
  $size = $settings['size'];
  $square = $settings['square'];

  $icon_classes[] = 'otw-' . $size;
  if ($square) {
    $icon_classes[] = 'otw-square';
  }

  $svg_attributes = array('class' => $icon_classes);
  switch ($size) {
    case 'sm':
      $svg_attributes['width'] = '32px';
      break;
    case 'lg':
      $svg_attributes['width'] = '64px';
      break;
  }

  $svg_options = array(
    'alt' => $alt,
    'attributes' => $svg_attributes,
  );

  return icon($icon, $svg_options);
}

/**
 * Builds the appropriate icon using OTW settings and service information.
 *
 * @param string $icon
 *   Name of the icon being rendered.
 *
 * @param array $settings
 *   OTW settings used to render the icon.
 *   - 'icon_classes' - classes to add to the SVG tag.
 *   - 'alt' - Alternate tag for the SVG element.
 *   - 'size' - string 'sm' or 'lg' - requested size for the SVG.
 *   - 'square' (bool) = whether the icon should be rendered in a square or not.
 *   - 'type' - string 'legacy' or 'icon' - type of icon requested.
 *
 * @return string
 *   rendered SVG tag.
 */
function otw_build_svg_renderable($icon, $settings) {
  $icon_classes = $settings['icon_classes'];
  $alt = $settings['alt'];
  $size = $settings['size'];
  $square = $settings['square'];
  $type = $settings['type'];

  $icon_inverse = array('lastfm-logo-fill', 'checkerboard-fill', 'linkedin-logo-fill', 'rss-fill');
  $legacy_inverse = array('otw-mastodon', 'otw-tiktok', 'otw-podcast', 'otw-soundcloud');

  $icon_classes[] = 'otw-' . $size;
  if ($square) {
    if ($type != 'legacy') {
      $icon_classes[] = 'otw-square';
      if (in_array($icon, $icon_inverse)) {
        $icon_classes[] = 'otw-icon-inverse';
      }
    }
    elseif (in_array($icon, $legacy_inverse)) {
      $icon_classes[] = 'otw-legacy-inverse';
    }
  }

  $svg_attributes = array('class' => $icon_classes, 'fill' => 'currentColor');
  switch ($size) {
    case 'sm':
      $svg_attributes['width'] = '32px';
      break;
    case 'lg':
      $svg_attributes['width'] = '64px';
      break;
  }

  return array(
    '#theme' => 'icon',
    '#name' => $icon,
    '#path' => icon_get_path($icon),
    '#alt' => $alt,
    '#attributes' => $svg_attributes,
  );
}