diff --git a/config/schema/extlink.schema.yml b/config/schema/extlink.schema.yml index 9d27fa5..7086ae1 100644 --- a/config/schema/extlink.schema.yml +++ b/config/schema/extlink.schema.yml @@ -1,4 +1,4 @@ -# Schema for the configuration files of the exlink module. +# Schema for the configuration files of the extlink module. extlink.settings: type: config_object @@ -92,6 +92,9 @@ extlink.settings: type: mapping label: 'Font Awesome icon classes' mapping: + generic: + type: string + label: 'Generic link classes' links: type: string label: 'External link classes' @@ -101,6 +104,22 @@ extlink.settings: tel: type: string label: 'Tel link classes' + extlink_svg_classes: + type: mapping + label: 'SVG icon classes' + mapping: + generic: + type: string + label: 'SVG generic link classes' + links: + type: string + label: 'SVG external link classes' + mailto: + type: string + label: 'SVG mailto link classes' + tel: + type: string + label: 'SVG tel link classes' extlink_icon_placement: type: string label: 'Add icon in front of any processed link.' diff --git a/css/extlink.css b/css/extlink.css index 765fcc3..b4e763a 100644 --- a/css/extlink.css +++ b/css/extlink.css @@ -27,18 +27,24 @@ span.tel { background: url('../images/extlink_s.png') -42px center no-repeat; } -svg.ext { - width: 14px; - height: 14px; - fill: #727272; - font-weight: 900; +/* Make external-link SVG icons responsive (@supports so IE11 ignores this) */ +@supports (width: auto) { + .extlink--mailto, + .extlink--tel, + .extlink--url { + width: auto; + } } -svg.mailto, -svg.tel { - width: 14px; - height: 14px; - fill: #727272; +/* Set a default height of 9px if 1em = 16px on SVG icons. */ +.extlink--mailto, +.extlink--tel { + height: .5625em; +} + +/* Set a default height of 10px if 1em = 16px on SVG icons. */ +.extlink--url { + height: .625em; } [data-extlink-placement='prepend'], @@ -51,11 +57,9 @@ svg.tel { padding-left: 0.2rem; } -svg.ext path, -svg.mailto path, -svg.tel path { - stroke: #727272; - stroke-width: 3; +/* Make font-awesome external-link icons bold. */ +span.extlink { + font-weight: 900; } /* Hide the extra icons when printing. */ diff --git a/extlink.install b/extlink.install index 868c68d..46d9a20 100644 --- a/extlink.install +++ b/extlink.install @@ -89,3 +89,17 @@ function extlink_update_8107(): void { ->set('extlink_additional_mailto_classes', '') ->save(); } + +/** + * Set default classes for SVG and font-awesome classes. + */ +function extlink_update_8108(): void { + \Drupal::configFactory() + ->getEditable('extlink.settings') + ->set('extlink_font_awesome_classes.generic', 'extlink') + ->set('extlink_svg_classes.generic', 'extlink') + ->set('extlink_svg_classes.links', 'extlink--url') + ->set('extlink_svg_classes.mailto', 'extlink--mailto') + ->set('extlink_svg_classes.tel', 'extlink--tel') + ->save(); +} diff --git a/extlink.module b/extlink.module index 841d282..5b545f5 100644 --- a/extlink.module +++ b/extlink.module @@ -93,6 +93,9 @@ function _extlink_get_settings_from_config(Config $config): array { \Drupal::moduleHandler()->alter('extlink_css_exclude', $settings['extlink_css_exclude']); $callback = [Html::class, 'cleanCssIdentifier']; + $fa_generic_classes = $config->get('extlink_font_awesome_classes.generic') ?: 'extlink'; + $fa_generic_classes = array_map($callback, explode(' ', $fa_generic_classes)); + $fa_link_classes = $config->get('extlink_font_awesome_classes.links') ?: 'fa fa-external-link'; $fa_link_classes = array_map($callback, explode(' ', $fa_link_classes)); @@ -123,6 +126,15 @@ function _extlink_get_settings_from_config(Config $config): array { } } + $svg_generic_classes = $config->get('extlink_svg_classes.generic') ?: 'extlink'; + $svg_generic_classes = array_map($callback, explode(' ', $svg_generic_classes)); + $svg_link_classes = $config->get('extlink_svg_classes.links') ?: 'extlink--url'; + $svg_link_classes = array_map($callback, explode(' ', $svg_link_classes)); + $svg_mailto_classes = $config->get('extlink_svg_classes.mailto') ?: 'extlink--mailto'; + $svg_mailto_classes = array_map($callback, explode(' ', $svg_mailto_classes)); + $svg_tel_classes = $config->get('extlink_svg_classes.tel') ?: 'extlink--tel'; + $svg_tel_classes = array_map($callback, explode(' ', $svg_tel_classes)); + return [ 'extTarget' => ((isset($settings['extlink_target'])) ? $settings['extlink_target'] : FALSE), 'extTargetAppendNewWindowLabel' => t('(opens in a new window)'), @@ -148,12 +160,17 @@ function _extlink_get_settings_from_config(Config $config): array { 'telLabel' => ((isset($settings['extlink_tel_label'])) ? Html::escape($settings['extlink_tel_label']) : t('(link is a phone number)')), 'extUseFontAwesome' => ((isset($settings['extlink_use_font_awesome'])) ? $settings['extlink_use_font_awesome'] : FALSE), 'extIconPlacement' => ((!empty($settings['extlink_icon_placement'])) ? $settings['extlink_icon_placement'] : 'append'), + 'extFaGenericClasses' => implode(' ', $fa_generic_classes), 'extFaLinkClasses' => implode(' ', $fa_link_classes), 'extFaMailtoClasses' => implode(' ', $fa_mailto_classes), + 'extFaTelClasses' => implode(' ', $fa_tel_classes), 'extAdditionalLinkClasses' => implode(' ', $additional_link_classes), 'extAdditionalMailtoClasses' => implode(' ', $additional_mailto_classes), 'extAdditionalTelClasses' => implode(' ', $additional_tel_classes), - 'extFaTelClasses' => implode(' ', $fa_tel_classes), + 'extSvgGenericClasses'=> implode(' ', $svg_generic_classes), + 'extSvgLinkClasses' => implode(' ', $svg_link_classes), + 'extSvgMailtoClasses' => implode(' ', $svg_mailto_classes), + 'extSvgTelClasses' => implode(' ', $svg_tel_classes), 'whitelistedDomains' => $config->get('whitelisted_domains'), 'extExcludeNoreferrer' => $settings['extlink_exclude_noreferrer'] ?? '', ]; diff --git a/js/extlink.js b/js/extlink.js index 666bd40..6c7c434 100644 --- a/js/extlink.js +++ b/js/extlink.js @@ -120,7 +120,7 @@ externalLinks.push(el); } } - // Do not include area tags with begin with mailto: (this prohibits + // Do not include area tags with begin with mailto: (this prohibits // icons from being added to image-maps). else if (el.tagName !== 'AREA' && !(extCssExclude && el.closest(extCssExclude)) && !(extCssExplicit && !el.closest(extCssExplicit))) { if (url.indexOf('mailto:') === 0) { @@ -417,41 +417,48 @@ // Create an icon element. let iconElement; if (drupalSettings.data.extlink.extUseFontAwesome) { + const class_fa_generic = drupalSettings.data.extlink.extFaGenericClasses; + const class_fa_link = drupalSettings.data.extlink.extFaLinkClasses; + const class_fa_mailto = drupalSettings.data.extlink.extFaMailtoClasses; + const class_fa_tel = drupalSettings.data.extlink.extFaTelClasses; iconElement = document.createElement('span'); iconElement.setAttribute('class', `fa-${className} extlink`); if (className === drupalSettings.data.extlink.mailtoClass) { if (drupalSettings.data.extlink.mailtoLabel) { link.ariaLabel = drupalSettings.data.extlink.mailtoLabel; } - iconElement.innerHTML = ``; + iconElement.innerHTML = ``; } else if (className === drupalSettings.data.extlink.extClass) { if (drupalSettings.data.extlink.extLabel) { link.ariaLabel = drupalSettings.data.extlink.extLabel; } - iconElement.innerHTML = ``; + iconElement.innerHTML = ``; } else if (className === drupalSettings.data.extlink.telClass) { if (drupalSettings.data.extlink.telLabel) { link.ariaLabel = drupalSettings.data.extlink.telLabel; } - iconElement.innerHTML = ``; + iconElement.innerHTML = ``; } } else { iconElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); iconElement.setAttribute('focusable', 'false'); - iconElement.classList.add(className); + iconElement.classList.add(drupalSettings.data.extlink.extSvgGenericClasses); iconElement.setAttribute('data-extlink-placement', iconPlacement); if (className === drupalSettings.data.extlink.mailtoClass) { + iconElement.classList.add(drupalSettings.data.extlink.extSvgMailtoClasses); iconElement.setAttribute('aria-label', drupalSettings.data.extlink.mailtoLabel); iconElement.setAttribute('viewBox', '0 10 70 20'); - iconElement.innerHTML = `${drupalSettings.data.extlink.mailtoLabel}`; + iconElement.innerHTML = `${drupalSettings.data.extlink.mailtoLabel}`; } else if (className === drupalSettings.data.extlink.extClass) { + iconElement.classList.add(drupalSettings.data.extlink.extSvgLinkClasses); iconElement.setAttribute('aria-label', drupalSettings.data.extlink.extLabel); iconElement.setAttribute('viewBox', '0 0 80 40'); - iconElement.innerHTML = `${drupalSettings.data.extlink.extLabel}`; + iconElement.innerHTML = `${drupalSettings.data.extlink.extLabel}`; } else if (className === drupalSettings.data.extlink.telClass) { + iconElement.classList.add(drupalSettings.data.extlink.extSvgTelClasses); iconElement.setAttribute('aria-label', drupalSettings.data.extlink.telLabel); iconElement.setAttribute('viewBox', '0 0 181.352 181.352'); - iconElement.innerHTML = `${drupalSettings.data.extlink.telLabel}`; + iconElement.innerHTML = `${drupalSettings.data.extlink.telLabel}`; } } iconElement.setAttribute('role', 'img'); diff --git a/src/Form/ExtlinkAdminSettingsForm.php b/src/Form/ExtlinkAdminSettingsForm.php index 7ecea54..bd498fd 100644 --- a/src/Form/ExtlinkAdminSettingsForm.php +++ b/src/Form/ExtlinkAdminSettingsForm.php @@ -149,6 +149,19 @@ class ExtlinkAdminSettingsForm extends ConfigFormBase { ], ]; + $form['extlink_font_awesome_classes']['generic'] = [ + '#type' => 'textfield', + '#title' => $this->t('Font Awesome Generic Links Classes'), + '#default_value' => $config->get('extlink_font_awesome_classes.generic') ?: 'extlink', + '#states' => [ + 'visible' => [ + [':input[name="extlink_mailto_class"]' => ['checked' => TRUE]], + 'or', + [':input[name="extlink_class"]' => ['checked' => TRUE]], + ], + ], + ]; + $form['extlink_font_awesome_classes']['links'] = [ '#type' => 'textfield', '#title' => $this->t('Font Awesome External Links Classes'), @@ -182,6 +195,71 @@ class ExtlinkAdminSettingsForm extends ConfigFormBase { ], ]; + $form['extlink_svg_classes'] = [ + '#type' => 'details', + '#title' => $this->t('SVG icon classes'), + '#tree' => TRUE, + '#states' => [ + 'visible' => [ + [ + ':input[name="extlink_mailto_class"]' => ['checked' => TRUE], + ':input[name="extlink_use_font_awesome"]' => ['checked' => FALSE], + ], + 'or', + [ + ':input[name="extlink_class"]' => ['checked' => TRUE], + ':input[name="extlink_use_font_awesome"]' => ['checked' => FALSE], + ], + ], + ], + ]; + + $form['extlink_svg_classes']['generic'] = [ + '#type' => 'textfield', + '#title' => $this->t('SVG Generic Links Classes'), + '#default_value' => $config->get('extlink_svg_classes.generic') ?: 'extlink', + '#states' => [ + 'visible' => [ + [':input[name="extlink_mailto_class"]' => ['checked' => TRUE]], + 'or', + [':input[name="extlink_class"]' => ['checked' => TRUE]], + ], + ], + ]; + + $form['extlink_svg_classes']['links'] = [ + '#type' => 'textfield', + '#title' => $this->t('SVG External Links Classes'), + '#default_value' => $config->get('extlink_svg_classes.links') ?: 'extlink--url', + '#states' => [ + 'visible' => [ + ':input[name="extlink_class"]' => ['checked' => TRUE], + ], + ], + ]; + + $form['extlink_svg_classes']['mailto'] = [ + '#type' => 'textfield', + '#title' => $this->t('SVG mailto Links Classes'), + '#default_value' => $config->get('extlink_svg_classes.mailto') ?: 'extlink--mailto', + '#states' => [ + 'visible' => [ + ':input[name="extlink_mailto_class"]' => ['checked' => TRUE], + ], + ], + ]; + + $form['extlink_svg_classes']['tel'] = [ + '#type' => 'textfield', + '#title' => $this->t('SVG tel Links Classes'), + '#default_value' => $config->get('extlink_svg_classes.tel') ?: 'extlink--tel', + '#states' => [ + 'visible' => [ + ':input[name="extlink_tel_class"]' => ['checked' => TRUE], + ], + ], + ]; + $form['extlink_icon_placement'] = [ '#type' => 'select', '#title' => $this->t('Where to place icon in reference to link.'), @@ -438,12 +516,16 @@ class ExtlinkAdminSettingsForm extends ConfigFormBase { ->set('extlink_css_exclude', $values['extlink_css_exclude']) ->set('extlink_css_include', $values['extlink_css_include']) ->set('extlink_css_explicit', $values['extlink_css_explicit']) - ->set('extlink_use_font_awesome', $values['extlink_use_font_awesome']) ->set('extlink_icon_placement', $values['extlink_icon_placement']) ->set('extlink_use_font_awesome', $values['extlink_use_font_awesome']) + ->set('extlink_font_awesome_classes.generic', $values['extlink_font_awesome_classes']['generic']) ->set('extlink_font_awesome_classes.links', $values['extlink_font_awesome_classes']['links']) ->set('extlink_font_awesome_classes.mailto', $values['extlink_font_awesome_classes']['mailto']) ->set('extlink_font_awesome_classes.tel', $values['extlink_font_awesome_classes']['tel']) + ->set('extlink_svg_classes.generic', $values['extlink_svg_classes']['generic']) + ->set('extlink_svg_classes.links', $values['extlink_svg_classes']['links']) + ->set('extlink_svg_classes.mailto', $values['extlink_svg_classes']['mailto']) + ->set('extlink_svg_classes.tel', $values['extlink_svg_classes']['tel']) ->set('whitelisted_domains', $whitelisted_domains) ->set('extlink_exclude_noreferrer', $values['extlink_exclude_noreferrer']) ->save();