Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added drag support for jQueryUI. #17

Closed
wants to merge 6 commits into from
+174 −61
Closed

Added drag support for jQueryUI. #17

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2db6386
Added drag support for jQueryUI.
Feb 12, 2015
1099ff0
Removed extra conditional. Moved call to animateEvents into successfu…
Feb 12, 2015
a6e6917
Defaulted draggable and drag handle to undefined. Added check for dra…
edmundquintero Feb 13, 2015
a33a545
removed 'unsupported' check and changed logic to drag off by default.
edmundquintero Feb 13, 2015
a10413a
Added build code.
edmundquintero Feb 13, 2015
89397b7
Updated console error for unsuported libraries.
edmundquintero Feb 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .jshintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"strict": true,
"undef": true,
"unused": true,
"latedef": "nofunct",

"eqnull": true,

Expand Down
116 changes: 86 additions & 30 deletions dist/packery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
columnWidth: '.packery-sizer',
itemSelector: '.packery-object',
rowHeight: '.packery-sizer',
draggable: true,
handle: '*',
draggable: undefined,
handle: undefined,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove these before merge.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing these declarations will create a need to revisit the link function in the packeryDirective.

 scope.draggable = scope.draggable || config.draggable;  
 scope.handle = scope.handle || config.handle;

timeout: 2000,
acceptedAttributes: [
'containerStyle',
Expand Down Expand Up @@ -87,36 +87,94 @@
var self = this;

self.packeryInstantiated = false;
self.packeryDraggable = false;
self.packeryDraggable = undefined;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this. undefined doesn't need to be explicitly set.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use null? I wanted to instantiate the variable in the parent scope because it will be first used/set in a child scope (setDraggable()).
I know it will naturally be 'undefined' but I wanted an explicitly set value to expect for debugging before and after its manipulation.

self.dragHandle = undefined;
self.uniqueId = new Date().getTime();
self.packery = {};

this.bindDragEvents = function(el) {
var handleSelector, handle, draggabilly;
var handleSelector, handle, draggableItem;

handleSelector = self.dragHandle;

if (handleSelector === '*') {
draggabilly = new Draggabilly(el[0]);
handle = el;
} else {
draggabilly = new Draggabilly(el[0], {
handle: handleSelector
});
handle = el.querySelectorAll(handleSelector);
try {

if( !self.packeryDraggable ) {
if( !bindDraggabilly(true) ){
bindjQueryUI(true);
}
} else if ( self.packeryDraggable === 'draggabilly' ) {
bindDraggabilly();
} else if ( self.packeryDraggable === 'jqueryui' ) {
bindjQueryUI();
} else {
window.console.error('ERROR: draggable=\''+ self.packeryDraggable +'\' is not a valid attribute.');
}

} catch(e) {
if (window.console) {
window.console.warn(e.name +' '+ e.message);
}
}

function bindDraggabilly (next) {
next = ( typeof next === 'boolean' ) ? next : false;
if (typeof window.Draggabilly !== 'undefined') {

if (!handleSelector) {
draggableItem = new window.Draggabilly(el[0]);
handle = el;
} else {
draggableItem = new window.Draggabilly(el[0], {
handle: handleSelector
});
handle = el[0].querySelectorAll(handleSelector);
}

// Init Draggabilly events
self.packery.bindDraggabillyEvents(draggableItem);
animateEvents();
return true;
} else if ( !next ) {
throw { name: 'WARNING: ', message: 'Draggabilly is undefined.' };
} else {
return false;
}
}

// Init Draggabilly events
self.packery.bindDraggabillyEvents(draggabilly);
function bindjQueryUI (next) {
next = ( typeof next === 'boolean' ) ? next : false;
if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.ui !== 'undefined') {

if (!handleSelector) {
draggableItem = angular.element(el[0]).draggable();
handle = el;
} else {
draggableItem = angular.element(el[0]).draggable({
handle: handleSelector
});
handle = el[0].querySelectorAll(handleSelector);
}

self.packery.bindUIDraggableEvents(draggableItem);
animateEvents();
return true;
} else if ( !next ) {
throw { name: 'WARNING: ', message: 'jQuery.ui is undefined.' };
} else {
return false;
}
}

// Bind animate events for touch
handle.on('mouseenter', function(){
el.addClass('hovered');
}).
on('mouseleave', function(){
el.removeClass('hovered');
});
function animateEvents () {
// Bind animate events for touch
angular.element(handle).on('mouseenter', function(){
el.addClass('hovered');
}).
on('mouseleave', function(){
el.removeClass('hovered');
});
}
};

this.createAttrObj = function (scope) {
Expand Down Expand Up @@ -150,17 +208,14 @@
self.packery.appended(el[0]);
}

if (self.packeryDraggable === true) {
self.bindDragEvents(el);
}

self.bindDragEvents(el);
el.css('visibility','visible');
$rootScope.$emit('packeryObjectPacked', el[0]);
});
};

