corrade-nucleus-nucleons – Blame information for rev 20
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 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 | |||
16 | .ace_editor.fullScreen { |
||
17 | height: auto; |
||
18 | width: auto; |
||
19 | border: 0; |
||
20 | margin: 0; |
||
21 | position: fixed !important; |
||
22 | top: 0; |
||
23 | bottom: 0; |
||
24 | left: 0; |
||
25 | right: 0; |
||
26 | z-index: 10; |
||
27 | } |
||
28 | |||
29 | .fullScreen { |
||
30 | overflow: hidden |
||
31 | } |
||
32 | |||
33 | .scrollmargin { |
||
34 | height: 500px; |
||
35 | text-align: center; |
||
36 | } |
||
37 | |||
38 | .large-button { |
||
39 | color: lightblue; |
||
40 | cursor: pointer; |
||
41 | font: 30px arial; |
||
42 | padding: 20px; |
||
43 | text-align: center; |
||
44 | border: medium solid transparent; |
||
45 | display: inline-block; |
||
46 | } |
||
47 | .large-button:hover { |
||
48 | border: medium solid lightgray; |
||
49 | border-radius: 10px 10px 10px 10px; |
||
50 | box-shadow: 0 0 12px 0 lightblue; |
||
51 | } |
||
52 | </style> |
||
53 | </head> |
||
54 | <body> |
||
55 | <div class="scrollmargin"> |
||
56 | <span onclick="scroll()" class="large-button"> |
||
57 | scroll down ⇓ |
||
58 | </span> |
||
59 | </div> |
||
60 | <pre id="editor">function foo(items) { |
||
61 | var i; |
||
62 | for (i = 0; i < items.length; i++) { |
||
63 | alert("Ace Rocks " + items[i]); |
||
64 | } |
||
65 | |||
66 | }</pre> |
||
67 | <div class="scrollmargin"> |
||
68 | <div style="padding:20px"> |
||
69 | press F11 to switch to fullscreen mode |
||
70 | </div> |
||
71 | <span onclick="add()" class="large-button"> |
||
72 | + |
||
73 | </span> |
||
74 | |||
75 | </div> |
||
76 | |||
77 | <!-- load ace --> |
||
78 | <script src="../src/ace.js"></script> |
||
79 | <!-- load ace themelist extension --> |
||
80 | <script src="../src/ext-themelist.js"></script> |
||
81 | <script> |
||
82 | |||
83 | var $ = document.getElementById.bind(document); |
||
84 | var dom = require("ace/lib/dom"); |
||
85 | |||
86 | //add command to all new editor instaces |
||
87 | require("ace/commands/default_commands").commands.push({ |
||
88 | name: "Toggle Fullscreen", |
||
89 | bindKey: "F11", |
||
90 | exec: function(editor) { |
||
91 | var fullScreen = dom.toggleCssClass(document.body, "fullScreen") |
||
92 | dom.setCssClass(editor.container, "fullScreen", fullScreen) |
||
93 | editor.setAutoScrollEditorIntoView(!fullScreen) |
||
94 | editor.resize() |
||
95 | } |
||
96 | }) |
||
97 | |||
98 | // create first editor |
||
99 | var editor = ace.edit("editor"); |
||
100 | editor.setTheme("ace/theme/twilight"); |
||
101 | editor.session.setMode("ace/mode/javascript"); |
||
102 | editor.renderer.setScrollMargin(10, 10); |
||
103 | editor.setOptions({ |
||
104 | // "scrollPastEnd": 0.8, |
||
105 | autoScrollEditorIntoView: true |
||
106 | }); |
||
107 | |||
108 | var count = 1; |
||
109 | function add() { |
||
110 | var oldEl = editor.container |
||
111 | var pad = document.createElement("div") |
||
112 | pad.style.padding = "40px" |
||
113 | oldEl.parentNode.insertBefore(pad, oldEl.nextSibling) |
||
114 | |||
115 | var el = document.createElement("div") |
||
116 | oldEl.parentNode.insertBefore(el, pad.nextSibling) |
||
117 | |||
118 | count++ |
||
119 | var theme = themes[Math.floor(themes.length * Math.random() - 1e-5)] |
||
120 | editor = ace.edit(el) |
||
121 | editor.setOptions({ |
||
122 | mode: "ace/mode/javascript", |
||
123 | theme: theme, |
||
124 | autoScrollEditorIntoView: true |
||
125 | }) |
||
126 | |||
127 | editor.setValue([ |
||
128 | "this is editor number: ", count, "\n", |
||
129 | "using theme \"", theme, "\"\n", |
||
130 | ":)" |
||
131 | ].join(""), -1) |
||
132 | |||
133 | scroll() |
||
134 | } |
||
135 | |||
136 | function scroll(speed) { |
||
137 | var top = editor.container.getBoundingClientRect().top |
||
138 | speed = speed || 10 |
||
139 | if (top > 60 && speed < 500) { |
||
140 | if (speed > top - speed - 50) |
||
141 | speed = top - speed - 50 |
||
142 | else |
||
143 | setTimeout(scroll, 10, speed + 10) |
||
144 | window.scrollBy(0, speed) |
||
145 | } |
||
146 | } |
||
147 | |||
148 | var themes = require("ace/ext/themelist").themes.map(function(t){return t.theme}); |
||
149 | |||
150 | window.add = add; |
||
151 | window.scroll = scroll; |
||
152 | </script> |
||
153 | |||
154 | </body> |
||
155 | </html> |