[Sommaire] [Imprimer]

   1  /* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
   2  
   3  ToolMan._dragFactory = {
   4      createSimpleGroup : function(element, handle) {
   5          handle = handle ? handle : element
   6          var group = this.createGroup(element)
   7          group.setHandle(handle)
   8          //group.transparentDrag()
   9          group.onTopWhileDragging()
  10          return group
  11      },
  12  
  13      createGroup : function(element) {
  14          var group = new _ToolManDragGroup(this, element)
  15  
  16          var position = ToolMan.css().readStyle(element, 'position')
  17          if (position == 'static') {
  18              element.style["position"] = 'relative'
  19          } else if (position == 'absolute') {
  20              /* for Safari 1.2 */
  21              ToolMan.coordinates().topLeftOffset(element).reposition(element)
  22          }
  23  
  24          // TODO: only if ToolMan.isDebugging()
  25          group.register('draginit', this._showDragEventStatus)
  26          group.register('dragmove', this._showDragEventStatus)
  27          group.register('dragend', this._showDragEventStatus)
  28  
  29          return group
  30      },
  31  
  32      _showDragEventStatus : function(dragEvent) {
  33          window.status = dragEvent.toString()
  34      },
  35  
  36      constraints : function() {
  37          return this._constraintFactory
  38      },
  39  
  40      _createEvent : function(type, event, group) {
  41          return new _ToolManDragEvent(type, event, group)
  42      }
  43  }
  44  
  45  function _ToolManDragGroup(factory, element) {
  46      this.factory = factory
  47      this.element = element
  48      this._handle = null
  49      this._thresholdDistance = 0
  50      this._transforms = new Array()
  51      // TODO: refactor into a helper object, move into events.js
  52      this._listeners = new Array()
  53      this._listeners['draginit'] = new Array()
  54      this._listeners['dragstart'] = new Array()
  55      this._listeners['dragmove'] = new Array()
  56      this._listeners['dragend'] = new Array()
  57  }
  58  
  59  _ToolManDragGroup.prototype = {
  60      /*
  61       * TODO:
  62       *   - unregister(type, func)
  63       *   - move custom event listener stuff into Event library
  64       *   - keyboard nudging of "selected" group
  65       */
  66  
  67      setHandle : function(handle) {
  68          var events = ToolMan.events()
  69  
  70          handle.toolManDragGroup = this
  71          events.register(handle, 'mousedown', this._dragInit)
  72          //handle.onmousedown = function() { return false }
  73  
  74          if (this.element != handle)
  75              events.unregister(this.element, 'mousedown', this._dragInit)
  76      },
  77  
  78      register : function(type, func) {
  79          this._listeners[type].push(func)
  80      },
  81  
  82      addTransform : function(transformFunc) {
  83          this._transforms.push(transformFunc)
  84      },
  85  
  86      verticalOnly : function() {
  87          this.addTransform(this.factory.constraints().vertical())
  88      },
  89  
  90      horizontalOnly : function() {
  91          this.addTransform(this.factory.constraints().horizontal())
  92      },
  93  
  94      setThreshold : function(thresholdDistance) {
  95          this._thresholdDistance = thresholdDistance
  96      },
  97  
  98      transparentDrag : function(opacity) {
  99          if (typeof(opacity) == "undefined") {
 100              opacity = 0.75;
 101          }
 102          var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
 103  
 104          this.register('dragstart', function(dragEvent) {
 105              var element = dragEvent.group.element
 106              element.style.opacity = opacity
 107              element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'
 108          })
 109          this.register('dragend', function(dragEvent) {
 110              var element = dragEvent.group.element
 111              element.style.opacity = originalOpacity
 112              element.style.filter = 'alpha(opacity=100)'
 113          })
 114      },
 115  
 116      onTopWhileDragging : function(zIndex) {
 117          if (typeof(zIndex) == "undefined") {
 118              zIndex = 100000;
 119          }
 120          
 121          var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
 122  
 123          this.register('dragstart', function(dragEvent) {
 124              dragEvent.group.element.style.zIndex = zIndex
 125          })
 126          this.register('dragend', function(dragEvent) {
 127              dragEvent.group.element.style.zIndex = originalZIndex
 128              //dragEvent.group.element.style.backgroundColor = '#f00';
 129          })
 130      },
 131  
 132      _dragInit : function(event) {
 133          event = ToolMan.events().fix(event)
 134          var group = document.toolManDragGroup = this.toolManDragGroup
 135          var dragEvent = group.factory._createEvent('draginit', event, group)
 136  
 137          group._isThresholdExceeded = false
 138          group._initialMouseOffset = dragEvent.mouseOffset
 139          group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
 140          ToolMan.events().register(document, 'mousemove', group._drag)
 141          document.onmousemove = function() { return false }
 142          ToolMan.events().register(document, 'mouseup', group._dragEnd)
 143          
 144          ToolMan.events().register(document, 'mousedown',group._drag);
 145          document.onmousedown = function() { return false; };
 146          
 147          group._notifyListeners(dragEvent)
 148      },
 149  
 150      _drag : function(event) {
 151          event = ToolMan.events().fix(event)
 152          var coordinates = ToolMan.coordinates()
 153          var group = this.toolManDragGroup
 154          if (!group) return
 155          var dragEvent = group.factory._createEvent('dragmove', event, group)
 156  
 157          var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
 158  
 159          // TODO: replace with DragThreshold object
 160          if (!group._isThresholdExceeded) {
 161              var distance = 
 162                      dragEvent.mouseOffset.distance(group._initialMouseOffset)
 163              if (distance < group._thresholdDistance) return
 164              group._isThresholdExceeded = true
 165              group._notifyListeners(
 166                      group.factory._createEvent('dragstart', event, group))
 167          }
 168  
 169          for (i in group._transforms) {
 170              var transform = group._transforms[i]
 171              newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
 172          }
 173  
 174          var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
 175          var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
 176          newTopLeftPosition.reposition(group.element)
 177          dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
 178  
 179          group._notifyListeners(dragEvent)
 180  
 181          var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
 182          if (errorDelta.x != 0 || errorDelta.y != 0) {
 183              coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
 184          }
 185      },
 186  
 187      _dragEnd : function(event) {
 188          event = ToolMan.events().fix(event)
 189          var group = this.toolManDragGroup
 190          var dragEvent = group.factory._createEvent('dragend', event, group)
 191  
 192          group._notifyListeners(dragEvent)
 193  
 194          this.toolManDragGroup = null
 195          ToolMan.events().unregister(document, 'mousemove', group._drag)
 196          document.onmousemove = null
 197          ToolMan.events().unregister(document, 'mouseup', group._dragEnd)
 198          
 199          ToolMan.events().register(document, 'mousedown', group._drag);
 200          document.onmousedown = function() { return true };
 201      },
 202  
 203      _notifyListeners : function(dragEvent) {
 204          var listeners = this._listeners[dragEvent.type]
 205          for (i in listeners) {
 206              listeners[i](dragEvent)
 207          }
 208      }
 209  }
 210  
 211  function _ToolManDragEvent(type, event, group) {
 212      this.type = type
 213      this.group = group
 214      this.mousePosition = ToolMan.coordinates().mousePosition(event)
 215      this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
 216      this.transformedMouseOffset = this.mouseOffset
 217      this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
 218      this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
 219  }
 220  
 221  _ToolManDragEvent.prototype = {
 222      toString : function() {
 223          return "mouse: " + this.mousePosition + this.mouseOffset + "    " +
 224                  "xmouse: " + this.transformedMouseOffset + "    " +
 225                  "left,top: " + this.topLeftPosition + this.topLeftOffset
 226      }
 227  }
 228  
 229  ToolMan._dragFactory._constraintFactory = {
 230      vertical : function() {
 231          return function(coordinate, dragEvent) {
 232              var x = dragEvent.topLeftOffset.x
 233              return coordinate.x != x
 234                      ? coordinate.factory.create(x, coordinate.y) 
 235                      : coordinate
 236          }
 237      },
 238  
 239      horizontal : function() {
 240          return function(coordinate, dragEvent) {
 241              var y = dragEvent.topLeftOffset.y
 242              return coordinate.y != y
 243                      ? coordinate.factory.create(coordinate.x, y) 
 244                      : coordinate
 245          }
 246      }
 247  }