intro.js 3.5 KB

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