Last active
January 9, 2019 19:07
-
-
Save mrkmiller/14045caeb78e32ff984c8f0ac1e77492 to your computer and use it in GitHub Desktop.
Focal Link Icon block style plugin. Replace "custom_theme" with the name of your theme and add fontawsome to the library.
This file contains hidden or 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
| {% extends "block.html.twig" %} | |
| {# | |
| /** | |
| * @file | |
| * Theme override for a Focal Link. | |
| * | |
| * Available variables: | |
| * - Look in the block.html.twig file for available variables. | |
| */ | |
| #} | |
| {% set label = FALSE %} | |
| {% set class_box = FALSE %} | |
| {% block content %} | |
| <a href="{{ content.field_sf_link.0['#url'] }}" class="focal-link"> | |
| {% if content.field_sf_icon_choice.0['#markup'] == '1' %} | |
| {{ attach_library('custom_theme/fontawesome') }} | |
| <div class="focal-link__figure focal-link__icon"> | |
| <i class="{{ icon_class }} fa-2x"></i> | |
| </div> | |
| {% else %} | |
| <div class="focal-link__figure"> | |
| {{ content.field_sf_image }} | |
| </div> | |
| {% endif %} | |
| <div class="focal-link__body"> | |
| <strong>{{ content.field_sf_title }}</strong> | |
| </div> | |
| </a> | |
| {{ content|without('field_sf_title', 'field_sf_icon_choice', 'field_sf_link', 'field_sf_image') }} | |
| {% endblock %} |
This file contains hidden or 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
| focal_link_icon: | |
| label: 'Icon Selection' | |
| class: '\Drupal\custome_theme\Plugin\BlockStyle\FocalLinkIcon' | |
| include: | |
| - 'sf_focal_link' |
This file contains hidden or 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 | |
| namespace Drupal\custom_theme\Plugin\BlockStyle; | |
| use Drupal\block_style_plugins\Plugin\BlockStyleBase; | |
| use Drupal\Core\Form\FormStateInterface; | |
| /** | |
| * Provides a 'FocalLinkIcon' style. | |
| */ | |
| class FocalLinkIcon extends BlockStyleBase { | |
| /** | |
| * {@inheritdoc} | |
| */ | |
| public function defaultConfiguration() { | |
| return ['focal_link_icon' => '']; | |
| } | |
| /** | |
| * {@inheritdoc} | |
| */ | |
| public function buildConfigurationForm(array $form, FormStateInterface $form_state) { | |
| $form['focal_link_icon'] = [ | |
| '#type' => 'textfield', | |
| '#title' => $this->t('Icon Classes'), | |
| '#description' => $this->t('<a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">Choose an Icon</a> and paste in the Font Awesome classes "<strong>fas fa-check</strong>" or markup "<strong><i class="fas fa-check"></i></strong>".'), | |
| '#default_value' => $this->configuration['focal_link_icon'], | |
| ]; | |
| return $form; | |
| } | |
| /** | |
| * {@inheritdoc} | |
| */ | |
| public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { | |
| $icon = $form_state->getValue('focal_link_icon'); | |
| if ($icon) { | |
| $icon = $this->stripIconMarkup($icon); | |
| $form_state->setValue('focal_link_icon', $icon); | |
| } | |
| } | |
| /** | |
| * Remove Font Awesome icon markup to return only classes. | |
| * | |
| * @param string $icon | |
| * The font awesome icon markup. | |
| * | |
| * @return string | |
| * The font awesome classes. | |
| */ | |
| protected function stripIconMarkup($icon) { | |
| preg_match('/class="([^"]+)"/', $icon, $matches); | |
| if (isset($matches[1])) { | |
| return $matches[1]; | |
| } | |
| else { | |
| return $icon; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment