edit-in-place. thanks, jQuery.

dltj · Mar 15, 2008 · 06f53f5 · 06f53f5
1 parent c0faf90
commit 06f53f5
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 24 deletions.
diff --git a/git-wiki.rb b/git-wiki.rb
@@ -3,7 +3,7 @@
 require 'environment'
 require 'lib/sinatra/lib/sinatra'
 
-get('/') { redirect '/' + HOMEPAGE }
+get('/') { redirect "/#{HOMEPAGE}" }
 
 get '/a/list' do
   @pages = $repo.log.first.gtree.children.map { |name, blob| Page.new(name) } rescue []
@@ -16,6 +16,11 @@
   @page.tracked? ? show(:show, @page.name) : redirect('/e/' + @page.name)
 end
 
+get '/:page/raw' do
+  @page = Page.new(params[:page])
+  @page.raw_body
+end
+
 get '/:page/append' do
   @page = Page.new(page_with_ext)
   @page.body = @page.raw_body + "\n\n" + params[:text]
@@ -33,6 +38,13 @@
   redirect '/' + @page.name
 end
 
+post '/eip/:page' do
+  @page = Page.new(page_with_ext)
+  @page.update(params[:body])
+  @page = Page.new(page_with_ext)
+  @page.body
+end
+
 get '/h/:page' do
   @page = Page.new(page_with_ext)
   show :history, "History of #{@page.name}"
@@ -134,11 +146,9 @@ def page_url
 end
 
 def page_with_ext
-  if params[:format] == "html"
-    params[:page]
-  else
-    "#{params[:page]}.#{params[:format]}"
-  end
+  return params[:page] unless params[:format]
+  puts "FORMAT #{params[:format]}"
+  "#{params[:page]}.#{params[:format]}"
 end
 
 private

diff --git a/page.rb b/page.rb
@@ -34,16 +34,16 @@ def raw_body
     end
   end
 
-  def update(content, message)
+  def update(content, message=nil)
     File.open(@filename, 'w') { |f| f << content }
     commit_message = tracked? ? "edited #{@name}" : "created #{@name}" 
-    commit_message += ' : ' + message if message.length > 0
+    commit_message += ' : ' + message if message && message.length > 0
     begin
       $repo.add(@name)
       $repo.commit(commit_message)
     rescue 
       nil
-    end    
+    end
   end
 
   def tracked?

diff --git a/public/app.js b/public/app.js
@@ -5,7 +5,7 @@ function time_ago_in_words(from) {
 
 function distance_of_time_in_words(to, from) {
   seconds_ago = ((to  - from) / 1000);
-  minutes_ago = Math.floor(seconds_ago / 60)
+  minutes_ago = Math.floor(seconds_ago / 60);
 
   if(minutes_ago <= 0) { return "less than a minute"; }
   if(minutes_ago == 1) { return "a minute"; }
@@ -25,5 +25,5 @@ function distance_of_time_in_words(to, from) {
 }
 
 function clearField(field_id) {
-  document.getElementById(field_id).value = "";
+ document.getElementById(field_id).value = "";
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/jeditable.min.js b/public/jeditable.min.js
diff --git a/public/style.css b/public/style.css
@@ -72,6 +72,12 @@ ul {
   padding: 0;
 }
 
+.edit textarea {
+  min-width: 100%;
+  max-height: 300px;
+  display: block;
+}
+
 .nav_link, .nav_link:visited {
   display: inline;
   padding: 3px;

diff --git a/views/layout.erb b/views/layout.erb
@@ -2,22 +2,23 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title><%= @title %></title>
-    <link rel="stylesheet" href="/_style.css" type="text/css" media="screen" />
-    <link rel="stylesheet" href="/_code.css" type="text/css" media="screen" />
-    <script language="javascript" type="text/javascript" src="app.js"></script>
-    <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
+    <link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
+    <link rel="stylesheet" href="/code.css" type="text/css" media="screen" />
+    <script language="javascript" type="text/javascript" src="/app.js"></script>
+    <script language="javascript" type="text/javascript" src="/jquery.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/jeditable.min.js"></script>
   </head>
   <body>
     <div id="container">
       <form method="get" action="/a/search">
-      <ul class="nav_list" id="top_nav">
-        <li><a href="/" class="nav_link">home</a></li>
-        <li><a href="/a/branches" class="nav_link">branches</a></li>        
-        <li><a href="/a/history" class="nav_link">history</a></li>        
-        <li><a href="/a/list" class="nav_link">pages</a></li>
-        <li><a href="/a/tarball" class="nav_link">export</a></li>
-        <li><input type="text" name="search" size="15" value="search" id="search_field" onfocus="clearField('search_field');" /></li>
-      </ul>
+        <ul class="nav_list" id="top_nav">
+          <li><a href="/" class="nav_link">home</a></li>
+          <li><a href="/a/branches" class="nav_link">branches</a></li>        
+          <li><a href="/a/history" class="nav_link">history</a></li>        
+          <li><a href="/a/list" class="nav_link">pages</a></li>
+          <li><a href="/a/tarball" class="nav_link">export</a></li>
+          <li><input type="text" name="search" size="15" value="search" id="search_field" onfocus="clearField('search_field');" /></li>
+        </ul>
       </form>
       <%= yield %>
       <div id="footer">

diff --git a/views/show.erb b/views/show.erb
@@ -1,3 +1,18 @@
+<script type="text/javascript">
+  $(document).ready(function() {
+    $(".edit_area").editable('/eip/<%= @page.name %>', {
+      indicator: "saving...",
+      tooltip: 'double-click to edit...',
+      cancel: 'cancel',
+      submit: 'save',
+      event: 'dblclick',
+      cssclass: 'edit',
+      loadurl: '/<%= @page.name %>/raw',
+      type: 'textarea',
+      name: 'body'
+    });
+  });
+</script>
 <h1><%= @page.name %></h1>
 
 <%= @env %>
@@ -30,4 +45,4 @@
   </div>
 </div>
 
-<div class="content"><%= @page.body %></div>
+<div class="content edit_area"><%= @page.body %></div>