mirror of
https://github.com/neocities/neocities.git
synced 2025-07-22 18:46:07 +02:00
implement initial code for tutorial
This commit is contained in:
parent
6fcc43297b
commit
d018e9df2d
11 changed files with 162 additions and 28 deletions
|
@ -1,14 +1,22 @@
|
|||
<section class="section tutorial">
|
||||
<div class="row">
|
||||
<% if request.path =~ /\/html\/10?/ %>
|
||||
<div class="col col-100 lesson">
|
||||
<% else %>
|
||||
<div class="col col-60 lesson">
|
||||
<% end %>
|
||||
<h1><%= @section.upcase %> Tutorial</h1>
|
||||
<h2 class="subtitle">Page <%= @page %>/10</h2>
|
||||
|
||||
<%== erb "tutorial/#{@section}/#{@page}".to_sym, layout: false %>
|
||||
</div>
|
||||
|
||||
<% if request.path =~ /\/html\/10?/ %>
|
||||
<% else %>
|
||||
|
||||
<div class="col col-40 interact">
|
||||
<input id="submit" class="btn btn-action" type="submit" value="Save">
|
||||
<input id="reset" class="btn btn-action" type="submit" value="Reset">
|
||||
<h3>HTML</h3>
|
||||
<textarea id="editor" class="editor">
|
||||
<html>
|
||||
|
@ -21,9 +29,12 @@
|
|||
</textarea>
|
||||
|
||||
<h3>Site Preview</h3>
|
||||
<div class="preview">
|
||||
<iframe class="preview" style="background: white"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@ -35,4 +46,28 @@
|
|||
window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
|
||||
}
|
||||
})
|
||||
|
||||
$('.tutorial #reset').on('click', function() {
|
||||
var editor = $('#editor')
|
||||
editor.val(editor.text())
|
||||
})
|
||||
|
||||
$('.tutorial textarea').on('keypress keyup', function() {
|
||||
refreshIframe()
|
||||
})
|
||||
|
||||
var tutorialHtml = sessionStorage.getItem('tutorialHtml')
|
||||
if(tutorialHtml)
|
||||
$('#editor').text(tutorialHtml)
|
||||
|
||||
function refreshIframe() {
|
||||
var editor = $('#editor')
|
||||
$('.tutorial iframe').contents().find('html').html(editor.val())
|
||||
}
|
||||
|
||||
$(function() {
|
||||
refreshIframe()
|
||||
})
|
||||
|
||||
</script>
|
||||
<script src="/js/xregexp-min.js"></script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue