1 _Drop = Drop.createContext classPrefix: 'tether'
3 isMobile = $(window).width() < 567
10 $target = $('.tether-target-demo')
37 for position in positions
38 drops[position] = new _Drop
40 classes: 'tether-theme-arrows-dark'
42 constrainToWindow: false
44 content: '<div style="height: 50px; width: 50px"></div>'
51 for position, drop of drops
55 for position, drop of drops
58 drops[positions[openIndex]].open()
59 drops[positions[(openIndex + 6) % positions.length]].open()
61 openIndex = (openIndex + 1) % positions.length
69 setTimeout openNextDrop, frameLengthMS * frames
72 $(drops['top left'].dropContent).html('Marrying DOM elements for life.')
73 $(drops['bottom right'].dropContent).html('<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>')
74 drops['top left'].open()
75 drops['bottom right'].open()
78 drops['top left'].open()
79 drops['top left'].tether.position()
80 drops['bottom right'].open()
81 drops['bottom right'].tether.position()
88 $browserDemo = $('.browser-demo.showcase')
90 $startPoint = $('.browser-demo-start-point')
91 $stopPoint = $('.browser-demo-stop-point')
93 $iframe = $('.browser-window iframe')
94 $browserContents = $('.browser-content .browser-demo-inner')
96 $sections = $('.browser-demo-section')
100 table.showcase.browser-demo.fixed-bottom {
101 top: #{ $sections.length }00%
107 scrollTop = $(window).scrollTop()
109 if $startPoint.position().top < scrollTop and scrollTop + window.innerHeight < $stopPoint.position().top
110 $browserDemo.removeClass('fixed-bottom')
111 $browserDemo.addClass('fixed')
116 if $section.position().top < scrollTop < $section.position().top + $section.outerHeight()
117 setSection $section.data('section')
122 $browserDemo.removeAttr('data-section')
123 $browserDemo.removeClass('fixed')
125 if scrollTop + window.innerHeight > $stopPoint.position().top
126 $browserDemo.addClass('fixed-bottom')
128 $browserDemo.removeClass('fixed-bottom')
131 iframeWindow = $iframe[0].contentWindow
133 $items = $iframe.contents().find('.item')
138 _iframeWindowDrop = iframeWindow.Drop.createContext classPrefix: 'tether'
140 drop = new _iframeWindowDrop
142 classes: 'tether-theme-arrows-dark'
143 position: 'right top'
144 constrainToWindow: true
148 <li>Action 1</li>
149 <li>Action 2</li>
150 <li>Action 3</li>
154 $item.data('drop', drop)
156 scrollInterval = undefined
158 scrollTopDirection = 1
160 setSection = (section) ->
161 $browserDemo.attr('data-section', section)
163 $('.section-copy').removeClass('active')
164 $(""".section-copy[data-section="#{ section }"]""").addClass('active')
168 $iframe.contents().find('.item:first').data().drop.open()
170 $iframe.contents().find('.item:eq(2)').data().drop.open()
173 $iframe.contents().find('.item').each -> $(@).data().drop.close() or true
175 scrollLeftSection = ->
176 scrollInterval = setInterval ->
177 $iframe.contents().find('.left').scrollTop scrollTop
178 scrollTop += scrollTopDirection
180 scrollTopDirection = -1
182 scrollTopDirection = 1
185 stopScrollingLeftSection = ->
186 clearInterval scrollInterval
193 stopScrollingLeftSection()
198 stopScrollingLeftSection()
204 stopScrollingLeftSection()
210 stopScrollingLeftSection()