style blocks and block menu

<?php

/**

 * @file

 * Contains links related theme functions.

 */

use Drupal\Component\Utility\Html;

use Drupal\Core\Template\Attribute;

use Drupal\Core\Url;

/**

 * Implements theme_links().

 */

function semanticui_links($variables) {

  $links = (array) $variables['links'];

  $attributes = (array) $variables['attributes'];

  $heading = $variables['heading'];

  global $language_url;

  $output = '';

  if (count($links) > 0) {

    $output = '';

    // Treat the heading first if it is present to prepend it to the

    // list of links.

    if (!empty($heading)) {

      if (is_string($heading)) {

        // Prepare the array that will be used when the passed heading

        // is a string.

        $heading = [

          'text'  => $heading,

          // Set the default level of the heading.

          'level' => 'h2',

        ];

      }

      $output .= '<' . $heading['level'];

      if (!empty($heading['class'])) {

        $output .= new Attribute(['class' => $heading['class']]);

      }

      $output .= '>' . Html::escape($heading['text']) . '</' . $heading['level'] . '>';

    }

    $output .= '<div' . new Attribute($attributes) . '>';

    $num_links = count($links);

    $i = 1;

    foreach ($links as $key => $link) {

      $class = [$key];

      $link['attributes']['class'][] = 'item';

      // Add first, last and active classes to the list of links

      // to help themers.

      if ($i == 1) {

        $class[] = 'first';

      }

      if ($i == $num_links) {

        $class[] = 'last';

      }

      if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page())) && (empty($link['language']) || $link['language']->language == $language_url->language)) {

        $class[] = 'active';

      }

      if (isset($link['href'])) {

        // Pass in $link as $options, they share the same keys.

        $link['attributes']['class'] = isset($link['attributes']['class']) ? $link['attributes']['class'] : [];

        $link['attributes']['class'] += $class;

        $output .= l($link['title'], $link['href'], $link);

      }

      elseif (!empty($link['title'])) {

        // Some links are actually not links, but we wrap these in <span> for

        // adding title and class attributes.

        if (empty($link['html'])) {

          $link['title'] = Html::escape($link['title']);

        }

        $item_attributes = '';

        if (isset($link['attributes'])) {

          $item_attributes = new Attribute($link['attributes']);

        }

        $output .= '<div' . $item_attributes . '><div>' . $link['title'] . '</div></div>';

      }

      $i++;

    }

    $output .= '</div>';

  }

  return $output;

}

/**

 * Implements theme_links__node().

 */

function semanticui_links__node($variables) {

  if (($list_class = array_search('list', $variables['attributes']['class'])) !== FALSE) {

    $variables['attributes']['class'][$list_class] = 'menu';

    $variables['attributes']['class'][] = 'secondary';

  }

  return semanticui_links($variables);

}

/**

 * Implements hook_preprocess_menu_local_task().

 */

function semanticui_preprocess_menu_local_task(&$variables) {

  $variables['element']['#link']['url']->setOption('attributes', ['class' => ['item']]);

}

/**

 * Implements theme_links__node() for forum node.

 */

function semanticui_links__node_forum($variables) {

  // Forum topic links displayed as buttons

  foreach ($variables['links'] as $key => $link) {

    $variables['links'][$key]['title'] = '<button class="mini basic ui button">' . $variables['links'][$key]['title'] . '</button>';

  }

  return semanticui_links($variables);

}

/**

 * Implements theme_menu_local_action().

 */

function semanticui_menu_local_action($variables) {

  $link = $variables['element']['#link'];

  if (isset($link['href'])) {

    $link['localized_options']['attributes']['class'][] = 'ui button';

    $output = \Drupal::l($link['title'], $link['url']);

  }

  elseif (!empty($link['localized_options']['html'])) {

    $output = '<div class="ui button">' . $link['title'] . '</div>';

  }

  else {

    $output = '<div class="ui button">' . Html::escape($link['title']) . '</div>';

  }

  $output .= "\n";

  return $output;

}

/**

 * Implements theme_links__toolbar_menu().

 */

function semanticui_links__toolbar_menu($variables) {

  if (!empty($variables['attributes']['class']) && is_array($variables['attributes']['class'])) {

    if (($ui = array_search('ui', $variables['attributes']['class'])) !== FALSE) {

      unset($variables['attributes']['class'][$ui]);

    }

    if (($links = array_search('links', $variables['attributes']['class'])) !== FALSE) {

      unset($variables['attributes']['class'][$links]);

    }

  }

  print render($variables);

}

