editor-settings.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. (function() { // eslint-disable-line strict
  2. 'use strict'; // eslint-disable-line strict
  3. function dirname(path) {
  4. const ndx = path.lastIndexOf('/');
  5. return path.substring(0, ndx + 1);
  6. }
  7. function getPrefix(url) {
  8. const u = new URL(url, window.location.href);
  9. const prefix = u.origin + dirname(u.pathname);
  10. return prefix;
  11. }
  12. /**
  13. * Fix any local URLs into fully qualified urls.
  14. *
  15. * Examples:
  16. * resources/image.jpg -> https://domain.org/webgl/resouces/image.jpg
  17. * /3rdparty/lib.js -> https://domain.org/3rdparty/lib.js
  18. *
  19. * The reason is (a) we're running the code as via blobUrl and nothing is relative to a blob.
  20. * (b) we can upload to jsfiddle/codepen and so need to link back to the files.
  21. *
  22. * This is all kind of hacky in that it's just a bunch of regular expressions looking
  23. * for matches.
  24. *
  25. * @param {string} url The URL of the file source.
  26. * @param {string} source An HTML file or JavaScript file
  27. * @returns {string} the source after having urls fixed.
  28. */
  29. function fixSourceLinks(url, source) {
  30. const srcRE = /(src=)(")(.*?)(")()/g;
  31. const linkRE = /(href=)(")(.*?)(")()/g;
  32. const imageSrcRE = /((?:image|img)\.src = )(")(.*?)(")()/g;
  33. const loaderLoadRE = /(loader\.load[a-z]*\s*\(\s*)('|")(.*?)('|")/ig;
  34. const loaderArrayLoadRE = /(loader\.load[a-z]*\(\[)([\s\S]*?)(\])/ig;
  35. const loadFileRE = /(loadFile\s*\(\s*)('|")(.*?)('|")/ig;
  36. const threejsfundamentalsUrlRE = /(.*?)('|")([^"']*?)('|")([^'"]*?)(\/\*\s+threejsfundamentals:\s+url\s+\*\/)/ig;
  37. const arrayLineRE = /^(\s*["|'])([\s\S]*?)(["|']*$)/;
  38. const urlPropRE = /(url:\s*)('|")(.*?)('|")/g;
  39. const workerRE = /(new\s+Worker\s*\(\s*)('|")(.*?)('|")/g;
  40. const importScriptsRE = /(importScripts\s*\(\s*)('|")(.*?)('|")/g;
  41. const moduleRE = /(import.*?)('|")(.*?)('|")/g;
  42. const prefix = getPrefix(url);
  43. function addPrefix(url) {
  44. return url.indexOf('://') < 0 && !url.startsWith('data:') && url[0] !== '?' ? (prefix + url).replace(/\/.\//g, '/') : url;
  45. }
  46. function makeLinkFDedQuotes(match, fn, q1, url, q2) {
  47. return fn + q1 + addPrefix(url) + q2;
  48. }
  49. function makeTaggedFDedQuotes(match, start, q1, url, q2, suffix) {
  50. return start + q1 + addPrefix(url) + q2 + suffix;
  51. }
  52. function makeFDedQuotes(match, start, q1, url, q2) {
  53. return start + q1 + addPrefix(url) + q2;
  54. }
  55. function makeArrayLinksFDed(match, prefix, arrayStr, suffix) {
  56. const lines = arrayStr.split(',').map((line) => {
  57. const m = arrayLineRE.exec(line);
  58. return m
  59. ? `${m[1]}${addPrefix(m[2])}${m[3]}`
  60. : line;
  61. });
  62. return `${prefix}${lines.join(',')}${suffix}`;
  63. }
  64. source = source.replace(srcRE, makeTaggedFDedQuotes);
  65. source = source.replace(linkRE, makeTaggedFDedQuotes);
  66. source = source.replace(imageSrcRE, makeTaggedFDedQuotes);
  67. source = source.replace(urlPropRE, makeLinkFDedQuotes);
  68. source = source.replace(loadFileRE, makeLinkFDedQuotes);
  69. source = source.replace(loaderLoadRE, makeLinkFDedQuotes);
  70. source = source.replace(workerRE, makeLinkFDedQuotes);
  71. source = source.replace(importScriptsRE, makeLinkFDedQuotes);
  72. source = source.replace(loaderArrayLoadRE, makeArrayLinksFDed);
  73. source = source.replace(threejsfundamentalsUrlRE, makeTaggedFDedQuotes);
  74. source = source.replace(moduleRE, makeFDedQuotes);
  75. return source;
  76. }
  77. /**
  78. * Called after parsing to give a change to update htmlParts
  79. * @param {string} html The main page html turned into a template with the <style>, <script> and <body> parts extracted
  80. * @param {Object<string, HTMLPart>} htmlParts All the extracted parts
  81. * @return {string} The modified html template
  82. */
  83. function extraHTMLParsing(html /* , htmlParts */) {
  84. return html;
  85. }
  86. /**
  87. * Change JavaScript before uploading code to JSFiddle/Codepen
  88. *
  89. * @param {string} js JavaScript source
  90. * @returns {string} The JavaScript source with any fixes applied.
  91. */
  92. function fixJSForCodeSite(js) {
  93. // not yet needed for three.js
  94. return js;
  95. }
  96. window.lessonEditorSettings = {
  97. extraHTMLParsing,
  98. fixSourceLinks,
  99. fixJSForCodeSite,
  100. runOnResize: false,
  101. lessonSettings: {
  102. glDebug: false,
  103. },
  104. tags: ['three.js', 'threejsfundamentals.org'],
  105. name: 'threejsfundamentals',
  106. icon: '/threejs/lessons/resources/threejsfundamentals-icon-256.png',
  107. };
  108. }());