MDL-49264 Javascript: Add a simple version of dragdrop reordering

This is done in YUI with an AMD wrapper.

lib/amd/build/dragdrop-reorder.min.js

@@ -0,0 +1 @@
+define(["core/str","core/yui"],function(a,b){var c=function(a){var b=a.drag.get("node"),c=a.drop.get("node");this.callback(b.getDOMNode(),c.getDOMNode())};return{dragdrop:function(d,e,f,g,h,i,j,k){a.get_strings([{key:"emptydragdropregion",component:"moodle"},{key:"movecontent",component:"moodle"},{key:"tocontent",component:"moodle"}]).done(function(){b.use("moodle-core-dragdrop-reorder",function(){var a={callback:k};M.core.dragdrop_reorder({group:d,dragHandleText:e,sameNodeText:f,parentNodeText:g,sameNodeClass:h,parentNodeClass:i,dragHandleInsertClass:j,callback:b.bind(c,a)})})})}}});

lib/amd/src/dragdrop-reorder.js

@@ -0,0 +1,89 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Wrapper for the YUI M.core.dragdrop class. Allows us to
+ * use the YUI version in AMD code until it is replaced.
+ *
+ * @module     core/dragdrop-reorder
+ * @package    core
+ * @copyright  2015 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['core/str', 'core/yui'], function(str, Y) {
+
+    // Private variables and functions.
+
+    /**
+     * Translate the drophit event from YUI
+     * into simple drag and drop nodes.
+     * @param {Y.Event} e The yui drop event.
+     */
+    var proxyCallback = function(e) {
+        var dragNode = e.drag.get('node');
+        var dropNode = e.drop.get('node');
+        this.callback(dragNode.getDOMNode(), dropNode.getDOMNode());
+    };
+
+    return /** @alias module:core/dragdrop-reorder */ {
+        // Public variables and functions.
+        /**
+         * Create an instance of M.core.dragdrop
+         *
+         * @param {string} group Unique string to identify this interaction.
+         * @param {string} dragHandleText Alt text for the drag handle.
+         * @param {string} sameNodeText Used in keyboard drag drop for the list of items target.
+         * @param {string} parentNodeText Used in keyboard drag drop for the parent target.
+         * @param {string} sameNodeClass class used to find the each of the list of items.
+         * @param {string} parentNodeClass class used to find the container for the list of items.
+         * @param {string} dragHandleInsertClass class used to find the location to insert the drag handles.
+         * @param {function} callback Drop hit handler.
+         */
+        dragdrop: function(group,
+                           dragHandleText,
+                           sameNodeText,
+                           parentNodeText,
+                           sameNodeClass,
+                           parentNodeClass,
+                           dragHandleInsertClass,
+                           callback) {
+            // Here we are wrapping YUI. This allows us to start transitioning, but
+            // wait for a good alternative without having inconsistent UIs.
+            str.get_strings([
+                { key: 'emptydragdropregion', component: 'moodle' },
+                { key: 'movecontent', component: 'moodle' },
+                { key: 'tocontent', component: 'moodle' },
+            ]).done( function () {
+                Y.use('moodle-core-dragdrop-reorder', function () {
+
+                    var context = {
+                        callback: callback
+                    };
+                    M.core.dragdrop_reorder({
+                        group: group,
+                        dragHandleText: dragHandleText,
+                        sameNodeText: sameNodeText,
+                        parentNodeText: parentNodeText,
+                        sameNodeClass: sameNodeClass,
+                        parentNodeClass: parentNodeClass,
+                        dragHandleInsertClass: dragHandleInsertClass,
+                        callback: Y.bind(proxyCallback, context)
+                    });
+                });
+            });
+        }
+
+    };
+});

lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-debug.js

