Replace xlink:href with href

classes/helpers/FrmAppHelper.php

@@ -1404,7 +1404,7 @@ public static function icon_by_class( $class, $atts = array() ) {
 				$icon = reset( $icon );
 			}
 
-			$icon = '<svg class="frmsvg' . esc_attr( $class ) . '"' . $html_atts . '><use xlink:href="#' . esc_attr( $icon ) . '" /></svg>';
+			$icon = '<svg class="frmsvg' . esc_attr( $class ) . '"' . $html_atts . '><use href="#' . esc_attr( $icon ) . '" /></svg>';
 		}
 
 		if ( $echo ) {
@@ -3775,7 +3775,7 @@ public static function maybe_utf8_encode( $value ) {
 	 *
 	 * @since 4.02.03
 	 *
-	 * @param array $form 
+	 * @param array $form
 	 *
 	 * @return void
 	 */

classes/views/frm-forms/edit.php

@@ -41,12 +41,12 @@
 </div>
 <div class="frm_hidden">
 	<svg id="frm_break_field_group_svg" class="frmsvg">
-		<use xlink:href="#frm_break_field_group_icon"></use>
+		<use href="#frm_break_field_group_icon"></use>
 	</svg>
 	<svg id="frm_gear_svg" class="frmsvg">
-		<use xlink:href="#frm_settings_icon"></use>
+		<use href="#frm_settings_icon"></use>
 	</svg>
 	<svg id="frm_trash_svg" class="frmsvg">
-		<use xlink:href="#frm_delete_icon"></use>
+		<use href="#frm_delete_icon"></use>
 	</svg>
 </div>

classes/views/styles/_style-options.php

@@ -11,7 +11,7 @@
 		tabindex="0" role="button"
 		title="<?php esc_attr_e( 'Back', 'formidable' ); ?>">
 			<svg class="frmsvg">
-				<use xlink:href="#frm_back"></use>
+				<use href="#frm_back"></use>
 			</svg>
 	</a>
 	<span id="frm_style_name"><?php echo esc_html( $back_button_args['title'] ); ?></span>
@@ -23,4 +23,4 @@
 
 <div class="frm-quick-settings frm_grid_container <?php echo esc_attr( FrmStylesHelper::style_editor_get_wrapper_classname( 'quick-settings' ) ); ?>">
 	<?php require_once FrmAppHelper::plugin_path() . '/classes/views/styles/_quick-settings.php'; ?>
-</div>
+</div>

js/admin/dom.js

@@ -843,10 +843,7 @@
 			};
 			const use = node.querySelector( 'use' );
 			if ( use ) {
-				svgArgs.href = use.getAttribute( 'xlink:href' );
-				if ( ! svgArgs.href ) {
-					svgArgs.href = use.getAttribute( 'href' );
-				}
+				svgArgs.href = use.getAttribute( 'href' ) || use.getAttribute( 'xlink:href' );
 			}
 			return svg( svgArgs );
 		}

js/src/admin/admin.js

