liquid_feedback_frontend

diff static/js/dragdrop.js @ 945:b865f87ea810

Work on robustification of JavaScript voting
author jbe
date Thu Nov 08 13:17:37 2012 +0100 (2012-11-08)
parents 7492497005bd
children 32cc544d5a5b
line diff
     1.1 --- a/static/js/dragdrop.js	Tue Nov 06 21:28:25 2012 +0100
     1.2 +++ b/static/js/dragdrop.js	Thu Nov 08 13:17:37 2012 +0100
     1.3 @@ -1,76 +1,85 @@
     1.4 -if (!jsFail) {
     1.5 +jsProtect(function() {
     1.6    window.addEventListener("load", function(event) {
     1.7 -    var originalElement;
     1.8 -    var draggedElement;
     1.9 -    var mouseX;
    1.10 -    var mouseY;
    1.11 -    var mouseOffsetX;
    1.12 -    var mouseOffsetY;
    1.13 -    var elementOffsetX;
    1.14 -    var elementOffsetY;
    1.15 -    var dropFunc;
    1.16 -    var dragElement = function(element, func) {
    1.17 -      //if (typeof(element) == "string") element = document.getElementById(element);
    1.18 -      originalElement = element;
    1.19 -      draggedElement = originalElement.cloneNode(true);
    1.20 -      originalElement.style.visibility = "hidden";
    1.21 -      draggedElement.style.margin = 0;
    1.22 -      draggedElement.style.position = "absolute";
    1.23 -      draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;
    1.24 -      draggedElement.style.top  = elementOffsetY = originalElement.offsetTop;
    1.25 -      draggedElement.style.width  = originalElement.clientWidth;
    1.26 -      draggedElement.style.height = originalElement.clientHeight;
    1.27 -      draggedElement.style.backgroundColor = "#eee";
    1.28 -      draggedElement.style.opacity = 0.8;
    1.29 -      originalElement.offsetParent.appendChild(draggedElement);
    1.30 -      // workaround for wrong clientWidth and clientHeight information:
    1.31 -      draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth;
    1.32 -      draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight;
    1.33 -      mouseOffsetX = mouseX;
    1.34 -      mouseOffsetY = mouseY;
    1.35 -      dropFunc = func;
    1.36 -    };
    1.37 -    window.addEventListener("mousemove", function(event) {
    1.38 -      mouseX = event.pageX;
    1.39 -      mouseY = event.pageY;
    1.40 -      if (draggedElement) {
    1.41 -        draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX;
    1.42 -        draggedElement.style.top  = elementOffsetY + mouseY - mouseOffsetY;
    1.43 +    jsProtect(function() {
    1.44 +      var originalElement;
    1.45 +      var draggedElement;
    1.46 +      var mouseX;
    1.47 +      var mouseY;
    1.48 +      var mouseOffsetX;
    1.49 +      var mouseOffsetY;
    1.50 +      var elementOffsetX;
    1.51 +      var elementOffsetY;
    1.52 +      var dropFunc;
    1.53 +      var dragElement = function(element, func) {
    1.54 +        //if (typeof(element) == "string") element = document.getElementById(element);
    1.55 +        originalElement = element;
    1.56 +        draggedElement = originalElement.cloneNode(true);
    1.57 +        originalElement.style.visibility = "hidden";
    1.58 +        draggedElement.style.margin = 0;
    1.59 +        draggedElement.style.position = "absolute";
    1.60 +        draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;
    1.61 +        draggedElement.style.top  = elementOffsetY = originalElement.offsetTop;
    1.62 +        draggedElement.style.width  = originalElement.clientWidth;
    1.63 +        draggedElement.style.height = originalElement.clientHeight;
    1.64 +        draggedElement.style.backgroundColor = "#eee";
    1.65 +        draggedElement.style.opacity = 0.8;
    1.66 +        originalElement.offsetParent.appendChild(draggedElement);
    1.67 +        // workaround for wrong clientWidth and clientHeight information:
    1.68 +        draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth;
    1.69 +        draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight;
    1.70 +        mouseOffsetX = mouseX;
    1.71 +        mouseOffsetY = mouseY;
    1.72 +        dropFunc = func;
    1.73 +      };
    1.74 +      window.addEventListener("mousemove", function(event) {
    1.75 +        jsProtect(function() {
    1.76 +          mouseX = event.pageX;
    1.77 +          mouseY = event.pageY;
    1.78 +          if (draggedElement) {
    1.79 +            draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX;
    1.80 +            draggedElement.style.top  = elementOffsetY + mouseY - mouseOffsetY;
    1.81 +          }
    1.82 +        });
    1.83 +      }, true);
    1.84 +      var mouseDrop = function(event) {
    1.85 +        jsProtect(function() {
    1.86 +          if (draggedElement) {
    1.87 +            dropFunc(
    1.88 +              originalElement,
    1.89 +              elementOffsetX + mouseX - mouseOffsetX,
    1.90 +              elementOffsetY + mouseY - mouseOffsetY
    1.91 +            );
    1.92 +            originalElement.style.visibility = '';
    1.93 +            draggedElement.parentNode.removeChild(draggedElement);
    1.94 +            originalElement = null;
    1.95 +            draggedElement = null;
    1.96 +          }
    1.97 +        });
    1.98 +      };
    1.99 +      window.addEventListener("mouseup",   mouseDrop, true);
   1.100 +      window.addEventListener("mousedown", mouseDrop, true);
   1.101 +      var elements = document.getElementsByTagName("*");
   1.102 +      for (var i=0; i<elements.length; i++) {
   1.103 +        var element = elements[i];
   1.104 +        if (element.className == "movable") {
   1.105 +          element.addEventListener("mousedown", function(event) {
   1.106 +            jsProtect(function() {
   1.107 +              event.target.style.cursor = "move";
   1.108 +              dragElement(event.currentTarget, function(element, dropX, dropY) {
   1.109 +                event.target.style.cursor = '';
   1.110 +                elementDropped(element, dropX, dropY);
   1.111 +              });
   1.112 +              event.preventDefault();
   1.113 +            });
   1.114 +          }, false);
   1.115 +        } else if (element.className == "clickable") {
   1.116 +          element.addEventListener("mousedown", function(event) {
   1.117 +            jsProtect(function() {
   1.118 +              event.stopPropagation();
   1.119 +            });
   1.120 +          }, false);
   1.121 +        }
   1.122        }
   1.123 -    }, true);
   1.124 -    var mouseDrop = function(event) {
   1.125 -      if (draggedElement) {
   1.126 -        dropFunc(
   1.127 -          originalElement,
   1.128 -          elementOffsetX + mouseX - mouseOffsetX,
   1.129 -          elementOffsetY + mouseY - mouseOffsetY
   1.130 -        );
   1.131 -        originalElement.style.visibility = '';
   1.132 -        draggedElement.parentNode.removeChild(draggedElement);
   1.133 -        originalElement = null;
   1.134 -        draggedElement = null;
   1.135 -      }
   1.136 -    };
   1.137 -    window.addEventListener("mouseup",   mouseDrop, true);
   1.138 -    window.addEventListener("mousedown", mouseDrop, true);
   1.139 -    var elements = document.getElementsByTagName("*");
   1.140 -    for (var i=0; i<elements.length; i++) {
   1.141 -      var element = elements[i];
   1.142 -      if (element.className == "movable") {
   1.143 -        element.addEventListener("mousedown", function(event) {
   1.144 -          event.target.style.cursor = "move";
   1.145 -          dragElement(event.currentTarget, function(element, dropX, dropY) {
   1.146 -            event.target.style.cursor = '';
   1.147 -            elementDropped(element, dropX, dropY);
   1.148 -          });
   1.149 -          event.preventDefault();
   1.150 -        }, false);
   1.151 -      } else if (element.className == "clickable") {
   1.152 -        element.addEventListener("mousedown", function(event) {
   1.153 -          event.stopPropagation();
   1.154 -        }, false);
   1.155 -      }
   1.156 -    }
   1.157 +    });
   1.158    }, false);
   1.159 -
   1.160 -}
   1.161 \ No newline at end of file
   1.162 +});

Impressum / About Us