JS editor for school chromebooks
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
2.6 KiB

  1. data:text/html,
  2. <!-- JS Version 0.1 - Nov 2019 - GNU Public License v3.0 -->
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>JSedit</title>
  7. </head>
  8. <body style='margin:0px; width: 100%; height: 100%; background: grey;'>
  9. <div class='toolbar'>
  10. <div class='button' onclick='popup("about")'>
  11. <b>JSedit</b>
  12. </div>
  13. <div class='button' onclick='preview()'>
  14. Exec
  15. </div>
  16. <div class='button' onclick='exportCode()'>
  17. Export
  18. </div>
  19. </div>
  20. <textarea class='code' id='code' onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}" placeholder='Enter text here...'></textarea>
  21. <style>
  22. .toolbar {
  23. width: 100%: height: 35px;
  24. background: grey;
  25. padding: 1.5px 1.5px;
  26. position: absolute;
  27. top: 0px;
  28. left: 0px;
  29. }
  30. .button {
  31. float: left;
  32. margin-right: 2px;
  33. border: 2px solid black;
  34. width: 100px;
  35. height: 31px;
  36. font-size: 15px;
  37. background: grey;
  38. color: black;
  39. background: white;
  40. text-align: center;
  41. font-family: sans-serif;
  42. cursor: pointer;
  43. user-select: none;
  44. padding-top: 4px;
  45. box-sizing: border-box;
  46. }
  47. .button:active {
  48. background: lightgrey;
  49. }
  50. .code {
  51. position: absolute;
  52. bottom: 0px;
  53. left: 0px;
  54. color: white;
  55. background-color: rgb(45, 49, 66);
  56. font-size: 19px;
  57. border: none;
  58. width: 100%;
  59. height: calc(100% - 40px);
  60. resize: none;
  61. outline: none;
  62. tab-size: 4px;
  63. -moz-tab-size: 4;
  64. }
  65. .popup {
  66. position: absolute;
  67. top: calc(50% - 200px);
  68. left: calc(50% - 200px);
  69. background: white;
  70. width: 400px;
  71. height: 400px;
  72. text-align: center;
  73. }
  74. </style>
  75. <script>
  76. function setText(text) {
  77. document.getElementById("code").value = text;
  78. }
  79. function preview() {
  80. window.open("javascript:try {" + document.getElementById("code").value + "} catch(e) {alert(e)}", "Hola", "width=500, height=500");
  81. }
  82. function exportCode() {
  83. var encoded = "`" + encodeURI(document.getElementById("code").value) + "`";
  84. prompt('Copy this as a bookmarklet', "javascript:setText(decodeURI(" + encoded + "))");
  85. }
  86. window.onbeforeunload = function() {
  87. return "If you leave this page, you will lose any unsaved changes.";
  88. };
  89. function popup(name) {
  90. var popup = document.createElement("DIV");
  91. popup.className = "popup";
  92. popup.innerHTML = ` <h1>JSedit<\/h1> <span>JSedit v0.1.0<\/span> <br> <span>View source at https://code.theres.life/PetabyteStudios/JSedit/raw/branch/master/bookmarklet<\/span> <br> <button onclick='this.parentElement.outerHTML = ""'>Close<\/button> `;
  93. document.body.appendChild(popup);
  94. }
  95. </script>
  96. </body>
  97. </html>