From 0555395095b7b9d0ca52e0b98776cd7d4ba23962 Mon Sep 17 00:00:00 2001
From: Paul van Tilburg <p.ja.v.tilburg@tue.nl>
Date: Sat, 19 Jun 2010 00:51:58 +0200
Subject: [PATCH] Switched to using scriptaculous for dragging support.  *
 Moved inline CSS to public/plemp.css.  * Improved default for initial random
 positions.  * Replaced drag.js by dragreg.js which is going to do the
 position changes    registration via the Draggables object.  * Added Move
 effect for initial placing.

---
 plemp.rb          | 25 +++++++++----------
 public/drag.js    | 61 -----------------------------------------------
 public/dragreg.js |  7 ++++++
 public/plemp.css  | 11 +++++++++
 4 files changed, 29 insertions(+), 75 deletions(-)
 delete mode 100644 public/drag.js
 create mode 100644 public/dragreg.js
 create mode 100644 public/plemp.css

diff --git a/plemp.rb b/plemp.rb
index 3ad862b..4502e1f 100644
--- a/plemp.rb
+++ b/plemp.rb
@@ -69,7 +69,9 @@ module Plemp::Views
     xhtml_strict do
       head do
         title "Plemp!"
-        ['drag', 'prototype', 'effects', 'controls'].each do |js|
+        link :rel => "stylesheet", :type => "text/css",
+             :media => "screen", :href => R(StaticXX, "public", "plemp.css")
+        ['prototype', 'scriptaculous', 'dragreg'].each do |js|
           script :src => R(StaticXX, "public", "#{js}.js"), 
                  :type => "text/javascript"
         end
@@ -94,22 +96,17 @@ module Plemp::Views
       if Positions.has_key? id
         top, left = Positions[id]
       else
-        top, left = ["#{rand(800)}px", "#{rand(400)}px"]
+        top, left = ["#{rand(300)}", "#{rand(700)}"]
         Positions[id] = [top, left]
       end
-      img :id => id,
-          :src => R(StaticXX, "upload", file.basename),
-          :alt => file.basename,
-          :style => "position:fixed;top:#{top};left:#{left};border:thin solid black;padding:15px;background-color:white;width:300px",
-          :onmousedown => "drag(event)",
-          :onmouseup => _savepos
+      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' });"
+      end
     end
   end
 
-  def _savepos(id = nil)
-    "new Ajax.Request('http://almaz.spacelabs.nl:3301/savepos/' + " +
-      "this.id + '/' + this.style.top + '/' + this.style.left); " +
-      "return false;"
-  end
-
 end
diff --git a/public/drag.js b/public/drag.js
deleted file mode 100644
index da4f934..0000000
--- a/public/drag.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// Global object to hold drag information.
-var dragObj = new Object();
-dragObj.zIndex = 0;
-
-function drag(event, id) {
-  var x, y;
-
-  // If an element id was given, find it. Otherwise use the element being
-  // clicked on.
-  if (id)
-    dragObj.elNode = document.getElementById(id);
-  else {
-    dragObj.elNode = event.target;
-    // If this is a text node, use its parent element.
-    if (dragObj.elNode.nodeType == 3)
-      dragObj.elNode = dragObj.elNode.parentNode;
-  } 
-
-  // Get cursor position with respect to the page.
-  x = event.clientX + window.scrollX;
-  y = event.clientY + window.scrollY;
-
-  // Save starting positions of cursor and element.
-  dragObj.cursorStartX = x;
-  dragObj.cursorStartY = y;
-  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
-  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
-
-  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
-  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
-
-  // Update element's z-index.
-  dragObj.elNode.style.zIndex = ++dragObj.zIndex;
-
-  // Capture mousemove and mouseup events on the page.
-  document.addEventListener("mousemove", dragGo,   true);
-  document.addEventListener("mouseup",   dragStop, true);
-  event.preventDefault();
-}
-
-function dragGo(event) {
-  var x, y;
-
-  // Get cursor position with respect to the page.
-  x = event.clientX + window.scrollX;
-  y = event.clientY + window.scrollY;
-
-  // Move drag element by the same amount the cursor has moved.
-
-  dragObj.elNode.style.left =
-    (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
-  dragObj.elNode.style.top  =
-    (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
-  event.preventDefault();
-}
-
-function dragStop(event) {
-  // Stop capturing mousemove and mouseup events.
-  document.removeEventListener("mousemove", dragGo,   true);
-  document.removeEventListener("mouseup",   dragStop, true);
-}
diff --git a/public/dragreg.js b/public/dragreg.js
new file mode 100644
index 0000000..25b4c30
--- /dev/null
+++ b/public/dragreg.js
@@ -0,0 +1,7 @@
+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);
+}
diff --git a/public/plemp.css b/public/plemp.css
new file mode 100644
index 0000000..7005754
--- /dev/null
+++ b/public/plemp.css
@@ -0,0 +1,11 @@
+/* CSS style file for Plemp! */
+
+.draggable {
+  position: absolute;
+  padding: 15px;
+  width: 300px;
+  top: 0px;
+  left: 0px;
+  border: thin solid black;
+  background: white;
+}