From e76deaac51a97eb021cfba49ac742ec5716ffa2e Mon Sep 17 00:00:00 2001 From: M Kassaei Date: Tue, 16 Jun 2015 14:54:05 +0100 Subject: [PATCH] MDL-47494 ddmarker: Fix drag and drop on Android touch devices. #85111 The original idea for this fix came from Davo Smith. --- .../moodle-qtype_ddmarker-dd-debug.js | 38 +++++++++++++++++++ .../moodle-qtype_ddmarker-dd-min.js | 4 +- .../moodle-qtype_ddmarker-dd.js | 38 +++++++++++++++++++ .../ddmarker/yui/src/ddmarker/js/ddmarker.js | 38 +++++++++++++++++++ 4 files changed, 116 insertions(+), 2 deletions(-) diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js index 2487de29c41..2556cd7891f 100644 --- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js +++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js @@ -308,6 +308,7 @@ var DDMARKER_QUESTION = function() { * This is the code for question rendering. */ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, { + touchscrolldisable: null, pendingid: '', initializer : function() { this.pendingid = 'qtype_ddmarker-' + Math.random().toString(36).slice(2); // Random string. @@ -334,6 +335,39 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, { } return drag; }, + + /** + * prevent_touchmove_from_scrolling allows users of touch screen devices to + * use drag and drop and normal scrolling at the same time. I.e.when + * touching and dragging a draggable item, the screen does not scroll, but + * you can scroll by touching other area of the screen apart from the + * draggable items. + */ + prevent_touchmove_from_scrolling : function(drag) { + var touchstart = (Y.UA.ie) ? 'MSPointerStart' : 'touchstart'; + var touchend = (Y.UA.ie) ? 'MSPointerEnd' : 'touchend'; + var touchmove = (Y.UA.ie) ? 'MSPointerMove' : 'touchmove'; + + // Disable scrolling when touching the draggable items. + drag.on(touchstart, function() { + if (this.touchscrolldisable) { + return; // Already disabled. + } + this.touchscrolldisable = Y.one('body').on(touchmove, function(e) { + e = e || window.event; + e.preventDefault(); + }); + }, this); + + // Allow scrolling after releasing the draggable items. + drag.on(touchend, function() { + if (this.touchscrolldisable) { + this.touchscrolldisable.detach(); + this.touchscrolldisable = null; + } + }, this); + }, + draggable : function (drag) { var dd = new Y.DD.Drag({ node: drag, @@ -360,7 +394,11 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, { //--- keyboard accessibility drag.set('tabIndex', 0); drag.on('dragchange', this.drop_zone_key_press, this); + + // Prevent scrolling whilst dragging on Adroid devices. + this.prevent_touchmove_from_scrolling(drag); }, + save_all_xy_for_choice: function (choiceno, dropped) { var coords = []; var bgimgxy; diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-min.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-min.js index c719e3ce651..c15de87a201 100644 --- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-min.js +++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-min.js @@ -1,2 +1,2 @@ -YUI.add("moodle-qtype_ddmarker-dd",function(e,t){var n="moodle-qtype_ddmarker-dd",r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,e.Base,{doc:null,polltimer:null,afterimageloaddone:!1,graphics:null,poll_for_image_load:function(t,n,r,i){if(this.afterimageloaddone)return;var s=this.doc.bg_img().get("complete");n&&(s=s&&this.doc.bg_img().hasClass("constrained"));if(s)this.polltimer!==null&&(this.polltimer.cancel(),this.polltimer=null),this.doc.bg_img().detach("load",this.poll_for_image_load),r!==0?e.later(r,this,i):i.call(this),this.afterimageloaddone=!0;else if(this.polltimer===null){var o=[null,n,r,i];this.polltimer=e.later(1e3,this,this.poll_for_image_load,o,!0)}},doc_structure:function(){var t=e.one(this.get("topnode")),n=t.one("div.dragitems"),r=t.one("div.droparea");return{top_node:function(){return t},bg_img:function(){return t.one(".dropbackground")},load_bg_img:function(e){r.setContent(''),this.bg_img().on("load",this.on_image_load,this,"bg_image")},drag_items:function(){return n.all(".dragitem")},drag_items_for_choice:function(e){return n.all("span.dragitem.choice"+e)},drag_item_for_choice:function(e,t){return n.one("span.dragitem.choice"+e+".item"+t)},drag_item_being_dragged:function(e){return n.one("span.dragitem.beingdragged.choice"+e)},drag_item_home:function(e){return n.one("span.draghome.choice"+e)},drag_item_homes:function(){return n.all("span.draghome")},get_classname_numeric_suffix:function(e,t){var n=e.getAttribute("class");if(n!==""){var r=n.split(" ");for(var i=0;i'+t+""):this.doc.marker_texts().append(''+t+"")}var a="draw_shape_"+n;if(this[a]instanceof Function){var f=this[a](e,r,i);if(f!==null){var l=this.doc.top_node().one("div.ddarea div.markertexts span.markertext"+e);if(l!==null){l.setStyle("opacity","0.6"),f[0]-=l.get("offsetWidth")/2,f[1]-=l.get("offsetHeight")/2,l.setXY(this.convert_to_window_xy(f));var c=l.one("a");c!==null&&(c.once("click",function(e,t){var n=this.shapes[t].get("fill");n.opacity=1,this.shapes[t].set("fill",n)},this,e),c.set("tabIndex",0))}}}},draw_shape_circle:function(e,t,n){var r=t.match(/(\d+),(\d+);(\d+)/);if(r&&r.length===4){var i=[Number(r[1])-r[3],Number(r[2])-r[3]];if(this.coords_in_img(i)){var s=[Number(r[3])*2,Number(r[3])*2],o=this.graphics.addShape({type:"circle",width:s[0],height:s[1],fill:{color:n,opacity:"0.5"},stroke:{weight:1,color:"black"}});return o.setXY(this.convert_to_window_xy(i)),this.shapes[e]=o,[Number(r[1]),Number(r[2])]}}return null},draw_shape_rectangle:function(e,t,n){var r=t.match(/(\d+),(\d+);(\d+),(\d+)/);if(r&&r.length===5){var i=[Number(r[1]),Number(r[2])],s=[Number(r[3]),Number(r[4])];if(this.coords_in_img([i[0]+s[0],i[1]+s[1]])){var o=this.graphics.addShape({type:"rect",width:s[0],height:s[1],fill:{color:n,opacity:"0.5"},stroke:{weight:1,color:"black"}});return o.setXY(this.convert_to_window_xy(i)),this.shapes[e]=o,[Number(i[0])+s[0]/2,Number(i[1])+s[1]/2]}}return null},draw_shape_polygon:function(e,t,n){var r=t.split(";"),i=[];for(var s in r){var o=r[s].match(/^(\d+),(\d+)$/);o!==null&&this.coords_in_img([o[1],o[2]])&&(i[i.length]=[o[1],o[2]])}if(i.length>2){var u=this.graphics.addShape({type:"path",stroke:{weight:1,color:"black"},fill:{color:n,opacity:"0.5"}}),a=[0,0],f=[this.doc.bg_img().get("width"),this.doc.bg_img().get("height")];for(s=0;sthis.doc.bg_img().get("width")||e[1]>this.doc.bg_img().get("height")?!1:!0},constrain_to_bgimg:function(e){var t=this.convert_to_bg_img_xy(e);return t[0]=Math.max(0,t[0]),t[1]=Math.max(0,t[1]),t[0]=Math.min(this.doc.bg_img().get("width"),t[0]),t[1]=Math.min(this.doc.bg_img().get("height"),t[1]),this.convert_to_window_xy(t)},convert_to_bg_img_xy:function(e){return[Number(e[0])-this.doc.bg_img().getX()-1,Number(e[1])-this.doc.bg_img().getY()-1]},redraw_drags_and_drops:function(){this.doc.drag_items().each(function(e){e.addClass("unneeded")},this),this.doc.inputs_for_choices().each(function(e){var t=this.get_choiceno_for_node(e),n=this.get_coords(e),r=this.doc.drag_item_home(t);for(var i=0;i'),this.bg_img().on("load",this.on_image_load,this,"bg_image")},drag_items:function(){return n.all(".dragitem")},drag_items_for_choice:function(e){return n.all("span.dragitem.choice"+e)},drag_item_for_choice:function(e,t){return n.one("span.dragitem.choice"+e+".item"+t)},drag_item_being_dragged:function(e){return n.one("span.dragitem.beingdragged.choice"+e)},drag_item_home:function(e){return n.one("span.draghome.choice"+e)},drag_item_homes:function(){return n.all("span.draghome")},get_classname_numeric_suffix:function(e,t){var n=e.getAttribute("class");if(n!==""){var r=n.split(" ");for(var i=0;i'+t+""):this.doc.marker_texts().append(''+t+"")}var a="draw_shape_"+n;if(this[a]instanceof Function){var f=this[a](e,r,i);if(f!==null){var l=this.doc.top_node().one("div.ddarea div.markertexts span.markertext"+e);if(l!==null){l.setStyle("opacity","0.6"),f[0]-=l.get("offsetWidth")/2,f[1]-=l.get("offsetHeight")/2,l.setXY(this.convert_to_window_xy(f));var c=l.one("a");c!==null&&(c.once("click",function(e,t){var n=this.shapes[t].get("fill");n.opacity=1,this.shapes[t].set("fill",n)},this,e),c.set("tabIndex",0))}}}},draw_shape_circle:function(e,t,n){var r=t.match(/(\d+),(\d+);(\d+)/);if(r&&r.length===4){var i=[Number(r[1])-r[3],Number(r[2])-r[3]];if(this.coords_in_img(i)){var s=[Number(r[3])*2,Number(r[3])*2],o=this.graphics.addShape({type:"circle",width:s[0],height:s[1],fill:{color:n,opacity:"0.5"},stroke:{weight:1,color:"black"}});return o.setXY(this.convert_to_window_xy(i)),this.shapes[e]=o,[Number(r[1]),Number(r[2])]}}return null},draw_shape_rectangle:function(e,t,n){var r=t.match(/(\d+),(\d+);(\d+),(\d+)/);if(r&&r.length===5){var i=[Number(r[1]),Number(r[2])],s=[Number(r[3]),Number(r[4])];if(this.coords_in_img([i[0]+s[0],i[1]+s[1]])){var o=this.graphics.addShape({type:"rect",width:s[0],height:s[1],fill:{color:n,opacity:"0.5"},stroke:{weight:1,color:"black"}});return o.setXY(this.convert_to_window_xy(i)),this.shapes[e]=o,[Number(i[0])+s[0]/2,Number(i[1])+s[1]/2]}}return null},draw_shape_polygon:function(e,t,n){var r=t.split(";"),i=[];for(var s in r){var o=r[s].match(/^(\d+),(\d+)$/);o!==null&&this.coords_in_img([o[1],o[2]])&&(i[i.length]=[o[1],o[2]])}if(i.length>2){var u=this.graphics.addShape({type:"path",stroke:{weight:1,color:"black"},fill:{color:n,opacity:"0.5"}}),a=[0,0],f=[this.doc.bg_img().get("width"),this.doc.bg_img().get("height")];for(s=0;sthis.doc.bg_img().get("width")||e[1]>this.doc.bg_img().get("height")?!1:!0},constrain_to_bgimg:function(e){var t=this.convert_to_bg_img_xy(e);return t[0]=Math.max(0,t[0]),t[1]=Math.max(0,t[1]),t[0]=Math.min(this.doc.bg_img().get("width"),t[0]),t[1]=Math.min(this.doc.bg_img().get("height"),t[1]),this.convert_to_window_xy(t)},convert_to_bg_img_xy:function(e){return[Number(e[0])-this.doc.bg_img().getX()-1,Number(e[1])-this.doc.bg_img().getY()-1]},redraw_drags_and_drops:function(){this.doc.drag_items().each(function(e){e.addClass("unneeded")},this),this.doc.inputs_for_choices().each(function(e){var t=this.get_choiceno_for_node(e),n=this.get_coords(e),r=this.doc.drag_item_home(t);for(var i=0;i