welcome.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. (function() {
  2. var init, isMobile, setupBrowserDemo, setupHero, _Drop;
  3. _Drop = Drop.createContext({
  4. classPrefix: 'tether'
  5. });
  6. isMobile = $(window).width() < 567;
  7. init = function() {
  8. setupHero();
  9. return setupBrowserDemo();
  10. };
  11. setupHero = function() {
  12. var $target, finalDropState, frameLengthMS, frames, openAllDrops, openIndex, openNextDrop, position, positions, _i, _len;
  13. $target = $('.tether-target-demo');
  14. positions = ['top left', 'left top', 'left middle', 'left bottom', 'bottom left', 'bottom center', 'bottom right', 'right bottom', 'right middle', 'right top', 'top right', 'top center'];
  15. if (isMobile) {
  16. positions = ['top left', 'bottom left', 'bottom right', 'top right'];
  17. }
  18. window.drops = {};
  19. for (_i = 0, _len = positions.length; _i < _len; _i++) {
  20. position = positions[_i];
  21. drops[position] = new _Drop({
  22. target: $target[0],
  23. classes: 'tether-theme-arrows-dark',
  24. position: position,
  25. constrainToWindow: false,
  26. openOn: '',
  27. content: '<div style="height: 50px; width: 50px"></div>'
  28. });
  29. }
  30. openIndex = 0;
  31. frames = 0;
  32. frameLengthMS = 10;
  33. openAllDrops = function() {
  34. var drop, _results;
  35. _results = [];
  36. for (position in drops) {
  37. drop = drops[position];
  38. _results.push(drop.open());
  39. }
  40. return _results;
  41. };
  42. openNextDrop = function() {
  43. var drop;
  44. for (position in drops) {
  45. drop = drops[position];
  46. drop.close();
  47. }
  48. drops[positions[openIndex]].open();
  49. drops[positions[(openIndex + 6) % positions.length]].open();
  50. openIndex = (openIndex + 1) % positions.length;
  51. if (frames > 5) {
  52. finalDropState();
  53. return;
  54. }
  55. frames += 1;
  56. return setTimeout(openNextDrop, frameLengthMS * frames);
  57. };
  58. finalDropState = function() {
  59. $(drops['top left'].dropContent).html('Marrying DOM elements for life.');
  60. $(drops['bottom right'].dropContent).html('<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>');
  61. drops['top left'].open();
  62. return drops['bottom right'].open();
  63. };
  64. if (true || isMobile) {
  65. drops['top left'].open();
  66. drops['top left'].tether.position();
  67. drops['bottom right'].open();
  68. drops['bottom right'].tether.position();
  69. return finalDropState();
  70. } else {
  71. return openNextDrop();
  72. }
  73. };
  74. setupBrowserDemo = function() {
  75. var $browserContents, $browserDemo, $iframe, $sections, $startPoint, $stopPoint, scrollInterval, scrollTop, scrollTopDirection, setSection;
  76. $browserDemo = $('.browser-demo.showcase');
  77. $startPoint = $('.browser-demo-start-point');
  78. $stopPoint = $('.browser-demo-stop-point');
  79. $iframe = $('.browser-window iframe');
  80. $browserContents = $('.browser-content .browser-demo-inner');
  81. $sections = $('.browser-demo-section');
  82. $('body').append("<style>\n table.showcase.browser-demo.fixed-bottom {\n top: " + $sections.length + "00%\n }\n</style>");
  83. $(window).scroll(function() {
  84. var scrollTop;
  85. scrollTop = $(window).scrollTop();
  86. if ($startPoint.position().top < scrollTop && scrollTop + window.innerHeight < $stopPoint.position().top) {
  87. $browserDemo.removeClass('fixed-bottom');
  88. $browserDemo.addClass('fixed');
  89. return $sections.each(function() {
  90. var $section;
  91. $section = $(this);
  92. if (($section.position().top < scrollTop && scrollTop < $section.position().top + $section.outerHeight())) {
  93. setSection($section.data('section'));
  94. }
  95. return true;
  96. });
  97. } else {
  98. $browserDemo.removeAttr('data-section');
  99. $browserDemo.removeClass('fixed');
  100. if (scrollTop + window.innerHeight > $stopPoint.position().top) {
  101. return $browserDemo.addClass('fixed-bottom');
  102. } else {
  103. return $browserDemo.removeClass('fixed-bottom');
  104. }
  105. }
  106. });
  107. $iframe.load(function() {
  108. var $items, iframeWindow;
  109. iframeWindow = $iframe[0].contentWindow;
  110. $items = $iframe.contents().find('.item');
  111. return $items.each(function(i) {
  112. var $item, drop, _iframeWindowDrop;
  113. $item = $(this);
  114. _iframeWindowDrop = iframeWindow.Drop.createContext({
  115. classPrefix: 'tether'
  116. });
  117. drop = new _iframeWindowDrop({
  118. target: $item[0],
  119. classes: 'tether-theme-arrows-dark',
  120. position: 'right top',
  121. constrainToWindow: true,
  122. openOn: 'click',
  123. content: '<ul>\n <li>Action&nbsp;1</li>\n <li>Action&nbsp;2</li>\n <li>Action&nbsp;3</li>\n</ul>'
  124. });
  125. return $item.data('drop', drop);
  126. });
  127. });
  128. scrollInterval = void 0;
  129. scrollTop = 0;
  130. scrollTopDirection = 1;
  131. return setSection = function(section) {
  132. var closeAllItems, openExampleItem, scrollLeftSection, stopScrollingLeftSection;
  133. $browserDemo.attr('data-section', section);
  134. $('.section-copy').removeClass('active');
  135. $(".section-copy[data-section=\"" + section + "\"]").addClass('active');
  136. openExampleItem = function() {
  137. if (isMobile) {
  138. return $iframe.contents().find('.item:first').data().drop.open();
  139. } else {
  140. return $iframe.contents().find('.item:eq(2)').data().drop.open();
  141. }
  142. };
  143. closeAllItems = function() {
  144. return $iframe.contents().find('.item').each(function() {
  145. return $(this).data().drop.close() || true;
  146. });
  147. };
  148. scrollLeftSection = function() {
  149. return scrollInterval = setInterval(function() {
  150. $iframe.contents().find('.left').scrollTop(scrollTop);
  151. scrollTop += scrollTopDirection;
  152. if (scrollTop > 50) {
  153. scrollTopDirection = -1;
  154. }
  155. if (scrollTop < 0) {
  156. return scrollTopDirection = 1;
  157. }
  158. }, 30);
  159. };
  160. stopScrollingLeftSection = function() {
  161. return clearInterval(scrollInterval);
  162. };
  163. switch (section) {
  164. case 'what':
  165. closeAllItems();
  166. openExampleItem();
  167. return stopScrollingLeftSection();
  168. case 'how':
  169. closeAllItems();
  170. openExampleItem();
  171. stopScrollingLeftSection();
  172. return scrollLeftSection();
  173. case 'why':
  174. closeAllItems();
  175. openExampleItem();
  176. stopScrollingLeftSection();
  177. return scrollLeftSection();
  178. case 'outro':
  179. closeAllItems();
  180. openExampleItem();
  181. return stopScrollingLeftSection();
  182. }
  183. };
  184. };
  185. init();
  186. }).call(this);