https://www.cala.es/export/system/modules/com.saga.sagasuite.core.script/resources/sagasuite/sgtablinks.js

1/* SAGA SOLUCIONES: Tab Links Script
2 * 
3 * Script que se encarga de añadir un parametro a la URL para que podamos acceder directamente al contenido de una de las pestanas  o acordeon
4 *
5 * version 1.0 (16/06/2015):
6 *  - Modifica la url al cambiar de pestaña
7 *  - Modifica la url al abrir un acordeon
8 *  - En la carga inicial comprueba el hash de la url, abre la pestaña o acordeón correspondiente y hace scrool al sitio correspondiente
9 *
10 */
11$(document).ready(function () {
12
13
14	//Si al cargar viene un hash en la url, debemos abrir dicho tab
15	var hash = document.location.hash;
16	var id = hash.replace('#','');
17	if (hash) {
18		//Comprobamos si es un tab el hash
19		var idElement = $('a[href='+hash+']').attr('id');
20		if(idElement != null && idElement.substr(0,4)=='tab-') {
21			//Forzamos a que se habra el tab indicado
22			$('a[href=' + hash + ']').tab('show');
23
24			//Hacemos el scrool hasta el elemento
25			$('html, body').animate({scrollTop: $('#tab-' + id).offset().top - 60}, 2000);
26
27		}else if(idElement != null && idElement.substr(0,8)=='menuind-') {
28
29			//Hacemos el scroll hasta el elemento
30
31			$('html, body').animate({scrollTop: $('#' + id).offset().top}, 2000);
32
33
34		}else if(idElement != null && idElement.substr(0,9)=='collapse-') {
35
36			//Miro si estoy dentro de un tab, y si no es el activo
37			var idTab = $('#'+id).parents('.tab-pane:not(.active)').attr("id");
38
39			if(idTab!=null){
40				//Al estar en un tab oculto, primero debemos abrir el tab, y esperar a que termine de cargarse, para eso escuchamos el evento shown
41				$('#tab-'+idTab).tab('show');
42				$('#tab-'+idTab).on("shown.bs.tab", function (e) {
43					//Le añadimos la clase in para que se despliegue el elemento correspondiente
44					$('#' + id).addClass("in");
45					$('#' + id).attr('aria-expanded', "true");
46					$('#collapse-' + id + ' .fa').removeClass('fa-angle-down').addClass('fa-angle-up');
47
48					//Hacemos el scroll hasta el elemento
49					$('html, body').animate({scrollTop: $('#collapse-' + id).offset().top - 60}, 2000);
50
51					$('#tab-'+idTab).off("shown.bs.tab");
52				});
53			}else {
54				//Le añadimos la clase in para que se despliegue el elemento correspondiente
55				$('#' + id).addClass("in");
56				$('#' + id).attr('aria-expanded', "true");
57				$('#collapse-' + id + ' .fa').removeClass('fa-angle-down').addClass('fa-angle-up');
58
59				//Hacemos el scrool hasta el elemento
60				$('html, body').animate({scrollTop: $('#collapse-' + id).offset().top - 60}, 2000);
61			}
62		}
63	}
64
65	// Capturamos el evento de cambio de pestana para cambiar el hash en la url
66	$("a[data-toggle='tab']").on("show.bs.tab", function (e) {
67		var hash = $(e.target).attr("href");
68		if (hash.substr(0,1) == "#") {
69			if(history.pushState) {
70				history.pushState(null, null, '#'+hash.substr(1));
71			}
72			else {
73				location.replace("#" + hash.substr(1));
74			}
75		}
76	});
77	
78	// Capturamos el evento click en menu indice
79    $("a[data-toggle='anchor']").on("click", function (e) {
80
81        var hash = $(e.currentTarget).attr("href");
82        if (hash.substr(0,1) == "#") {
83            //Hacemos el scrool hasta el elemento
84            $('html, body').animate({scrollTop: $(hash).offset().top}, 2000);
85        }
86
87    });	
88
89	// Capturamos el evento de cambio en el acordeon y cambiamos el hash de la url
90	$(".sg-tabs .panel-collapse").on("shown.bs.collapse", function (e) {
91
92		//Hacemos scrool al inicio del tab que se ha desplegado
93		var clickedHeader = $(this).parent().parent().find('.panel > .in').closest('.panel').find('.panel-heading');
94		var offset = clickedHeader.offset();
95		var top = $(window).scrollTop();
96		if(offset) {
97			var topOfHeader = offset.top;
98			console.log(topOfHeader+"<"+top);
99			if(topOfHeader < top) {
100				$('html,body').animate({ scrollTop: topOfHeader - 60}, 500);
101			}
102		}
103	});
104
105	// Capturamos el evento de cambio en el acordeon y cambiamos el hash de la url
106	$(".sg-tabs .panel-collapse").on("show.bs.collapse", function (e) {
107
108		//Cambiamos el hash en la url
109		var hash = $(e.target).attr("id");
110		
111		//Version antigua que no funciona en chrome correctamente:
112		//window.location.hash = "#" + hash;
113		
114		if(history.pushState) {
115			history.pushState(null, null, '#'+hash);
116		}
117		else {
118			location.hash = "#" + hash;
119		}
120
121	});
122	// Para el boton de volver a menu en la version de menu de indice
123
124	$(".sg-tabs").on("click",".back-to-menu", function (e) {
125		var menuobject = $(e.delegateTarget).find('.menu-ind-v1');
126		//Hacemos el scrool hasta el elemento
127		$('html, body').animate({scrollTop: $(menuobject).offset().top}, 700);
128	});
129});