/**

 * Implements theme_links__contextual().

 *

 * Wraps contextual links with popup box.

 */

function semanticui_links__contextual(&$vars) {

  return '<div class="ui popup">' . semanticui_links($vars) . '</div>';

}

 * Contains menu related theme functions.

 */

use Drupal\Component\Utility\Html;

use Drupal\block\Entity\Block;

/**

 * Implements theme_menu_tree().

 * Implements hook_preprocess_HOOK().

 */

function semanticui_menu_tree(&$variables) {

  return '<div class="ui fluid vertical menu">' . $variables['tree'] . '</div>';

function semanticui_preprocess_block(array &$variables) {

  if (!empty($variables['elements']['#id'])) {

    $variables['content']['#attributes']['block'] = $variables['elements']['#id'];

  }

/**

 * semanticui theme wrapper function for the submenu links.

 */

function semanticui_menu_tree__submenu(&$variables) {

  return '<div class="menu">' . $variables['tree'] . '</div>';

}

/**

 * semanticui theme wrapper function for the secondary menu links.

 *

 * Here is no need in wrapper as these items are rendered in the page that

 * provides menu markup (see page.tpl.php).

 */

function semanticui_menu_tree__secondary(&$variables) {

  return '<div class="ui secondary pointing menu">' . $variables['tree'] . '</div>';

}

/**

 * Implements theme_menu_tree().

 */

function semanticui_menu_tree__shortcut_set(&$variables) {

  return theme_menu_tree($variables);

}

/**

 * Implements theme_menu_link().

 * Implements hook__suggestions_HOOK_alter().

 */

function semanticui_menu_link(array $variables) {

  $element = $variables['element'];

  // If there is submenu - render it with wrapper.

  if ($element['#below']) {

    $element['#below']['#theme_wrappers'] = ['menu_tree__submenu'];

    $submenu_items = drupal_render($element['#below']);

    $submenu_wrapper = [

      '#type'       => 'container',

      '#attributes' => [

        'class' => [

          'item',

        ],

      ],

    ];

    $submenu_wrapper['title'] = [

      '#markup' => $element['#title'],

      '#prefix' => !empty($element['#prefix']) ? $element['#prefix'] : '',

      '#suffix' => !empty($element['#suffix']) ? $element['#suffix'] : '',

    ];

    $submenu_wrapper['content'] = [

      '#markup' => $submenu_items,

    ];

    $output = $submenu_wrapper;

  }

  // If item is a block - render it with wrapper.

  elseif (isset($element['#original_link']['link_path']) && drupal_match_path($element['#original_link']['link_path'], "<block>\n<block>/*")) {

    $submenu_wrapper = [

      '#type'       => 'container',

      '#attributes' => [

        'class' => [

          'item',

        ],

      ],

    ];

    $submenu_wrapper['title'] = [

      '#prefix' => !empty($element['#prefix']) ? $element['#prefix'] : '',

      '#suffix' => !empty($element['#suffix']) ? $element['#suffix'] : '',

    ];

    $submenu_wrapper['content'] = [

      '#markup' => $element['#original_link']['block_rendered'],

    ];

    $output = $submenu_wrapper;

  }

  else {

    // If it is a regular menu item - render it as a link with "item" class.

    $element['#localized_options']['attributes']['class'][] = 'item';

    $output = [

      '#type'    => 'link',

      '#title'   => $element['#title'],

      '#href'    => $element['#href'],

      '#options' => $element['#localized_options'],

      '#prefix'  => !empty($element['#prefix']) ? $element['#prefix'] : '',

      '#suffix'  => !empty($element['#suffix']) ? $element['#suffix'] : '',

    ];

  }

  return drupal_render($output) . "\n";

}

/**

 * Implements hook_navbar_alter().

 */

function semanticui_navbar_alter(&$variables) {

  // Menu link of Navbar module should form by function semanticui_menu_link__navbar_administration instead semanticui_menu_link__management

  foreach ($variables['administration']['tray']['navbar_administration']['administration_menu'] as $key => $item) {

    if (isset($variables['administration']['tray']['navbar_administration']['administration_menu'][$key]['#theme'])) {

      $variables['administration']['tray']['navbar_administration']['administration_menu'][$key]['#theme'] = 'menu_link__navbar_administration';

    }

  }

}

/**

 * Implements theme_menu_link().

 */

function semanticui_menu_link__navbar_administration(array $variables) {

  return theme_menu_link($variables);

}

/**

 * Implements theme_menu_link().

 */

function semanticui_menu_link__shortcut_set_1(array $variables) {

  return theme_menu_link($variables);

}

/**

 * Implements theme_menu_local_tasks().

 */

function semanticui_menu_local_tasks(&$variables) {

  $primary = isset($variables['primary']) ? $variables['primary'] : NULL;

  if (!empty($primary)) {

    foreach ($primary as $menu_item_key => $menu_item) {

      $variables['primary'][$menu_item_key]['#link']['localized_options'] = [

        'attributes' => [

          'class' => [

            'item',

          ],

        ],

      ];

    }

  }

  $secondary = isset($variables['secondary']) ? $variables['secondary'] : NULL;

  if (!empty($secondary)) {

    foreach ($secondary as $menu_item_key => $menu_item) {

      $variables['secondary'][$menu_item_key]['#link']['localized_options'] = [

        'attributes' => [

          'class' => [

            'item',

          ],

        ],

      ];

    }

  }

  $output = '';

  if (!empty($variables['primary'])) {

    $variables['primary']['#prefix'] = '<h2 class="visually-hidden">' . t('Primary tabs') . '</h2>';

    $variables['primary']['#prefix'] .= '<div class="ui secondary pointing menu">';

    $variables['primary']['#suffix'] = '</div>';

    $output .= drupal_render($variables['primary']);

  }

  if (!empty($variables['secondary'])) {

    $variables['secondary']['#prefix'] = '<h2 class="visually-hidden">' . t('Secondary tabs') . '</h2>';

    $variables['secondary']['#prefix'] .= '<div class="ui secondary menu">';

    $variables['secondary']['#suffix'] = '</div>';

    $output .= drupal_render($variables['secondary']);

  }

  return $output;

}

/**

 * Implements theme_menu_local_task().

 */

function semanticui_menu_local_task($variables) {

  $link = $variables['element']['#link'];

  $link_text = $link['title'];

  if (!empty($variables['element']['#active'])) {

    // Add text to indicate active tab for non-visual users.

    $active = '<span class="visually-hidden">' . t('(active tab)') . '</span>';

    // If the link does not contain HTML already, Html::escape() it now.

    // After we set 'html'=TRUE the link will not be sanitized by l().

    if (empty($link['localized_options']['html'])) {

      $link['title'] = Html::escape($link['title']);

function  semanticui_theme_suggestions_menu_alter(array &$suggestions, array $variables) {

  if (isset($variables['attributes']['block'])) {

    $block = Block::load($variables['attributes']['block']);

    if ($block) {

      // Add Theme suggestion for menus to set menu vertical for sidebars menus.

      array_unshift($suggestions, 'menu__' . str_replace('-', '_', $block->getRegion()));

    }

    $link['localized_options']['html'] = TRUE;

    //    $link_text = t('!local-task-title!active', [

    //      '!local-task-title' => $link['title'],

    //      '!active'           => $active,

    //    ]);

  }

  return \Drupal::l($link['title'], $link['url']) . "\n";

}

<?php

/**

 * @file

 * Override or insert variables into the BLOCK templates.

 *

 * To add dynamically your own classes use

 * $vars['classes_array'][] = 'my_class';

 */

/**

 * Implements hook_preprocess_block().

 */

function semanticui_preprocess_block(&$variables) {

  if ($variables['block_html_id'] == 'block-system-main') {

    $variables['theme_hook_suggestions'][] = 'block__no_wrapper';

  }

  $variables['content_attributes_array']['class'][] = 'content';

  $variables['title_attributes_array']['class'][] = 'ui';

  $variables['title_attributes_array']['class'][] = 'small';

  $variables['title_attributes_array']['class'][] = 'header';

  $variables['wrapper'] = empty($variables['wrapper']) ? array() : $variables['wrapper'];

  $variables['title'] = $variables['block']->subject;

  $sidebars = array('sidebar_first', 'sidebar_second');

  if (!empty($variables['block']->region) && in_array($variables['block']->region, $sidebars)) {

    // Check if the block represents a menu and unset title as it is already

    // added to menu structure in the hook_preprocess_page().

    if (!empty($variables['elements']['#is_menu'])) {

      unset($variables['title']);

    }

    else {

      $variables['wrapper']['class'][] = 'ui';

      $variables['wrapper']['class'][] = 'fluid';

      $variables['wrapper']['class'][] = 'vertical';

      $variables['wrapper']['class'][] = 'menu';

      $variables['content_attributes_array']['class'][] = 'item';

    }

    $variables['title_attributes_array']['class'][] = 'item';

    $variables['title_attributes_array']['class'][] = 'block-title';

  }

}

{#

/**

 * @file

 * Theme override for a menu block.

 *

 * Available variables:

 * - plugin_id: The ID of the block implementation.

 * - label: The configured label of the block if visible.

 * - configuration: A list of the block's configuration values.

 *   - label: The configured label for the block.

 *   - label_display: The display settings for the label.

 *   - provider: The module or other provider that provided this block plugin.

 *   - Block plugin specific settings will also be stored here.

 * - content: The content of this block.

 * - attributes: HTML attributes for the containing element.

 *   - id: A valid HTML ID and guaranteed unique.

 * - title_attributes: HTML attributes for the title element.

 * - content_attributes: HTML attributes for the content element.

 * - title_prefix: Additional output populated by modules, intended to be

 *   displayed in front of the main title tag that appears in the template.

 * - title_suffix: Additional output populated by modules, intended to be

 *   displayed after the main title tag that appears in the template.

 *

 * Headings should be used on navigation menus that consistently appear on

 * multiple pages. When this menu block's label is configured to not be

 * displayed, it is automatically made invisible using the 'visually-hidden' CSS

 * class, which still keeps it visible for screen-readers and assistive

 * technology. Headings allow screen-reader and keyboard only users to navigate

 * to or skip the links.

 * See http://juicystudio.com/article/screen-readers-display-none.php and

 * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.

 */

#}

{%

  set classes = [

  'block',

  'block-menu',

  'navigation',

  'menu--' ~ derivative_plugin_id|clean_class,

]

%}

{% set heading_id = attributes.id ~ '-menu'|clean_id %}

<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>

  {# Label. If not displayed, we still provide it for screen readers. #}

  {% if not configuration.label_display %}

    {% set title_attributes = title_attributes.addClass('visually-hidden') %}

    {%  else %}

      {% set title_attributes = title_attributes.addClass(['item', 'block-title']) %}

  {% endif %}

  {{ title_prefix }}

  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>

  {{ title_suffix }}

  {# Menu. #}

  {% block content %}

      {{ content }}

  {% endblock %}

</nav>

{#

/**

 * @file

 * Theme override to display a block.

 *

 * Available variables:

 * - plugin_id: The ID of the block implementation.

 * - label: The configured label of the block if visible.

 * - configuration: A list of the block's configuration values.

 *   - label: The configured label for the block.

 *   - label_display: The display settings for the label.

 *   - provider: The module or other provider that provided this block plugin.

 *   - Block plugin specific settings will also be stored here.

 * - content: The content of this block.

 * - attributes: array of HTML attributes populated by modules, intended to

 *   be added to the main container tag of this template.

 *   - id: A valid HTML ID and guaranteed unique.

 * - title_attributes: Same as attributes, except applied to the main title

 *   tag that appears in the template.

 * - title_prefix: Additional output populated by modules, intended to be

 *   displayed in front of the main title tag that appears in the template.

 * - title_suffix: Additional output populated by modules, intended to be

 *   displayed after the main title tag that appears in the template.

 *

 * @see template_preprocess_block()

 */

#}

{%

  set classes = [

  'block',

  'block-' ~ configuration.provider|clean_class,

  'block-' ~ plugin_id|clean_class,

]

%}

<div{{ attributes.addClass(classes) }}>

  {{ title_prefix }}

  {% if label %}

    <h2{{ title_attributes.addClass(['ui', 'small', 'header']) }}>{{ label }}</h2>

  {% endif %}

  {{ title_suffix }}

  {% block content %}

    {{ content }}

  {% endblock %}

</div>