From d70277d050862bfcf57ce18c6ea52e0a3f58610a Mon Sep 17 00:00:00 2001 From: Mathew May Date: Thu, 2 Nov 2023 10:09:24 +0800 Subject: [PATCH] MDL-79871 qtype_ordering: Move existing modules into class Part of: MDL-79863 - Taken the existing module and done the bare minimum to make it work within one class that gets called. --- .../ordering/amd/build/drag_reorder.min.js | 12 +--- .../amd/build/drag_reorder.min.js.map | 2 +- .../type/ordering/amd/build/reorder.min.js | 3 - .../ordering/amd/build/reorder.min.js.map | 1 - .../type/ordering/amd/src/drag_reorder.js | 64 +++++++++++++------ question/type/ordering/amd/src/reorder.js | 35 ---------- question/type/ordering/renderer.php | 2 +- 7 files changed, 48 insertions(+), 71 deletions(-) delete mode 100644 question/type/ordering/amd/build/reorder.min.js delete mode 100644 question/type/ordering/amd/build/reorder.min.js.map delete mode 100644 question/type/ordering/amd/src/reorder.js diff --git a/question/type/ordering/amd/build/drag_reorder.min.js b/question/type/ordering/amd/build/drag_reorder.min.js index 2f7e030446f..366afa1b327 100644 --- a/question/type/ordering/amd/build/drag_reorder.min.js +++ b/question/type/ordering/amd/build/drag_reorder.min.js @@ -1,13 +1,3 @@ -/* - * Generic library to allow things in a vertical list to be re-ordered using drag and drop. - * - * To make a set of things draggable, create a new instance of this object passing the - * necessary config, as explained in the comment on the constructor. - * - * @package qtype_ordering - * @copyright 2018 The Open University - * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */ -define("qtype_ordering/drag_reorder",["jquery","core/dragdrop","core/key_codes"],(function($,drag,keys){return function(config){var outer,inner,combined,dragStart=null,originalOrder=null,itemDragging=null,itemMoving=null,proxy=null,orderList=null,dragMove=function(){var list=itemDragging.closest(config.list),closestItem=null,closestDistance=null;if(list.find(config.item).each((function(index,element){var distance=distanceBetweenElements(element,proxy);(null===closestItem||distance',itemMovingClass:"current-drop",idGetter:function(item){return(0,_jquery.default)(item).attr("id")},nameGetter:function(item){return(0,_jquery.default)(item).text},reorderStart:function(){},reorderEnd:function(){},reorderDone:function(list,item,newOrder){(0,_jquery.default)("input#"+responseid)[0].value=newOrder.join(",")}})}}return _exports.default=DragReorder,_exports.default})); //# sourceMappingURL=drag_reorder.min.js.map \ No newline at end of file diff --git a/question/type/ordering/amd/build/drag_reorder.min.js.map b/question/type/ordering/amd/build/drag_reorder.min.js.map index 9f497b245fe..8dbbda227cd 100644 --- a/question/type/ordering/amd/build/drag_reorder.min.js.map +++ b/question/type/ordering/amd/build/drag_reorder.min.js.map @@ -1 +1 @@ -{"version":3,"file":"drag_reorder.min.js","sources":["../src/drag_reorder.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/*\n * Generic library to allow things in a vertical list to be re-ordered using drag and drop.\n *\n * To make a set of things draggable, create a new instance of this object passing the\n * necessary config, as explained in the comment on the constructor.\n *\n * @package qtype_ordering\n * @copyright 2018 The Open University\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * @module qtype_ordering/drag_reorder\n */\ndefine([\n 'jquery',\n 'core/dragdrop',\n 'core/key_codes'\n], function(\n $,\n drag,\n keys\n) {\n\n /**\n * Constructor.\n *\n * To make a list draggable, create a new instance of this object, passing the necessary config.\n * For example:\n * {\n * // Selector for the list (or lists) to be reordered.\n * list: 'ul.my-list',\n *\n * // Selector, relative to the list selector, for the items that can be moved.\n * item: '> li',\n *\n * // The user actually drags a proxy object, which is constructed from this string,\n * // and then added directly as a child of . The token %%ITEM_HTML%% is\n * // replaced with the innerHtml of the item being dragged. The token %%ITEM_CLASS_NAME%%\n * // is replaced with the class attribute of the item being dragged. Because of this,\n * // the styling of the contents of your list item needs to work for the proxy, as well as\n * // for items in place in the context of the list. Your CSS also needs to ensure\n * // that this proxy has position: absolute. You probably want other styles, like a\n * // drop shadow. Using class osep-itemmoving might be all you need to do.\n * proxyHtml: '
%%ITEM_HTML%%
,\n *\n * // While the proxy is being dragged, this class is added to the item being moved.\n * // You can probably use \"osep-itemmoving\" here.\n * itemMovingClass: \"osep-itemmoving\",\n *\n * // This is a callback which, when called with the DOM node for an item,\n * // returns the string that uniquely identifies each item.\n * // Therefore, the result of the drag action will be represented by the array\n * // obtained by calling this method on each item in the list in order.\n * idGetter: function(item) { return $(node).data('id'); },\n *\n * // This is a callback which, when called with the DOM node for an item,\n * // returns a string that is the name of the item.\n * nameGetter: function(item) { return $(node).text(); },\n *\n * // Function that will be called when a re-order starts (optional, can be not set).\n * // Useful if you need to save information about the initial state.\n * // This function should have two parameters. The first will be a\n * // jQuery object for the list that was reordered, the second will\n * // be the jQuery object for the item moved - which will not yet have been moved.\n * // Note, it is quite possible for reorderStart to be called with no\n * // subsequent call to reorderDone.\n * reorderStart: function($list, $item) { ... }\n *\n * // Function that will be called when a drag has finished, and the list\n * // has been reordered. This function should have three parameters. The first will be\n * // a jQuery object for the list that was reordered, the second will be the jQuery\n * // object for the item moved, and the third will be the new order, which is\n * // an array of ids obtained by calling idGetter on each item in the list in order.\n * // This callback will only be called in the new order is actually different from the old order.\n * reorderDone: function($list, $item, newOrder) { ... }\n *\n * // Function that is alwasy called when a re-order ends (optional, can be not set)\n * // whether or not the order has changed. Useful if you need to undo changes made\n * // in reorderStart, since reorderDone is only called if the new order is different\n * // from the original order.\n * reorderEnd: function($list, $item) { ... }\n * }\n *\n * There is a subtlety ( === hack?) that you can use. If you have items in your list that do not\n * have a drag handle, they they are considered to be placeholders in otherwise empty containers.\n * See how block_userlinks does it, if this seems like it might be useful. nameGetter should return\n * the container name for these items.\n *\n * @param {Object} config As above.\n */\n return function(config) {\n var dragStart = null, // Information about when and where the drag started.\n originalOrder = null, // Array of ids.\n itemDragging = null, // Item being moved by dragging (jQuery object).\n itemMoving = null, // Item being moved using the accessible modal (jQuery object).\n proxy = null, // Drag proxy (jQuery object).\n orderList = null; // Order list (jQuery object).\n\n var startDrag = function(event, details) {\n orderList = $(config.list);\n\n dragStart = {\n time: new Date().getTime(),\n x: details.x,\n y: details.y\n };\n\n itemDragging = $(event.currentTarget).closest(config.itemInPage);\n\n if (typeof config.reorderStart !== 'undefined') {\n config.reorderStart(itemDragging.closest(config.list), itemDragging);\n }\n\n originalOrder = getCurrentOrder();\n proxy = $(config.proxyHtml.replace('%%ITEM_HTML%%', itemDragging.html())\n .replace('%%ITEM_CLASS_NAME%%', itemDragging.attr('class'))\n .replace('%%LIST_CLASS_NAME%%', orderList.attr('class')));\n\n $(document.body).append(proxy);\n proxy.css('position', 'absolute');\n proxy.css(itemDragging.offset());\n proxy.width(itemDragging.outerWidth());\n proxy.height(itemDragging.outerHeight());\n itemDragging.addClass(config.itemMovingClass);\n updateProxy(itemDragging);\n\n // Start drag.\n drag.start(event, proxy, dragMove, dragEnd);\n\n };\n\n var dragMove = function() {\n var list = itemDragging.closest(config.list);\n var closestItem = null;\n var closestDistance = null;\n list.find(config.item).each(function(index, element) {\n var distance = distanceBetweenElements(element, proxy);\n if (closestItem === null || distance < closestDistance) {\n closestItem = $(element);\n closestDistance = distance;\n }\n });\n\n if (closestItem[0] === itemDragging[0]) {\n return;\n }\n var offsetValue = 0;\n // Set offset depending on if item is being dragged downwards/upwards.\n if (midY(proxy) < midY(closestItem)) {\n offsetValue = 20;\n window.console.log(\"For midY(proxy) < midY(closestItem) offset is: \" + offsetValue);\n } else {\n offsetValue = -20;\n window.console.log(\"For midY(proxy) < midY(closestItem) offset is: \" + offsetValue);\n }\n if (midY(proxy) + offsetValue < midY(closestItem)) {\n itemDragging.insertBefore(closestItem);\n } else {\n itemDragging.insertAfter(closestItem);\n }\n updateProxy(itemDragging);\n };\n\n /**\n * Update proxy's position.\n * @param {jQuery} itemDragging\n */\n var updateProxy = function(itemDragging) {\n var list = itemDragging.closest('ol, ul');\n var items = list.find('li');\n var count = items.length;\n for (var i = 0; i < count; ++i) {\n if (itemDragging[0] === items[i]) {\n proxy.find('li').attr('value', i + 1);\n break;\n }\n }\n };\n\n /**\n * It outer and inner are two CSS selectors, which may contain commas,\n * then combine them safely. So combineSelectors('a, b', 'c, d')\n * gives 'a c, a d, b c, b d'.\n * @param {Selector} outer\n * @param {Selector} inner\n * @returns {string}\n */\n var combineSelectors = function(outer, inner) {\n var combined = [];\n outer.split(',').forEach(function(firstSelector) {\n inner.split(',').forEach(function(secondSelector) {\n combined.push(firstSelector.trim() + ' ' + secondSelector.trim());\n });\n });\n return combined.join(', ');\n };\n\n var dragEnd = function(x, y) {\n if (typeof config.reorderEnd !== 'undefined') {\n config.reorderEnd(itemDragging.closest(config.list), itemDragging);\n }\n\n var newOrder = getCurrentOrder();\n if (!arrayEquals(originalOrder, newOrder)) {\n // Order has changed, call the callback.\n config.reorderDone(itemDragging.closest(config.list), itemDragging, newOrder);\n\n } else if (new Date().getTime() - dragStart.time < 500 &&\n Math.abs(dragStart.x - x) < 10 && Math.abs(dragStart.y - y) < 10) {\n // This was really a click. Set the focus on the current item.\n itemDragging[0].focus();\n }\n proxy.remove();\n proxy = null;\n itemDragging.removeClass(config.itemMovingClass);\n itemDragging = null;\n dragStart = null;\n };\n\n /**\n * Items can be moved and placed using certain keys.\n * Tab for tabbing though and choose the item to be moved\n * space, arrow-right arrow-down for moving current element forewards.\n * arrow-right arrow-down for moving the current element backwards.\n * @param {Object} e the event\n * @param {jQuery} current the current moving item\n */\n var itemMovedByKeyboard = function(e, current) {\n switch (e.keyCode) {\n case keys.space:\n case keys.arrowRight:\n case keys.arrowDown:\n e.preventDefault();\n e.stopPropagation();\n var next = current.next();\n if (next.length) {\n next.insertBefore(current);\n }\n break;\n\n case keys.arrowLeft:\n case keys.arrowUp:\n e.preventDefault();\n e.stopPropagation();\n var prev = current.prev();\n if (prev.length) {\n prev.insertAfter(current);\n }\n break;\n }\n };\n\n /**\n * Get the x-position of the middle of the DOM node represented by the given jQuery object.\n * @param {jQuery} jQuery wrapping a DOM node.\n * @returns {number} Number the x-coordinate of the middle (left plus half outerWidth).\n */\n var midX = function(jQuery) {\n return jQuery.offset().left + jQuery.outerWidth() / 2;\n };\n\n /**\n * Get the y-position of the middle of the DOM node represented by the given jQuery object.\n * @param {jQuery} jQuery wrapping a DOM node.\n * @returns {number} Number the y-coordinate of the middle (top plus half outerHeight).\n */\n var midY = function(jQuery) {\n return jQuery.offset().top + jQuery.outerHeight() / 2;\n };\n\n /**\n * Calculate the distance between the centres of two elements.\n * @param {Selector|Element|jQuery} element1 selector, element or jQuery.\n * @param {Selector|Element|jQuery} element2 selector, element or jQuery.\n * @return {number} number the distance in pixels.\n */\n var distanceBetweenElements = function(element1, element2) {\n var e1 = $(element1);\n var e2 = $(element2);\n var dx = midX(e1) - midX(e2);\n var dy = midY(e1) - midY(e2);\n return Math.sqrt(dx * dx + dy * dy);\n };\n\n /**\n * Get the current order of the list containing itemDragging.\n * @returns {Array} Array of strings, the id of each element in order.\n */\n var getCurrentOrder = function() {\n return (itemDragging || itemMoving).closest(config.list).find(config.item).map(\n function(index, item) {\n return config.idGetter(item);\n }).get();\n };\n\n /**\n * Compare two arrays, which just contain simple values like ints or strings,\n * to see if they are equal.\n * @param {Array} a1 first array.\n * @param {Array} a2 second array.\n * @return {Boolean} boolean true if they both contain the same elements in the same order, else false.\n */\n var arrayEquals = function(a1, a2) {\n return a1.length === a2.length &&\n a1.every(function(v, i) {\n return v === a2[i];\n });\n };\n config.itemInPage = combineSelectors(config.list, config.item);\n\n // AJAX for section drag and click-to-move.\n $(config.list).on('mousedown touchstart', config.item, function(event) {\n var details = drag.prepare(event);\n if (details.start) {\n startDrag(event, details);\n }\n });\n\n $(config.list).on('keydown', config.item, function(event) {\n itemMoving = $(event.currentTarget).closest(config.itemInPage);\n originalOrder = getCurrentOrder();\n itemMovedByKeyboard(event, itemMoving);\n var newOrder = getCurrentOrder();\n if (!arrayEquals(originalOrder, newOrder)) {\n // Order has changed, call the callback.\n config.reorderDone(itemMoving.closest(config.list), itemMoving, newOrder);\n }\n });\n\n // Make the items tabbable.\n $(config.itemInPage).attr('tabindex', '0');\n };\n});\n"],"names":["define","$","drag","keys","config","outer","inner","combined","dragStart","originalOrder","itemDragging","itemMoving","proxy","orderList","dragMove","list","closest","closestItem","closestDistance","find","item","each","index","element","distance","distanceBetweenElements","offsetValue","midY","window","console","log","insertBefore","insertAfter","updateProxy","items","count","length","i","attr","dragEnd","x","y","reorderEnd","newOrder","getCurrentOrder","arrayEquals","Date","getTime","time","Math","abs","focus","reorderDone","remove","removeClass","itemMovingClass","midX","jQuery","offset","left","outerWidth","top","outerHeight","element1","element2","e1","e2","dx","dy","sqrt","map","idGetter","get","a1","a2","every","v","itemInPage","split","forEach","firstSelector","secondSelector","push","trim","join","on","event","details","prepare","start","currentTarget","reorderStart","proxyHtml","replace","html","document","body","append","css","width","height","addClass","startDrag","e","current","keyCode","space","arrowRight","arrowDown","preventDefault","stopPropagation","next","arrowLeft","arrowUp","prev","itemMovedByKeyboard"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"drag_reorder.min.js","sources":["../src/drag_reorder.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/*\n * Generic library to allow things in a vertical list to be re-ordered using drag and drop.\n *\n * To make a set of things draggable, create a new instance of this object passing the\n * necessary config, as explained in the comment on the constructor.\n *\n * @package qtype_ordering\n * @copyright 2018 The Open University\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n'use strict';\n\nimport $ from 'jquery';\nimport drag from 'core/dragdrop';\nimport keys from 'core/key_codes';\n\nexport default class DragReorder {\n /**\n * Constructor.\n *\n * To make a list draggable, create a new instance of this object, passing the necessary config.\n * For example:\n * {\n * // Selector for the list (or lists) to be reordered.\n * list: 'ul.my-list',\n *\n * // Selector, relative to the list selector, for the items that can be moved.\n * item: '> li',\n *\n * // The user actually drags a proxy object, which is constructed from this string,\n * // and then added directly as a child of . The token %%ITEM_HTML%% is\n * // replaced with the innerHtml of the item being dragged. The token %%ITEM_CLASS_NAME%%\n * // is replaced with the class attribute of the item being dragged. Because of this,\n * // the styling of the contents of your list item needs to work for the proxy, as well as\n * // for items in place in the context of the list. Your CSS also needs to ensure\n * // that this proxy has position: absolute. You probably want other styles, like a\n * // drop shadow. Using class osep-itemmoving might be all you need to do.\n * proxyHtml: '
%%ITEM_HTML%%
,\n *\n * // While the proxy is being dragged, this class is added to the item being moved.\n * // You can probably use \"osep-itemmoving\" here.\n * itemMovingClass: \"osep-itemmoving\",\n *\n * // This is a callback which, when called with the DOM node for an item,\n * // returns the string that uniquely identifies each item.\n * // Therefore, the result of the drag action will be represented by the array\n * // obtained by calling this method on each item in the list in order.\n * idGetter: function(item) { return $(node).data('id'); },\n *\n * // This is a callback which, when called with the DOM node for an item,\n * // returns a string that is the name of the item.\n * nameGetter: function(item) { return $(node).text(); },\n *\n * // Function that will be called when a re-order starts (optional, can be not set).\n * // Useful if you need to save information about the initial state.\n * // This function should have two parameters. The first will be a\n * // jQuery object for the list that was reordered, the second will\n * // be the jQuery object for the item moved - which will not yet have been moved.\n * // Note, it is quite possible for reorderStart to be called with no\n * // subsequent call to reorderDone.\n * reorderStart: function($list, $item) { ... }\n *\n * // Function that will be called when a drag has finished, and the list\n * // has been reordered. This function should have three parameters. The first will be\n * // a jQuery object for the list that was reordered, the second will be the jQuery\n * // object for the item moved, and the third will be the new order, which is\n * // an array of ids obtained by calling idGetter on each item in the list in order.\n * // This callback will only be called in the new order is actually different from the old order.\n * reorderDone: function($list, $item, newOrder) { ... }\n *\n * // Function that is alwasy called when a re-order ends (optional, can be not set)\n * // whether or not the order has changed. Useful if you need to undo changes made\n * // in reorderStart, since reorderDone is only called if the new order is different\n * // from the original order.\n * reorderEnd: function($list, $item) { ... }\n * }\n *\n * There is a subtlety ( === hack?) that you can use. If you have items in your list that do not\n * have a drag handle, they they are considered to be placeholders in otherwise empty containers.\n * See how block_userlinks does it, if this seems like it might be useful. nameGetter should return\n * the container name for these items.\n *\n * @param {Object} config As above.\n */\n constructor(config) {\n var dragStart = null, // Information about when and where the drag started.\n originalOrder = null, // Array of ids.\n itemDragging = null, // Item being moved by dragging (jQuery object).\n itemMoving = null, // Item being moved using the accessible modal (jQuery object).\n proxy = null, // Drag proxy (jQuery object).\n orderList = null; // Order list (jQuery object).\n\n var startDrag = function(event, details) {\n orderList = $(config.list);\n\n dragStart = {\n time: new Date().getTime(),\n x: details.x,\n y: details.y\n };\n\n itemDragging = $(event.currentTarget).closest(config.itemInPage);\n\n if (typeof config.reorderStart !== 'undefined') {\n config.reorderStart(itemDragging.closest(config.list), itemDragging);\n }\n\n originalOrder = getCurrentOrder();\n proxy = $(config.proxyHtml.replace('%%ITEM_HTML%%', itemDragging.html())\n .replace('%%ITEM_CLASS_NAME%%', itemDragging.attr('class'))\n .replace('%%LIST_CLASS_NAME%%', orderList.attr('class')));\n\n $(document.body).append(proxy);\n proxy.css('position', 'absolute');\n proxy.css(itemDragging.offset());\n proxy.width(itemDragging.outerWidth());\n proxy.height(itemDragging.outerHeight());\n itemDragging.addClass(config.itemMovingClass);\n updateProxy(itemDragging);\n\n // Start drag.\n drag.start(event, proxy, dragMove, dragEnd);\n\n };\n\n var dragMove = function() {\n var list = itemDragging.closest(config.list);\n var closestItem = null;\n var closestDistance = null;\n list.find(config.item).each(function(index, element) {\n var distance = distanceBetweenElements(element, proxy);\n if (closestItem === null || distance < closestDistance) {\n closestItem = $(element);\n closestDistance = distance;\n }\n });\n\n if (closestItem[0] === itemDragging[0]) {\n return;\n }\n var offsetValue = 0;\n // Set offset depending on if item is being dragged downwards/upwards.\n if (midY(proxy) < midY(closestItem)) {\n offsetValue = 20;\n window.console.log(\"For midY(proxy) < midY(closestItem) offset is: \" + offsetValue);\n } else {\n offsetValue = -20;\n window.console.log(\"For midY(proxy) < midY(closestItem) offset is: \" + offsetValue);\n }\n if (midY(proxy) + offsetValue < midY(closestItem)) {\n itemDragging.insertBefore(closestItem);\n } else {\n itemDragging.insertAfter(closestItem);\n }\n updateProxy(itemDragging);\n };\n\n /**\n * Update proxy's position.\n * @param {jQuery} itemDragging\n */\n var updateProxy = function(itemDragging) {\n var list = itemDragging.closest('ol, ul');\n var items = list.find('li');\n var count = items.length;\n for (var i = 0; i < count; ++i) {\n if (itemDragging[0] === items[i]) {\n proxy.find('li').attr('value', i + 1);\n break;\n }\n }\n };\n\n /**\n * It outer and inner are two CSS selectors, which may contain commas,\n * then combine them safely. So combineSelectors('a, b', 'c, d')\n * gives 'a c, a d, b c, b d'.\n * @param {Selector} outer\n * @param {Selector} inner\n * @returns {string}\n */\n var combineSelectors = function(outer, inner) {\n var combined = [];\n outer.split(',').forEach(function(firstSelector) {\n inner.split(',').forEach(function(secondSelector) {\n combined.push(firstSelector.trim() + ' ' + secondSelector.trim());\n });\n });\n return combined.join(', ');\n };\n\n var dragEnd = function(x, y) {\n if (typeof config.reorderEnd !== 'undefined') {\n config.reorderEnd(itemDragging.closest(config.list), itemDragging);\n }\n\n var newOrder = getCurrentOrder();\n if (!arrayEquals(originalOrder, newOrder)) {\n // Order has changed, call the callback.\n config.reorderDone(itemDragging.closest(config.list), itemDragging, newOrder);\n\n } else if (new Date().getTime() - dragStart.time < 500 &&\n Math.abs(dragStart.x - x) < 10 && Math.abs(dragStart.y - y) < 10) {\n // This was really a click. Set the focus on the current item.\n itemDragging[0].focus();\n }\n proxy.remove();\n proxy = null;\n itemDragging.removeClass(config.itemMovingClass);\n itemDragging = null;\n dragStart = null;\n };\n\n /**\n * Items can be moved and placed using certain keys.\n * Tab for tabbing though and choose the item to be moved\n * space, arrow-right arrow-down for moving current element forewards.\n * arrow-right arrow-down for moving the current element backwards.\n * @param {Object} e the event\n * @param {jQuery} current the current moving item\n */\n var itemMovedByKeyboard = function(e, current) {\n switch (e.keyCode) {\n case keys.space:\n case keys.arrowRight:\n case keys.arrowDown:\n e.preventDefault();\n e.stopPropagation();\n var next = current.next();\n if (next.length) {\n next.insertBefore(current);\n }\n break;\n\n case keys.arrowLeft:\n case keys.arrowUp:\n e.preventDefault();\n e.stopPropagation();\n var prev = current.prev();\n if (prev.length) {\n prev.insertAfter(current);\n }\n break;\n }\n };\n\n /**\n * Get the x-position of the middle of the DOM node represented by the given jQuery object.\n * @param {jQuery} jQuery wrapping a DOM node.\n * @returns {number} Number the x-coordinate of the middle (left plus half outerWidth).\n */\n var midX = function(jQuery) {\n return jQuery.offset().left + jQuery.outerWidth() / 2;\n };\n\n /**\n * Get the y-position of the middle of the DOM node represented by the given jQuery object.\n * @param {jQuery} jQuery wrapping a DOM node.\n * @returns {number} Number the y-coordinate of the middle (top plus half outerHeight).\n */\n var midY = function(jQuery) {\n return jQuery.offset().top + jQuery.outerHeight() / 2;\n };\n\n /**\n * Calculate the distance between the centres of two elements.\n * @param {Selector|Element|jQuery} element1 selector, element or jQuery.\n * @param {Selector|Element|jQuery} element2 selector, element or jQuery.\n * @return {number} number the distance in pixels.\n */\n var distanceBetweenElements = function(element1, element2) {\n var e1 = $(element1);\n var e2 = $(element2);\n var dx = midX(e1) - midX(e2);\n var dy = midY(e1) - midY(e2);\n return Math.sqrt(dx * dx + dy * dy);\n };\n\n /**\n * Get the current order of the list containing itemDragging.\n * @returns {Array} Array of strings, the id of each element in order.\n */\n var getCurrentOrder = function() {\n return (itemDragging || itemMoving).closest(config.list).find(config.item).map(\n function(index, item) {\n return config.idGetter(item);\n }).get();\n };\n\n /**\n * Compare two arrays, which just contain simple values like ints or strings,\n * to see if they are equal.\n * @param {Array} a1 first array.\n * @param {Array} a2 second array.\n * @return {Boolean} boolean true if they both contain the same elements in the same order, else false.\n */\n var arrayEquals = function(a1, a2) {\n return a1.length === a2.length &&\n a1.every(function(v, i) {\n return v === a2[i];\n });\n };\n config.itemInPage = combineSelectors(config.list, config.item);\n\n // AJAX for section drag and click-to-move.\n $(config.list).on('mousedown touchstart', config.item, function(event) {\n var details = drag.prepare(event);\n if (details.start) {\n startDrag(event, details);\n }\n });\n\n $(config.list).on('keydown', config.item, function(event) {\n itemMoving = $(event.currentTarget).closest(config.itemInPage);\n originalOrder = getCurrentOrder();\n itemMovedByKeyboard(event, itemMoving);\n var newOrder = getCurrentOrder();\n if (!arrayEquals(originalOrder, newOrder)) {\n // Order has changed, call the callback.\n config.reorderDone(itemMoving.closest(config.list), itemMoving, newOrder);\n }\n });\n\n // Make the items tabbable.\n $(config.itemInPage).attr('tabindex', '0');\n }\n\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 static init(sortableid, responseid) {\n new DragReorder({\n list: 'ul#' + sortableid,\n item: 'li.sortableitem',\n proxyHtml: '
' +\n '
  • ' +\n '%%ITEM_HTML%%
',\n itemMovingClass: \"current-drop\",\n idGetter: function(item) {\n return $(item).attr('id');\n },\n nameGetter: function(item) {\n return $(item).text;\n },\n reorderStart: function() {\n // Do nothing.\n },\n reorderEnd: function() {\n // Do nothing.\n },\n reorderDone: function(list, item, newOrder) {\n $('input#' + responseid)[0].value = newOrder.join(',');\n }\n });\n }\n}\n"],"names":["DragReorder","constructor","config","outer","inner","combined","dragStart","originalOrder","itemDragging","itemMoving","proxy","orderList","dragMove","list","closest","closestItem","closestDistance","find","item","each","index","element","distance","distanceBetweenElements","offsetValue","midY","window","console","log","insertBefore","insertAfter","updateProxy","items","count","length","i","attr","dragEnd","x","y","reorderEnd","newOrder","getCurrentOrder","arrayEquals","Date","getTime","time","Math","abs","focus","reorderDone","remove","removeClass","itemMovingClass","midX","jQuery","offset","left","outerWidth","top","outerHeight","element1","element2","e1","e2","dx","dy","sqrt","map","idGetter","get","a1","a2","every","v","itemInPage","split","forEach","firstSelector","secondSelector","push","trim","join","on","event","details","drag","prepare","start","currentTarget","reorderStart","proxyHtml","replace","html","document","body","append","css","width","height","addClass","startDrag","e","current","keyCode","keys","space","arrowRight","arrowDown","preventDefault","stopPropagation","next","arrowLeft","arrowUp","prev","itemMovedByKeyboard","sortableid","responseid","nameGetter","text","value"],"mappings":"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"} \ No newline at end of file diff --git a/question/type/ordering/amd/build/reorder.min.js b/question/type/ordering/amd/build/reorder.min.js deleted file mode 100644 index 653a73011c8..00000000000 --- a/question/type/ordering/amd/build/reorder.min.js +++ /dev/null @@ -1,3 +0,0 @@ -define("qtype_ordering/reorder",["jquery","qtype_ordering/drag_reorder"],(function($,DragReorder){return{init:function(sortableid,responseid){new DragReorder({list:"ul#"+sortableid,item:"li.sortableitem",proxyHtml:'
  • %%ITEM_HTML%%
',itemMovingClass:"current-drop",idGetter:function(item){return $(item).attr("id")},nameGetter:function(item){return $(item).text},reorderStart:function(){},reorderEnd:function(){},reorderDone:function(list,item,newOrder){$("input#"+responseid)[0].value=newOrder.join(",")}})}}})); - -//# sourceMappingURL=reorder.min.js.map \ No newline at end of file diff --git a/question/type/ordering/amd/build/reorder.min.js.map b/question/type/ordering/amd/build/reorder.min.js.map deleted file mode 100644 index 85d556564ad..00000000000 --- a/question/type/ordering/amd/build/reorder.min.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"reorder.min.js","sources":["../src/reorder.js"],"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: '
' +\n '
  • ' +\n '%%ITEM_HTML%%
',\n itemMovingClass: \"current-drop\",\n idGetter: function(item) {\n return $(item).attr('id');\n },\n nameGetter: function(item) {\n return $(item).text;\n },\n reorderStart: function() {\n // Do nothing.\n },\n reorderEnd: function() {\n // Do nothing.\n },\n reorderDone: function(list, item, newOrder) {\n $('input#' + responseid)[0].value = newOrder.join(',');\n }\n });\n }\n };\n});\n"],"names":["define","$","DragReorder","init","sortableid","responseid","list","item","proxyHtml","itemMovingClass","idGetter","attr","nameGetter","text","reorderStart","reorderEnd","reorderDone","newOrder","value","join"],"mappings":"AAAAA,gCAAO,CAAC,SAAU,gCAAgC,SAASC,EAAGC,mBACnD,CAOHC,KAAM,SAASC,WAAYC,gBACnBH,YAAY,CACZI,KAAM,MAAQF,WACdG,KAAM,kBACNC,UAAW,gJAGXC,gBAAiB,eACjBC,SAAU,SAASH,aACJN,EAAEM,MAAMI,KAAK,OAE5BC,WAAY,SAASL,aACNN,EAAEM,MAAMM,MAEvBC,aAAc,aAGdC,WAAY,aAGZC,YAAa,SAASV,KAAMC,KAAMU,UAC9BhB,EAAE,SAAWI,YAAY,GAAGa,MAAQD,SAASE,KAAK"} \ No newline at end of file diff --git a/question/type/ordering/amd/src/drag_reorder.js b/question/type/ordering/amd/src/drag_reorder.js index 1459bfd1d88..a1ee94fde8e 100644 --- a/question/type/ordering/amd/src/drag_reorder.js +++ b/question/type/ordering/amd/src/drag_reorder.js @@ -24,19 +24,13 @@ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -/** - * @module qtype_ordering/drag_reorder - */ -define([ - 'jquery', - 'core/dragdrop', - 'core/key_codes' -], function( - $, - drag, - keys -) { +'use strict'; +import $ from 'jquery'; +import drag from 'core/dragdrop'; +import keys from 'core/key_codes'; + +export default class DragReorder { /** * Constructor. * @@ -104,7 +98,7 @@ define([ * * @param {Object} config As above. */ - return function(config) { + constructor(config) { var dragStart = null, // Information about when and where the drag started. originalOrder = null, // Array of ids. itemDragging = null, // Item being moved by dragging (jQuery object). @@ -169,7 +163,7 @@ define([ offsetValue = -20; window.console.log("For midY(proxy) < midY(closestItem) offset is: " + offsetValue); } - if (midY(proxy) + offsetValue < midY(closestItem)) { + if (midY(proxy) + offsetValue < midY(closestItem)) { itemDragging.insertBefore(closestItem); } else { itemDragging.insertAfter(closestItem); @@ -304,9 +298,9 @@ define([ */ var getCurrentOrder = function() { return (itemDragging || itemMoving).closest(config.list).find(config.item).map( - function(index, item) { - return config.idGetter(item); - }).get(); + function(index, item) { + return config.idGetter(item); + }).get(); }; /** @@ -345,5 +339,37 @@ define([ // Make the items tabbable. $(config.itemInPage).attr('tabindex', '0'); - }; -}); + } + + /** + * Initialise one ordering question. + * + * @param {String} sortableid id of ul for this question. + * @param {String} responseid id of hidden field for this question. + */ + static init(sortableid, responseid) { + new DragReorder({ + list: 'ul#' + sortableid, + item: 'li.sortableitem', + proxyHtml: '
' + + '
  • ' + + '%%ITEM_HTML%%
', + itemMovingClass: "current-drop", + idGetter: function(item) { + return $(item).attr('id'); + }, + nameGetter: function(item) { + return $(item).text; + }, + reorderStart: function() { + // Do nothing. + }, + reorderEnd: function() { + // Do nothing. + }, + reorderDone: function(list, item, newOrder) { + $('input#' + responseid)[0].value = newOrder.join(','); + } + }); + } +} diff --git a/question/type/ordering/amd/src/reorder.js b/question/type/ordering/amd/src/reorder.js deleted file mode 100644 index 73cf57dfc4b..00000000000 --- a/question/type/ordering/amd/src/reorder.js +++ /dev/null @@ -1,35 +0,0 @@ -define(['jquery', 'qtype_ordering/drag_reorder'], function($, DragReorder) { - return { - /** - * Initialise one ordering question. - * - * @param {String} sortableid id of ul for this question. - * @param {String} responseid id of hidden field for this question. - */ - init: function(sortableid, responseid) { - new DragReorder({ - list: 'ul#' + sortableid, - item: 'li.sortableitem', - proxyHtml: '
' + - '
  • ' + - '%%ITEM_HTML%%
', - itemMovingClass: "current-drop", - idGetter: function(item) { - return $(item).attr('id'); - }, - nameGetter: function(item) { - return $(item).text; - }, - reorderStart: function() { - // Do nothing. - }, - reorderEnd: function() { - // Do nothing. - }, - reorderDone: function(list, item, newOrder) { - $('input#' + responseid)[0].value = newOrder.join(','); - } - }); - } - }; -}); diff --git a/question/type/ordering/renderer.php b/question/type/ordering/renderer.php index 1fbc1e63f38..1bf1eb1f24f 100644 --- a/question/type/ordering/renderer.php +++ b/question/type/ordering/renderer.php @@ -104,7 +104,7 @@ class qtype_ordering_renderer extends qtype_with_combined_feedback_renderer { } else { $sortableitem = 'sortableitem'; $params = array($sortableid, $responseid); - $this->page->requires->js_call_amd('qtype_ordering/reorder', 'init', $params); + $this->page->requires->js_call_amd('qtype_ordering/drag_reorder', 'init', $params); } $result .= html_writer::tag('div', $question->format_questiontext($qa), array('class' => 'qtext'));