From c2f30eeddbb3a035c42595541aed8dab06be2eee Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Sun, 22 Feb 2015 15:34:27 +0800 Subject: [PATCH] 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 | 1 + lib/amd/src/dragdrop-reorder.js | 89 +++++++++++++++++++ .../moodle-core-dragdrop-reorder-debug.js | 72 +++++++++++++++ .../moodle-core-dragdrop-reorder-min.js | 1 + .../moodle-core-dragdrop-reorder.js | 72 +++++++++++++++ lib/yui/src/dragdrop-reorder/build.json | 10 +++ .../dragdrop-reorder/js/dragdropreorder.js | 67 ++++++++++++++ .../meta/dragdrop-reorder.json | 7 ++ 8 files changed, 319 insertions(+) create mode 100644 lib/amd/build/dragdrop-reorder.min.js create mode 100644 lib/amd/src/dragdrop-reorder.js create mode 100644 lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-debug.js create mode 100644 lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-min.js create mode 100644 lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder.js create mode 100644 lib/yui/src/dragdrop-reorder/build.json create mode 100644 lib/yui/src/dragdrop-reorder/js/dragdropreorder.js create mode 100644 lib/yui/src/dragdrop-reorder/meta/dragdrop-reorder.json diff --git a/lib/amd/build/dragdrop-reorder.min.js b/lib/amd/build/dragdrop-reorder.min.js new file mode 100644 index 00000000000..648fcb62481 --- /dev/null +++ b/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)})})})}}}); \ No newline at end of file diff --git a/lib/amd/src/dragdrop-reorder.js b/lib/amd/src/dragdrop-reorder.js new file mode 100644 index 00000000000..6e00919639f --- /dev/null +++ b/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 . + +/** + * 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 + * @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) + }); + }); + }); + } + + }; +}); diff --git a/lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-debug.js b/lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-debug.js new file mode 100644 index 00000000000..7db86f516e2 --- /dev/null +++ b/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"]}); diff --git a/lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-min.js b/lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder-min.js new file mode 100644 index 00000000000..1b051915fb6 --- /dev/null +++ b/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"]}); diff --git a/lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder.js b/lib/yui/build/moodle-core-dragdrop-reorder/moodle-core-dragdrop-reorder.js new file mode 100644 index 00000000000..7db86f516e2 --- /dev/null +++ b/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"]}); diff --git a/lib/yui/src/dragdrop-reorder/build.json b/lib/yui/src/dragdrop-reorder/build.json new file mode 100644 index 00000000000..d83b27b1890 --- /dev/null +++ b/lib/yui/src/dragdrop-reorder/build.json @@ -0,0 +1,10 @@ +{ + "name": "moodle-core-dragdrop-reorder", + "builds": { + "moodle-core-dragdrop-reorder": { + "jsfiles": [ + "dragdropreorder.js" + ] + } + } +} diff --git a/lib/yui/src/dragdrop-reorder/js/dragdropreorder.js b/lib/yui/src/dragdrop-reorder/js/dragdropreorder.js new file mode 100644 index 00000000000..8a25f87f038 --- /dev/null +++ b/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); +}; diff --git a/lib/yui/src/dragdrop-reorder/meta/dragdrop-reorder.json b/lib/yui/src/dragdrop-reorder/meta/dragdrop-reorder.json new file mode 100644 index 00000000000..a2a6b828259 --- /dev/null +++ b/lib/yui/src/dragdrop-reorder/meta/dragdrop-reorder.json @@ -0,0 +1,7 @@ +{ + "moodle-core-dragdrop-reorder": { + "requires": [ + "moodle-core-dragdrop" + ] + } +}