acf-options-page-skip-links.js

// for now, written old-school pre-es6/webpack

(function ( $ ) {

	var AcfOptionsLinks = {

		init : function () {

			this.$body = $( 'body' );

			if ( !this.$body.hasClass( 'toplevel_page_ob-site-options' ) ) {
				return;
			}

			this.addLinks();
			this.bindEvents();

		},

		addLinks : function () {

			var _this = this;

			this.sidebarLinks = [];

			this.$sidebar = $( '#side-sortables' );
			this.$acfBlocks = $( '.acf-postbox' );


			this.$acfBlocks.each( function ( i, el ) {

				var $el = $( el ),
					$tabs = $el.find( '.acf-tab-button' ),
					sectionTitle = $el.find( 'h2' ).find( 'span' ).eq( 0 ).text(),
					group = [],
					sectionId = $el.attr( 'id' );

				$tabs.each( function ( j, jel ) {

					var $jel = $( jel ),
						title = $jel.text(),
						key = $jel.data( 'key' );

					group.push( {
						title : title,
						key   : key
					} );
				} );

				_this.sidebarLinks.push( {
					sectionTitle : sectionTitle,
					sectionId    : sectionId,
					links        : group,
				} )

			} );

			if ( this.sidebarLinks.length > 0 ) {

				var html_out = '<div class="postbox"><div class="inside">';

				$.each( this.sidebarLinks, function ( arrKey, arr ) {
					console.log( arrKey, arr );

					html_out += '<h4><a href="#' + arr.sectionId + '">' + arr.sectionTitle + '</a></h4>';

					$.each( arr.links, function ( jarrKey, jarr ) {

						html_out += '<h5><a href="#" data-key="' + jarr.key + '">' + jarr.title + '</a></h5>';

					} );

				} );


				html_out += '</div></div>';


				_this.$sidebarLinks = $( html_out ).appendTo( _this.$sidebar );
			}

		},

		bindEvents : function () {
			if ( typeof this.$sidebarLinks === 'undefined' ) {
				return;
			}

			var _this = this;

			this.$sidebarLinks.on( 'click.AcfOptionsLinks', 'h5 a', function ( event ) {
				event.preventDefault();

				var $el = $( event.currentTarget ),
					key = $el.data( 'key' ),
					$target = _this.$acfBlocks.find( '.acf-tab-button[data-key="' + key + '"]' );

				if ( $target.length > 0 ) {

					var position = $target.offset();

					console.log(position, $target.position());

					window.scrollTo( {
						top      : position.top - 50,
						left     : 0,
						behavior : 'smooth'
					} );
				}

			} );

		}


	}


	$( function () {

		AcfOptionsLinks.init();

	} );
})( jQuery );