this.setDraggable = function (handle) {
self.packeryDraggable = true;
this.setDraggable = function (dragLib, handle) {
self.packeryDraggable = dragLib;
self.dragHandle = handle;
};
};
Expand All @@ -185,7 +240,7 @@
rowHeight: '@?', // Type: Number, Selector String
transitionDuration: '@?', // Type: String

draggable: '@?', // Type: Boolean
draggable: '@?', // Type: String
handle: '@?' // Type: Boolean

// Let's come back to this one...
Expand All @@ -204,15 +259,16 @@

// Quick fix so 'false' strings don't evaluate to true
// @TODO: Check for attribute itself, not value of attribute
if (scope.draggable === 'false') { scope.draggable = false; }
if (scope.isHorizontal === 'false') { scope.isHorizontal = false; }
if (scope.isInitLayout === 'false') { scope.isInitLayout = false; }
if (scope.isOriginLeft === 'false') { scope.isOriginLeft = false; }
if (scope.isOriginTop === 'false') { scope.isOriginTop = false; }
if (scope.isResizeBound === 'false') { scope.isResizeBound = false; }

// Set global draggability
if (scope.draggable) { controller.setDraggable(scope.handle); }
if (element[0].hasAttribute('draggable')) {
controller.setDraggable(scope.draggable, scope.handle);
}

// Create object for Packery instantiation
packeryObj = controller.createAttrObj(scope);
Expand Down
2 changes: 1 addition & 1 deletion dist/packery.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

116 changes: 86 additions & 30 deletions src/packery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
columnWidth: '.packery-sizer',
itemSelector: '.packery-object',
rowHeight: '.packery-sizer',
draggable: true,
handle: '*',
draggable: undefined,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is redundant. The config is for changing defaults, but undefined is already Packery's default as well as JS's default. It can be removed here.

(Yes, you are getting this email again... I realized I commented in the dist file when I wanted to keep comments in the src one)

