/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */ ToolMan._dragFactory = { createSimpleGroup : function(element, handle) { handle = handle ? handle : element var group = this.createGroup(element) group.setHandle(handle) group.transparentDrag() group.onTopWhileDragging() return group }, createGroup : function(element) { var group = new _ToolManDragGroup(this, element) var position = ToolMan.css().readStyle(element, 'position') if (position == 'static') { element.style["position"] = 'relative' } else if (position == 'absolute') { /* for Safari 1.2 */ ToolMan.coordinates().topLeftOffset(element).reposition(element) } // TODO: only if ToolMan.isDebugging() group.register('draginit', this._showDragEventStatus) group.register('dragmove', this._showDragEventStatus) group.register('dragend', this._showDragEventStatus) return group }, _showDragEventStatus : function(dragEvent) { window.status = dragEvent.toString() }, constraints : function() { return this._constraintFactory }, _createEvent : function(type, event, group) { return new _ToolManDragEvent(type, event, group) } } function _ToolManDragGroup(factory, element) { this.factory = factory this.element = element this._handle = null this._thresholdDistance = 0 this._transforms = new Array() // TODO: refactor into a helper object, move into events.js this._listeners = new Array() this._listeners['draginit'] = new Array() this._listeners['dragstart'] = new Array() this._listeners['dragmove'] = new Array() this._listeners['dragend'] = new Array() } _ToolManDragGroup.prototype = { /* * TODO: * - unregister(type, func) * - move custom event listener stuff into Event library * - keyboard nudging of "selected" group */ setHandle : function(handle) { var events = ToolMan.events() handle.toolManDragGroup = this events.register(handle, 'mousedown', this._dragInit) handle.onmousedown = function() { return false } if (this.element != handle) events.unregister(this.element, 'mousedown', this._dragInit) }, register : function(type, func) { this._listeners[type].push(func) }, addTransform : function(transformFunc) { this._transforms.push(transformFunc) }, verticalOnly : function() { this.addTransform(this.factory.constraints().vertical()) }, horizontalOnly : function() { this.addTransform(this.factory.constraints().horizontal()) }, setThreshold : function(thresholdDistance) { this._thresholdDistance = thresholdDistance }, transparentDrag : function(opacity) { var opacity = typeof(opacity) != "undefined" ? opacity : 0.75; var originalOpacity = ToolMan.css().readStyle(this.element, "opacity") this.register('dragstart', function(dragEvent) { var element = dragEvent.group.element element.style.opacity = opacity element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')' }) this.register('dragend', function(dragEvent) { var element = dragEvent.group.element element.style.opacity = originalOpacity element.style.filter = 'alpha(opacity=100)' }) }, onTopWhileDragging : function(zIndex) { var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000; var originalZIndex = ToolMan.css().readStyle(this.element, "z-index") this.register('dragstart', function(dragEvent) { dragEvent.group.element.style.zIndex = zIndex }) this.register('dragend', function(dragEvent) { dragEvent.group.element.style.zIndex = originalZIndex }) }, _dragInit : function(event) { event = ToolMan.events().fix(event) var group = document.toolManDragGroup = this.toolManDragGroup var dragEvent = group.factory._createEvent('draginit', event, group) group._isThresholdExceeded = false group._initialMouseOffset = dragEvent.mouseOffset group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset) ToolMan.events().register(document, 'mousemove', group._drag) document.onmousemove = function() { return false } ToolMan.events().register(document, 'mouseup', group._dragEnd) group._notifyListeners(dragEvent) }, _drag : function(event) { event = ToolMan.events().fix(event) var coordinates = ToolMan.coordinates() var group = this.toolManDragGroup if (!group) return var dragEvent = group.factory._createEvent('dragmove', event, group) var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset) // TODO: replace with DragThreshold object if (!group._isThresholdExceeded) { var distance = dragEvent.mouseOffset.distance(group._initialMouseOffset) if (distance < group._thresholdDistance) return group._isThresholdExceeded = true group._notifyListeners( group.factory._createEvent('dragstart', event, group)) } for (i in group._transforms) { var transform = group._transforms[i] newTopLeftOffset = transform(newTopLeftOffset, dragEvent) } var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset) var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta) newTopLeftPosition.reposition(group.element) dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset) group._notifyListeners(dragEvent) var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element)) if (errorDelta.x != 0 || errorDelta.y != 0) { coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element) } }, _dragEnd : function(event) { if (this.toolManDragGroup != null) { event = ToolMan.events().fix(event) var group = this.toolManDragGroup var dragEvent = group.factory._createEvent('dragend', event, group) group._notifyListeners(dragEvent) this.toolManDragGroup = null ToolMan.events().unregister(document, 'mousemove', group._drag) document.onmousemove = null ToolMan.events().unregister(document, 'mouseup', group._dragEnd) } }, _notifyListeners : function(dragEvent) { var listeners = this._listeners[dragEvent.type] for (i in listeners) { listeners[i](dragEvent) } } } function _ToolManDragEvent(type, event, group) { this.type = type this.group = group this.mousePosition = ToolMan.coordinates().mousePosition(event) this.mouseOffset = ToolMan.coordinates().mouseOffset(event) this.transformedMouseOffset = this.mouseOffset this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element) this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element) } _ToolManDragEvent.prototype = { toString : function() { return "mouse: " + this.mousePosition + this.mouseOffset + " " + "xmouse: " + this.transformedMouseOffset + " " + "left,top: " + this.topLeftPosition + this.topLeftOffset } } ToolMan._dragFactory._constraintFactory = { vertical : function() { return function(coordinate, dragEvent) { var x = dragEvent.topLeftOffset.x return coordinate.x != x ? coordinate.factory.create(x, coordinate.y) : coordinate } }, horizontal : function() { return function(coordinate, dragEvent) { var y = dragEvent.topLeftOffset.y return coordinate.y != y ? coordinate.factory.create(coordinate.x, y) : coordinate } } }