From d8c50267b92135ca984864cbdf517067c023ed8a Mon Sep 17 00:00:00 2001 From: Marina Glancy Date: Thu, 11 Oct 2018 15:08:46 +0200 Subject: [PATCH] MDL-63625 core: sortable_list iOS scrolling For iOS we need to register non passive events not only for touchstart but also for touchmove and touchend. Also iOS could open two move dialogue windows instead of one --- lib/amd/build/sortable_list.min.js | 2 +- lib/amd/src/sortable_list.js | 44 ++++++++++++++++++++++++-------------- 2 files changed, 29 insertions(+), 17 deletions(-) rewrite lib/amd/build/sortable_list.min.js (92%) diff --git a/lib/amd/build/sortable_list.min.js b/lib/amd/build/sortable_list.min.js dissimilarity index 92% index f3247eaf9af..e69f6ffa60d 100644 --- a/lib/amd/build/sortable_list.min.js +++ b/lib/amd/build/sortable_list.min.js @@ -1 +1 @@ -define(["jquery","core/log","core/autoscroll","core/str","core/modal_factory","core/modal_events","core/notification"],function(a,b,c,d,e,f,g){var h={targetListSelector:null,moveHandlerSelector:"[data-drag-type=move]",isHorizontal:!1,autoScroll:!0},i={keyboardDragClass:"dragdrop-keyboard-drag",isDraggedClass:"sortable-list-is-dragged",currentPositionClass:"sortable-list-current-position",sourceListClass:"sortable-list-source",targetListClass:"sortable-list-target",overElementClass:"sortable-list-over-element"},j=function(){var a,b=!1,c="testpassiveeventoptions";try{a=Object.defineProperty({},"passive",{get:function(){b=!0}}),document.addEventListener(c,a,a),document.removeEventListener(c,a,a)}catch(d){b=!1}return b}();a.event.special.touchstart={setup:function(a,b,c){return!(!j||!b.includes("notPassive"))&&(this.addEventListener("touchstart",c,{passive:!1}),!0)}};var k=function(b,c){this.info=null,this.proxy=null,this.proxyDelta=null,this.dragCounter=0,this.lastEvent=null,this.config=a.extend({},h,c||{}),this.config.listSelector=b,this.config.targetListSelector||(this.config.targetListSelector=b),"object"==typeof this.config.listSelector?a(this.config.listSelector).on("mousedown touchstart.notPassive",a.proxy(this.dragStartHandler,this)):a("body").on("mousedown touchstart.notPassive",this.config.listSelector,a.proxy(this.dragStartHandler,this)),null!==this.config.moveHandlerSelector&&a("body").on("click keypress",this.config.moveHandlerSelector,a.proxy(this.clickHandler,this))};return k.EVENTS={DRAGSTART:"sortablelist-dragstart",DRAG:"sortablelist-drag",DROP:"sortablelist-drop",DRAGEND:"sortablelist-dragend"},k.prototype.resetDraggedClasses=function(){var b=[i.isDraggedClass,i.currentPositionClass,i.overElementClass,i.targetListClass];for(var c in b)a("."+b[c]).removeClass(b[c]);this.proxy&&(this.proxy.remove(),this.proxy=a())},k.prototype.calculatePositionOnPage=function(b){if(b.originalEvent&&b.originalEvent.touches&&void 0!==b.originalEvent.touches[0]){var c=b.originalEvent.touches[0];b.pageX=c.pageX,b.pageY=c.pageY}void 0===b.pageX?(b.pageX=this.lastEvent.pageX,b.pageY=this.lastEvent.pageY):this.lastEvent=b,void 0===b.clientX&&(b.clientX=Math.round(b.pageX-a(window).scrollLeft()),b.clientY=Math.round(b.pageY-a(window).scrollTop()))},k.prototype.dragStartHandler=function(b){if(null!==this.info){if("click"===this.info.type||"touchend"===this.info.type)return;this.moveElement(this.info.sourceList,this.info.sourceNextElement),this.finishDragging()}if("mousedown"!==b.type||1===b.which){this.calculatePositionOnPage(b);var d=a(b.target).closest(a(b.currentTarget).children());if(d.length&&(null===this.config.moveHandlerSelector||a(b.target).closest(this.config.moveHandlerSelector,d).length)){b.stopPropagation(),b.preventDefault(),this.dragCounter++,this.info={element:d,sourceNextElement:d.next(),sourceList:d.parent(),targetNextElement:d.next(),targetList:d.parent(),type:b.type,dropped:!1,startX:b.pageX,startY:b.pageY,startTime:(new Date).getTime()},a(this.config.targetListSelector).addClass(i.targetListClass);var e=d.offset();d.addClass(i.currentPositionClass),this.proxyDelta={x:e.left-b.pageX,y:e.top-b.pageY},this.proxy=a();var f=this.dragCounter;setTimeout(a.proxy(function(){null!==this.info&&"click"!==this.info.type&&"keypress"!==this.info.type&&this.dragCounter===f&&this.createProxy()},this),500),a(window).on("mousemove touchmove mouseup touchend",a.proxy(this.dragHandler,this)),a(window).on("keypress",a.proxy(this.dragcancelHandler,this)),this.config.autoScroll&&c.start(function(){a(window).trigger("mousemove")}),this.executeCallback(k.EVENTS.DRAGSTART)}}},k.prototype.createProxy=function(){this.proxy=this.info.element.clone(),this.info.sourceList.append(this.proxy),this.proxy.removeAttr("id").removeClass(i.currentPositionClass).addClass(i.isDraggedClass).css({position:"fixed"}),this.proxy.offset({top:this.proxyDelta.y+this.lastEvent.pageY,left:this.proxyDelta.x+this.lastEvent.pageX})},k.prototype.clickHandler=function(b){if(!("keypress"===b.type&&13!==b.originalEvent.keyCode&&32!==b.originalEvent.keyCode||null!==this.info&&"click"===this.info.type)){b.preventDefault(),b.stopPropagation();var c=a(b.target).closest(this.config.moveHandlerSelector),d=c.closest(this.config.listSelector),e=c.closest(d.children());e.length&&(this.dragCounter++,this.info={element:e,sourceNextElement:e.next(),sourceList:d,targetNextElement:e.next(),targetList:d,dropped:!1,type:b.type,startTime:(new Date).getTime()},this.executeCallback(k.EVENTS.DRAGSTART),this.displayMoveDialogue(c))}},k.prototype.getPositionInNode=function(a,b,c){if(!c.length)return null;var d=c[0],e=0,f=d.getBoundingClientRect(),g=b-(f.top+window.scrollY),h=a-(f.left+window.scrollX);return h>=-e&&h<=f.width+e&&g>=-e&&g<=f.height+e?{x:h,y:g,xRatio:f.width?h/f.width:0,yRatio:f.height?g/f.height:0}:null},k.prototype.isListHorizontal=function(a){var b=this.config.isHorizontal;return b===!0||b===!1?b:b(a)},k.prototype.dragHandler=function(b){this.calculatePositionOnPage(b),this.proxy.offset({top:-1e3,left:-1e3});var c=a(document.elementFromPoint(b.clientX,b.clientY)),d=this.info.element[0],e=function(){return this!==d},f=c.closest("."+i.targetListClass+" > :not(."+i.isDraggedClass+")").filter(e),g=c.closest("."+i.targetListClass),h=this.proxy,j=function(){return!h||!h.length||this!==h[0]};if(a("."+i.overElementClass).removeClass(i.overElementClass),f.addClass(i.overElementClass),this.proxy.offset({top:this.proxyDelta.y+b.pageY,left:this.proxyDelta.x+b.pageX}),g.length&&!g.children().filter(j).length)this.moveElement(g,a());else if(1===f.length&&!this.info.element.find(f[0]).length){var l=this.getPositionInNode(b.pageX,b.pageY,f);if(l){var m=f.parent(),n=this.isListHorizontal(m)?l.xRatio:l.yRatio,o=f.find("."+i.targetListClass),p=!o.children().filter(j).filter(e).length;o.length&&p&&n>.2&&n<.8?this.moveElement(o,a()):n>.5?this.moveElement(m,f.next().filter(j)):this.moveElement(m,f)}}if("mouseup"===b.type||"touchend"===b.type){this.info.endX=b.pageX,this.info.endY=b.pageY,this.info.endTime=(new Date).getTime(),this.info.dropped=!0,this.info.positionChanged=this.hasPositionChanged(this.info);var q=this.info;this.executeCallback(k.EVENTS.DROP),this.finishDragging(),"touchend"===b.type&&null!==this.config.moveHandlerSelector&&q.endTime-q.startTime<500&&!q.positionChanged&&this.clickHandler(b)}},k.prototype.hasPositionChanged=function(a){return a.sourceList[0]!==a.targetList[0]||a.sourceNextElement.length!==a.targetNextElement.length||a.sourceNextElement.length&&a.sourceNextElement[0]!==a.targetNextElement[0]},k.prototype.moveElement=function(a,b){var c=this.info.element;b.length&&b[0]===c[0]||a[0]===this.info.targetList[0]&&b.length===this.info.targetNextElement.length&&b[0]===this.info.targetNextElement[0]||(b.length?a[0].insertBefore(c[0],b[0]):this.proxy&&this.proxy.parent().length&&this.proxy.parent()[0]===a[0]?a[0].insertBefore(c[0],this.proxy[0]):a[0].appendChild(c[0]),this.info.targetList=a,this.info.targetNextElement=b,this.executeCallback(k.EVENTS.DRAG))},k.prototype.finishDragging=function(){this.resetDraggedClasses(),this.config.autoScroll&&c.stop(),a(window).off("mousemove touchmove mouseup touchend",a.proxy(this.dragHandler,this)),a(window).off("keypress",a.proxy(this.dragcancelHandler,this)),this.executeCallback(k.EVENTS.DRAGEND),this.info=null},k.prototype.executeCallback=function(a){this.info.element.trigger(a,this.info)},k.prototype.dragcancelHandler=function(a){"keypress"===a.type&&27===a.originalEvent.keyCode&&(this.moveElement(this.info.sourceList,this.info.sourceNextElement),this.finishDragging())},k.prototype.getElementName=function(b){return a.Deferred().resolve(b.text())},k.prototype.getDestinationName=function(a,b){return b.length?this.getElementName(b).then(function(a){return d.get_string("movecontentafter","moodle",a)}):d.get_string("movecontenttothetop","moodle")},k.prototype.getMoveDialogueTitle=function(b,c){return c.attr("title")?a.Deferred().resolve(c.attr("title")):this.getElementName(b).then(function(a){return d.get_string("movecontent","moodle",a)})},k.prototype.getDestinationsList=function(){var b=[],c=a(this.config.targetListSelector),d=a("