Improvements to external-link.js, 9.0.9

CHANGELOG.md

@@ -1,6 +1,11 @@
-### [Unreleased]
+### 9.0.9: 2022-08-25
 
 * Add custom version of sanitize.css
+* Improve external-links.js JavaScript
+* Ignore external link arrows for links that have only imgs in them
+* Add ignore classes for external links
+* Generate SVG arrow for external links via JS instead of CSS
+* Clean up old different versions of external-link.svg files
 
 ### 9.0.8: 2022-08-23
 

bin/tasks/additions.sh

@@ -10,7 +10,7 @@ chmod 777 ${PROJECT_PATH}/media
 
 echo "${YELLOW}Generating default README.md...${TXTRESET}"
 
-NEWEST_AIR_VERSION="9.0.8"
+NEWEST_AIR_VERSION="9.0.9"
 NEWEST_WORDPRESS_VERSION="6.0.0"
 NEWEST_PHP_VERSION="7.4"
 CURRENT_DATE=$(LC_TIME=en_US date '+%d %b %Y' |tr ' ' '_');

footer.php

@@ -7,7 +7,7 @@
  * @Author: Roni Laukkarinen
  * @Date: 2020-05-11 13:33:49
  * @Last Modified by:   Roni Laukkarinen
- * @Last Modified time: 2022-05-25 14:25:42
+ * @Last Modified time: 2022-08-25 14:16:49
  *
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  * @package air-light
@@ -23,15 +23,15 @@
 
   <!-- Default footer content that you can safely remove from here... -->
   <div class="site-info">
-    <a class="no-text-link powered-by-wordpress" href="<?php echo esc_url( __( 'http://wordpress.org/', 'air-light' ) ); ?>">
+    <a class="no-external-link-indicator powered-by-wordpress" href="<?php echo esc_url( __( 'http://wordpress.org/', 'air-light' ) ); ?>">
       <svg class="wordpress-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" aria-hidden="true"><path d="M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0"/></svg>
       <span>
         <?php printf( esc_html__( 'Proudly powered by %s', 'air-light' ), 'WordPress' ); ?>.
       </span>
     </a>
     <span class="theme-info">
       <?php printf( esc_html__( 'Lightweight like %1$s itself. You are using version %2$s', 'air-light' ), '<i>air</i>', esc_attr( AIR_LIGHT_VERSION ) ); ?>
-      <a class="no-text-link github-link" href="<?php echo esc_url( __( 'https://github.com/digitoimistodude/air', 'air-light' ) ); ?>">
+      <a class="no-external-link-indicator github-link" href="<?php echo esc_url( __( 'https://github.com/digitoimistodude/air', 'air-light' ) ); ?>">
         <svg width="16" height="16" viewBox="0 0 1792 1792" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M1664 896q0 251-146.5 451.5T1139 1625q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105T1386 856q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27T578 459.5 492 446q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5T484 1274q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"/></svg>
         <?php echo esc_html( 'Fork theme on GitHub.' ); ?>
       </a>

functions.php

@@ -7,7 +7,7 @@
  *
  * @Date: 2019-10-15 12:30:02
  * @Last Modified by:   Roni Laukkarinen
- * @Last Modified time: 2022-08-23 16:14:26
+ * @Last Modified time: 2022-08-25 14:22:07
  *
  * @package air-light
  */
@@ -17,7 +17,7 @@
 /**
  * The current version of the theme.
  */
-define( 'AIR_LIGHT_VERSION', '9.0.8' );
+define( 'AIR_LIGHT_VERSION', '9.0.9' );
 
 // We need to have some defaults as comments or empties so let's allow this:
 // phpcs:disable Squiz.Commenting.InlineComment.SpacingBefore, WordPress.Arrays.ArrayDeclarationSpacing.SpaceInEmptyArray

inc/template-tags/single-comment.php