@@ -0,0 +1,72 @@
+YUI.add('moodle-core-dragdrop-reorder', function (Y, NAME) {
+
+/**
+ * Simple drag and drop.
+ *
+ * Used when we just want a list of things that can be re-ordered by dragging.
+ *
+ * @class M.core.dragdrop_reorder
+ * @constructor
+ * @extends M.core.dragdrop
+ */
+var DRAGREORDER = function() {
+    DRAGREORDER.superclass.constructor.apply(this, arguments);
+};
+
+var CSS = {
+    EDITINGMOVE: 'editing_move',
+    ICONCLASS: 'iconsmall'
+};
+Y.extend(DRAGREORDER, M.core.dragdrop, {
+    initializer: function(args) {
+        if (Y.one('.' + args.parentNodeClass).all('.' + args.dragHandleInsertClass).size() <= 1) {
+            // We can't re-order when there is only one item.
+            return;
+        }
+        // Set group for parent class
+        this.groups = [args.group];
+        this.samenodeclass = args.sameNodeClass;
+        this.parentnodeclass = args.parentNodeClass;
+        this.draghandleinsertclass = args.dragHandleInsertClass;
+        this.draghandle = this.get_drag_handle(args.dragHandleText,
+                CSS.EDITINGMOVE, CSS.ICONCLASS, true);
+
+        this.samenodelabel = args.sameNodeLabel;
+        this.parentnodelabel = args.parentNodeLabel;
+        this.callback = args.callback;
+
+        var delegate = new Y.DD.Delegate({
+            container: '.' + args.parentNodeClass,
+            nodes: '.' + args.sameNodeClass,
+            target: true,
+            handles: ['.' + CSS.EDITINGMOVE],
+            dragConfig: {groups: this.groups}
+        });
+
+        delegate.dd.plug(Y.Plugin.DDProxy);
+
+        Y.one('.' + args.parentNodeClass)
+         .all('.' + args.dragHandleInsertClass)
+         .each(
+            function (node) {
+                node.insert(this.draghandle.cloneNode(true));
+            } , this);
+    },
+
+    drop_hit: function(e) {
+        this.callback(e);
+    }
+
+}, {
+    NAME: 'core-dragdrop-reorder',
+    ATTRS: {
+    }
+});
+
+M.core = M.core || {};
+M.core.dragdrop_reorder = function(params) {
+    new DRAGREORDER(params);
+};
+
+
+}, '@VERSION@', {"requires": ["moodle-core-dragdrop"]});

lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-min.js

@@ -0,0 +1 @@
+YUI.add("moodle-core-dragdrop-reorder",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)},r={EDITINGMOVE:"editing_move",ICONCLASS:"iconsmall"};e.extend(n,M.core.dragdrop,{initializer:function(t){if(e.one("."+t.parentNodeClass).all("."+t.dragHandleInsertClass).size()<=1)return;this.groups=[t.group],this.samenodeclass=t.sameNodeClass,this.parentnodeclass=t.parentNodeClass,this.draghandleinsertclass=t.dragHandleInsertClass,this.draghandle=this.get_drag_handle(t.dragHandleText,r.EDITINGMOVE,r.ICONCLASS,!0),this.samenodelabel=t.sameNodeLabel,this.parentnodelabel=t.parentNodeLabel,this.callback=t.callback;var n=new e.DD.Delegate({container:"."+t.parentNodeClass,nodes:"."+t.sameNodeClass,target:!0,handles:["."+r.EDITINGMOVE],dragConfig:{groups:this.groups}});n.dd.plug(e.Plugin.DDProxy),e.one("."+t.parentNodeClass).all("."+t.dragHandleInsertClass).each(function(e){e.insert(this.draghandle.cloneNode(!0))},this)},drop_hit:function(e){this.callback(e)}},{NAME:"core-dragdrop-reorder",ATTRS:{}}),M.core=M.core||{},M.core.dragdrop_reorder=function(e){new n(e)}},"@VERSION@",{requires:["moodle-core-dragdrop"]});

lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder.js

