Anonymous avatar Anonymous committed bfdd803

started to implement drag and drop. Currently working only on ff.

Comments (0)

Files changed (2)

static/js/src/review.js

         this.overlay.setStyle({
                 "display": "block",
                 "position": "fixed",
-                "top": 0,
-                "left": 0,
+                "top": "0",
+                "left": "0",
                 "z-index": "1001", 
                 "height": "100%",
                 "width": "100%"
         });
-        this.overlay.setOpacity("0"); 
+        this.overlay.setOpacity("0.5"); 
 
         var div = document.createElement("div");
         div.classList.add("comment-box");
         bclose.value = 'close';
         p.appendChild(bclose);
         form.appendChild(p);
+        var q = document.createElement('input');
+        q.type = 'hidden';
+        q.id = "Q";
+        form.appendChild(q);
         div.appendChild(form);
         var comments_title = document.createElement('h3');
         comments_title.appendChild(document.createTextNode('All comments for this line'));
             document.removeEventListener("click", this.hideIfClickOutside, false);
             this.hideIfClickOutside = null;
         }
+
+         // handle drag and drop
+        this.divComment.removeEventListener('mousedown', this.beginDragCB.bind(this), false);
+        this.divComment.removeEventListener('mousemove', this.dragCB.bind(this), false);
+        this.divComment.removeEventListener('mouseup', this.endDragCB.bind(this), false);
     },
 
     setCommentBoxPosition: function() {
             e.pageX < offset.right &&
             e.pageX > offset.x;
     }, 
-    
+
+    currentDelta: function() {
+        return([
+            parseInt(this.divComment.getStyle('left') || '0'),
+            parseInt(this.divComment.getStyle('top') || '0')]);
+    },
+
+    beginDragCB: function(e) {
+        var self = this;
+
+        if ((tag_name = e.target.tagName.toUpperCase()) && (
+            tag_name=='INPUT' ||
+            tag_name=='SELECT' ||
+            tag_name=='OPTION' ||
+            tag_name=='BUTTON' ||
+            tag_name=='TEXTAREA')) return;
+        
+        document.querySelector("#Q").focus();
+        this.isDragging = true;
+
+        this.divComment.style.cursor = "move";
+
+        var point = pointer(e);
+        var pos = this.divComment.cumulativeOffset();
+       
+        this.offset = [point.x - pos.x, point.y - pos.y];
+        e.stopPropagation(); 
+        return false;
+    },
+
+    dragCB: function(e) {
+        if (!this.isDragging) 
+            return;
+       
+        e.preventDefault(); 
+        var point = pointer(e);
+
+        var pos = this.divComment.cumulativeOffset();
+
+        var d = this.currentDelta();
+        pos.x -= d[0];
+        pos.y -= d[1];
+
+        var p = [
+            (point.x - pos.x - this.offset[0]),
+            (point.y - pos.y - this.offset[1])
+        ];
+
+        this.divComment.style.left = p[0] + "px";
+        this.divComment.style.top = p[1] + "px";
+
+        if (base2.detect('webkit'))
+             window.scrollBy(0,0);
+
+        e.stopPropagation();
+    },
+
+
+    endDragCB: function(e) {
+        this.isDragging = false;
+        this.divComment.style.cursor = "default";
+    },
+
     showCommentBox: function() {
         this.buildCommentBox();
         
         this.divComment.classList.remove("hidden");
         this.setCommentBoxPosition();
+
+        // handle drag and drop
+        this.divComment.addEventListener('mousedown', 
+                this.beginDragCB.bind(this), false);
+        this.divComment.addEventListener('mousemove', 
+                this.dragCB.bind(this), false);
+        this.divComment.addEventListener('mouseup', 
+                this.endDragCB.bind(this), false);
         
         var self = this;
         this.hideIfClickOutside = function(e) {
                 self.hideCommentBox();
             }
         } 
-        
+       
         document.addEventListener("click", this.hideIfClickOutside, false);
         document.addEventListener("keydown", this._handleKey.bind(this), false);
     },

static/js/src/utilities.js

 /*
  * Copyright 2008 by Benoît Chesneau <benoitc@e-engura.com>
+ * Copyright (C) 2007 Apple Inc.  All rights reserved.
+ * Copyright (C) 2005-2008 Sam Stephenson - Prototype JavaScript
  *
- * Copyright (C) 2007 Apple Inc.  All rights reserved.
 */
 
 function _isBody(el) {
 }
 
 
-
 base2.DOM.HTMLElement.prototype.setStyle = function(styles) {
     var elementStyle = this.style, match;
     if (typeof style == "string") {
 }
 
 
+String.prototype.camelize = function() {
+    var parts = this.split('-'), len = parts.length;
+    if (len == 1) return parts[0];
+
+    var camelized = this.charAt(0) == '-'
+      ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
+      : parts[0];
+
+    for (var i = 1; i < len; i++)
+      camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
+
+    return camelized;
+}
+
+base2.DOM.HTMLElement.prototype.getStyle = function(style) {
+    element = this;
+    style = style == 'float' ? 'cssFloat' : style.camelize();
+    var value = element.style[style];
+    if (!value || value == 'auto') {
+      var css = document.defaultView.getComputedStyle(element, null);
+      value = css ? css[style] : null;
+    }
+    if (style == 'opacity') return value ? parseFloat(value) : 1.0;
+    return value == 'auto' ? null : value;
+  }
+
+base2.DOM.HTMLElement.prototype.getDimensions = function() {
+    element = this;
+    var display = element.getStyle('display');
+    if (display != 'none' && display != null) // Safari bug
+      return {width: element.offsetWidth, height: element.offsetHeight};
+
+    // All *Width and *Height properties give 0 on elements with display none,
+    // so enable the element temporarily
+    var els = element.style;
+    var originalVisibility = els.visibility;
+    var originalPosition = els.position;
+    var originalDisplay = els.display;
+    els.visibility = 'hidden';
+    els.position = 'absolute';
+    els.display = 'block';
+    var originalWidth = element.clientWidth;
+    var originalHeight = element.clientHeight;
+    els.display = originalDisplay;
+    els.position = originalPosition;
+    els.visibility = originalVisibility;
+    return {width: originalWidth, height: originalHeight};
+}
+
+base2.DOM.HTMLElement.prototype.cumulativeOffset = function() {
+    var element = this;
+    var valueT = 0, valueL = 0;
+    do {
+      valueT += element.offsetTop  || 0;
+      valueL += element.offsetLeft || 0;
+      element = element.offsetParent;
+    } while (element);
+    return {x: valueL, y: valueT};
+}
+
 base2.DOM.HTMLElement.prototype.getOffsets = function() {
     var el = this;
     pos = { x:0, y:0 };
         _styleNumber(this, 'border-right-width');
 }
 
+function pointer(event) {
+    var docElement = document.documentElement,
+        body = document.body || { scrollLeft: 0, scrollTop: 0 };
+    return {
+        x: event.pageX || (event.clientX +
+           (docElement.scrollLeft || body.scrollLeft) -
+           (docElement.clientLeft || 0)),
+        y: event.pageY || (event.clientY +
+               (docElement.scrollTop || body.scrollTop) -
+               (docElement.clientTop || 0))
+    };
+}
+
+
+
 base2.DOM.Node.prototype.enclosingNodeOrSelfWithNodeNameInArray = function(nameArray)
 {
     for (var node = this; node && !objectsAreSame(node, this.ownerDocument); node = node.parentNode)
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.