@@ -1395,13 +1395,13 @@ window.frmAdminBuildJS = function() {
 		let layoutOption, moveOption;
 
 		layoutOption = document.createElement( 'span' );
-		layoutOption.innerHTML = '<svg class="frmsvg"><use xlink:href="#frm_field_group_layout_icon"></use></svg>';
+		layoutOption.innerHTML = '<svg class="frmsvg"><use href="#frm_field_group_layout_icon"></use></svg>';
 		const layoutOptionLabel = __( 'Set Row Layout', 'formidable' );
 		addTooltip( layoutOption, layoutOptionLabel );
 		makeTabbable( layoutOption, layoutOptionLabel );
 
 		moveOption = document.createElement( 'span' );
-		moveOption.innerHTML = '<svg class="frmsvg"><use xlink:href="#frm_thick_move_icon"></use></svg>';
+		moveOption.innerHTML = '<svg class="frmsvg"><use href="#frm_thick_move_icon"></use></svg>';
 		moveOption.classList.add( 'frm-move' );
 		const moveOptionLabel = __( 'Move Field Group', 'formidable' );
 		addTooltip( moveOption, moveOptionLabel );
@@ -2647,7 +2647,7 @@ window.frmAdminBuildJS = function() {
 
 				span = document.createElement( 'span' );
 				span.textContent = option.label;
-				anchor.innerHTML = '<svg class="frmsvg"><use xlink:href="#' + option.icon + '"></use></svg>';
+				anchor.innerHTML = '<svg class="frmsvg"><use href="#' + option.icon + '"></use></svg>';
 				anchor.appendChild( document.createTextNode( ' ' ) );
 				anchor.appendChild( span );
 
@@ -7290,7 +7290,7 @@ window.frmAdminBuildJS = function() {
 			parentClass = '';
 		}
 		maybeAddFieldSelection( parentClass );
-		jQuery( parentClass + ' .frm_has_shortcodes:not(.frm-with-right-icon) input,' + parentClass + ' .frm_has_shortcodes:not(.frm-with-right-icon) textarea' ).wrap( '<span class="frm-with-right-icon"></span>' ).before( '<svg class="frmsvg frm-show-box"><use xlink:href="#frm_more_horiz_solid_icon"/></svg>' );
+		jQuery( parentClass + ' .frm_has_shortcodes:not(.frm-with-right-icon) input,' + parentClass + ' .frm_has_shortcodes:not(.frm-with-right-icon) textarea' ).wrap( '<span class="frm-with-right-icon"></span>' ).before( '<svg class="frmsvg frm-show-box"><use href="#frm_more_horiz_solid_icon"/></svg>' );
 	}
 
 	/**
@@ -8397,6 +8397,17 @@ window.frmAdminBuildJS = function() {
 		result.innerHTML = '[' + code + '[/if ' + field + ']';
 	}
 
+	/**
+	 * Gets data from href or xlink:href of the given element.
+	 *
+	 * @param {HTMLElement} element HTML element.
+	 *
+	 * @return {String}
+	 */
+	function getSVGHref( element ) {
+		return element.getAttribute( 'href' ) || element.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' );
+	}
+
 	function maybeShowModal( input ) {
 		let moreIcon;
 		if ( input.parentNode.parentNode.classList.contains( 'frm_has_shortcodes' ) ) {
@@ -8405,7 +8416,7 @@ window.frmAdminBuildJS = function() {
 			if ( moreIcon.tagName === 'use' ) {
 				moreIcon = moreIcon.firstElementChild;
 
-				if ( moreIcon.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ).indexOf( 'frm_close_icon' ) === -1 ) {
+				if ( getSVGHref( moreIcon ).indexOf( 'frm_close_icon' ) === -1 ) {
 					showShortcodeBox( moreIcon, 'nofocus' );
 				}
 			} else if ( ! moreIcon.classList.contains( 'frm_close_icon' ) ) {
@@ -8535,12 +8546,7 @@ window.frmAdminBuildJS = function() {
 			moreIcon = moreIcon.firstElementChild;
 		}
 		if ( moreIcon.tagName === 'use' ) {
-			classes = moreIcon.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' );
-
-			if ( null === classes ) {
-				// If the deprecated xlink:href is not defined, check for href.
-				classes = moreIcon.getAttribute( 'href' );
-			}
+			classes = getSVGHref( moreIcon );
 		}
 
 		if ( classes.indexOf( 'frm_close_icon' ) !== -1 ) {
@@ -8801,7 +8807,7 @@ window.frmAdminBuildJS = function() {
 
 		closeSvg = document.querySelectorAll( '.frm_has_shortcodes use' );
 		for ( u = 0; u < closeSvg.length; u++ ) {
-			if ( closeSvg[ u ].getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ) === '#frm_close_icon' ) {
+			if ( getSVGHref( closeSvg[ u ] ) === '#frm_close_icon' ) {
 				if ( closeSvg[ u ].closest( '.frm_remove_field' ) ) {
 					// Don't change the icon for the email fields remove button.
 					continue;
@@ -9856,7 +9862,7 @@ window.frmAdminBuildJS = function() {
 			if ( ! useTag ) {
 				return;
 			}
-			useTagHref = useTag.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ) || useTag.getAttribute( 'href' );
+			useTagHref = getSVGHref( useTag );
 
 			if ( useTagHref === '#frm_drag_icon' ) {
 				hasDragIcon = true;

js/src/form-templates/events/favoriteButtonListener.js

@@ -92,15 +92,15 @@ const onFavoriteButtonClick = event => {
 		++favoritesCount.total;
 		isTemplateCustom ? ++favoritesCount.custom : ++favoritesCount.default; // eslint-disable-line no-unused-expressions
 		// Set heart icon to filled
-		heartIcon.setAttribute( 'xlink:href', FILLED_HEART_ICON );
-		twinTemplateHeartIcon?.setAttribute( 'xlink:href', FILLED_HEART_ICON );
+		heartIcon.setAttribute( 'href', FILLED_HEART_ICON );
+		twinTemplateHeartIcon?.setAttribute( 'href', FILLED_HEART_ICON );
 	} else {
 		// Decrement favorite counts
 		--favoritesCount.total;
 		isTemplateCustom ? --favoritesCount.custom : --favoritesCount.default; // eslint-disable-line no-unused-expressions
 		// Set heart icon to outline
-		heartIcon.setAttribute( 'xlink:href', LINEAR_HEART_ICON );
-		twinTemplateHeartIcon?.setAttribute( 'xlink:href', LINEAR_HEART_ICON );
+		heartIcon.setAttribute( 'href', LINEAR_HEART_ICON );
+		twinTemplateHeartIcon?.setAttribute( 'href', LINEAR_HEART_ICON );
 	}
 
 	// Update UI and state to reflect new favorite counts

js/src/form-templates/ui/showModal.js

@@ -92,7 +92,7 @@ export const showUpgradeModal = showModal( ( plan, template ) => {
 
 		// Update SVG icon
 		const svg = icon.querySelector( 'svg > use' );
-		svg.setAttribute( 'xlink:href', shouldDisplayCheck ? '#frm_checkmark_icon' : '#frm_close_icon' );
+		svg.setAttribute( 'href', shouldDisplayCheck ? '#frm_checkmark_icon' : '#frm_close_icon' );
 	} );
 
 	// Append template slug to the upgrade modal link URL