@@ -0,0 +1,72 @@
+YUI.add('moodle-core-dragdrop-reorder', function (Y, NAME) {
+
+/**
+ * Simple drag and drop.
+ *
+ * Used when we just want a list of things that can be re-ordered by dragging.
+ *
+ * @class M.core.dragdrop_reorder
+ * @constructor
+ * @extends M.core.dragdrop
+ */
+var DRAGREORDER = function() {
+    DRAGREORDER.superclass.constructor.apply(this, arguments);
+};
+
+var CSS = {
+    EDITINGMOVE: 'editing_move',
+    ICONCLASS: 'iconsmall'
+};
+Y.extend(DRAGREORDER, M.core.dragdrop, {
+    initializer: function(args) {
+        if (Y.one('.' + args.parentNodeClass).all('.' + args.dragHandleInsertClass).size() <= 1) {
+            // We can't re-order when there is only one item.
+            return;
+        }
+        // Set group for parent class
+        this.groups = [args.group];
+        this.samenodeclass = args.sameNodeClass;
+        this.parentnodeclass = args.parentNodeClass;
+        this.draghandleinsertclass = args.dragHandleInsertClass;
+        this.draghandle = this.get_drag_handle(args.dragHandleText,
+                CSS.EDITINGMOVE, CSS.ICONCLASS, true);
+
+        this.samenodelabel = args.sameNodeLabel;
+        this.parentnodelabel = args.parentNodeLabel;
+        this.callback = args.callback;
+
+        var delegate = new Y.DD.Delegate({
+            container: '.' + args.parentNodeClass,
+            nodes: '.' + args.sameNodeClass,
+            target: true,
+            handles: ['.' + CSS.EDITINGMOVE],
+            dragConfig: {groups: this.groups}
+        });
+
+        delegate.dd.plug(Y.Plugin.DDProxy);
+
+        Y.one('.' + args.parentNodeClass)
+         .all('.' + args.dragHandleInsertClass)
+         .each(
+            function (node) {
+                node.insert(this.draghandle.cloneNode(true));
+            } , this);
+    },
+
+    drop_hit: function(e) {
+        this.callback(e);
+    }
+
+}, {
+    NAME: 'core-dragdrop-reorder',
+    ATTRS: {
+    }
+});
+
+M.core = M.core || {};
+M.core.dragdrop_reorder = function(params) {
+    new DRAGREORDER(params);
+};
+
+
+}, '@VERSION@', {"requires": ["moodle-core-dragdrop"]});

lib/yui/src/dragdrop-reorder/build.json

@@ -0,0 +1,10 @@
+{
+    "name": "moodle-core-dragdrop-reorder",
+    "builds": {
+        "moodle-core-dragdrop-reorder": {
+            "jsfiles": [
+                "dragdropreorder.js"
+            ]
+        }
+    }
+}

lib/yui/src/dragdrop-reorder/js/dragdropreorder.js

@@ -0,0 +1,67 @@
+/**
+ * Simple drag and drop.
+ *
+ * Used when we just want a list of things that can be re-ordered by dragging.
+ *
+ * @class M.core.dragdrop_reorder
+ * @constructor
+ * @extends M.core.dragdrop
+ */
+var DRAGREORDER = function() {
+    DRAGREORDER.superclass.constructor.apply(this, arguments);
+};
+
+var CSS = {
+    EDITINGMOVE: 'editing_move',
+    ICONCLASS: 'iconsmall'
+};
+Y.extend(DRAGREORDER, M.core.dragdrop, {
+    initializer: function(args) {
+        if (Y.one('.' + args.parentNodeClass).all('.' + args.dragHandleInsertClass).size() <= 1) {
+            // We can't re-order when there is only one item.
+            return;
+        }
+        // Set group for parent class
+        this.groups = [args.group];
+        this.samenodeclass = args.sameNodeClass;
+        this.parentnodeclass = args.parentNodeClass;
+        this.draghandleinsertclass = args.dragHandleInsertClass;
+        this.draghandle = this.get_drag_handle(args.dragHandleText,
+                CSS.EDITINGMOVE, CSS.ICONCLASS, true);
+
+        this.samenodelabel = args.sameNodeLabel;
+        this.parentnodelabel = args.parentNodeLabel;
+        this.callback = args.callback;
+
+        var delegate = new Y.DD.Delegate({
+            container: '.' + args.parentNodeClass,
+            nodes: '.' + args.sameNodeClass,
+            target: true,
+            handles: ['.' + CSS.EDITINGMOVE],
+            dragConfig: {groups: this.groups}
+        });
+
+        delegate.dd.plug(Y.Plugin.DDProxy);
+
+        Y.one('.' + args.parentNodeClass)
+         .all('.' + args.dragHandleInsertClass)
+         .each(
+            function (node) {
+                node.insert(this.draghandle.cloneNode(true));
+            } , this);
+    },
+
+    drop_hit: function(e) {
+        this.callback(e);
+    }
+
+}, {
+    NAME: 'core-dragdrop-reorder',
+    ATTRS: {
+    }
+});
+
+M.core = M.core || {};
+M.core.dragdrop_reorder = function(params) {
+    new DRAGREORDER(params);
+};

lib/yui/src/dragdrop-reorder/meta/dragdrop-reorder.json

@@ -0,0 +1,7 @@
+{
+    "moodle-core-dragdrop-reorder": {
+        "requires": [
+            "moodle-core-dragdrop"
+        ]
+    }
+}