diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js index 484457b85..35cc3923e 100644 --- a/modules/backend/assets/js/october-min.js +++ b/modules/backend/assets/js/october-min.js @@ -745,7 +745,8 @@ this.scrollbarSize=null this.updateScrollbarTimer=null this.dragOffset=null Base.call(this) -this.init()} +this.init() +$.oc.foundation.controlUtils.markDisposable(element)} Scrollpad.prototype=Object.create(BaseProto) Scrollpad.prototype.constructor=Scrollpad Scrollpad.prototype.dispose=function(){this.unregisterHandlers() @@ -771,10 +772,12 @@ this.scrollbarElement=el.querySelector('.scrollpad-scrollbar') this.dragHandleElement=el.querySelector('.scrollpad-scrollbar > .drag-handle')} Scrollpad.prototype.registerHandlers=function(){this.$el.on('mouseenter',this.proxy(this.onMouseEnter)) this.$el.on('mouseleave',this.proxy(this.onMouseLeave)) +this.$el.one('dispose-control',this.proxy(this.dispose)) this.scrollContentElement.addEventListener('scroll',this.proxy(this.onScroll)) this.dragHandleElement.addEventListener('mousedown',this.proxy(this.onStartDrag))} Scrollpad.prototype.unregisterHandlers=function(){this.$el.off('mouseenter',this.proxy(this.onMouseEnter)) this.$el.off('mouseleave',this.proxy(this.onMouseLeave)) +this.$el.off('dispose-control',this.proxy(this.dispose)) this.scrollContentElement.removeEventListener('scroll',this.proxy(this.onScroll)) this.dragHandleElement.removeEventListener('mousedown',this.proxy(this.onStartDrag)) document.removeEventListener('mousemove',this.proxy(this.onMouseMove)) diff --git a/modules/backend/assets/js/october.scrollpad.js b/modules/backend/assets/js/october.scrollpad.js index 338c0969f..8e2be6293 100644 --- a/modules/backend/assets/js/october.scrollpad.js +++ b/modules/backend/assets/js/october.scrollpad.js @@ -62,6 +62,8 @@ // this.init() + + $.oc.foundation.controlUtils.markDisposable(element) } Scrollpad.prototype = Object.create(BaseProto) @@ -113,6 +115,9 @@ Scrollpad.prototype.registerHandlers = function() { this.$el.on('mouseenter', this.proxy(this.onMouseEnter)) this.$el.on('mouseleave', this.proxy(this.onMouseLeave)) + + this.$el.one('dispose-control', this.proxy(this.dispose)) + this.scrollContentElement.addEventListener('scroll', this.proxy(this.onScroll)) this.dragHandleElement.addEventListener('mousedown', this.proxy(this.onStartDrag)) } @@ -120,6 +125,7 @@ Scrollpad.prototype.unregisterHandlers = function() { this.$el.off('mouseenter', this.proxy(this.onMouseEnter)) this.$el.off('mouseleave', this.proxy(this.onMouseLeave)) + this.$el.off('dispose-control', this.proxy(this.dispose)) this.scrollContentElement.removeEventListener('scroll', this.proxy(this.onScroll)) this.dragHandleElement.removeEventListener('mousedown', this.proxy(this.onStartDrag)) diff --git a/modules/system/assets/ui/js/foundation.element.js b/modules/system/assets/ui/js/foundation.element.js index 20b28465f..fd5fba037 100644 --- a/modules/system/assets/ui/js/foundation.element.js +++ b/modules/system/assets/ui/js/foundation.element.js @@ -131,6 +131,15 @@ input = null }, 0) } + }, + + elementContainsPoint: function(element, point) { + var elementPosition = $.oc.foundation.element.absolutePosition(element), + elementRight = elementPosition.left + element.offsetWidth, + elementBottom = elementPosition.top + element.offsetHeight + + return point.x >= elementPosition.left && point.x <= elementRight + && point.y >= elementPosition.top && point.y <= elementBottom } } diff --git a/modules/system/assets/ui/js/list.sortable.js b/modules/system/assets/ui/js/list.sortable.js new file mode 100644 index 000000000..ed0e91865 --- /dev/null +++ b/modules/system/assets/ui/js/list.sortable.js @@ -0,0 +1,461 @@ +/* + * Sortable plugin. + * + * Status: experimental. The behavior is not perfect, but it's OK in terms of memory + * usage and disposing. + * + * This is a lightweight, October-style implementation of the drag & drop sorting + * functionality. The plugin uses only HTML5 Drag&Drop feature and completely + * disposable. + * + * During the dragging the plugin creates a placeholder element, which should be + * styled separately. + * + * Draggable elements should be marked with "draggable" HTML5 attribute. + * + * Current / planned features: + * + * [x] Sorting a single list. + * [ ] Dragging items between multiple lists. + * [ ] Sorting nested lists. + + * JAVASCRIPT API + * + * $('#list').listSortable({}) + * + * DATA ATTRIBUTES API + * + * In the simplest case the plugin can be initialized like this: + *