docs.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /* jshint jquery: true */
  2. /* global FingerBlast: true */
  3. $(function() {
  4. 'use strict';
  5. var doc;
  6. var device;
  7. var windowWidth;
  8. var windowHeight;
  9. var pageHeight;
  10. var contentPadding;
  11. var footerHeight;
  12. var navComponentLinks;
  13. var componentsList;
  14. var componentLinks;
  15. var contentSection;
  16. var currentActive;
  17. var topCache;
  18. var win;
  19. var bod;
  20. var eventListeners;
  21. var toolbarToggle;
  22. var initialize = function () {
  23. currentActive = 0;
  24. topCache = [];
  25. win = $(window);
  26. doc = $(document);
  27. bod = $(document.body);
  28. device = device || $('.js-device');
  29. navComponentLinks = $('.js-jump-menu');
  30. componentsList = $('.js-component-group');
  31. componentLinks = $('.component-example a');
  32. contentSection = $('.component');
  33. topCache = contentSection.map(function () { return $(this).offset().top; });
  34. windowHeight = $(window).height() / 3;
  35. windowWidth = $(window).width();
  36. pageHeight = $(document).height();
  37. contentPadding = parseInt($('.docs-content').css('padding-bottom'), 10);
  38. footerHeight = $('.docs-footer').outerHeight(false);
  39. toolbarToggle = $('.js-docs-component-toolbar');
  40. // Device placement
  41. if (windowWidth >= 768 && device.offset()) {
  42. device.initialLeft = device.offset().left;
  43. device.initialTop = device.initialTop || device.offset().top;
  44. device.dockingOffset = ($(window).height() - device.height()) / 2;
  45. }
  46. checkDesktopContent();
  47. calculateScroll();
  48. calculateToggle();
  49. if (!eventListeners) {
  50. addEventListeners();
  51. }
  52. };
  53. var addEventListeners = function () {
  54. eventListeners = true;
  55. device.on('click', function (e) {
  56. e.preventDefault();
  57. });
  58. // Mobile navigation
  59. $('.js-docs-nav-trigger').on('click', function () {
  60. var nav = $('.docs-nav-group');
  61. var trigger = $('.js-docs-nav-trigger');
  62. trigger.toggleClass('active');
  63. nav.toggleClass('active');
  64. });
  65. navComponentLinks.click(function(e) {
  66. e.stopPropagation();
  67. e.preventDefault();
  68. componentsList.toggleClass('active');
  69. });
  70. doc.on('click', function () {
  71. componentsList.removeClass('active');
  72. });
  73. // Platform switcher
  74. $('.platform-switch').on('click', function () {
  75. var components = $('.docs-components');
  76. var platform = $(this).attr('data-platform');
  77. // Set platform
  78. if (components.hasClass('platform-ios')) {
  79. components.removeClass('platform-ios');
  80. components.addClass(platform);
  81. } else if (components.hasClass('platform-android')) {
  82. components.removeClass('platform-android');
  83. components.addClass(platform);
  84. } else {
  85. components.addClass(platform);
  86. }
  87. // Deal with active states
  88. $(this).siblings('.active').removeClass('active');
  89. $(this).addClass('active');
  90. });
  91. win.on('scroll', calculateScroll);
  92. win.on('scroll', calculateToggle);
  93. };
  94. var checkDesktopContent = function () {
  95. windowWidth = $(window).width();
  96. if (windowWidth <= 768) {
  97. var content = $('.content');
  98. if (content.length > 1) {
  99. $(content[0]).remove();
  100. }
  101. }
  102. };
  103. var calculateScroll = function() {
  104. // if small screen don't worry about this
  105. if (windowWidth <= 768) {
  106. return;
  107. }
  108. // Save scrollTop value
  109. var contentSectionItem;
  110. var currentTop = win.scrollTop();
  111. // exit if no device
  112. if (!device.length) {
  113. return;
  114. }
  115. if ((device.initialTop - currentTop) <= device.dockingOffset) {
  116. device[0].className = 'device device-fixed';
  117. device.css({ top: device.dockingOffset });
  118. } else {
  119. device[0].className = 'device';
  120. device[0].setAttribute('style','');
  121. }
  122. function updateContent(content) {
  123. $('#iwindow').html(content);
  124. }
  125. // Injection of components into device
  126. for (var l = contentSection.length; l--;) {
  127. if ((topCache[l] - currentTop) < windowHeight) {
  128. if (currentActive === l) {
  129. return;
  130. }
  131. currentActive = l;
  132. bod.find('.component.active').removeClass('active');
  133. contentSectionItem = $(contentSection[l]);
  134. contentSectionItem.addClass('active');
  135. if (contentSectionItem.attr('id')) {
  136. device.attr('id', contentSectionItem.attr('id') + 'InDevice');
  137. } else {
  138. device.attr('id', '');
  139. }
  140. if (!contentSectionItem.hasClass('informational')) {
  141. updateContent(contentSectionItem.find('.highlight .html').text());
  142. }
  143. break;
  144. }
  145. }
  146. };
  147. // Toolbar toggle
  148. var calculateToggle = function () {
  149. var currentTop = win.scrollTop();
  150. var headerHeight = $('.docs-sub-header').outerHeight();
  151. if (currentTop >= headerHeight) {
  152. toolbarToggle.addClass('visible');
  153. } else if (currentTop <= headerHeight) {
  154. toolbarToggle.removeClass('visible');
  155. componentsList.removeClass('active');
  156. }
  157. };
  158. $(window).on('load resize', initialize);
  159. $(window).on('load', function () {
  160. window.FingerBlast && (new FingerBlast('.device-content'));
  161. });
  162. });