prism-toolbar.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. (function () {
  2. if (typeof Prism === 'undefined' || typeof document === 'undefined') {
  3. return;
  4. }
  5. var callbacks = [];
  6. var map = {};
  7. var noop = function () {};
  8. Prism.plugins.toolbar = {};
  9. /**
  10. * @typedef ButtonOptions
  11. * @property {string} text The text displayed.
  12. * @property {string} [url] The URL of the link which will be created.
  13. * @property {Function} [onClick] The event listener for the `click` event of the created button.
  14. * @property {string} [className] The class attribute to include with element.
  15. */
  16. /**
  17. * Register a button callback with the toolbar.
  18. *
  19. * @param {string} key
  20. * @param {ButtonOptions|Function} opts
  21. */
  22. var registerButton = Prism.plugins.toolbar.registerButton = function (key, opts) {
  23. var callback;
  24. if (typeof opts === 'function') {
  25. callback = opts;
  26. } else {
  27. callback = function (env) {
  28. var element;
  29. if (typeof opts.onClick === 'function') {
  30. element = document.createElement('button');
  31. element.type = 'button';
  32. element.addEventListener('click', function () {
  33. opts.onClick.call(this, env);
  34. });
  35. } else if (typeof opts.url === 'string') {
  36. element = document.createElement('a');
  37. element.href = opts.url;
  38. } else {
  39. element = document.createElement('span');
  40. }
  41. if (opts.className) {
  42. element.classList.add(opts.className);
  43. }
  44. element.textContent = opts.text;
  45. return element;
  46. };
  47. }
  48. if (key in map) {
  49. console.warn('There is a button with the key "' + key + '" registered already.');
  50. return;
  51. }
  52. callbacks.push(map[key] = callback);
  53. };
  54. /**
  55. * Returns the callback order of the given element.
  56. *
  57. * @param {HTMLElement} element
  58. * @returns {string[] | undefined}
  59. */
  60. function getOrder(element) {
  61. while (element) {
  62. var order = element.getAttribute('data-toolbar-order');
  63. if (order != null) {
  64. order = order.trim();
  65. if (order.length) {
  66. return order.split(/\s*,\s*/g);
  67. } else {
  68. return [];
  69. }
  70. }
  71. element = element.parentElement;
  72. }
  73. }
  74. /**
  75. * Post-highlight Prism hook callback.
  76. *
  77. * @param env
  78. */
  79. var hook = Prism.plugins.toolbar.hook = function (env) {
  80. // Check if inline or actual code block (credit to line-numbers plugin)
  81. var pre = env.element.parentNode;
  82. if (!pre || !/pre/i.test(pre.nodeName)) {
  83. return;
  84. }
  85. // Autoloader rehighlights, so only do this once.
  86. if (pre.parentNode.classList.contains('code-toolbar')) {
  87. return;
  88. }
  89. // Create wrapper for <pre> to prevent scrolling toolbar with content
  90. var wrapper = document.createElement('div');
  91. wrapper.classList.add('code-toolbar');
  92. pre.parentNode.insertBefore(wrapper, pre);
  93. wrapper.appendChild(pre);
  94. // Setup the toolbar
  95. var toolbar = document.createElement('div');
  96. toolbar.classList.add('toolbar');
  97. // order callbacks
  98. var elementCallbacks = callbacks;
  99. var order = getOrder(env.element);
  100. if (order) {
  101. elementCallbacks = order.map(function (key) {
  102. return map[key] || noop;
  103. });
  104. }
  105. elementCallbacks.forEach(function (callback) {
  106. var element = callback(env);
  107. if (!element) {
  108. return;
  109. }
  110. var item = document.createElement('div');
  111. item.classList.add('toolbar-item');
  112. item.appendChild(element);
  113. toolbar.appendChild(item);
  114. });
  115. // Add our toolbar to the currently created wrapper of <pre> tag
  116. wrapper.appendChild(toolbar);
  117. };
  118. registerButton('label', function (env) {
  119. var pre = env.element.parentNode;
  120. if (!pre || !/pre/i.test(pre.nodeName)) {
  121. return;
  122. }
  123. if (!pre.hasAttribute('data-label')) {
  124. return;
  125. }
  126. var element; var template;
  127. var text = pre.getAttribute('data-label');
  128. try {
  129. // Any normal text will blow up this selector.
  130. template = document.querySelector('template#' + text);
  131. } catch (e) { /* noop */ }
  132. if (template) {
  133. element = template.content;
  134. } else {
  135. if (pre.hasAttribute('data-url')) {
  136. element = document.createElement('a');
  137. element.href = pre.getAttribute('data-url');
  138. } else {
  139. element = document.createElement('span');
  140. }
  141. element.textContent = text;
  142. }
  143. return element;
  144. });
  145. /**
  146. * Register the toolbar with Prism.
  147. */
  148. Prism.hooks.add('complete', hook);
  149. }());