2 var init, isMobile, setupBrowserDemo, setupHero, _Drop;
4 _Drop = Drop.createContext({
8 isMobile = $(window).width() < 567;
12 return setupBrowserDemo();
15 setupHero = function() {
16 var $target, finalDropState, frameLengthMS, frames, openAllDrops, openIndex, openNextDrop, position, positions, _i, _len;
17 $target = $('.tether-target-demo');
18 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'];
20 positions = ['top left', 'bottom left', 'bottom right', 'top right'];
23 for (_i = 0, _len = positions.length; _i < _len; _i++) {
24 position = positions[_i];
25 drops[position] = new _Drop({
27 classes: 'tether-theme-arrows-dark',
29 constrainToWindow: false,
31 content: '<div style="height: 50px; width: 50px"></div>'
37 openAllDrops = function() {
40 for (position in drops) {
41 drop = drops[position];
42 _results.push(drop.open());
46 openNextDrop = function() {
48 for (position in drops) {
49 drop = drops[position];
52 drops[positions[openIndex]].open();
53 drops[positions[(openIndex + 6) % positions.length]].open();
54 openIndex = (openIndex + 1) % positions.length;
60 return setTimeout(openNextDrop, frameLengthMS * frames);
62 finalDropState = function() {
63 $(drops['top left'].dropContent).html('Marrying DOM elements for life.');
64 $(drops['bottom right'].dropContent).html('<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>');
65 drops['top left'].open();
66 return drops['bottom right'].open();
68 if (true || isMobile) {
69 drops['top left'].open();
70 drops['top left'].tether.position();
71 drops['bottom right'].open();
72 drops['bottom right'].tether.position();
73 return finalDropState();
75 return openNextDrop();
79 setupBrowserDemo = function() {
80 var $browserContents, $browserDemo, $iframe, $sections, $startPoint, $stopPoint, scrollInterval, scrollTop, scrollTopDirection, setSection;
81 $browserDemo = $('.browser-demo.showcase');
82 $startPoint = $('.browser-demo-start-point');
83 $stopPoint = $('.browser-demo-stop-point');
84 $iframe = $('.browser-window iframe');
85 $browserContents = $('.browser-content .browser-demo-inner');
86 $sections = $('.browser-demo-section');
87 $('body').append("<style>\n table.showcase.browser-demo.fixed-bottom {\n top: " + $sections.length + "00%\n }\n</style>");
88 $(window).scroll(function() {
90 scrollTop = $(window).scrollTop();
91 if ($startPoint.position().top < scrollTop && scrollTop + window.innerHeight < $stopPoint.position().top) {
92 $browserDemo.removeClass('fixed-bottom');
93 $browserDemo.addClass('fixed');
94 return $sections.each(function() {
97 if (($section.position().top < scrollTop && scrollTop < $section.position().top + $section.outerHeight())) {
98 setSection($section.data('section'));
103 $browserDemo.removeAttr('data-section');
104 $browserDemo.removeClass('fixed');
105 if (scrollTop + window.innerHeight > $stopPoint.position().top) {
106 return $browserDemo.addClass('fixed-bottom');
108 return $browserDemo.removeClass('fixed-bottom');
112 $iframe.load(function() {
113 var $items, iframeWindow;
114 iframeWindow = $iframe[0].contentWindow;
115 $items = $iframe.contents().find('.item');
116 return $items.each(function(i) {
117 var $item, drop, _iframeWindowDrop;
119 _iframeWindowDrop = iframeWindow.Drop.createContext({
120 classPrefix: 'tether'
122 drop = new _iframeWindowDrop({
124 classes: 'tether-theme-arrows-dark',
125 position: 'right top',
126 constrainToWindow: true,
128 content: '<ul>\n <li>Action 1</li>\n <li>Action 2</li>\n <li>Action 3</li>\n</ul>'
130 return $item.data('drop', drop);
133 scrollInterval = void 0;
135 scrollTopDirection = 1;
136 return setSection = function(section) {
137 var closeAllItems, openExampleItem, scrollLeftSection, stopScrollingLeftSection;
138 $browserDemo.attr('data-section', section);
139 $('.section-copy').removeClass('active');
140 $(".section-copy[data-section=\"" + section + "\"]").addClass('active');
141 openExampleItem = function() {
143 return $iframe.contents().find('.item:first').data().drop.open();
145 return $iframe.contents().find('.item:eq(2)').data().drop.open();
148 closeAllItems = function() {
149 return $iframe.contents().find('.item').each(function() {
150 return $(this).data().drop.close() || true;
153 scrollLeftSection = function() {
154 return scrollInterval = setInterval(function() {
155 $iframe.contents().find('.left').scrollTop(scrollTop);
156 scrollTop += scrollTopDirection;
157 if (scrollTop > 50) {
158 scrollTopDirection = -1;
161 return scrollTopDirection = 1;
165 stopScrollingLeftSection = function() {
166 return clearInterval(scrollInterval);
172 return stopScrollingLeftSection();
176 stopScrollingLeftSection();
177 return scrollLeftSection();
181 stopScrollingLeftSection();
182 return scrollLeftSection();
186 return stopScrollingLeftSection();