tabs.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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. // Enable all tabs with this id
  46. // For each tab group
  47. $('.sphinx-tabs').each(function() {
  48. var this2 = $(this);
  49. // Check if tab group has a tab matching the clicked tab
  50. var has_tab = false;
  51. this2.children().eq(0).children().each(function() {
  52. has_tab |= $(this).attr('data-tab') === data_tab;
  53. });
  54. if (has_tab) {
  55. // Enable just the matching tab
  56. var toggle = function() {
  57. var this3 = $(this);
  58. if (this3.attr('data-tab') === data_tab) {
  59. this3.addClass('active');
  60. } else {
  61. this3.removeClass('active');
  62. }
  63. };
  64. this2.children().eq(0).children('[data-tab]').each(toggle);
  65. this2.children('[data-tab]').each(toggle);
  66. }
  67. });
  68. // Keep tab with the original view offset
  69. $(window).scrollTop(this1.offset().top - offset);
  70. });
  71. });
  72. });