implement initial code for tutorial

This commit is contained in:
Kyle Drake 2015-10-13 15:59:13 -07:00
parent 6fcc43297b
commit d018e9df2d
11 changed files with 162 additions and 28 deletions

View file

@ -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>