saving for tutorial page

views/tutorial/html/10.erb

@@ -17,10 +17,3 @@
   <p>To continue working on your site, head to the <a href="/dashboard">dashboard</a>!</p>
   <p>You can also check out all the <a href="/browse">cool sites on Neocities</a>  and follow them via your <a href="/">news feed</a>.</p>
 </div>
-
-
-<script>
-  function checkHomework(editor) {
-    alert('check homework here')
-  }
-</script>

views/tutorial/html/9.erb

@@ -4,7 +4,7 @@
     It'll be saved as <strong>index.html</strong>, which is the first web page people see when they visit your site.
   </div>
   <div class="dialogue" style="left: 283px;top: 190px; width:160px">
-    You can can find and edit index.html by visitng your <a href="/dashboard">Neocities dashboard</a>.
+    You can can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
   </div>
   <div class="dialogue" style="left: 280px;top: 580px">
     <!-- A cheat sheet of all the tags you've learned can be found in the tutorial section. -->
@@ -12,7 +12,32 @@
 </div>
 
 <script>
-  function checkHomework(editor) {
+  $(document).ready(function() {
-    alert('check homework here')
+    $('#editor').css('display', 'none')
-  }
+    $('.editor-heading').css('display', 'none')
+    $('h3 #sitePreview').css('display', 'none')
+
+    $('#saveToSite').on('click', function() {
+      $.ajax({
+        url: '/site_files/save/index.html?csrf_token=<%= Rack::Utils.escape csrf_token %>',
+        data: sessionStorage.getItem('tutorialHtml'),
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        error: function(jqXHR, textStatus, errorThrown) {
+          alert('There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!')
+        },
+        success: function(response){
+          if(response == 'ok') {
+            window.location = '/tutorial/html/10'
+          } else {
+            alert('There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!')
+          }
+        }
+      })
+
+      return false
+    })
+
+  })
 </script>

views/tutorial/layout.erb

@@ -16,7 +16,7 @@
 
     <div class="col col-40 interact">
       <% if request.path =~ /\/html\/9/ %>
-      <a href="/tutorial/html/10" class="btn btn-Action">Save to <%= current_site.username %>.neocities.org</a>
+      <a href="#" id="saveToSite" class="btn btn-Action">Save new index.html to <%= current_site.username %>.neocities.org</a>
       <a href="/tutorial/html/10" class="btn cancel" style="margin-right: 7px">Don't Save</a>
       <% else %>
       <input id="submit" class="btn btn-Action" type="submit" value="Save">
@@ -26,46 +26,44 @@
 
       <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 src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 
-      <script>
+        <script>
-        $(document).ready(function() {
+          $(document).ready(function() {
-          editor = ace.edit("editor")
+            editor = ace.edit("editor")
-          editor.setTheme('ace/theme/tomorrow_night')
+            editor.setTheme('ace/theme/tomorrow_night')
-          editor.getSession().setMode("ace/mode/html")
+            editor.getSession().setMode("ace/mode/html")
-          editor.getSession().setTabSize(2)
+            editor.getSession().setTabSize(2)
-          editor.getSession().setUseWrapMode(true)
+            editor.getSession().setUseWrapMode(true)
-          editor.setFontSize(14)
+            editor.setFontSize(14)
-          editor.setShowPrintMargin(false)
+            editor.setShowPrintMargin(false)
-          editor.setOptions({
+            editor.setOptions({
-            maxLines: Infinity,
+              maxLines: Infinity,
-            autoScrollEditorIntoView: true
+              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>
 
-          // Disable autocomplete
+        <div class="error" style="display: none; margin-top: 0"></div>
-          editor.setBehavioursEnabled(false)
 
-          editor.on('change', function(obj) {
+        <h3 id="sitePreview">Site Preview</h3>
-            $('.error').css('display', 'none')
+        <iframe class="preview" style="background: white"></iframe>
-            refreshIframe()
-          })
-
-          editor.commands.addCommand({
-            name: 'saveCommand',
-            bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
-            exec: function(editor) {
-              $('#submit').click()
-            }
-          })
-        })
-      </script>
-
-      <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.
-      </div>
-
-      <h3>Site Preview</h3>
-      <iframe class="preview" style="background: white"></iframe>
       </div>
     </div>
 
@@ -128,7 +126,8 @@
     $('#editor').text(tutorialHtml)
 
   function refreshIframe() {
-    $('.tutorial iframe').contents().find('html').html(editor.getValue())
+    if(typeof editor !== 'undefined')
+      $('.tutorial iframe').contents().find('html').html(editor.getValue())
   }
 
   $(function() {