Added the upload/add dialog.
This commit is contained in:
parent
4c850354e8
commit
3be69752f2
40
plemp.rb
40
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
|
||||
file_base = Time.now.strftime("%Y%m%d%H%M%S#{orig_ext}")
|
||||
if @input.text.empty?
|
||||
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
|
||||
form :action => R(Upload), :method => "post",
|
||||
div.add_dialog!(:style => "display:none;") do
|
||||
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"
|
||||
p "… or upload a file:"
|
||||
input :name => "file", :id => "file", :type => "file"
|
||||
input :type => "submit", :value => "Upload!"
|
||||
textarea :name => "text", :id => "text", :cols => 60, :rows => 12
|
||||
p do
|
||||
span "… or upload a file:"
|
||||
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
|
||||
|
|
|
@ -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();
|
||||
return parseInt(cur_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});
|
||||
cur_indices = $$('.draggable').map(function(d) { return d.getStyle("z-index") })
|
||||
max_index = cur_indices.max();
|
||||
return parseInt(max_index) + 1;
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
|
|
@ -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; }
|
||||
|
|
Reference in New Issue