Added the upload/add dialog.

plemp.rb

@@ -14,6 +14,9 @@ unless defined? BASE_DIR
   BASE_DIR = Pathname.new(__FILE__).dirname
   PUBLIC_DIR = BASE_DIR + "public"
   UPLOAD_DIR = BASE_DIR + "upload"
+
+  Program = "Plemp!"
+  Version = "0.1"
 end
 
 module Plemp
@@ -90,11 +93,17 @@ module Plemp::Controllers
 
   class Upload
     def post
-      orig_ext = File.extname(@input.file[:filename]).downcase
+      if @input.text.empty?
-      file_base = Time.now.strftime("%Y%m%d%H%M%S#{orig_ext}")
+        orig_ext = File.extname(@input.file[:filename]).downcase
+        file_base = Time.now.strftime("%Y%m%d%H%M%S#{orig_ext}")
+        contents = @input.file[:tempfile].read
+      else
+        file_base = Time.now.strftime("%Y%m%d%H%M%S.txt")
+        contents = @input.text.chomp + "\n"
+      end
       new_file = UPLOAD_DIR + file_base
       new_file.open("w") do |f|
-        f.write(@input.file[:tempfile].read)
+        f.write(contents)
       end
       Draggable.create(:file => file_base, 
                        :left => 350, :top => 200, :z_index => 0)
@@ -128,16 +137,27 @@ module Plemp::Views
 
   def main
     div.header! do
-      h1 { span.left "Plemp!"; span.right "+" }
+      h1 do
+        div.title! { span Program; span.subtitle! "v#{Version}" }
+        div.add!(:onClick => "show_add_dialog(); return false;") { "+" }
+      end
     end
-    div.add_dialog! do 
+    div.add_dialog!(:style => "display:none;") do 
-      form :action => R(Upload), :method => "post",
+      div.background {}
+      form :action => R(Upload), :method => "post", :id => "add_form",
            :enctype => "multipart/form-data" do
+        h2 "Plemp it!"
         p "Scribble something below:"
-        input :name => "text", :id => "text", :type => "textarea"
+        textarea :name => "text", :id => "text", :cols => 60, :rows => 12
-        p "… or upload a file:"
+        p do
-        input :name => "file", :id => "file", :type => "file"
+          span "… or upload a file:"
-        input :type => "submit", :value => "Upload!"
+          input :name => "file", :id => "file", :type => "file"
+        end
+        div.right do
+          input :type => "button", :value => "Cancel", 
+                :onClick => "hide_add_dialog(); return false;"
+          input :type => "submit", :value => "Upload!"
+        end
       end
     end 
     div.draggables! do

public/dragreg.js

@@ -1,3 +1,16 @@
+// Creates a Draggable for each div with the given ID.
+function setup_draggable(id) {
+  drag = new Draggable(id, { scroll: window });
+  old_endeffect = drag.options.endeffect;
+  drag.options.endeffect = function(element) { 
+    old_endeffect(element); 
+    element.style.zIndex = new_ZIndex();
+  }
+  Draggables.addObserver(new DragRegObserver($(id)));
+  $(id).appear({duration: 1.0});
+}
+
+// Observer for draggables that commits the drag changes to the server.
 var DragRegObserver = Class.create();
 DragRegObserver.prototype = {
   initialize: function(element) {
@@ -13,22 +26,27 @@ DragRegObserver.prototype = {
   }
 }
 
+//// Helper functions
+
+function show_add_dialog() {
+  $('text').clear();
+  $('add_dialog').appear({duration: 0.5});
+}
+
+function hide_add_dialog() {
+  $('add_dialog').fade({duration: 0.5});
+  $('add_form').reset();
+}
+
+// Returns a Z-index higher with respect to the Z-index of all existing
+// draggables.
 function new_ZIndex() {
-  cur_index = $$('.draggable').map(function(d) { return d.getStyle("z-index") }).max();
+  cur_indices = $$('.draggable').map(function(d) { return d.getStyle("z-index") })
-  return parseInt(cur_index) + 1
+  max_index = cur_indices.max();
-}
+  return parseInt(max_index) + 1;
-
-function setup_draggable(id) {
-  drag = new Draggable(id, { scroll: window });
-  old_endeffect = drag.options.endeffect;
-  drag.options.endeffect = function(element) { 
-    old_endeffect(element); 
-    element.style.zIndex = new_ZIndex();
-  }
-  Draggables.addObserver(new DragRegObserver($(id)));
-  $(id).appear({duration: 2.0});
 }
 
+// Moves a draggable with the given ID to a position if it is not already there.
 function move_draggable_if_needed(id, left, top) {
   if ($(id).style.left != left || $(id).style.top != top) {
     var actDrag = Draggables.activeDraggable;
@@ -38,6 +56,8 @@ function move_draggable_if_needed(id, left, top) {
   }
 }
 
+// Sets up an Ajax periodical updater to retrieve the current global
+// state from the server.  Moves the draggables accordingly.
 var pu = null;
 function setup_pu() {
   if (!pu) {

public/plemp.css

@@ -6,10 +6,45 @@
   height: 100%;
 }
 
-#header h1 { margin: 5pt 0pt; }
+#header h1 { 
+  margin: 5pt 0pt; 
+  height: 20pt;
+}
+#header #title { float: left; }
+#header #subtitle { font-size: 57%; }
+#header #add { float: right; }
+#header #add:hover { color: #888; }
 
 #add_dialog {
-  display: none;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  z-index: 999;
+}
+#add_dialog .background { 
+  position: absolute;
+  top: 0px; 
+  left: 0px;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: #ddd; 
+  opacity: 0.8; 
+}
+
+#add_dialog form {
+  z-index: 1001;
+  width: 500px;
+  height: 390px;
+  margin: 100px auto;
+  background: white;
+  border: thin solid black;
+  padding: 15px;
+  text-align: left;
+  position: relative;
 }
 
 .left  { text-align: left; }