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

   1 {uniqueId} = Tether.Utils
   2
   3 SETUP_JS = """
   4 yellowBox = $('.yellow-box', $output);
   5 greenBox = $('.green-box', $output);
   6 scrollBox = $('.scroll-box', $output);
   7 """
   8
   9 OUTPUT_HTML = (key) -> """
  10 <div class="scroll-box">
  11   <div class="scroll-content">
  12     <div class="yellow-box" data-example="#{ key }"></div>
  13     <div class="green-box" data-example="#{ key }"></div>
  14   </div>
  15 </div>
  16 """
  17
  18 tethers = {}
  19
  20 getOutput = ($block) ->
  21   key = $block.data('example')
  22   if key and typeof key is 'string'
  23     return $("output[data-example='#{ key }']")
  24   else
  25     return $block.parents('pre').nextAll('output').first()
  26
  27 run = (key) ->
  28   if typeof key is 'string'
  29     $block = $("code[data-example='#{ key }']")
  30   else
  31     $block = key
  32
  33   key = $block.attr('data-example')
  34
  35   $output = getOutput $block
  36
  37   code = $block.text()
  38   code = SETUP_JS + code
  39
  40   window.$output = $output
  41   tethers[key] = eval code
  42
  43 setupBlock = ($block) ->
  44   key = $block.data('example')
  45
  46   $output = getOutput $block
  47
  48   if not key
  49     key = uniqueId()
  50     $block.attr('data-example', key)
  51     $output.attr('data-example', key)
  52     $output.find('.tether-element').attr('data-example', key)
  53
  54   $output.html OUTPUT_HTML(key)
  55
  56   $scrollBox = $output.find('.scroll-box')
  57   $scrollContent = $scrollBox.find('.scroll-content')
  58   $scrollBox.scrollTop(parseInt($scrollContent.css('height')) / 2 - $scrollBox.height() / 2)
  59   $scrollBox.scrollLeft(parseInt($scrollContent.css('width')) / 2 - $scrollBox.width() / 2)
  60   setTimeout ->
  61     $scrollBox.on 'scroll', ->
  62       $output.addClass 'scrolled'
  63
  64   $scrollBox.css 'height', "#{ $block.parent().outerHeight() }px"
  65
  66   if not $output.attr('deactivated')?
  67     run $block
  68
  69 $(document.body).on 'click', (e) ->
  70   if $(e.target).is('output[deactivated]')
  71     activate $(e.target)
  72     false
  73   else if $(e.target).is('output[activated]')
  74     deactivate $(e.target)
  75     false
  76
  77 activate = ($output) ->
  78   $block = $output.prev().find('code')
  79
  80   run $block
  81
  82   $output.find('.tether-element').show()
  83
  84   key = $output.data('example')
  85   $(tethers[key].element).show()
  86   tethers[key].enable()
  87
  88   $output.removeAttr('deactivated')
  89   $output.attr('activated', true)
  90
  91 deactivate = ($output) ->
  92   $block = $output.prev().find('code')
  93   key = $output.data('example')
  94
  95   tethers[key].disable()
  96
  97   $el = $(tethers[key].element)
  98   $el.detach()
  99   $output.find('.scroll-content').append $el
 100   $el.hide()
 101
 102   $output.removeAttr('activated')
 103   $output.attr('deactivated', true)
 104
 105 init = ->
 106   $blocks = $('code[data-example]')
 107
 108   setupBlock($ block) for block in $blocks
 109
 110 window.EXECUTR_OPTIONS =
 111   codeSelector: 'code[executable]'
 112
 113 $ init