-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
feat: Add links to H2 tags
- Loading branch information
Showing
8 changed files
with
298 additions
and
7 deletions.
There are no files selected for viewing
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
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
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
59 changes: 59 additions & 0 deletions
59
html/modules/custom/unocha_utility/components/h2-id-link/h2-id-link.css
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| h2[data-ocha-h2-link] a[data-ocha-h2-link-tag] { | ||
| float: left; | ||
| margin-left: -24px; | ||
| padding-right: 5px; | ||
| text-decoration: none; | ||
| outline: none; | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| h2[data-ocha-h2-link]:hover > a[data-ocha-h2-link-tag] { | ||
| visibility: visible; | ||
| } | ||
|
|
||
| @media (max-width: 1024px) { | ||
| h2[data-ocha-h2-link]:hover a[data-ocha-h2-link-tag] { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Web Share API | ||
| * | ||
| * Modifications for when the browser can natively share images or text. | ||
| */ | ||
| .data-ocha-h2-share-button--can-share { | ||
| position: relative; | ||
| } | ||
|
|
||
| .data-ocha-h2-share-button--can-share a[data-ocha-h2-link-tag] { | ||
| display: none; | ||
| } | ||
|
|
||
| .data-ocha-h2-share-button { | ||
| width: 24px; | ||
| height: 24px; | ||
| border: none; | ||
| background: none; | ||
| padding: 0; | ||
| margin-inline-start: .5rem; | ||
| } | ||
|
|
||
| .data-ocha-h2-share-button img { | ||
| display: block; | ||
| } | ||
|
|
||
| /** | ||
| * While the figure is being rasterized for sharing, we make the following | ||
| * modifications. | ||
| */ | ||
|
|
||
| /* hide share button */ | ||
| .is--capturing .data-ocha-h2-share-button { | ||
| display: none; | ||
| } | ||
|
|
||
| /* remove underline from hyperlinked sources */ | ||
| .is--capturing .data-ocha-h2-share-button__source a { | ||
| text-decoration: none; | ||
| } |
77 changes: 77 additions & 0 deletions
77
html/modules/custom/unocha_utility/components/h2-id-link/h2-id-link.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /** | ||
| * @file | ||
| * Use the Web Share API on H2. | ||
| */ | ||
|
|
||
| (function () { | ||
| if (!!navigator.canShare) { | ||
| var h2Titles = document.querySelectorAll('h2[data-ocha-h2-link]'); | ||
|
|
||
| h2Titles.forEach((h2Title) => { | ||
| // Create share button. | ||
| let shareButton = document.createElement('button'); | ||
| // @TODO: fix non-translatable text | ||
| shareButton.innerHTML = '<span class="visually-hidden">Share</span><img src="/modules/custom/unocha_utility/components/h2-id-link/share.svg" aria-hidden="true" focusable="false">'; | ||
| shareButton.classList.add( | ||
| 'data-ocha-h2-share-button', | ||
| ); | ||
|
|
||
| // Using this as an error, as opposed to success as it appears in the | ||
| // default cd-social-links component. | ||
| shareButton.dataset.message = 'Failed to share'; | ||
|
|
||
| // Set up Web Share API when button is clicked. | ||
| shareButton.addEventListener('click', (ev) => { | ||
| let h2Title = ev.target.closest('h2[data-ocha-h2-link]'); | ||
|
|
||
| let shareData = { | ||
| title: window.title, | ||
| url: window.location.href + '#' + h2Title.id, | ||
| text: h2Title.nextElementSibling.textContent | ||
| }; | ||
|
|
||
| // Hide share button while capturing an image of the figure. | ||
| h2Title.classList.add('is--capturing'); | ||
|
|
||
| try { | ||
| // Share. | ||
| if (navigator.canShare(shareData)) { | ||
| navigator.share(shareData); | ||
| } | ||
| else { | ||
| // Share without text. | ||
| delete shareData.text; | ||
| if (navigator.canShare(shareData)) { | ||
| navigator.share(shareData); | ||
| } | ||
| else { | ||
| // Share without title. | ||
| delete shareData.title; | ||
| if (navigator.canShare(shareData)) { | ||
| navigator.share(shareData); | ||
| } | ||
| } | ||
| } | ||
| } catch (err) { | ||
| // Show user feedback and remove after some time. | ||
| shareButton.classList.add('is--showing-message'); | ||
| setTimeout(function () { | ||
| shareButton.classList.remove('is--showing-message'); | ||
| }, 2500); | ||
|
|
||
| // Log error to console. | ||
| console.error('Sharing failed:', err); | ||
| } | ||
|
|
||
| // Show share button now that image capture was attempted. | ||
| h2Title.classList.remove('is--capturing'); | ||
| }); | ||
|
|
||
| // Insert button into DOM. | ||
| h2Title.append(shareButton); | ||
| // Mark this figure as shareable. | ||
| h2Title.classList.add('data-ocha-h2-share-button--can-share'); | ||
| }); | ||
| } | ||
| }()); | ||
|
|
4 changes: 4 additions & 0 deletions
4
html/modules/custom/unocha_utility/components/h2-id-link/share.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions
83
html/modules/custom/unocha_utility/src/Plugin/Filter/H2IdFilter.php
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <?php | ||
|
|
||
| namespace Drupal\unocha_utility\Plugin\Filter; | ||
|
|
||
| use Drupal\Component\Render\MarkupInterface; | ||
| use Drupal\Component\Utility\Html; | ||
| use Drupal\filter\FilterProcessResult; | ||
| use Drupal\filter\Plugin\FilterBase; | ||
|
|
||
| /** | ||
| * Provides a filter to add id attribute to H2 tags. | ||
| * | ||
| * @Filter( | ||
| * id = "unocha_h2_id_filter", | ||
| * title = @Translation("Add Id attribute to H2 tags."), | ||
| * description = @Translation("Add Id attribute to H2 tags."), | ||
| * type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_IRREVERSIBLE, | ||
| * ) | ||
| */ | ||
| class H2IdFilter extends FilterBase { | ||
|
|
||
| /** | ||
| * {@inheritdoc} | ||
| */ | ||
| public function process($text, $langcode) { | ||
| $lib_needed = FALSE; | ||
| if (is_string($text) || $text instanceof MarkupInterface) { | ||
| $html = trim($text); | ||
| if ($html !== '') { | ||
| // Adding this meta tag is necessary to tell \DOMDocument we are dealing | ||
| // with UTF-8 encoded html. | ||
| $flags = LIBXML_NONET | LIBXML_NOBLANKS | LIBXML_NOERROR | LIBXML_NOWARNING; | ||
| $meta = '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'; | ||
| $prefix = '<!DOCTYPE html><html><head>' . $meta . '</head><body>'; | ||
| $suffix = '</body></html>'; | ||
| $dom = new \DOMDocument(); | ||
| $dom->loadHTML($prefix . $text . $suffix, $flags); | ||
|
|
||
| // Process the links. | ||
| $h2s = $dom->getElementsByTagName('h2'); | ||
| foreach ($h2s as $h2) { | ||
| $lib_needed = TRUE; | ||
|
|
||
| /** @var \DOMElement $h2 */ | ||
| $id = $h2->getAttribute('id'); | ||
| if (empty($id)) { | ||
| $id = Html::cleanCssIdentifier(strtolower($h2->textContent)); | ||
| $h2->setAttribute('id', $id); | ||
| } | ||
|
|
||
| $h2->setAttribute('data-ocha-h2-link', $id); | ||
| $a = $dom->createElement('a', '#'); | ||
| $a->setAttribute('data-ocha-h2-link-tag', $id); | ||
| $a->setAttribute('href', '#' . $id); | ||
| $h2->prepend($a); | ||
| } | ||
|
|
||
| // Get the modified html. | ||
| $html = $dom->saveHTML(); | ||
|
|
||
| // Search for the body tag and return its content. | ||
| $start = mb_strpos($html, '<body>'); | ||
| $end = mb_strrpos($html, '</body>'); | ||
| if ($start !== FALSE && $end !== FALSE) { | ||
| $start += 6; | ||
| $text = trim(mb_substr($html, $start, $end - $start)); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| $result = new FilterProcessResult($text); | ||
| if ($lib_needed) { | ||
| $result->setAttachments([ | ||
| 'library' => [ | ||
| 'unocha_utility/h2-id-link', | ||
| ], | ||
| ]); | ||
| } | ||
|
|
||
| return $result; | ||
| } | ||
|
|
||
| } |
6 changes: 6 additions & 0 deletions
6
html/modules/custom/unocha_utility/unocha_utility.libraries.yml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| h2-id-link: | ||
| css: | ||
| theme: | ||
| components/h2-id-link/h2-id-link.css: {} | ||
| js: | ||
| components/h2-id-link/h2-id-link.js: {} |