zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

Implement ace editor for coding

Browse source
This commit is contained in:
Kyle Drake 2015-12-14 14:55:33 -08:00
parent d422795c04
commit 65bc388ee9
10 changed files with 77 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/tutorial.rb
View file

@ -1,3 +1,22 @@
def default_tutorial_html
<<-EOT.strip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My web site</title>
</head>
<body>
Hello World!
</body>
</html>
EOT
end
get '/tutorials' do get '/tutorials' do
erb :'tutorials' erb :'tutorials'
end end

BIN
public/cat.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 13 KiB

7
views/tutorial/html/2.erb
View file

@ -32,10 +32,9 @@
var answer = storedName+ "'s Website" var answer = storedName+ "'s Website"
$('#studentName').text(storedName) $('#studentName').text(storedName)
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
var match = '<html.+>.+<body>.+'+answer+'.+</body>.+</html>'
var match = '<html>.+<body>.+'+answer+'.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

7
views/tutorial/html/3.erb
View file

@ -32,10 +32,9 @@
$('#answer').text(answer) $('#answer').text(answer)
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
var match = '<html.+>.+<body>.+'+answer+'.+</body>.+</html>'
var match = '<html>.+<body>.+'+answer+'.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

7
views/tutorial/html/4.erb
View file

@ -9,10 +9,9 @@
</div> </div>
<script> <script>
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+</p>.+</body>.+</html>'
var match = '<html>.+<body>.+<h1>.+</h1>.+<p>.+</p>.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

7
views/tutorial/html/5.erb
View file

@ -25,11 +25,10 @@ But this isn't!
</div> </div>
<script> <script>
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */ /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>' var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

6
views/tutorial/html/6.erb
View file

@ -21,11 +21,11 @@
</div> </div>
<script> <script>
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */ /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html>.+<body>.+<img.+src="/cat.png">.+</body>.+</html>' var match = '<html.+>.+<body>.+<img.+src="/cat.png">.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

6
views/tutorial/html/7.erb
View file

@ -30,11 +30,11 @@
</div> </div>
<script> <script>
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */ /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html>.+<body>.+<ul>.+<li>.+</li>.+</ul>.+</body>.+</html>' var match = '<html.+>.+<body>.+<ul>.+<li>.+</li>.+</ul>.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

6
views/tutorial/html/8.erb
View file

@ -20,11 +20,11 @@
</div> </div>
<script> <script>
function checkHomework(editor) { function checkHomework() {
var html = editor.val() var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */ /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html>.+<body>.+<ul>.+<li><a.+href=".+">.+</a></li>.+</ul>.+</body>.+</html>' var match = '<html.+>.+<body>.+<ul>.+<li><a.+href=".+">.+</a></li>.+</ul>.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(re) === null) {

53
views/tutorial/layout.erb
View file

@ -22,15 +22,43 @@
<input id="reset" class="btn btn-action" type="submit" value="Reset"> <input id="reset" class="btn btn-action" type="submit" value="Reset">
<% end %> <% end %>
<h3>HTML</h3> <h3>HTML</h3>
<textarea id="editor" class="editor">
<html>
<body>
Hello World! <div id="editor" class="editor"><%== encoding_fix default_tutorial_html %></div>
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
editor = ace.edit("editor")
editor.setTheme('ace/theme/tomorrow_night')
editor.getSession().setMode("ace/mode/html")
editor.getSession().setTabSize(2)
editor.getSession().setUseWrapMode(true)
editor.setFontSize(14)
editor.setShowPrintMargin(false)
editor.setOptions({
maxLines: Infinity,
autoScrollEditorIntoView: true
})
// Disable autocomplete
editor.setBehavioursEnabled(false)
editor.on('change', function(obj) {
$('.error').css('display', 'none')
refreshIframe()
})
editor.commands.addCommand({
name: 'saveCommand',
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
exec: function(editor) {
$('#submit').click()
}
})
})
</script>
</body>
</html>
</textarea>
<div class="error" style="display: none; margin-top: 0"> <div class="error" style="display: none; margin-top: 0">
<i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else. <i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
</div> </div>
@ -71,8 +99,7 @@
} }
$('.tutorial #submit').on('click', function() { $('.tutorial #submit').on('click', function() {
var editor = $('#editor') var result = checkHomework()
var result = checkHomework(editor)
if(result == true) { if(result == true) {
window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>' window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
} }
@ -83,18 +110,12 @@
editor.val(editor.text()) editor.val(editor.text())
}) })
$('.tutorial textarea').on('keypress keyup', function() {
$('.error').css('display', 'none')
refreshIframe()
})
var tutorialHtml = sessionStorage.getItem('tutorialHtml') var tutorialHtml = sessionStorage.getItem('tutorialHtml')
if(tutorialHtml) if(tutorialHtml)
$('#editor').text(tutorialHtml) $('#editor').text(tutorialHtml)
function refreshIframe() { function refreshIframe() {
var editor = $('#editor') $('.tutorial iframe').contents().find('html').html(editor.getValue())
$('.tutorial iframe').contents().find('html').html(editor.val())
} }
$(function() { $(function() {