MDL-79863 qtype_ordering: Fixing bugs (#52)

Thanks very much, HuongNV13 (1) Items crash together horizontally (2) Number/letter no longer tracks with dragged item

question/type/ordering/amd/build/drag_reorder.min.js

@@ -1 +1,2 @@
-define(["jquery",require.specified("core/dragdrop")?"core/dragdrop":"qtype_ordering/dragdrop",require.specified("core/key_codes")?"core/key_codes":"qtype_ordering/key_codes"],function(a,b,c){return function(d){var e=null,f=null,g=null,h=null,i=null,j=function(c,h){e={time:(new Date).getTime(),x:h.x,y:h.y},g=a(c.currentTarget).closest(d.itemInPage),"undefined"!=typeof d.reorderStart&&d.reorderStart(g.closest(d.list),g),f=s(),i=a(d.proxyHtml.replace("%%ITEM_HTML%%",g.html()).replace("%%ITEM_CLASS_NAME%%",g.attr("class"))),a(document.body).append(i),i.css("position","absolute"),i.css(g.offset()),i.width(g.outerWidth()),i.height(g.outerHeight()),g.addClass(d.itemMovingClass),l(g),b.start(c,i,k,n)},k=function(){var b=g.closest(d.list),c=null,e=null;b.find(d.item).each(function(b,d){var f=r(d,i);(null===c||f<e)&&(c=a(d),e=f)}),c[0]!==g[0]&&(q(i)<q(c)?g.insertBefore(c):g.insertAfter(c),l(g))},l=function(a){for(var b=a.closest("ol, ul"),c=b.find("li"),d=c.length,e=0;e<d;++e)if(a[0]===c[e]){i.find("li").attr("value",e+1);break}},m=function(a,b){var c=[];return a.split(",").forEach(function(a){b.split(",").forEach(function(b){c.push(a.trim()+" "+b.trim())})}),c.join(", ")},n=function(a,b){"undefined"!=typeof d.reorderEnd&&d.reorderEnd(g.closest(d.list),g);var c=s();t(f,c)?(new Date).getTime()-e.time<500&&Math.abs(e.x-a)<10&&Math.abs(e.y-b)<10&&g[0].focus():d.reorderDone(g.closest(d.list),g,c),i.remove(),i=null,g.removeClass(d.itemMovingClass),g=null,e=null},o=function(a,b){switch(a.keyCode){case c.space:case c.arrowRight:case c.arrowDown:a.preventDefault(),a.stopPropagation();var d=b.next();d.length&&d.insertBefore(b);break;case c.arrowLeft:case c.arrowUp:a.preventDefault(),a.stopPropagation();var e=b.prev();e.length&&e.insertAfter(b)}},p=function(a){return a.offset().left+a.outerWidth()/2},q=function(a){return a.offset().top+a.outerHeight()/2},r=function(b,c){var d=a(b),e=a(c),f=p(d)-p(e),g=q(d)-q(e);return Math.sqrt(f*f+g*g)},s=function(){return(g||h).closest(d.list).find(d.item).map(function(a,b){return d.idGetter(b)}).get()},t=function(a,b){return a.length===b.length&&a.every(function(a,c){return a===b[c]})};d.itemInPage=m(d.list,d.item),a(d.list).on("mousedown touchstart",d.item,function(a){var c=b.prepare(a);c.start&&j(a,c)}),a(d.list).on("keydown",d.item,function(b){h=a(b.currentTarget).closest(d.itemInPage),f=s(),o(b,h);var c=s();t(f,c)||d.reorderDone(h.closest(d.list),h,c)}),a(d.itemInPage).attr("tabindex","0")}});
+define ("qtype_ordering/drag_reorder",["jquery",require.specified("core/dragdrop")?"core/dragdrop":"qtype_ordering/dragdrop",require.specified("core/key_codes")?"core/key_codes":"qtype_ordering/key_codes"],function(a,b,c){return function(d){var e=null,f=null,g=null,h=null,j=null,k=null,l=function(c,h){k=a(d.list);e={time:new Date().getTime(),x:h.x,y:h.y};g=a(c.currentTarget).closest(d.itemInPage);if("undefined"!=typeof d.reorderStart){d.reorderStart(g.closest(d.list),g)}f=t();j=a(d.proxyHtml.replace("%%ITEM_HTML%%",g.html()).replace("%%ITEM_CLASS_NAME%%",g.attr("class")).replace("%%LIST_CLASS_NAME%%",k.attr("class")));a(document.body).append(j);j.css("position","absolute");j.css(g.offset());j.width(g.outerWidth());j.height(g.outerHeight());g.addClass(d.itemMovingClass);n(g);b.start(c,j,m,o)},m=function(){var b=g.closest(d.list),c=null,e=null;b.find(d.item).each(function(b,d){var f=s(d,j);if(null===c||f<e){c=a(d);e=f}});if(c[0]===g[0]){return}if(r(j)<r(c)){g.insertBefore(c)}else{g.insertAfter(c)}n(g)},n=function(a){for(var b=a.closest("ol, ul"),c=b.find("li"),d=c.length,e=0;e<d;++e){if(a[0]===c[e]){j.find("li").attr("value",e+1);break}}},o=function(a,b){if("undefined"!=typeof d.reorderEnd){d.reorderEnd(g.closest(d.list),g)}var c=t();if(!u(f,c)){d.reorderDone(g.closest(d.list),g,c)}else if(500>new Date().getTime()-e.time&&10>Math.abs(e.x-a)&&10>Math.abs(e.y-b)){g[0].focus()}j.remove();j=null;g.removeClass(d.itemMovingClass);g=null;e=null},p=function(a,b){switch(a.keyCode){case c.space:case c.arrowRight:case c.arrowDown:a.preventDefault();a.stopPropagation();var d=b.next();if(d.length){d.insertBefore(b)}break;case c.arrowLeft:case c.arrowUp:a.preventDefault();a.stopPropagation();var e=b.prev();if(e.length){e.insertAfter(b)}break;}},q=function(a){return a.offset().left+a.outerWidth()/2},r=function(a){return a.offset().top+a.outerHeight()/2},s=function(b,c){var d=a(b),e=a(c),f=q(d)-q(e),g=r(d)-r(e);return Math.sqrt(f*f+g*g)},t=function(){return(g||h).closest(d.list).find(d.item).map(function(a,b){return d.idGetter(b)}).get()},u=function(a,b){return a.length===b.length&&a.every(function(a,c){return a===b[c]})};d.itemInPage=function combineSelectors(a,b){var c=[];a.split(",").forEach(function(a){b.split(",").forEach(function(b){c.push(a.trim()+" "+b.trim())})});return c.join(", ")}(d.list,d.item);a(d.list).on("mousedown touchstart",d.item,function(a){var c=b.prepare(a);if(c.start){l(a,c)}});a(d.list).on("keydown",d.item,function(b){h=a(b.currentTarget).closest(d.itemInPage);f=t();p(b,h);var c=t();if(!u(f,c)){d.reorderDone(h.closest(d.list),h,c)}});a(d.itemInPage).attr("tabindex","0")}});
+//# sourceMappingURL=drag_reorder.min.js.map

question/type/ordering/amd/build/reorder.min.js

@@ -1 +1,2 @@
-define(["jquery","qtype_ordering/drag_reorder"],function(a,b){return{init:function(c,d){new b({list:"ul#"+c,item:"li.sortableitem",proxyHtml:'<div class="que ordering dragproxy"><ul class="sortablelist"><li class="%%ITEM_CLASS_NAME%% item-moving">%%ITEM_HTML%%</li></ul></div>',itemMovingClass:"current-drop",idGetter:function(b){return a(b).attr("id")},nameGetter:function(b){return a(b).text},reorderStart:function(){},reorderEnd:function(){},reorderDone:function(b,c,e){a("input#"+d)[0].value=e.join(",")}})}}});
+define ("qtype_ordering/reorder",["jquery","qtype_ordering/drag_reorder"],function(a,b){return{init:function init(c,d){new b({list:"ul#"+c,item:"li.sortableitem",proxyHtml:"<div class=\"que ordering dragproxy\"><ul class=\"%%LIST_CLASS_NAME%%\"><li class=\"%%ITEM_CLASS_NAME%% item-moving\">%%ITEM_HTML%%</li></ul></div>",itemMovingClass:"current-drop",idGetter:function idGetter(b){return a(b).attr("id")},nameGetter:function nameGetter(b){return a(b).text},reorderStart:function reorderStart(){},reorderEnd:function reorderEnd(){},reorderDone:function reorderDone(b,c,e){a("input#"+d)[0].value=e.join(",")}})}}});
+//# sourceMappingURL=reorder.min.js.map

question/type/ordering/amd/build/reorder.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/reorder.js"],"names":["define","$","dragReorder","init","sortableid","responseid","list","item","proxyHtml","itemMovingClass","idGetter","attr","nameGetter","text","reorderStart","reorderEnd","reorderDone","newOrder","value","join"],"mappings":"AAAAA,OAAM,0BAAC,CAAC,QAAD,CAAW,6BAAX,CAAD,CAA4C,SAASC,CAAT,CAAYC,CAAZ,CAAyB,CACvE,MAAO,CAOHC,IAAI,CAAE,cAAUC,CAAV,CAAsBC,CAAtB,CAAkC,CACpC,GAAIH,CAAAA,CAAJ,CAAgB,CACZI,IAAI,CAAE,MAAQF,CADF,CAEZG,IAAI,CAAE,iBAFM,CAGZC,SAAS,sJAHG,CAMZC,eAAe,CAAE,cANL,CAOZC,QAAQ,CAAE,kBAAUH,CAAV,CAAgB,CAAE,MAAON,CAAAA,CAAC,CAACM,CAAD,CAAD,CAAQI,IAAR,CAAa,IAAb,CAAqB,CAP5C,CAQZC,UAAU,CAAE,oBAAUL,CAAV,CAAgB,CAAE,MAAON,CAAAA,CAAC,CAACM,CAAD,CAAD,CAAQM,IAAO,CARxC,CASZC,YAAY,CAAE,uBAAW,CAAE,CATf,CAUZC,UAAU,CAAE,qBAAW,CAAE,CAVb,CAWZC,WAAW,CAAE,qBAASV,CAAT,CAAeC,CAAf,CAAqBU,CAArB,CAA+B,CACxChB,CAAC,CAAC,SAAWI,CAAZ,CAAD,CAAyB,CAAzB,EAA4Ba,KAA5B,CAAoCD,CAAQ,CAACE,IAAT,CAAc,GAAd,CACvC,CAbW,CAAhB,CAeH,CAvBE,CAyBV,CA1BK,CAAN","sourcesContent":["define(['jquery', 'qtype_ordering/drag_reorder'], function($, dragReorder) {\n    return {\n        /**\n         * Initialise one ordering question.\n         *\n         * @param {String} sortableid id of ul for this question.\n         * @param {String} responseid id of hidden field for this question.\n         */\n        init: function (sortableid, responseid) {\n            new dragReorder({\n                list: 'ul#' + sortableid,\n                item: 'li.sortableitem',\n                proxyHtml: '<div class=\"que ordering dragproxy\">' +\n                        '<ul class=\"%%LIST_CLASS_NAME%%\"><li class=\"%%ITEM_CLASS_NAME%% item-moving\">' +\n                        '%%ITEM_HTML%%</li></ul></div>',\n                itemMovingClass: \"current-drop\",\n                idGetter: function (item) { return $(item).attr('id'); },\n                nameGetter: function (item) { return $(item).text; },\n                reorderStart: function() {},\n                reorderEnd: function() {},\n                reorderDone: function(list, item, newOrder) {\n                    $('input#' + responseid)[0].value = newOrder.join(',');\n                }\n            });\n        }\n    };\n});\n"],"file":"reorder.min.js"}

question/type/ordering/amd/src/drag_reorder.js

@@ -109,9 +109,12 @@ define([
             originalOrder = null,   // Array of ids.
             itemDragging = null,    // Item being moved by dragging (jQuery object).
             itemMoving = null,      // Item being moved using the accessible modal (jQuery object).
-            proxy = null;           // Drag proxy (jQuery object).
+            proxy = null,           // Drag proxy (jQuery object).
+            orderList = null;       // Order list (jQuery object).
 
         var startDrag = function(event, details) {
+            orderList = $(config.list);
+
             dragStart = {
                 time: new Date().getTime(),
                 x: details.x,
@@ -126,7 +129,8 @@ define([
 
             originalOrder = getCurrentOrder();
             proxy = $(config.proxyHtml.replace('%%ITEM_HTML%%', itemDragging.html())
-                .replace('%%ITEM_CLASS_NAME%%', itemDragging.attr('class')));
+                .replace('%%ITEM_CLASS_NAME%%', itemDragging.attr('class'))
+                .replace('%%LIST_CLASS_NAME%%', orderList.attr('class')));
 
             $(document.body).append(proxy);
             proxy.css('position', 'absolute');

question/type/ordering/amd/src/reorder.js

@@ -11,7 +11,7 @@ define(['jquery', 'qtype_ordering/drag_reorder'], function($, dragReorder) {
                 list: 'ul#' + sortableid,
                 item: 'li.sortableitem',
                 proxyHtml: '<div class="que ordering dragproxy">' +
-                        '<ul class="sortablelist"><li class="%%ITEM_CLASS_NAME%% item-moving">' +
+                        '<ul class="%%LIST_CLASS_NAME%%"><li class="%%ITEM_CLASS_NAME%% item-moving">' +
                         '%%ITEM_HTML%%</li></ul></div>',
                 itemMovingClass: "current-drop",
                 idGetter: function (item) { return $(item).attr('id'); },

question/type/ordering/styles.css

@@ -34,6 +34,14 @@
     box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
 }
 
+.que.ordering .sortablelist.numbering123 li,
+.que.ordering .sortablelist.numberingabc li,
+.que.ordering .sortablelist.numberingABCD li,
+.que.ordering .sortablelist.numberingiii li,
+.que.ordering .sortablelist.numberingIIII li {
+    margin-left: 26px; /* The margin is needed for the list-style-type in numberingxxx classes */
+}
+
 .que.ordering .sortablelist.numberingnone li {
     list-style-type  : none;
     margin-left: 0px;
@@ -74,6 +82,8 @@
 }
 .que.ordering.dragproxy .sortablelist li {
     margin: 0;
+    padding: 6px 0 6px 12px;
+    width: 100%;
 }
 .que.ordering.dragproxy .sortablelist li.horizontal {
     float: none;