Wewnętrzne linkowanie w ekranie personalizacji motywu

Ostatni pokazałem jak można stworzyć podpowiedzi z opisów kontrolek – w tym wpisie pokażę jak na bazie opisów paneli, sekcji oraz kontrolek stworzyć wewnętrzne linkowanie pomiędzy elementami ekranu personalizacji motywu. Wykorzystamy w tym celu kilka opisywanych wcześniej przeze mnie funkcji API oraz fakt, że opisy elementów mogą zawierać kod HTML.

Idea działania

Wewnętrzne linkowanie może przydać się wtedy gdy mamy dużą liczbę opcji w motywie oraz chcemy powiązać opcje z różnych sekcji/paneli ze sobą. Celem takiego linkowania jest uproszczenie poruszania się użytkownika po opcjach dzięki temu, że po kliknięciu w link od razu wyświetlana jest dana kontrolka, sekcja lub panel.

Linki w opisach będą zawierały dwie ważne informacje – rodzaj elementu do którego link prowadzi oraz jego identyfikator.

Implementacja

Na potrzeby testów sugeruję stworzyć w jednym opisie trzy linki do trzech rodzajów elementów:

<a href="#blogname" rel="tc-control">Control</a> 
<a href="#colors" rel="tc-section">Section</a> 
<a href="#widgets" rel="tc-panel">Panel</a>

Następnie korzystając z kodu dodającego skrypty tworzymy szkielet funkcji dodające skrypt implementujący obsługę wewnętrznego linkowania:

function dziudek_theme_customizer_internal_links() {
   ?>
   <script type="text/javascript">
   // Theme Customizer script HERE
   </script>
   <?php
}
 
add_action('customize_controls_print_scripts', 'dziudek_theme_customizer_internal_links');

Sam skrypt tworzący wewnętrzne linkowanie jest następujący:

(function($) {
	$(document).ready(function() {
		var api = wp.customize;
		api.bind('ready', function() {
			$(['control', 'section', 'panel']).each(function(i, type) {
				$('a[rel="tc-'+type+'"]').click(function(e) {
					e.preventDefault();
					var id = $(this).attr('href').replace('#', '');
					if(api[type].has(id)) {
						api[type].instance(id).focus();
					}
				});
			});
		});
	});
})(jQuery);

Skrócony opis działania powyższego kodu:

1. Czekamy aż interfejs ekranu personalizacji motywu będzie w pełni wyrenderowany,
2. Iterujemy po trzech typach elementów do których możemy linkować,
3. Dla każdego typu linków dodajemy zdarzenie kliknięcia
4. Wyłączamy domyślną akcję linków
5. Pobierany identyfikator linkowanego elementu z atrybutu href
6. Sprawdzamy czy element o podanym rodzaju i identyfikatorze istnieje
7. Wywołujemy metodę focus na danym elemencie co spowoduje otworzenie odpowiedniej sekcji/panelu

Cały kod prezentuje się następująco:

function dziudek_theme_customizer_internal_links() {
   ?>
   <script type="text/javascript">
	(function($) {
		$(document).ready(function() {
			var api = wp.customize;
			api.bind('ready', function() {
				$(['control', 'section', 'panel']).each(function(i, type) {
					$('a[rel="tc-'+type+'"]').click(function(e) {
						e.preventDefault();
						var id = $(this).attr('href').replace('#', '');
						if(api[type].has(id)) {
							api[type].instance(id).focus();
						}
					});
				});
			});
		});
	})(jQuery);
   </script>
   <?php
}
 
add_action('customize_controls_print_scripts', 'dziudek_theme_customizer_internal_links');