@@ -2,7 +2,15 @@
 /**
  * Single comment callback
  *
+ * Callback for a single comment.
+ *
+ * @Author:		Roni Laukkarinen
+ * @Date:   		2022-06-30 16:24:47
+ * @Last Modified by:   Roni Laukkarinen
+ * @Last Modified time: 2022-08-25 14:16:38
+ *
  * @package air-light
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  */
 
 namespace Air_Light;
@@ -18,7 +26,7 @@ function single_comment( $comment, $args, $depth ) { ?>
       <?php endif; ?>
 
       <p class="comment-time">
-        <a class="no-text-link" href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
+        <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
           <svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"/></svg>
           <time datetime="<?php echo esc_attr( get_comment_date( 'c' ) ); ?>"><?php printf( esc_attr( __( '%1$s at %2$s', 'air-light' ) ), esc_attr( get_comment_date() ), esc_attr( get_comment_time() ) ); ?></time>
         </a>

js/src/modules/external-link.js

@@ -3,7 +3,7 @@
  * @Author: Roni Laukkarinen
  * @Date:   2021-09-01 11:55:37
  * @Last Modified by:   Roni Laukkarinen
- * @Last Modified time: 2022-05-26 13:36:49
+ * @Last Modified time: 2022-08-25 14:15:33
  */
 /**
  * Style external links
@@ -47,12 +47,12 @@ function isLinkExternal(link, localDomains) {
 }
 
 /**
- * Try to get image alt texts from inside a link
- * to use in aria-label, when only elements inside
- * of link are images
- * @param {*} link DOM link element
- * @returns string
- */
+  * Try to get image alt texts from inside a link
+  * to use in aria-label, when only elements inside
+  * of link are images
+  * @param {*} link DOM link element
+  * @returns string
+  */
 export function getChildAltText(link) {
   const children = [...link.children];
 
@@ -83,20 +83,39 @@ export function styleExternalLinks() {
     window.location.host,
   ];
 
-  if (typeof window.air_light_externalLinkDomains !== 'undefined') {
-    localDomains = localDomains.concat(window.air_light_externalLinkDomains);
+  if (typeof window.rvnayttely_externalLinkDomains !== 'undefined') {
+    localDomains = localDomains.concat(window.rvnayttely_externalLinkDomains);
   }
 
   const links = document.querySelectorAll('a');
 
   const externalLinks = [...links].filter((link) => isLinkExternal(link.href, localDomains));
 
+  // eslint-disable-next-line consistent-return
   externalLinks.forEach((externalLink) => {
-    const textContent = externalLink.textContent.trim().length
-      ? externalLink.textContent.trim() : getChildAltText(externalLink);
-    const ariaLabel = externalLink.target === '_blank' ? `${textContent}: ${getLocalization('external_link')}, ${getLocalization('target_blank')}` : `${textContent}: ${getLocalization('external_link')}`;
-    externalLink.setAttribute('aria-label', ariaLabel);
-    externalLink.classList.add('is-external-link');
+    // Abort mission if there is only img element inside of link
+    if (externalLink.childElementCount === 1 && externalLink.children[0].tagName.toLowerCase() === 'img') {
+      return false;
+    }
+
+    if (!externalLink.classList.contains('no-external-link-label')) {
+      const textContent = externalLink.textContent.trim().length
+        ? externalLink.textContent.trim() : getChildAltText(externalLink);
+      const ariaLabel = externalLink.target === '_blank' ? `${textContent}: ${getLocalization('external_link')}, ${getLocalization('target_blank')}` : `${textContent}: ${getLocalization('external_link')}`;
+      externalLink.setAttribute('aria-label', ariaLabel);
+    }
+
+    // Arrow icon won't be added if one of these classes is defined for the link
+    const classExceptions = [
+      'no-external-link-indicator',
+      'global-link',
+      'button',
+    ];
+
+    if (!classExceptions.some((className) => externalLink.classList.contains(className))) {
+      // Add SVG arrow icon
+      externalLink.insertAdjacentHTML('beforeend', '<svg aria-hidden="true" style="margin-left: .5rem; margin-right: .2rem;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 9 9"><path d="M4.499 1.497h4v4m0-4l-7 7" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
+    }
   });
 }