Last active
November 2, 2016 16:26
-
-
Save jacine/d97fdaef19a7cbe60a39b85f90f18740 to your computer and use it in GitHub Desktop.
Icons for Menu Item links broke with 8.2 upgrade!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @file | |
* Drupal pass-through template for icon theme hook implementation. | |
* | |
* @see /themes/THEME/components/icon.twig. | |
*/ | |
#} | |
{% embed '@components/icon.twig' %}{% endembed %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @file | |
* SVG Icon template | |
* | |
* Variables: | |
* - icon: Name of the icon; SVG should exist as build/img/icons/{icon}.swg | |
* - text: Fallback text for screen readers, and when icon is not present. | |
* - text_class: Provides a class using boolean text_visible, to add a class | |
* which determines whether fallback text should appear visually or not. | |
* - location: Location of text in markup: left (default) or right of icon). | |
*/ | |
#} | |
{% set text_class, location = | |
text_visible ? 'icon-text' : 'icon-text-fallback', | |
location ? location : 'left' | |
%} | |
{% if icon %} | |
{% if text and location == 'right' %} | |
<span class="{{ text_class }}">{{ text }}</span> | |
{% endif %} | |
<svg class="icon icon-{{ icon }}"><use xlink:href="#icon-{{ icon }}"></use></svg> | |
{% if text and location == 'left' %} | |
<span class="{{ text_class }}">{{ text }}</span> | |
{% endif %} | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="search"> | |
<button class="search-toggle"> | |
<span class="search-toggle-icon search-toggle-icon--expand"> | |
{% embed '@components/icon.twig' with { icon: 'search-alt', text: 'Toggle Search' } %}{% endembed %} | |
</span> | |
<span class="search-toggle-icon search-toggle-icon--collapse"> | |
{% embed '@components/icon.twig' with { icon: 'close-x', text: 'Toggle Search' } %}{% endembed %} | |
</span> | |
</button> | |
{{ form.search }} | |
<div class="search-buttons"> | |
<span class="search-submit-icon"> | |
{% embed '@components/icon.twig' with { icon: 'search-alt', text: 'Search' } %}{% endembed %} | |
</span> | |
{{ form.actions.submit }} | |
</div> | |
{{ children }} | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
use Drupal\Core\Url; | |
/** | |
* Implements hook_theme(). | |
*/ | |
function THEME_theme($existing, $type, $theme, $path) { | |
return array( | |
// Note: This template (icon.html.twig) is only needed for PHP interactions, | |
// e.g. anything that needs to rendered/altered via PHP, such as menu links. | |
// The 'icon.twig' implementation can be used directly inside twig templates | |
// as opposed to the Drupal hook. | |
'icon' => array( | |
'template' => 'content/icon', | |
'variables' => array( | |
'icon' => NULL, | |
'text' => NULL, | |
'location' => 'left', | |
'text_visible' => false, | |
), | |
), | |
'search_block_form' => array( | |
'template' => 'form/search', | |
'render element' => 'form', | |
), | |
); | |
} | |
/** | |
* Implements hook_preprocess_menu(). | |
*/ | |
function THEME_preprocess_menu(&$variables) { | |
$menu_name = $variables['menu_name']; | |
$menu_items = &$variables['items']; | |
/** | |
* Supported Menus | |
* | |
* Defines the menus that should render SVG icons instead of text where | |
* available. | |
*/ | |
$menus = array( | |
'secondary-navigation', | |
'footer-social', | |
); | |
if (in_array($menu_name, $menus)) { | |
/** | |
* Supported Services | |
* | |
* - key: String to search in the href. | |
* - value: Corresponding icon name to pass to icon template. SVG icon | |
* should exist in `build/img/icons/value.svg`. | |
*/ | |
$icons = array( | |
'facebook.com' => 'facebook', | |
'instagram.com' => 'instagram', | |
'twitter.com' => 'twitter', | |
'plus.google.com' => 'google-plus', | |
'youtube.com' => 'youtube-play', | |
'pinterest.com' => 'pinterest', | |
'stumbleupon.com' => 'stumbleupon', | |
'tumblr.com' => 'tumblr', | |
'rss' => 'rss', | |
'showfinder' => 'tv', | |
); | |
foreach ($menu_items as $key => $item) { | |
$href = $item['url']->toString(); | |
$text_visible = ($href == '/showfinder') ? true : false; | |
foreach ($icons as $service => $icon) { | |
if (stristr($href, $service)) { | |
$menu_items[$key]['title'] = array( | |
'icon' => array( | |
'#theme' => 'icon', | |
'#icon' => $icon, | |
'#text' => $item['title'], | |
'#text_visible' => $text_visible, | |
), | |
); | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment