scrollable-page.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Editor</title>
  7. <style type="text/css" media="screen">
  8. .ace_editor {
  9. position: relative !important;
  10. border: 1px solid lightgray;
  11. margin: auto;
  12. height: 200px;
  13. width: 80%;
  14. }
  15. .ace_editor.fullScreen {
  16. height: auto;
  17. width: auto;
  18. border: 0;
  19. margin: 0;
  20. position: fixed !important;
  21. top: 0;
  22. bottom: 0;
  23. left: 0;
  24. right: 0;
  25. z-index: 10;
  26. }
  27. .fullScreen {
  28. overflow: hidden
  29. }
  30. .scrollmargin {
  31. height: 500px;
  32. text-align: center;
  33. }
  34. .large-button {
  35. color: lightblue;
  36. cursor: pointer;
  37. font: 30px arial;
  38. padding: 20px;
  39. text-align: center;
  40. border: medium solid transparent;
  41. display: inline-block;
  42. }
  43. .large-button:hover {
  44. border: medium solid lightgray;
  45. border-radius: 10px 10px 10px 10px;
  46. box-shadow: 0 0 12px 0 lightblue;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div class="scrollmargin">
  52. <span onclick="scroll()" class="large-button">
  53. scroll down &dArr;
  54. </span>
  55. </div>
  56. <pre id="editor">function foo(items) {
  57. var i;
  58. for (i = 0; i &lt; items.length; i++) {
  59. alert("Ace Rocks " + items[i]);
  60. }
  61. }</pre>
  62. <div class="scrollmargin">
  63. <div style="padding:20px">
  64. press F11 to switch to fullscreen mode
  65. </div>
  66. <span onclick="add()" class="large-button">
  67. +
  68. </span>
  69. </div>
  70. <script src="kitchen-sink/require.js"></script>
  71. <script>
  72. require.config({paths: { "ace" : "../lib/ace"}});
  73. require(["ace/ace", "ace/ext/themelist"], function(ace) {
  74. var $ = document.getElementById.bind(document);
  75. var dom = require("ace/lib/dom");
  76. //add command to all new editor instaces
  77. require("ace/commands/default_commands").commands.push({
  78. name: "Toggle Fullscreen",
  79. bindKey: "F11",
  80. exec: function(editor) {
  81. var fullScreen = dom.toggleCssClass(document.body, "fullScreen")
  82. dom.setCssClass(editor.container, "fullScreen", fullScreen)
  83. editor.setAutoScrollEditorIntoView(!fullScreen)
  84. editor.resize()
  85. }
  86. })
  87. // create first editor
  88. var editor = ace.edit("editor");
  89. editor.setTheme("ace/theme/twilight");
  90. editor.session.setMode("ace/mode/javascript");
  91. editor.renderer.setScrollMargin(10, 10);
  92. editor.setOptions({
  93. // "scrollPastEnd": 0.8,
  94. autoScrollEditorIntoView: true
  95. });
  96. var count = 1;
  97. function add() {
  98. var oldEl = editor.container
  99. var pad = document.createElement("div")
  100. pad.style.padding = "40px"
  101. oldEl.parentNode.insertBefore(pad, oldEl.nextSibling)
  102. var el = document.createElement("div")
  103. oldEl.parentNode.insertBefore(el, pad.nextSibling)
  104. count++
  105. var theme = themes[Math.floor(themes.length * Math.random() - 1e-5)]
  106. editor = ace.edit(el)
  107. editor.setOptions({
  108. mode: "ace/mode/javascript",
  109. theme: theme,
  110. autoScrollEditorIntoView: true
  111. })
  112. editor.setValue([
  113. "this is editor number: ", count, "\n",
  114. "using theme \"", theme, "\"\n",
  115. ":)"
  116. ].join(""), -1)
  117. scroll()
  118. }
  119. function scroll(speed) {
  120. var top = editor.container.getBoundingClientRect().top
  121. speed = speed || 10
  122. if (top > 60 && speed < 500) {
  123. if (speed > top - speed - 50)
  124. speed = top - speed - 50
  125. else
  126. setTimeout(scroll, 10, speed + 10)
  127. window.scrollBy(0, speed)
  128. }
  129. }
  130. var themes = require("ace/ext/themelist").themes.map(function(t){return t.theme});
  131. window.add = add;
  132. window.scroll = scroll;
  133. });
  134. </script>
  135. </body>
  136. </html>