afb-client/bower_components/tether/docs/welcome/coffee/welcome.coffee

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