tabs.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // From http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  2. function elementIsInView (el) {
  3. if (typeof jQuery === "function" && el instanceof jQuery) {
  4. el = el[0];
  5. }
  6. const rect = el.getBoundingClientRect();
  7. return (
  8. rect.top >= 0 &&
  9. rect.left >= 0 &&
  10. rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  11. rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  12. );
  13. }
  14. $(function() {
  15. // Change container tags <div> -> <a>
  16. $('.sphinx-menu.menu .item').each(function() {
  17. var this_ = $(this);
  18. var a_this = $('<a>');
  19. a_this.html(this_.html());
  20. $.each(this_.prop('attributes'), function() {
  21. a_this.attr(this.name, this.value);
  22. });
  23. this_.replaceWith(a_this);
  24. });
  25. // We store the data-tab values as sphinx-data-<data-tab value>
  26. // Add data-tab attribute with the extracted value
  27. $('.sphinx-menu.menu .item, .sphinx-tab.tab').each(function() {
  28. var this_ = $(this);
  29. const prefix = 'sphinx-data-';
  30. const classes = this_.attr('class').split(/\s+/);
  31. $.each(classes, function(idx, clazz) {
  32. if (clazz.startsWith(prefix)) {
  33. this_.attr('data-tab',
  34. clazz.substring(prefix.length));
  35. }
  36. });
  37. });
  38. // Mimic the Semantic UI behaviour
  39. $('.sphinx-menu.menu .item').each(function() {
  40. var this1 = $(this);
  41. var data_tab = this1.attr('data-tab');
  42. this1.on('click', function() {
  43. // Find offset in view
  44. const offset = (this1.offset().top - $(window).scrollTop());
  45. $('[data-tab]').each(function() {
  46. var this2 = $(this);
  47. // Remove 'active' class from tabs that aren't the same
  48. if (this2.attr('data-tab') !== data_tab) {
  49. // Keep 'active' if there isn't a tab with the same data-tab value
  50. if (0 < this2.parent().find('[data-tab="' + data_tab + '"]').length) {
  51. this2.removeClass('active');
  52. }
  53. } else {
  54. // Add 'active' if data-tab value is the same
  55. this2.addClass('active');
  56. }
  57. });
  58. // Keep tab with the original view offset
  59. $(window).scrollTop(this1.offset().top - offset);
  60. });
  61. });
  62. });