handle: undefined,
timeout: 2000,
acceptedAttributes: [
'containerStyle',
Expand Down Expand Up @@ -80,36 +80,94 @@
var self = this;

self.packeryInstantiated = false;
self.packeryDraggable = false;
self.packeryDraggable = undefined;
self.dragHandle = undefined;
self.uniqueId = new Date().getTime();
self.packery = {};

this.bindDragEvents = function(el) {
var handleSelector, handle, draggabilly;
var handleSelector, handle, draggableItem;

handleSelector = self.dragHandle;

if (handleSelector === '*') {
draggabilly = new Draggabilly(el[0]);
handle = el;
} else {
draggabilly = new Draggabilly(el[0], {
handle: handleSelector
});
handle = el[0].querySelectorAll(handleSelector);
try {

if( !self.packeryDraggable ) {
if( !bindDraggabilly(true) ){
bindjQueryUI(true);
}
} else if ( self.packeryDraggable === 'draggabilly' ) {
bindDraggabilly();
} else if ( self.packeryDraggable === 'jqueryui' ) {
bindjQueryUI();
} else {
window.console.error('ERROR: draggable=\''+ self.packeryDraggable +'\' is not a valid attribute.');
}

} catch(e) {
if (window.console) {
window.console.warn(e.name +' '+ e.message);
}
}

function bindDraggabilly (next) {
next = ( typeof next === 'boolean' ) ? next : false;
if (typeof window.Draggabilly !== 'undefined') {

if (!handleSelector) {
draggableItem = new window.Draggabilly(el[0]);
handle = el;
} else {
draggableItem = new window.Draggabilly(el[0], {
handle: handleSelector
});
handle = el[0].querySelectorAll(handleSelector);
}

// Init Draggabilly events
self.packery.bindDraggabillyEvents(draggableItem);
animateEvents();
return true;
} else if ( !next ) {
throw { name: 'WARNING: ', message: 'Draggabilly is undefined.' };
} else {
return false;
}
}

// Init Draggabilly events
self.packery.bindDraggabillyEvents(draggabilly);
function bindjQueryUI (next) {
next = ( typeof next === 'boolean' ) ? next : false;
if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.ui !== 'undefined') {

if (!handleSelector) {
draggableItem = angular.element(el[0]).draggable();
handle = el;
} else {
draggableItem = angular.element(el[0]).draggable({
handle: handleSelector
});
handle = el[0].querySelectorAll(handleSelector);
}

self.packery.bindUIDraggableEvents(draggableItem);
animateEvents();
return true;
} else if ( !next ) {
throw { name: 'WARNING: ', message: 'jQuery.ui is undefined.' };
} else {
return false;
}
}

// Bind animate events for touch
angular.element(handle).on('mouseenter', function(){
el.addClass('hovered');
}).
on('mouseleave', function(){
el.removeClass('hovered');
});
function animateEvents () {
// Bind animate events for touch
angular.element(handle).on('mouseenter', function(){
el.addClass('hovered');
}).
on('mouseleave', function(){
el.removeClass('hovered');
});
}
};

this.createAttrObj = function (scope) {
Expand Down Expand Up @@ -143,17 +201,14 @@
self.packery.appended(el[0]);
}

if (self.packeryDraggable === true) {
self.bindDragEvents(el);
}

self.bindDragEvents(el);
el.css('visibility','visible');
$rootScope.$emit('packeryObjectPacked', el[0]);
});
};

this.setDraggable = function (handle) {
self.packeryDraggable = true;
this.setDraggable = function (dragLib, handle) {
self.packeryDraggable = dragLib;
self.dragHandle = handle;
};
};
Expand All @@ -178,7 +233,7 @@
rowHeight: '@?', // Type: Number, Selector String
transitionDuration: '@?', // Type: String

draggable: '@?', // Type: Boolean
draggable: '@?', // Type: String
handle: '@?' // Type: Boolean

// Let's come back to this one...
Expand All @@ -197,15 +252,16 @@

// Quick fix so 'false' strings don't evaluate to true
// @TODO: Check for attribute itself, not value of attribute
if (scope.draggable === 'false') { scope.draggable = false; }
if (scope.isHorizontal === 'false') { scope.isHorizontal = false; }
if (scope.isInitLayout === 'false') { scope.isInitLayout = false; }
if (scope.isOriginLeft === 'false') { scope.isOriginLeft = false; }
if (scope.isOriginTop === 'false') { scope.isOriginTop = false; }
if (scope.isResizeBound === 'false') { scope.isResizeBound = false; }

// Set global draggability
if (scope.draggable) { controller.setDraggable(scope.handle); }
if (element[0].hasAttribute('draggable')) {
controller.setDraggable(scope.draggable, scope.handle);
}

// Create object for Packery instantiation
packeryObj = controller.createAttrObj(scope);
Expand Down