Make javascript external plus some details

aloker · Oct 17, 2009 · 8e5c22f · 8e5c22f
1 parent 74d819e
commit 8e5c22f
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,6 @@ Currently the following markup languages are supported:
 For the licences of the 3rd party libraries see the license.txt files in the respective folder under _3rdParty_
 
 * A demo can be found at <http://markup.andreloker.de>
-* [Project page on GitHub.com](http://github.com/aloker/markup-preview)
+* [Project page with source on GitHub.com](http://github.com/aloker/markup-preview)
 
 ~ Andre Loker
diff --git a/Source/MarkupPreview/MarkupPreview/Controllers/HomeController.cs b/Source/MarkupPreview/MarkupPreview/Controllers/HomeController.cs
@@ -1,16 +1,15 @@
 #region Copyright © 2009 Andre Loker (mail@andreloker.de). All rights reserved.
-
 // $Id$
 #endregion
 
-using System;
-using System.IO;
-using System.Reflection;
-using Castle.MonoRail.Framework;
-using MarkupPreview.Processing;
-
 namespace MarkupPreview.Controllers
 {
+  using System;
+  using System.IO;
+  using System.Reflection;
+  using Castle.MonoRail.Framework;
+  using Processing;
+
   [Layout("default")]
   public class HomeController : SmartDispatcherController
   {
@@ -23,7 +22,7 @@ public void Index()
 
     private void LoadMarkupTypes()
     {
-      PropertyBag["markupTypes"] = Enum.GetValues(typeof (MarkupType));
+      PropertyBag["markupTypes"] = Enum.GetValues(typeof(MarkupType));
     }
 
     public void Process(MarkupType type, string source)

diff --git a/Source/MarkupPreview/MarkupPreview/MarkupPreview.csproj b/Source/MarkupPreview/MarkupPreview/MarkupPreview.csproj
@@ -131,6 +131,7 @@
   <ItemGroup>
     <Content Include="assets\css\main.css" />
     <Content Include="assets\js\prototype.js" />
+    <Content Include="assets\js\site.js" />
     <Content Include="Default.aspx" />
     <Content Include="Global.asax" />
     <Content Include="Web.config" />

diff --git a/Source/MarkupPreview/MarkupPreview/Views/home/index.brail b/Source/MarkupPreview/MarkupPreview/Views/home/index.brail
@@ -1,54 +1,13 @@
 <div id="left" class="container">
-<h2>Markup ${FormHelper.Select("type", markupTypes, {@onchange: 'site.process();'})}</h2>
+  <h2>Markup ${FormHelper.Select("type", markupTypes)}</h2>
-<div class="inner">
+  <div class="inner">${FormHelper.TextArea("source", {@rows:20, @cols: 60})}</div>
-${FormHelper.TextArea("source", {@rows:20, @cols: 80, @onchange: 'site.process();', @onkeypress: 'site.resizeTextarea(this);', @onkeyup: 'site.resizeTextarea(this);'})}
 </div>
-</div>
-
 <div id="right" class="container">
-<h2>HTML</h2>
+  <h2>HTML</h2>
-<div id="destination" class="inner"></div>
+  <div id="destination" class="inner"></div>
 </div>
-
+<script type="text/javascript">
-<script type="text/javascript">  /*<![CDATA[*/
+/*<![CDATA[*/
-  var Site = new Class.create({
+var site = new Site("${UrlHelper.For({@controller:'home', @action:'process'})}");
-
+/*]]>*/
-    previousValue: '',
+</script>
-    previousType: -1,
-
-    initialize: function() {
-      this.previousValue = '';
-      new PeriodicalExecuter(this.process, 2);
-      $('source').focus();
-    },
-
-    process: function() {
-      var newValue = $('source').value;
-      var newType =$("type").value;
-      if (newValue != this.previousValue || newType != this.previousType) {
-        new Ajax.Request("${UrlHelper.For({@controller:'home', @action:'process'})}", {
-        parameters: { source: newValue, type: newType }
-        });
-        this.previousValue = newValue;
-        this.previousType = newType;
-      }
-    },
-
-    // based on http://blog.bigsmoke.us/2007/02/18/automatic-html-textarea-resizing
-    resizeTextarea: function(textArea) {    
-      if (!textArea.originalRowCount) {
-        textArea.originalRowCount = textArea.rows;
-      }
-      var rows = textArea.value.split('\n');
-      var neededRows = 1;
-      for (var i = 0; i < rows.length; i++) {
-        var row = rows[i];
-        neededRows += (row.length > textArea.cols) ? Math.floor(row.length / textArea.cols) : 1;
-      }
-      textArea.rows = Math.max(neededRows, textArea.originalRowCount);
-    }
-  });
-
-var site = new Site();  
-
-/*]]>*/</script>
diff --git a/Source/MarkupPreview/MarkupPreview/Views/layouts/default.brail b/Source/MarkupPreview/MarkupPreview/Views/layouts/default.brail
@@ -3,8 +3,12 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Markup Preview</title>
+  <meta name="author" content="Andre Loker" /> 
+  <meta name="description" content="Transforms markup of different kind to HTML" /> 
+  <meta name="keywords" content="markup, markdown, html, transform, git, github, andre, loker" /> 
   <link rel="Stylesheet" type="text/css" href="${siteRoot}/assets/css/main.css" />
   <script type="text/javascript" src="${siteRoot}/assets/js/prototype.js"></script>
+  <script type="text/javascript" src="${siteRoot}/assets/js/site.js?v1"></script>
 </head>
 <body>
 <div id="head">

diff --git a/Source/MarkupPreview/MarkupPreview/assets/js/site.js b/Source/MarkupPreview/MarkupPreview/assets/js/site.js
@@ -0,0 +1,51 @@
+var Site = new Class.create({
+
+  previousValue: '',
+  previousType: -1,
+  updateUrl: '',
+
+  initialize: function(updateUrl) {
+    new PeriodicalExecuter(this.process.bind(this), 2);
+    this.updateUrl = updateUrl;
+    this.previousValue = '';
+    this.previousType = -1;
+    $('type')
+      .observe("change", this.process.bind(this))
+    $('source')
+      .observe("change", this.process.bind(this))
+      .observe("keyup", this.resizeTextarea)
+      .observe("keypress", this.resizeTextarea)
+    .focus();
+  },
+
+  process: function() {
+    var newValue = $("source").value;
+    var newType = $("type").value;
+    if (newValue != this.previousValue || newType != this.previousType) {
+      if (!newValue) {
+        Element.update("destination", "");
+      } else {
+        new Ajax.Request(this.updateUrl, {
+          parameters: { source: newValue, type: newType }
+        });
+      }
+      this.previousValue = newValue;
+      this.previousType = newType;
+    }
+  },
+
+  // based on http://blog.bigsmoke.us/2007/02/18/automatic-html-textarea-resizing
+  resizeTextarea: function() {
+    var textArea = $('source');
+    if (!textArea.originalRowCount) {
+      textArea.originalRowCount = textArea.rows;
+    }
+    var rows = textArea.value.split('\n');
+    var neededRows = 1;
+    for (var i = 0; i < rows.length; i++) {
+      var row = rows[i];
+      neededRows += (row.length > textArea.cols) ? Math.floor(row.length / textArea.cols) : 1;
+    }
+    textArea.rows = Math.max(neededRows, textArea.originalRowCount);
+  }
+});