intro.coffee 2.5 KB

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