1 {uniqueId} = Tether.Utils
4 yellowBox = $('.yellow-box', $output);
5 greenBox = $('.green-box', $output);
6 scrollBox = $('.scroll-box', $output);
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>
20 getOutput = ($block) ->
21 key = $block.data('example')
22 if key and typeof key is 'string'
23 return $("output[data-example='#{ key }']")
25 return $block.parents('pre').nextAll('output').first()
28 if typeof key is 'string'
29 $block = $("code[data-example='#{ key }']")
33 key = $block.attr('data-example')
35 $output = getOutput $block
38 code = SETUP_JS + code
40 window.$output = $output
41 tethers[key] = eval code
43 setupBlock = ($block) ->
44 key = $block.data('example')
46 $output = getOutput $block
50 $block.attr('data-example', key)
51 $output.attr('data-example', key)
52 $output.find('.tether-element').attr('data-example', key)
54 $output.html OUTPUT_HTML(key)
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)
61 $scrollBox.on 'scroll', ->
62 $output.addClass 'scrolled'
64 $scrollBox.css 'height', "#{ $block.parent().outerHeight() }px"
66 if not $output.attr('deactivated')?
69 $(document.body).on 'click', (e) ->
70 if $(e.target).is('output[deactivated]')
73 else if $(e.target).is('output[activated]')
74 deactivate $(e.target)
77 activate = ($output) ->
78 $block = $output.prev().find('code')
82 $output.find('.tether-element').show()
84 key = $output.data('example')
85 $(tethers[key].element).show()
88 $output.removeAttr('deactivated')
89 $output.attr('activated', true)
91 deactivate = ($output) ->
92 $block = $output.prev().find('code')
93 key = $output.data('example')
95 tethers[key].disable()
97 $el = $(tethers[key].element)
99 $output.find('.scroll-content').append $el
102 $output.removeAttr('activated')
103 $output.attr('deactivated', true)
106 $blocks = $('code[data-example]')
108 setupBlock($ block) for block in $blocks
110 window.EXECUTR_OPTIONS =
111 codeSelector: 'code[executable]'