Permalink
Browse files

Backlog: Make new stories draggable

Tell the YUI drag-and-drop manager
about new items in the backlog.
  • Loading branch information...
1 parent ba3e9d9 commit f898c3fa40ce2aa3fff5d45d0d0cfef532dcbb1c @exclsr committed Mar 1, 2014
Showing with 111 additions and 91 deletions.
  1. +111 −91 app/public/js/controllers/home.js
View
202 app/public/js/controllers/home.js
@@ -1,5 +1,6 @@
function HomeCtrl($scope, $timeout, $document) {
+ var thisY = undefined;
var nextStoryId = undefined;
var getNewStoryId = function() {
// TODO: Should move to the server, obvi,
@@ -60,8 +61,111 @@ function HomeCtrl($scope, $timeout, $document) {
stories.unshift(newStory);
$scope.newStory = undefined;
- // TODO:
- // activateDragAndDrop();
+ $timeout(makeStoriesDraggable, 0);
+ };
+
+ var attachToDragEvents = function (Y) {
+ // Show a semi-transparent version of the story selected.
+ Y.DD.DDM.on('drag:start', function(e) {
+ //Get our drag object
+ var drag = e.target;
+ //Set some styles here
+ drag.get('node').setStyle('opacity', '.25');
+ drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
+ drag.get('dragNode').setStyles({
+ opacity: '.5',
+ borderColor: drag.get('node').getStyle('borderColor'),
+ backgroundColor: drag.get('node').getStyle('backgroundColor')
+ });
+ });
+
+ // Revert styles on drag end
+ Y.DD.DDM.on('drag:end', function(e) {
+ var drag = e.target;
+ //Put our styles back
+ drag.get('node').setStyles({
+ visibility: '',
+ opacity: '1'
+ });
+ });
+
+
+ // Store stuff while we're dragging
+ var lastY = 0;
+ Y.DD.DDM.on('drag:drag', function(e) {
+ //Get the last y point
+ var y = e.target.lastXY[1];
+ //is it greater than the lastY var?
+ if (y < lastY) {
+ //We are going up
+ goingUp = true;
+ } else {
+ //We are going down.
+ goingUp = false;
+ }
+ //Cache for next check
+ lastY = y;
+ });
+
+ Y.DD.DDM.on('drop:over', function(e) {
+ //Get a reference to our drag and drop nodes
+ var drag = e.drag.get('node'),
+ drop = e.drop.get('node');
+
+ //Are we dropping on a div node?
+ if (drop.get('tagName').toLowerCase() === 'div') {
+ //Are we not going up?
+ if (!goingUp) {
+ drop = drop.get('nextSibling');
+ }
+ //Add the node to this list
+ e.drop.get('node').get('parentNode').insertBefore(drag, drop);
+ //Resize this nodes shim, so we can drop on it later.
+ e.drop.sizeShim();
+ }
+ });
+
+ Y.DD.DDM.on('drag:drophit', function(e) {
+ var drop = e.drop.get('node'),
+ drag = e.drag.get('node');
+
+ //if we are not on an div, we must have been dropped on ...
+ // ... well, not sure this part of the demo applies to our use case.
+ if (drop.get('tagName').toLowerCase() !== 'div') {
+ if (!drop.contains(drag)) {
+ drop.appendChild(drag);
+ }
+ }
+ });
+ }
+
+ var makeStoriesDraggableCore = function(Y) {
+ // Allow stories to be dragged
+ // TODO: We should probably make a method for making
+ // a specific item draggable, in the case of adding
+ // a new item to the backlog.
+ var storyElements = Y.Node.all('.story');
+ storyElements.each(function (v, k) {
+ // Only add draggable stuff once
+ var draggableClassName = "cb-draggable";
+ if (!v.hasClass(draggableClassName)) {
+ v.addClass(draggableClassName);
+ var dd = new Y.DD.Drag({
+ node: v,
+ target: {
+ padding: '0 0 0 20'
+ }
+ }).plug(Y.Plugin.DDProxy, {
+ moveOnEnd: false
+ }).plug(Y.Plugin.DDConstrained, {
+ // whatever. no constraints for now. maybe later.
+ });
+ }
+ });
+ };
+
+ var makeStoriesDraggable = function () {
+ makeStoriesDraggableCore(thisY);
};
var activateDragAndDrop = function () {
@@ -70,95 +174,11 @@ function HomeCtrl($scope, $timeout, $document) {
$timeout(function () {
// Use the demo from http://yuilibrary.com/yui/docs/dd/list-drag.html
YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function (Y) {
-
- // Allow stories to be dragged
- var storyElements = Y.Node.all('.story');
- storyElements.each(function (v, k) {
- var dd = new Y.DD.Drag({
- node: v,
- target: {
- padding: '0 0 0 20'
- }
- }).plug(Y.Plugin.DDProxy, {
- moveOnEnd: false
- }).plug(Y.Plugin.DDConstrained, {
- // whatever. no constraints for now. maybe later.
- });
- });
-
-
- // Show a semi-transparent version of the story selected.
- Y.DD.DDM.on('drag:start', function(e) {
- //Get our drag object
- var drag = e.target;
- //Set some styles here
- drag.get('node').setStyle('opacity', '.25');
- drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
- drag.get('dragNode').setStyles({
- opacity: '.5',
- borderColor: drag.get('node').getStyle('borderColor'),
- backgroundColor: drag.get('node').getStyle('backgroundColor')
- });
- });
-
- // Revert styles on drag end
- Y.DD.DDM.on('drag:end', function(e) {
- var drag = e.target;
- //Put our styles back
- drag.get('node').setStyles({
- visibility: '',
- opacity: '1'
- });
- });
-
-
- // Store stuff while we're dragging
- var lastY = 0;
- Y.DD.DDM.on('drag:drag', function(e) {
- //Get the last y point
- var y = e.target.lastXY[1];
- //is it greater than the lastY var?
- if (y < lastY) {
- //We are going up
- goingUp = true;
- } else {
- //We are going down.
- goingUp = false;
- }
- //Cache for next check
- lastY = y;
- });
-
- Y.DD.DDM.on('drop:over', function(e) {
- //Get a reference to our drag and drop nodes
- var drag = e.drag.get('node'),
- drop = e.drop.get('node');
-
- //Are we dropping on a div node?
- if (drop.get('tagName').toLowerCase() === 'div') {
- //Are we not going up?
- if (!goingUp) {
- drop = drop.get('nextSibling');
- }
- //Add the node to this list
- e.drop.get('node').get('parentNode').insertBefore(drag, drop);
- //Resize this nodes shim, so we can drop on it later.
- e.drop.sizeShim();
- }
- });
-
- Y.DD.DDM.on('drag:drophit', function(e) {
- var drop = e.drop.get('node'),
- drag = e.drag.get('node');
-
- //if we are not on an div, we must have been dropped on ...
- // ... well, not sure this part of the demo applies to our use case.
- if (drop.get('tagName').toLowerCase() !== 'div') {
- if (!drop.contains(drag)) {
- drop.appendChild(drag);
- }
- }
- });
+ // keep a local instance of Y around for adding draggable
+ // objects in the future.
+ thisY = Y;
+ makeStoriesDraggableCore(thisY);
+ attachToDragEvents(thisY);
});
}, 0);
};

0 comments on commit f898c3f

Please sign in to comment.