From 37138619c0267a11ee0c54d4316e9bff97b3e761 Mon Sep 17 00:00:00 2001
From: Paul van Tilburg
Date: Fri, 10 Sep 2010 17:46:24 +0200
Subject: [PATCH] Added support for other file types than images. * Use
mime/types library for MIME type management. * Use CodeRay for syntax
highlighting code/text files. * Added code to observe the drags; fixed
committing position changes to the app. * Commenced work on the Z-index
problem.
---
plemp.rb | 72 +++++++++++++++++++++++++++++------------------
public/dragreg.js | 23 +++++++++++----
public/plemp.css | 4 ++-
3 files changed, 64 insertions(+), 35 deletions(-)
diff --git a/plemp.rb b/plemp.rb
index 9585e74..a3a189c 100644
--- a/plemp.rb
+++ b/plemp.rb
@@ -1,6 +1,8 @@
require "camping"
+require "coderay"
require "fileutils"
require "markaby"
+require "mime/types"
require "pathname"
Camping.goes :Plemp
@@ -14,7 +16,6 @@ unless defined? BASE_DIR
Positions = Hash.new
end
-
module Plemp::Controllers
class Index
@@ -24,28 +25,24 @@ module Plemp::Controllers
end
class StaticXX
- MIME_TYPES = {'.css' => 'text/css',
- '.js' => 'text/javascript',
- '.jpeg' => 'image/jpeg',
- '.jpg' => 'image/jpeg',
- '.png' => 'image/png'}
-
def get(type, path)
- @headers['Content-Type'] = MIME_TYPES[path[/\.\w+$/, 0]] || "text/plain"
+ mime_type = MIME::Types.type_for(path).first
+ @headers['Content-Type'] = mime_type.nil? ? "text/plain" : mime_type.to_s
unless path.include? ".." or not ["public", "upload"].include? type
@headers['X-Sendfile'] = (BASE_DIR + type + path).to_s
else
@status = "403"
- "403 - Invalid path"
+ "Error 403: Invalid path: #{path}"
end
end
end
class SaveposXXX
def post(id, top, left)
- $stderr.puts("Got: id: #{id} -> top: #{top}, left: #{left}")
+ [top, left].each { |pos| pos.gsub!(/px$/, '') }
+ $stderr.puts("Got: id: #{id} -> top: #{top}, left: #{left}") if $DEBUG
Positions[id] = [top, left]
- $stderr.puts Positions.inspect
+ $stderr.puts Positions.inspect if $DEBUG
""
end
end
@@ -83,6 +80,7 @@ module Plemp::Views
end
def main
+ h1 "Plemp!"
form :action => R(Upload), :method => "post",
:enctype => "multipart/form-data" do
p do
@@ -90,24 +88,42 @@ module Plemp::Views
input :type => "submit", :value => "Upload!"
end
end
- UPLOAD_DIR.entries.select { |f| (UPLOAD_DIR + f).file? }.each do |f|
- next if f.to_s =~ /^\./
- file = UPLOAD_DIR + f
- id = file.basename.to_s
- if Positions.has_key? id
- top, left = Positions[id]
- else
- top, left = ["#{rand(300)}", "#{rand(700)}"]
- Positions[id] = [top, left]
- end
- img.draggable :id => id,
- :src => R(StaticXX, "upload", file.basename),
- :alt => file.basename
- script :type => "text/javascript" do
- "new Draggable('#{id}', { scroll: window });\n" +
- "new Effect.Move('#{id}', { x: #{left}, y: #{top}, mode: 'absolute' });"
+ div.draggables! do
+ UPLOAD_DIR.entries.select { |f| (UPLOAD_DIR + f).file? }.each do |f|
+ next if f.to_s =~ /^\./
+ file = UPLOAD_DIR + f
+ id = file.basename.to_s
+ if Positions.has_key? id
+ top, left = Positions[id]
+ else
+ top, left = ["#{rand(300)}", " #{80 + rand(700)}"]
+ Positions[id] = [top, left]
+ end
+ file_type = `file --brief --mime-type #{file}`.chomp
+ mime_type = MIME::Types[file_type].first
+ if mime_type.nil?
+ mime_type = MIME::Type.new(file_type)
+ end
+ default_style = "left:#{left}px;top:#{top}px;z-index:0;display:none"
+ case mime_type.media_type
+ when "image"
+ img.draggable :id => id, :style => default_style,
+ :src => R(StaticXX, "upload", file.basename),
+ :alt => file.basename
+ when "text"
+ div.draggable(:id => id, :style => default_style) { CodeRay.scan_file(file).div }
+ else
+ span.draggable(:id => id, :style => default_style) { em "#{id}: Unsupported file type!" }
+ end
+ script :type => "text/javascript" do
+ <<-JS
+new Draggable('#{id}', { scroll: window });
+Draggables.addObserver(new DragRegObserver($('#{id}')));
+$('#{id}').appear({duration: 2.0});
+JS
+ end
end
end
+ span(:onClick => "alert(maxZIndex()); return false;" ) { "test" }
end
-
end
diff --git a/public/dragreg.js b/public/dragreg.js
index 25b4c30..999ec87 100644
--- a/public/dragreg.js
+++ b/public/dragreg.js
@@ -1,7 +1,18 @@
-var drgs = new Draggables;
-
-function dragreg(div, event) {
- id = div.element.id;
- new Ajax.Request('http://localhost:3301/savepos/' + id +
- '/' + this.style.top + '/' + this.style.left);
+var DragRegObserver = Class.create();
+DragRegObserver.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ },
+ onStart: function() {},
+ onEnd: function (eventName, draggable, event) {
+ if (Draggables.activeDraggable.element == this.element) {
+ elem = draggable.element;
+ new Ajax.Request('http://localhost:3301/savepos/' + elem.id +
+ '/' + elem.style.top + '/' + elem.style.left);
+ }
+ }
+}
+
+function maxZIndex() {
+ return $$('.draggable').map(function(d) { return d.getStyle("z-index") }).max();
}
diff --git a/public/plemp.css b/public/plemp.css
index 7005754..41e569d 100644
--- a/public/plemp.css
+++ b/public/plemp.css
@@ -3,7 +3,9 @@
.draggable {
position: absolute;
padding: 15px;
- width: 300px;
+ width: 400px;
+ max-height: 300px;
+ overflow: auto;
top: 0px;
left: 0px;
border: thin solid black;